diff --git a/ui/actions/manage-groups/manage-groups.ts b/ui/actions/manage-groups/manage-groups.ts index 206a2f4a894..7f0927f63a5 100644 --- a/ui/actions/manage-groups/manage-groups.ts +++ b/ui/actions/manage-groups/manage-groups.ts @@ -192,7 +192,6 @@ export const updateProviderGroup = async ( }); if (!response.ok) { - const errorResponse = await response.json(); throw new Error( `Failed to update provider group: ${response.status} ${response.statusText}`, ); @@ -202,7 +201,6 @@ export const updateProviderGroup = async ( revalidatePath("/manage-groups"); return parseStringify(data); } catch (error) { - console.error("Unexpected error:", error); return { error: getErrorMessage(error), }; diff --git a/ui/components/roles/workflow/forms/add-role-form.tsx b/ui/components/roles/workflow/forms/add-role-form.tsx index bb07254eace..3c3c521f2eb 100644 --- a/ui/components/roles/workflow/forms/add-role-form.tsx +++ b/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; @@ -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 (
+ 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 */}
- {permissions.map(({ field, label }) => ( - - {label} - - ))} + {permissionFormFields + .filter( + (permission) => + permission.field !== "manage_billing" || + process.env.NEXT_PUBLIC_IS_CLOUD_ENV === "true", + ) + .map(({ field, label, description }) => ( +
+ + {label} + + +
+ +
+ +
+ ))}
diff --git a/ui/components/roles/workflow/forms/edit-role-form.tsx b/ui/components/roles/workflow/forms/edit-role-form.tsx index 0ff7eea256a..70f2161355e 100644 --- a/ui/components/roles/workflow/forms/edit-role-form.tsx +++ b/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; @@ -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 ( + 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 */}
- {permissions.map(({ field, label }) => ( - - {label} - - ))} + {permissionFormFields + .filter( + (permission) => + permission.field !== "manage_billing" || + process.env.NEXT_PUBLIC_IS_CLOUD_ENV === "true", + ) + .map(({ field, label, description }) => ( +
+ + {label} + + +
+ +
+ +
+ ))}
diff --git a/ui/lib/helper.ts b/ui/lib/helper.ts index 9c031b4e78d..66a0e413f93 100644 --- a/ui/lib/helper.ts +++ b/ui/lib/helper.ts @@ -1,5 +1,5 @@ import { getTask } from "@/actions/task"; -import { MetaDataProps } from "@/types"; +import { MetaDataProps, PermissionInfo } from "@/types"; export async function checkTaskStatus( taskId: string, @@ -183,3 +183,45 @@ export const regions = [ { key: "us-west2", label: "GCP - US West (Los Angeles)" }, { key: "us-east4", label: "GCP - US East (Northern Virginia)" }, ]; + +export const permissionFormFields: PermissionInfo[] = [ + { + field: "manage_users", + label: "Invite and Manage Users", + description: "Allows inviting new users and managing existing user details", + }, + { + field: "manage_account", + label: "Manage Account", + description: "Provides access to account settings and RBAC configuration", + }, + { + field: "unlimited_visibility", + label: "Unlimited Visibility", + description: + "Provides complete visibility across all the providers and its related resources", + }, + { + field: "manage_providers", + label: "Manage Cloud Providers", + description: + "Allows configuration and management of cloud provider connections", + }, + // { + // field: "manage_integrations", + // label: "Manage Integrations", + // description: + // "Controls the setup and management of third-party integrations", + // }, + { + field: "manage_scans", + label: "Manage Scans", + description: "Allows launching and configuring scans security scans", + }, + + { + field: "manage_billing", + label: "Manage Billing", + description: "Provides access to billing settings and invoices", + }, +]; diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js index c5b956da1bb..df4c5a63012 100644 --- a/ui/tailwind.config.js +++ b/ui/tailwind.config.js @@ -122,6 +122,7 @@ module.exports = { "0px -6px 24px #FFFFFF, 0px 7px 16px rgba(104, 132, 157, 0.5)", up: "0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #fff", down: "inset 0.2rem 0.2rem 0.5rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #fff", + box: "rgba(0, 0, 0, 0.05) 0px 0px 0px 1px", }, animation: { "fade-in": "fade-in 200ms ease-out 0s 1 normal forwards running", diff --git a/ui/types/components.ts b/ui/types/components.ts index 14677fe2843..0d2bac1df93 100644 --- a/ui/types/components.ts +++ b/ui/types/components.ts @@ -26,6 +26,11 @@ export type NextUIColors = | "danger" | "default"; +export interface PermissionInfo { + field: string; + label: string; + description: string; +} export interface FindingsByStatusData { data: { type: "findings-overview";