chore(groups): Enable updating groups without roles or providers (#6498)

ui/actions/manage-groups/manage-groups.ts

@@ -171,14 +171,13 @@ export const updateProviderGroup = async (
   };
 
   // Add relationships only if there are items
-  if (providers.length > 0) {
+  if (providers.length >= 0) {
     payload.data.relationships!.providers = { data: providers };
   }
 
-  if (roles.length > 0) {
+  if (roles.length >= 0) {
     payload.data.relationships!.roles = { data: roles };
   }
-
   try {
     const url = `${keyServer}/provider-groups/${providerGroupId}`;
     const response = await fetch(url, {

ui/app/(prowler)/manage-groups/page.tsx

@@ -30,7 +30,15 @@ export default function ManageGroupsPage({
           {providerGroupId ? (
             <SSRDataEditGroup searchParams={searchParams} />
           ) : (
-            <SSRAddGroupForm />
+            <div className="flex flex-col">
+              <h1 className="mb-2 text-xl font-medium" id="getting-started">
+                Create a new provider group
+              </h1>
+              <p className="mb-5 text-small text-default-500">
+                Create a new provider group to manage the providers and roles.
+              </p>
+              <SSRAddGroupForm />
+            </div>
           )}
         </Suspense>
       </div>
@@ -131,12 +139,20 @@ const SSRDataEditGroup = async ({
   };
 
   return (
-    <EditGroupForm
-      providerGroupId={providerGroupId}
-      providerGroupData={formData}
-      allProviders={providersList}
-      allRoles={rolesList}
-    />
+    <div className="flex flex-col">
+      <h1 className="mb-2 text-xl font-medium" id="getting-started">
+        Edit provider group
+      </h1>
+      <p className="mb-5 text-small text-default-500">
+        Edit the provider group to manage the providers and roles.
+      </p>
+      <EditGroupForm
+        providerGroupId={providerGroupId}
+        providerGroupData={formData}
+        allProviders={providersList}
+        allRoles={rolesList}
+      />
+    </div>
   );
 };
 

ui/components/manage-groups/forms/add-group-form.tsx

@@ -112,10 +112,6 @@ export const AddGroupForm = ({
         onSubmit={form.handleSubmit(onSubmitClient)}
         className="flex flex-col space-y-4"
       >
-        {/* Name Field */}
-        <p className="text-small font-bold text-default-700">
-          Provide a name for the group:
-        </p>
         <div className="flex flex-col gap-2">
           <CustomInput
             control={form.control}
@@ -153,7 +149,7 @@ export const AddGroupForm = ({
         )}
         <Divider orientation="horizontal" className="mb-2" />
 
-        <p className="text-small font-medium text-default-700">
+        <p className="text-small text-default-500">
           Roles can also be associated with the group. This step is optional and
           can be completed later if needed or from the Roles page.
         </p>

ui/components/manage-groups/forms/edit-group-form.tsx

@@ -142,10 +142,6 @@ export const EditGroupForm = ({
         onSubmit={form.handleSubmit(onSubmitClient)}
         className="flex flex-col space-y-4"
       >
-        <p className="text-small font-bold text-default-700">
-          Edit the group name or associated providers:
-        </p>
-
         {/* Field for the name */}
         <div className="flex flex-col gap-2">
           <CustomInput
@@ -199,7 +195,7 @@ export const EditGroupForm = ({
         )}
 
         <Divider orientation="horizontal" className="mb-2" />
-        <p className="text-small font-medium text-default-700">
+        <p className="text-small text-default-500">
           The roles associated with the group can be edited directly here or
           from the Roles page.
         </p>