From a65ca7217768aad8defb8a8e7ceae558de2e7ced Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Tue, 14 Jan 2025 11:16:13 +0100
Subject: [PATCH] chore(groups): Enable updating groups without roles or
 providers (#6498)

---
 ui/actions/manage-groups/manage-groups.ts     |  5 ++--
 ui/app/(prowler)/manage-groups/page.tsx       | 30 ++++++++++++++-----
 .../manage-groups/forms/add-group-form.tsx    |  6 +---
 .../manage-groups/forms/edit-group-form.tsx   |  6 +---
 4 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/ui/actions/manage-groups/manage-groups.ts b/ui/actions/manage-groups/manage-groups.ts
index 750f4e76f4..a42684a40c 100644
--- a/ui/actions/manage-groups/manage-groups.ts
+++ b/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, {
diff --git a/ui/app/(prowler)/manage-groups/page.tsx b/ui/app/(prowler)/manage-groups/page.tsx
index 7994f5edb9..4191838241 100644
--- a/ui/app/(prowler)/manage-groups/page.tsx
+++ b/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>
   );
 };
 
diff --git a/ui/components/manage-groups/forms/add-group-form.tsx b/ui/components/manage-groups/forms/add-group-form.tsx
index b711c571c6..4023f26e9e 100644
--- a/ui/components/manage-groups/forms/add-group-form.tsx
+++ b/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>
diff --git a/ui/components/manage-groups/forms/edit-group-form.tsx b/ui/components/manage-groups/forms/edit-group-form.tsx
index ddabdaa831..193800e580 100644
--- a/ui/components/manage-groups/forms/edit-group-form.tsx
+++ b/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>