chore(manage-groups): tweaks for provider manage groups (#6468)

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

@@ -113,19 +113,16 @@ export const AddGroupForm = ({
         className="flex flex-col space-y-4"
       >
         {/* Name Field */}
-        <p className="text-small font-medium text-default-700">
-          Please provide a name for the group. You can also select providers and
-          roles to associate with the group, this step is optional and can be
-          done later if needed.
+        <p className="text-small font-bold text-default-700">
+          Provide a name for the group:
         </p>
-        <Divider orientation="horizontal" className="mb-2" />
         <div className="flex flex-col gap-2">
           <CustomInput
             control={form.control}
             name="name"
             type="text"
             label="Provider group name"
-            labelPlacement="outside"
+            labelPlacement="inside"
             placeholder="Enter the provider group name"
             variant="bordered"
             isRequired
@@ -154,7 +151,12 @@ export const AddGroupForm = ({
             {form.formState.errors.providers.message}
           </p>
         )}
+        <Divider orientation="horizontal" className="mb-2" />
 
+        <p className="text-small font-medium text-default-700">
+          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>
         {/* Roles Field */}
         <Controller
           name="roles"

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

@@ -142,11 +142,9 @@ export const EditGroupForm = ({
         onSubmit={form.handleSubmit(onSubmitClient)}
         className="flex flex-col space-y-4"
       >
-        <p className="text-small font-medium text-default-700">
-          Edit the group information, including name, associated providers, and
-          roles.
+        <p className="text-small font-bold text-default-700">
+          Edit the group name or associated providers:
         </p>
-        <Divider orientation="horizontal" className="mb-2" />
 
         {/* Field for the name */}
         <div className="flex flex-col gap-2">
@@ -155,7 +153,7 @@ export const EditGroupForm = ({
             name="name"
             type="text"
             label="Provider group name"
-            labelPlacement="outside"
+            labelPlacement="inside"
             placeholder="Enter the provider group name"
             variant="bordered"
             isRequired
@@ -200,6 +198,11 @@ export const EditGroupForm = ({
           </p>
         )}
 
+        <Divider orientation="horizontal" className="mb-2" />
+        <p className="text-small font-medium text-default-700">
+          The roles associated with the group can be edited directly here or
+          from the Roles page.
+        </p>
         {/* Roles selection */}
         <Controller
           name="roles"
@@ -234,7 +237,6 @@ export const EditGroupForm = ({
             {form.formState.errors.roles.message}
           </p>
         )}
-        <Divider orientation="horizontal" className="mb-2" />
 
         <div className="flex w-full justify-end sm:space-x-6">
           <CustomButton

ui/components/ui/sidebar/sidebar-items.tsx

@@ -205,6 +205,12 @@ export const sectionItems: SidebarItem[] = [
         icon: "fluent:cloud-sync-24-regular",
         title: "Cloud Providers",
       },
+      {
+        key: "provider-groups",
+        href: "/manage-groups",
+        icon: "solar:settings-outline",
+        title: "Provider Groups",
+      },
       {
         key: "scans",
         href: "/scans",
@@ -217,12 +223,6 @@ export const sectionItems: SidebarItem[] = [
         icon: "mdi:account-key-outline",
         title: "Roles",
       },
-      {
-        key: "manage-groups",
-        href: "/manage-groups",
-        icon: "solar:settings-outline",
-        title: "Manage Groups",
-      },
       // {
       //   key: "integrations",
       //   href: "/integrations",