chore(RBAC): add permission's info (#6612)

ui/components/roles/workflow/forms/add-role-form.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Checkbox, Divider } from "@nextui-org/react";
-import { SaveIcon } from "lucide-react";
+import { Checkbox, Divider, Tooltip } from "@nextui-org/react";
+import clsx from "clsx";
+import { InfoIcon, SaveIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -16,6 +17,7 @@ import {
   CustomInput,
 } from "@/components/ui/custom";
 import { Form } from "@/components/ui/form";
+import { permissionFormFields } from "@/lib";
 import { addRoleFormSchema, ApiError } from "@/types";
 
 type FormValues = z.infer<typeof addRoleFormSchema>;
@@ -138,19 +140,6 @@ export const AddRoleForm = ({
     }
   };
 
-  const permissions = [
-    { field: "manage_users", label: "Invite and Manage Users" },
-    ...(process.env.NEXT_PUBLIC_IS_CLOUD_ENV === "true"
-      ? [{ field: "manage_billing", label: "Manage Billing" }]
-      : []),
-    { field: "manage_providers", label: "Manage Cloud Providers" },
-    { field: "manage_account", label: "Manage Account" },
-    // TODO: Add back when we have integrations ready
-    // { field: "manage_integrations", label: "Manage Integrations" },
-    { field: "manage_scans", label: "Manage Scans" },
-    { field: "unlimited_visibility", label: "Unlimited Visibility" },
-  ];
-
   return (
     <Form {...form}>
       <form
@@ -174,7 +163,7 @@ export const AddRoleForm = ({
 
           {/* Select All Checkbox */}
           <Checkbox
-            isSelected={permissions.every((perm) =>
+            isSelected={permissionFormFields.every((perm) =>
               form.watch(perm.field as keyof FormValues),
             )}
             onChange={(e) => onSelectAllChange(e.target.checked)}
@@ -188,19 +177,37 @@ export const AddRoleForm = ({
 
           {/* Permissions Grid */}
           <div className="grid grid-cols-2 gap-4">
-            {permissions.map(({ field, label }) => (
-              <Checkbox
-                key={field}
-                {...form.register(field as keyof FormValues)}
-                isSelected={!!form.watch(field as keyof FormValues)}
-                classNames={{
-                  label: "text-small",
-                  wrapper: "checkbox-update",
-                }}
-              >
-                {label}
-              </Checkbox>
-            ))}
+            {permissionFormFields
+              .filter(
+                (permission) =>
+                  permission.field !== "manage_billing" ||
+                  process.env.NEXT_PUBLIC_IS_CLOUD_ENV === "true",
+              )
+              .map(({ field, label, description }) => (
+                <div key={field} className="flex items-center gap-2">
+                  <Checkbox
+                    {...form.register(field as keyof FormValues)}
+                    isSelected={!!form.watch(field as keyof FormValues)}
+                    classNames={{
+                      label: "text-small",
+                      wrapper: "checkbox-update",
+                    }}
+                  >
+                    {label}
+                  </Checkbox>
+                  <Tooltip content={description} placement="right">
+                    <div className="flex w-fit items-center justify-center">
+                      <InfoIcon
+                        className={clsx(
+                          "cursor-pointer text-default-400 group-data-[selected=true]:text-foreground",
+                        )}
+                        aria-hidden={"true"}
+                        width={16}
+                      />
+                    </div>
+                  </Tooltip>
+                </div>
+              ))}
           </div>
         </div>
         <Divider className="my-4" />

ui/components/roles/workflow/forms/edit-role-form.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Checkbox, Divider } from "@nextui-org/react";
-import { SaveIcon } from "lucide-react";
+import { Checkbox, Divider, Tooltip } from "@nextui-org/react";
+import { clsx } from "clsx";
+import { InfoIcon, SaveIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -16,6 +17,7 @@ import {
   CustomInput,
 } from "@/components/ui/custom";
 import { Form } from "@/components/ui/form";
+import { permissionFormFields } from "@/lib";
 import { ApiError, editRoleFormSchema } from "@/types";
 
 type FormValues = z.infer<typeof editRoleFormSchema>;
@@ -162,19 +164,6 @@ export const EditRoleForm = ({
     }
   };
 
-  const permissions = [
-    { field: "manage_users", label: "Invite and Manage Users" },
-    ...(process.env.NEXT_PUBLIC_IS_CLOUD_ENV === "true"
-      ? [{ field: "manage_billing", label: "Manage Billing" }]
-      : []),
-    { field: "manage_account", label: "Manage Account" },
-    { field: "manage_providers", label: "Manage Cloud Providers" },
-    // TODO: Add back when we have integrations ready
-    // { field: "manage_integrations", label: "Manage Integrations" },
-    { field: "manage_scans", label: "Manage Scans" },
-    { field: "unlimited_visibility", label: "Unlimited Visibility" },
-  ];
-
   return (
     <Form {...form}>
       <form
@@ -198,7 +187,7 @@ export const EditRoleForm = ({
 
           {/* Select All Checkbox */}
           <Checkbox
-            isSelected={permissions.every((perm) =>
+            isSelected={permissionFormFields.every((perm) =>
               form.watch(perm.field as keyof FormValues),
             )}
             onChange={(e) => onSelectAllChange(e.target.checked)}
@@ -212,19 +201,37 @@ export const EditRoleForm = ({
 
           {/* Permissions Grid */}
           <div className="grid grid-cols-2 gap-4">
-            {permissions.map(({ field, label }) => (
-              <Checkbox
-                key={field}
-                {...form.register(field as keyof FormValues)}
-                isSelected={!!form.watch(field as keyof FormValues)}
-                classNames={{
-                  label: "text-small",
-                  wrapper: "checkbox-update",
-                }}
-              >
-                {label}
-              </Checkbox>
-            ))}
+            {permissionFormFields
+              .filter(
+                (permission) =>
+                  permission.field !== "manage_billing" ||
+                  process.env.NEXT_PUBLIC_IS_CLOUD_ENV === "true",
+              )
+              .map(({ field, label, description }) => (
+                <div key={field} className="flex items-center gap-2">
+                  <Checkbox
+                    {...form.register(field as keyof FormValues)}
+                    isSelected={!!form.watch(field as keyof FormValues)}
+                    classNames={{
+                      label: "text-small",
+                      wrapper: "checkbox-update",
+                    }}
+                  >
+                    {label}
+                  </Checkbox>
+                  <Tooltip content={description} placement="right">
+                    <div className="flex w-fit items-center justify-center">
+                      <InfoIcon
+                        className={clsx(
+                          "cursor-pointer text-default-400 group-data-[selected=true]:text-foreground",
+                        )}
+                        aria-hidden={"true"}
+                        width={16}
+                      />
+                    </div>
+                  </Tooltip>
+                </div>
+              ))}
           </div>
         </div>
         <Divider className="my-4" />