mirror of
https://github.com/prowler-cloud/prowler.git
synced 2026-07-24 21:11:53 +00:00
fix(ui): clarify Unlimited Visibility in RBAC forms (#11851)
Co-authored-by: Pablo F.G <pablo.fernandez@prowler.com>
This commit is contained in:
Hugo Pereira Brito
committed by
GitHub
GitHub
parent
80608bfdbc
commit
eee17f0e8b
@@ -0,0 +1 @@
|
||||
RBAC role forms now explain Unlimited Visibility inside the Visibility section and keep the setting visible while group selection is hidden
|
||||
@@ -1,6 +1,6 @@
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { afterEach, describe, expect, it, vi } from "vitest";
|
||||
import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
|
||||
|
||||
import { AddRoleForm } from "./add-role-form";
|
||||
|
||||
@@ -76,6 +76,17 @@ vi.mock("@/components/ui", () => ({
|
||||
useToast: () => ({ toast: vi.fn() }),
|
||||
}));
|
||||
|
||||
beforeAll(() => {
|
||||
class ResizeObserverMock {
|
||||
observe() {}
|
||||
unobserve() {}
|
||||
disconnect() {}
|
||||
}
|
||||
|
||||
globalThis.ResizeObserver = ResizeObserverMock;
|
||||
window.ResizeObserver = ResizeObserverMock;
|
||||
});
|
||||
|
||||
describe("AddRoleForm", () => {
|
||||
afterEach(() => {
|
||||
routerMocks.push.mockClear();
|
||||
@@ -117,4 +128,207 @@ describe("AddRoleForm", () => {
|
||||
// Then
|
||||
expect(routerMocks.push).toHaveBeenCalledWith("/roles");
|
||||
});
|
||||
|
||||
it("shows a subtle inline Unlimited Visibility description", () => {
|
||||
// Given / When
|
||||
render(<AddRoleForm groups={[]} />);
|
||||
|
||||
// Then
|
||||
expect(screen.queryByRole("alert")).not.toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText(/tenant-wide visibility setting/i),
|
||||
).toHaveTextContent(
|
||||
/grants visibility into every provider, account, resource, finding, scan, and compliance result.*required to use the Jira integration/i,
|
||||
);
|
||||
expect(
|
||||
screen.getByText(/required to use the Jira integration/i),
|
||||
).toHaveProperty("tagName", "STRONG");
|
||||
expect(
|
||||
screen.queryByRole("heading", { name: "Unlimited Visibility" }),
|
||||
).not.toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByText(
|
||||
/does not grant admin actions such as managing users, providers, scans, integrations, billing, or alerts/i,
|
||||
),
|
||||
).not.toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByText(
|
||||
/enable it only for roles that need tenant-wide security visibility/i,
|
||||
),
|
||||
).not.toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByText(
|
||||
/manage providers enables unlimited visibility in this form because provider administration needs tenant-wide provider-group context/i,
|
||||
),
|
||||
).not.toBeInTheDocument();
|
||||
|
||||
const visibilityHeading = screen.getByText("Visibility");
|
||||
const unlimitedVisibilityCheckbox = screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
});
|
||||
|
||||
expect(
|
||||
visibilityHeading.compareDocumentPosition(unlimitedVisibilityCheckbox) &
|
||||
Node.DOCUMENT_POSITION_FOLLOWING,
|
||||
).toBeTruthy();
|
||||
});
|
||||
|
||||
it("keeps the Visibility section and hides only groups when Unlimited Visibility is enabled", async () => {
|
||||
// Given
|
||||
const user = userEvent.setup();
|
||||
render(<AddRoleForm groups={[{ id: "group-1", name: "Production" }]} />);
|
||||
|
||||
// When
|
||||
await user.click(
|
||||
screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
}),
|
||||
);
|
||||
|
||||
// Then
|
||||
expect(screen.getByText("Visibility")).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
}),
|
||||
).toBeChecked();
|
||||
expect(
|
||||
screen.getByText(/tenant-wide visibility setting/i),
|
||||
).toBeInTheDocument();
|
||||
expect(screen.queryByTestId("group-select")).not.toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByText(/select the groups this role will have access to/i),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not force Unlimited Visibility when Manage Providers is selected", async () => {
|
||||
// Given
|
||||
const user = userEvent.setup();
|
||||
render(<AddRoleForm groups={[]} />);
|
||||
|
||||
// When
|
||||
await user.click(
|
||||
screen.getByRole("checkbox", { name: "Manage Providers" }),
|
||||
);
|
||||
|
||||
// Then
|
||||
expect(
|
||||
screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
}),
|
||||
).not.toBeChecked();
|
||||
expect(
|
||||
screen.queryByText(
|
||||
/Manage Providers is selected, so Unlimited Visibility stays enabled in this form/i,
|
||||
),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not force Unlimited Visibility when granting all admin permissions", async () => {
|
||||
// Given
|
||||
const user = userEvent.setup();
|
||||
render(<AddRoleForm groups={[]} />);
|
||||
|
||||
// When
|
||||
await user.click(
|
||||
screen.getByRole("checkbox", { name: "Grant all admin permissions" }),
|
||||
);
|
||||
|
||||
// Then
|
||||
expect(
|
||||
screen.getByRole("checkbox", { name: "Manage Providers" }),
|
||||
).toBeChecked();
|
||||
expect(
|
||||
screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
}),
|
||||
).not.toBeChecked();
|
||||
});
|
||||
|
||||
it("keeps Unlimited Visibility user-controlled when Manage Providers is selected", async () => {
|
||||
// Given
|
||||
const user = userEvent.setup();
|
||||
render(<AddRoleForm groups={[]} />);
|
||||
|
||||
// When
|
||||
await user.click(
|
||||
screen.getByRole("checkbox", { name: "Manage Providers" }),
|
||||
);
|
||||
await user.click(
|
||||
screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
}),
|
||||
);
|
||||
await user.click(
|
||||
screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
}),
|
||||
);
|
||||
|
||||
// Then
|
||||
expect(
|
||||
screen.getByRole("checkbox", { name: "Manage Providers" }),
|
||||
).toBeChecked();
|
||||
expect(
|
||||
screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
}),
|
||||
).not.toBeChecked();
|
||||
expect(screen.getByTestId("group-select")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("keeps explicitly enabled Unlimited Visibility when all admin permissions are toggled off", async () => {
|
||||
// Given
|
||||
const user = userEvent.setup();
|
||||
render(<AddRoleForm groups={[]} />);
|
||||
|
||||
// When
|
||||
await user.click(
|
||||
screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
}),
|
||||
);
|
||||
await user.click(
|
||||
screen.getByRole("checkbox", { name: "Grant all admin permissions" }),
|
||||
);
|
||||
await user.click(
|
||||
screen.getByRole("checkbox", { name: "Grant all admin permissions" }),
|
||||
);
|
||||
|
||||
// Then
|
||||
expect(
|
||||
screen.getByRole("checkbox", { name: "Manage Providers" }),
|
||||
).not.toBeChecked();
|
||||
expect(
|
||||
screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
}),
|
||||
).toBeChecked();
|
||||
});
|
||||
|
||||
it("does not show extra Manage Providers guidance for explicitly enabled Unlimited Visibility", async () => {
|
||||
// Given
|
||||
const user = userEvent.setup();
|
||||
render(<AddRoleForm groups={[]} />);
|
||||
|
||||
// When
|
||||
await user.click(
|
||||
screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
}),
|
||||
);
|
||||
await user.click(
|
||||
screen.getByRole("checkbox", { name: "Manage Providers" }),
|
||||
);
|
||||
|
||||
// Then
|
||||
expect(
|
||||
screen.queryByText(
|
||||
/Manage Providers is selected, so Unlimited Visibility stays enabled in this form/i,
|
||||
),
|
||||
).not.toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByText(/remove this automatic visibility grant/i),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,85 +1,38 @@
|
||||
"use client";
|
||||
|
||||
import { Checkbox } from "@heroui/checkbox";
|
||||
import { Divider } from "@heroui/divider";
|
||||
import { Tooltip } from "@heroui/tooltip";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import clsx from "clsx";
|
||||
import { InfoIcon } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { DefaultValues } from "react-hook-form";
|
||||
|
||||
import { addRole } from "@/actions/roles/roles";
|
||||
import { EnhancedMultiSelect } from "@/components/shadcn/select/enhanced-multi-select";
|
||||
import { useToast } from "@/components/ui";
|
||||
import { CustomInput } from "@/components/ui/custom";
|
||||
import { Form, FormButtons } from "@/components/ui/form";
|
||||
import { getErrorMessage, permissionFormFields } from "@/lib";
|
||||
import { addRoleFormSchema, ApiError } from "@/types";
|
||||
import { getErrorMessage } from "@/lib";
|
||||
import { RoleFormValues } from "@/types";
|
||||
|
||||
type FormValues = z.input<typeof addRoleFormSchema>;
|
||||
import { RoleForm, RoleFormSubmitContext, RoleGroupOption } from "./role-form";
|
||||
|
||||
export const AddRoleForm = ({
|
||||
groups,
|
||||
}: {
|
||||
groups: { id: string; name: string }[];
|
||||
}) => {
|
||||
export const AddRoleForm = ({ groups }: { groups: RoleGroupOption[] }) => {
|
||||
const { toast } = useToast();
|
||||
const router = useRouter();
|
||||
const isCloudEnvironment = process.env.NEXT_PUBLIC_IS_CLOUD_ENV === "true";
|
||||
const visiblePermissionFormFields = permissionFormFields.filter(
|
||||
(permission) =>
|
||||
!["manage_billing", "manage_alerts"].includes(permission.field) ||
|
||||
isCloudEnvironment,
|
||||
);
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(addRoleFormSchema),
|
||||
defaultValues: {
|
||||
name: "",
|
||||
manage_users: false,
|
||||
manage_providers: false,
|
||||
manage_integrations: false,
|
||||
manage_scans: false,
|
||||
unlimited_visibility: false,
|
||||
groups: [],
|
||||
...(isCloudEnvironment && {
|
||||
manage_billing: false,
|
||||
manage_alerts: false,
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
||||
const { watch, setValue } = form;
|
||||
|
||||
const manageProviders = watch("manage_providers");
|
||||
const unlimitedVisibility = watch("unlimited_visibility");
|
||||
|
||||
useEffect(() => {
|
||||
if (manageProviders && !unlimitedVisibility) {
|
||||
setValue("unlimited_visibility", true, {
|
||||
shouldValidate: true,
|
||||
shouldDirty: true,
|
||||
shouldTouch: true,
|
||||
});
|
||||
}
|
||||
}, [manageProviders, unlimitedVisibility, setValue]);
|
||||
|
||||
const isLoading = form.formState.isSubmitting;
|
||||
|
||||
const onSelectAllChange = (checked: boolean) => {
|
||||
visiblePermissionFormFields.forEach(({ field }) => {
|
||||
form.setValue(field as keyof FormValues, checked, {
|
||||
shouldValidate: true,
|
||||
shouldDirty: true,
|
||||
shouldTouch: true,
|
||||
});
|
||||
});
|
||||
const defaultValues: DefaultValues<RoleFormValues> = {
|
||||
name: "",
|
||||
manage_users: false,
|
||||
manage_providers: false,
|
||||
manage_integrations: false,
|
||||
manage_scans: false,
|
||||
unlimited_visibility: false,
|
||||
groups: [],
|
||||
...(isCloudEnvironment && {
|
||||
manage_billing: false,
|
||||
manage_alerts: false,
|
||||
}),
|
||||
};
|
||||
|
||||
const onSubmitClient = async (values: FormValues) => {
|
||||
const onSubmit = async (
|
||||
values: RoleFormValues,
|
||||
{ handleServerResponse }: RoleFormSubmitContext,
|
||||
) => {
|
||||
const formData = new FormData();
|
||||
|
||||
formData.append("name", values.name);
|
||||
@@ -107,33 +60,13 @@ export const AddRoleForm = ({
|
||||
|
||||
try {
|
||||
const data = await addRole(formData);
|
||||
if (!handleServerResponse(data)) return;
|
||||
|
||||
if (data?.errors && data.errors.length > 0) {
|
||||
data.errors.forEach((error: ApiError) => {
|
||||
const errorMessage = error.detail;
|
||||
const pointer = error.source?.pointer;
|
||||
switch (pointer) {
|
||||
case "/data/attributes/name":
|
||||
form.setError("name", {
|
||||
type: "server",
|
||||
message: errorMessage,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: "Error",
|
||||
description: errorMessage,
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
toast({
|
||||
title: "Role Added",
|
||||
description: "The role was added successfully.",
|
||||
});
|
||||
router.push("/roles");
|
||||
}
|
||||
toast({
|
||||
title: "Role Added",
|
||||
description: "The role was added successfully.",
|
||||
});
|
||||
router.push("/roles");
|
||||
} catch (error) {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
@@ -144,120 +77,11 @@ export const AddRoleForm = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmitClient)}
|
||||
className="flex flex-col gap-6"
|
||||
>
|
||||
<CustomInput
|
||||
control={form.control}
|
||||
name="name"
|
||||
type="text"
|
||||
label="Role Name"
|
||||
labelPlacement="inside"
|
||||
placeholder="Enter role name"
|
||||
variant="bordered"
|
||||
isRequired
|
||||
/>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="text-lg font-semibold">Admin Permissions</span>
|
||||
|
||||
{/* Select All Checkbox */}
|
||||
<Checkbox
|
||||
isSelected={visiblePermissionFormFields.every((perm) =>
|
||||
form.watch(perm.field as keyof FormValues),
|
||||
)}
|
||||
onChange={(e) => onSelectAllChange(e.target.checked)}
|
||||
classNames={{
|
||||
label: "text-small",
|
||||
wrapper: "checkbox-update",
|
||||
}}
|
||||
color="default"
|
||||
>
|
||||
Grant all admin permissions
|
||||
</Checkbox>
|
||||
|
||||
{/* Permissions Grid */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{visiblePermissionFormFields.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",
|
||||
}}
|
||||
color="default"
|
||||
>
|
||||
{label}
|
||||
</Checkbox>
|
||||
<Tooltip content={description} placement="right">
|
||||
<div className="flex w-fit items-center justify-center">
|
||||
<InfoIcon
|
||||
className={clsx(
|
||||
"text-default-400 group-data-[selected=true]:text-foreground cursor-pointer",
|
||||
)}
|
||||
aria-hidden={"true"}
|
||||
width={16}
|
||||
/>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Divider className="my-4" />
|
||||
|
||||
{!unlimitedVisibility && (
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="text-lg font-semibold">
|
||||
Groups and Account Visibility
|
||||
</span>
|
||||
|
||||
<p className="text-small text-default-700 font-medium">
|
||||
Select the groups this role will have access to. If no groups are
|
||||
selected and unlimited visibility is not enabled, the role will
|
||||
not have access to any accounts.
|
||||
</p>
|
||||
|
||||
<Controller
|
||||
name="groups"
|
||||
control={form.control}
|
||||
render={({ field }) => (
|
||||
<div className="flex flex-col gap-2">
|
||||
<EnhancedMultiSelect
|
||||
options={groups.map((group) => ({
|
||||
label: group.name,
|
||||
value: group.id,
|
||||
}))}
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value || []}
|
||||
placeholder="Select groups"
|
||||
searchable={true}
|
||||
hideSelectAll={true}
|
||||
emptyIndicator="No results found"
|
||||
resetOnDefaultValueChange={true}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
{form.formState.errors.groups && (
|
||||
<p className="mt-2 text-sm text-red-600">
|
||||
{form.formState.errors.groups.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<FormButtons
|
||||
submitText="Add Role"
|
||||
isDisabled={isLoading}
|
||||
onCancel={() => router.push("/roles")}
|
||||
/>
|
||||
</form>
|
||||
</Form>
|
||||
<RoleForm
|
||||
groups={groups}
|
||||
defaultValues={defaultValues}
|
||||
submitText="Add Role"
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,326 @@
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
|
||||
|
||||
import { EditRoleForm } from "./edit-role-form";
|
||||
|
||||
const routerMocks = vi.hoisted(() => ({
|
||||
push: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("next/navigation", () => ({
|
||||
useRouter: () => routerMocks,
|
||||
}));
|
||||
|
||||
vi.mock("@/actions/roles/roles", () => ({
|
||||
updateRole: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock("@/lib", () => ({
|
||||
cn: (...classes: Array<string | false | null | undefined>) =>
|
||||
classes.filter(Boolean).join(" "),
|
||||
getErrorMessage: (error: unknown) => String(error),
|
||||
permissionFormFields: [
|
||||
{
|
||||
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 Providers",
|
||||
description:
|
||||
"Allows configuration and management of provider connections",
|
||||
},
|
||||
{
|
||||
field: "manage_integrations",
|
||||
label: "Manage Integrations",
|
||||
description:
|
||||
"Allows configuration and management of third-party integrations",
|
||||
},
|
||||
{
|
||||
field: "manage_scans",
|
||||
label: "Manage Scans",
|
||||
description: "Allows launching and configuring scans security scans",
|
||||
},
|
||||
{
|
||||
field: "manage_alerts",
|
||||
label: "Manage Alerts",
|
||||
description: "Allows creating and managing custom alerts",
|
||||
},
|
||||
{
|
||||
field: "manage_billing",
|
||||
label: "Manage Billing",
|
||||
description: "Provides access to billing settings and invoices",
|
||||
},
|
||||
],
|
||||
}));
|
||||
|
||||
vi.mock("@/components/shadcn/select/enhanced-multi-select", () => ({
|
||||
EnhancedMultiSelect: () => <div data-testid="group-select" />,
|
||||
}));
|
||||
|
||||
vi.mock("@/components/ui", () => ({
|
||||
useToast: () => ({ toast: vi.fn() }),
|
||||
}));
|
||||
|
||||
beforeAll(() => {
|
||||
class ResizeObserverMock {
|
||||
observe() {}
|
||||
unobserve() {}
|
||||
disconnect() {}
|
||||
}
|
||||
|
||||
globalThis.ResizeObserver = ResizeObserverMock;
|
||||
window.ResizeObserver = ResizeObserverMock;
|
||||
});
|
||||
|
||||
const roleData = ({
|
||||
manageProviders = false,
|
||||
unlimitedVisibility = false,
|
||||
}: {
|
||||
manageProviders?: boolean;
|
||||
unlimitedVisibility?: boolean;
|
||||
} = {}) => ({
|
||||
data: {
|
||||
attributes: {
|
||||
name: "Existing role",
|
||||
manage_users: false,
|
||||
manage_account: false,
|
||||
manage_providers: manageProviders,
|
||||
manage_integrations: false,
|
||||
manage_scans: false,
|
||||
unlimited_visibility: unlimitedVisibility,
|
||||
groups: [],
|
||||
},
|
||||
relationships: {
|
||||
provider_groups: {
|
||||
data: [],
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const renderEditRoleForm = (options?: Parameters<typeof roleData>[0]) =>
|
||||
render(
|
||||
<EditRoleForm roleId="role-1" roleData={roleData(options)} groups={[]} />,
|
||||
);
|
||||
|
||||
describe("EditRoleForm", () => {
|
||||
afterEach(() => {
|
||||
routerMocks.push.mockClear();
|
||||
vi.unstubAllEnvs();
|
||||
});
|
||||
|
||||
it("shows the subtle Unlimited Visibility description inside Visibility", () => {
|
||||
// Given / When
|
||||
renderEditRoleForm();
|
||||
|
||||
// Then
|
||||
expect(screen.queryByRole("alert")).not.toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText(/tenant-wide visibility setting/i),
|
||||
).toHaveTextContent(
|
||||
/grants visibility into every provider, account, resource, finding, scan, and compliance result.*required to use the Jira integration/i,
|
||||
);
|
||||
expect(
|
||||
screen.getByText(/required to use the Jira integration/i),
|
||||
).toHaveProperty("tagName", "STRONG");
|
||||
expect(
|
||||
screen.queryByText(
|
||||
/manage providers enables unlimited visibility in this form because provider administration needs tenant-wide provider-group context/i,
|
||||
),
|
||||
).not.toBeInTheDocument();
|
||||
|
||||
const visibilityHeading = screen.getByText("Visibility");
|
||||
const unlimitedVisibilityCheckbox = screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
});
|
||||
|
||||
expect(
|
||||
visibilityHeading.compareDocumentPosition(unlimitedVisibilityCheckbox) &
|
||||
Node.DOCUMENT_POSITION_FOLLOWING,
|
||||
).toBeTruthy();
|
||||
});
|
||||
|
||||
it("keeps the Visibility section and hides only groups when Unlimited Visibility is enabled", async () => {
|
||||
// Given
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<EditRoleForm
|
||||
roleId="role-1"
|
||||
roleData={roleData()}
|
||||
groups={[{ id: "group-1", name: "Production" }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
// When
|
||||
await user.click(
|
||||
screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
}),
|
||||
);
|
||||
|
||||
// Then
|
||||
expect(screen.getByText("Visibility")).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
}),
|
||||
).toBeChecked();
|
||||
expect(
|
||||
screen.getByText(/tenant-wide visibility setting/i),
|
||||
).toBeInTheDocument();
|
||||
expect(screen.queryByTestId("group-select")).not.toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByText(/select the groups this role will have access to/i),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not force Unlimited Visibility when Manage Providers is selected", async () => {
|
||||
// Given
|
||||
const user = userEvent.setup();
|
||||
renderEditRoleForm();
|
||||
|
||||
// When
|
||||
await user.click(
|
||||
screen.getByRole("checkbox", { name: "Manage Providers" }),
|
||||
);
|
||||
|
||||
// Then
|
||||
expect(
|
||||
screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
}),
|
||||
).not.toBeChecked();
|
||||
expect(
|
||||
screen.queryByText(
|
||||
/Manage Providers is selected, so Unlimited Visibility stays enabled in this form/i,
|
||||
),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not force Unlimited Visibility when granting all admin permissions", async () => {
|
||||
// Given
|
||||
const user = userEvent.setup();
|
||||
renderEditRoleForm();
|
||||
|
||||
// When
|
||||
await user.click(
|
||||
screen.getByRole("checkbox", { name: "Grant all admin permissions" }),
|
||||
);
|
||||
|
||||
// Then
|
||||
expect(
|
||||
screen.getByRole("checkbox", { name: "Manage Providers" }),
|
||||
).toBeChecked();
|
||||
expect(
|
||||
screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
}),
|
||||
).not.toBeChecked();
|
||||
});
|
||||
|
||||
it("keeps Unlimited Visibility user-controlled when Manage Providers is selected", async () => {
|
||||
// Given
|
||||
const user = userEvent.setup();
|
||||
renderEditRoleForm();
|
||||
|
||||
// When
|
||||
await user.click(
|
||||
screen.getByRole("checkbox", { name: "Manage Providers" }),
|
||||
);
|
||||
await user.click(
|
||||
screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
}),
|
||||
);
|
||||
await user.click(
|
||||
screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
}),
|
||||
);
|
||||
|
||||
// Then
|
||||
expect(
|
||||
screen.getByRole("checkbox", { name: "Manage Providers" }),
|
||||
).toBeChecked();
|
||||
expect(
|
||||
screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
}),
|
||||
).not.toBeChecked();
|
||||
expect(screen.getByTestId("group-select")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("keeps explicitly enabled Unlimited Visibility when all admin permissions are toggled off", async () => {
|
||||
// Given
|
||||
const user = userEvent.setup();
|
||||
renderEditRoleForm();
|
||||
|
||||
// When
|
||||
await user.click(
|
||||
screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
}),
|
||||
);
|
||||
await user.click(
|
||||
screen.getByRole("checkbox", { name: "Grant all admin permissions" }),
|
||||
);
|
||||
await user.click(
|
||||
screen.getByRole("checkbox", { name: "Grant all admin permissions" }),
|
||||
);
|
||||
|
||||
// Then
|
||||
expect(
|
||||
screen.getByRole("checkbox", { name: "Manage Providers" }),
|
||||
).not.toBeChecked();
|
||||
expect(
|
||||
screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
}),
|
||||
).toBeChecked();
|
||||
});
|
||||
|
||||
it("does not show extra Manage Providers guidance", () => {
|
||||
// Given / When
|
||||
renderEditRoleForm({ manageProviders: true, unlimitedVisibility: true });
|
||||
|
||||
// Then
|
||||
expect(
|
||||
screen.queryByText(
|
||||
/Manage Providers is selected, so Unlimited Visibility stays enabled in this form/i,
|
||||
),
|
||||
).not.toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByText(/remove this automatic visibility grant/i),
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("keeps existing inconsistent Manage Providers and Unlimited Visibility values on initial render", () => {
|
||||
// Given / When
|
||||
renderEditRoleForm({ manageProviders: true, unlimitedVisibility: false });
|
||||
|
||||
// Then
|
||||
expect(
|
||||
screen.getByRole("checkbox", { name: "Manage Providers" }),
|
||||
).toBeChecked();
|
||||
const unlimitedVisibilityCheckbox = screen.getByRole("checkbox", {
|
||||
name: "Enable Unlimited Visibility for this role",
|
||||
});
|
||||
expect(unlimitedVisibilityCheckbox).not.toBeChecked();
|
||||
expect(unlimitedVisibilityCheckbox).toBeEnabled();
|
||||
});
|
||||
});
|
||||
@@ -1,25 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import { Checkbox } from "@heroui/checkbox";
|
||||
import { Divider } from "@heroui/divider";
|
||||
import { Tooltip } from "@heroui/tooltip";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { clsx } from "clsx";
|
||||
import { InfoIcon } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { DefaultValues } from "react-hook-form";
|
||||
|
||||
import { updateRole } from "@/actions/roles/roles";
|
||||
import { EnhancedMultiSelect } from "@/components/shadcn/select/enhanced-multi-select";
|
||||
import { useToast } from "@/components/ui";
|
||||
import { CustomInput } from "@/components/ui/custom";
|
||||
import { Form, FormButtons } from "@/components/ui/form";
|
||||
import { getErrorMessage, permissionFormFields } from "@/lib";
|
||||
import { ApiError, editRoleFormSchema } from "@/types";
|
||||
import { getErrorMessage } from "@/lib";
|
||||
import { RoleFormValues } from "@/types";
|
||||
|
||||
type FormValues = z.input<typeof editRoleFormSchema>;
|
||||
import { RoleForm, RoleFormSubmitContext, RoleGroupOption } from "./role-form";
|
||||
|
||||
export const EditRoleForm = ({
|
||||
roleId,
|
||||
@@ -29,7 +18,7 @@ export const EditRoleForm = ({
|
||||
roleId: string;
|
||||
roleData: {
|
||||
data: {
|
||||
attributes: FormValues;
|
||||
attributes: RoleFormValues;
|
||||
relationships?: {
|
||||
provider_groups?: {
|
||||
data: Array<{ id: string; type: string }>;
|
||||
@@ -37,57 +26,24 @@ export const EditRoleForm = ({
|
||||
};
|
||||
};
|
||||
};
|
||||
groups: { id: string; name: string }[];
|
||||
groups: RoleGroupOption[];
|
||||
}) => {
|
||||
const { toast } = useToast();
|
||||
const router = useRouter();
|
||||
const isCloudEnvironment = process.env.NEXT_PUBLIC_IS_CLOUD_ENV === "true";
|
||||
const visiblePermissionFormFields = permissionFormFields.filter(
|
||||
(permission) =>
|
||||
!["manage_billing", "manage_alerts"].includes(permission.field) ||
|
||||
isCloudEnvironment,
|
||||
);
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(editRoleFormSchema),
|
||||
defaultValues: {
|
||||
...roleData.data.attributes,
|
||||
groups:
|
||||
roleData.data.relationships?.provider_groups?.data.map((g) => g.id) ||
|
||||
[],
|
||||
},
|
||||
});
|
||||
|
||||
const { watch, setValue } = form;
|
||||
|
||||
const manageProviders = watch("manage_providers");
|
||||
const unlimitedVisibility = watch("unlimited_visibility");
|
||||
|
||||
useEffect(() => {
|
||||
if (manageProviders && !unlimitedVisibility) {
|
||||
setValue("unlimited_visibility", true, {
|
||||
shouldValidate: true,
|
||||
shouldDirty: true,
|
||||
shouldTouch: true,
|
||||
});
|
||||
}
|
||||
}, [manageProviders, unlimitedVisibility, setValue]);
|
||||
|
||||
const isLoading = form.formState.isSubmitting;
|
||||
|
||||
const onSelectAllChange = (checked: boolean) => {
|
||||
visiblePermissionFormFields.forEach(({ field }) => {
|
||||
form.setValue(field as keyof FormValues, checked, {
|
||||
shouldValidate: true,
|
||||
shouldDirty: true,
|
||||
shouldTouch: true,
|
||||
});
|
||||
});
|
||||
const defaultValues: DefaultValues<RoleFormValues> = {
|
||||
...roleData.data.attributes,
|
||||
groups:
|
||||
roleData.data.relationships?.provider_groups?.data.map((g) => g.id) || [],
|
||||
};
|
||||
|
||||
const onSubmitClient = async (values: FormValues) => {
|
||||
const onSubmit = async (
|
||||
values: RoleFormValues,
|
||||
{ handleServerResponse }: RoleFormSubmitContext,
|
||||
) => {
|
||||
try {
|
||||
const updatedFields: Partial<FormValues> = {};
|
||||
const updatedFields: Partial<RoleFormValues> = {};
|
||||
|
||||
if (values.name !== roleData.data.attributes.name) {
|
||||
updatedFields.name = values.name;
|
||||
@@ -127,33 +83,13 @@ export const EditRoleForm = ({
|
||||
});
|
||||
|
||||
const data = await updateRole(formData, roleId);
|
||||
if (!handleServerResponse(data)) return;
|
||||
|
||||
if (data?.errors && data.errors.length > 0) {
|
||||
data.errors.forEach((error: ApiError) => {
|
||||
const errorMessage = error.detail;
|
||||
const pointer = error.source?.pointer;
|
||||
switch (pointer) {
|
||||
case "/data/attributes/name":
|
||||
form.setError("name", {
|
||||
type: "server",
|
||||
message: errorMessage,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
toast({
|
||||
variant: "destructive",
|
||||
title: "Error",
|
||||
description: errorMessage,
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
toast({
|
||||
title: "Role Updated",
|
||||
description: "The role was updated successfully.",
|
||||
});
|
||||
router.push("/roles");
|
||||
}
|
||||
toast({
|
||||
title: "Role Updated",
|
||||
description: "The role was updated successfully.",
|
||||
});
|
||||
router.push("/roles");
|
||||
} catch (error) {
|
||||
toast({
|
||||
variant: "destructive",
|
||||
@@ -164,119 +100,11 @@ export const EditRoleForm = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmitClient)}
|
||||
className="flex flex-col gap-6"
|
||||
>
|
||||
<CustomInput
|
||||
control={form.control}
|
||||
name="name"
|
||||
type="text"
|
||||
label="Role Name"
|
||||
labelPlacement="inside"
|
||||
placeholder="Enter role name"
|
||||
variant="bordered"
|
||||
isRequired
|
||||
/>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="text-lg font-semibold">Admin Permissions</span>
|
||||
|
||||
{/* Select All Checkbox */}
|
||||
<Checkbox
|
||||
isSelected={visiblePermissionFormFields.every((perm) =>
|
||||
form.watch(perm.field as keyof FormValues),
|
||||
)}
|
||||
onChange={(e) => onSelectAllChange(e.target.checked)}
|
||||
classNames={{
|
||||
label: "text-small",
|
||||
wrapper: "checkbox-update",
|
||||
}}
|
||||
color="default"
|
||||
>
|
||||
Grant all admin permissions
|
||||
</Checkbox>
|
||||
|
||||
{/* Permissions Grid */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{visiblePermissionFormFields.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",
|
||||
}}
|
||||
color="default"
|
||||
>
|
||||
{label}
|
||||
</Checkbox>
|
||||
<Tooltip content={description} placement="right">
|
||||
<div className="flex w-fit items-center justify-center">
|
||||
<InfoIcon
|
||||
className={clsx(
|
||||
"text-default-400 group-data-[selected=true]:text-foreground cursor-pointer",
|
||||
)}
|
||||
aria-hidden={"true"}
|
||||
width={16}
|
||||
/>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Divider className="my-4" />
|
||||
|
||||
{!unlimitedVisibility && (
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="text-lg font-semibold">Groups visibility</span>
|
||||
|
||||
<p className="text-small text-default-700 font-medium">
|
||||
Select the groups this role will have access to. If no groups are
|
||||
selected and unlimited visibility is not enabled, the role will
|
||||
not have access to any accounts.
|
||||
</p>
|
||||
|
||||
<Controller
|
||||
name="groups"
|
||||
control={form.control}
|
||||
render={({ field }) => (
|
||||
<div className="flex flex-col gap-2">
|
||||
<EnhancedMultiSelect
|
||||
options={groups.map((group) => ({
|
||||
label: group.name,
|
||||
value: group.id,
|
||||
}))}
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value || []}
|
||||
placeholder="Select groups"
|
||||
searchable={true}
|
||||
hideSelectAll={true}
|
||||
emptyIndicator="No results found"
|
||||
resetOnDefaultValueChange={true}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
{form.formState.errors.groups && (
|
||||
<p className="mt-2 text-sm text-red-600">
|
||||
{form.formState.errors.groups.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<FormButtons
|
||||
submitText="Update Role"
|
||||
isDisabled={isLoading}
|
||||
onCancel={() => router.push("/roles")}
|
||||
/>
|
||||
</form>
|
||||
</Form>
|
||||
<RoleForm
|
||||
groups={groups}
|
||||
defaultValues={defaultValues}
|
||||
submitText="Update Role"
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,236 @@
|
||||
"use client";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { InfoIcon } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
Controller,
|
||||
DefaultValues,
|
||||
useForm,
|
||||
UseFormReturn,
|
||||
} from "react-hook-form";
|
||||
|
||||
import { Checkbox } from "@/components/shadcn/checkbox/checkbox";
|
||||
import { Input } from "@/components/shadcn/input/input";
|
||||
import { EnhancedMultiSelect } from "@/components/shadcn/select/enhanced-multi-select";
|
||||
import { Separator } from "@/components/shadcn/separator/separator";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/shadcn/tooltip";
|
||||
import {
|
||||
Form,
|
||||
FormButtons,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { useFormServerErrors } from "@/hooks/use-form-server-errors";
|
||||
import { useManageProvidersUnlimitedVisibility } from "@/hooks/use-manage-providers-unlimited-visibility";
|
||||
import {
|
||||
getUnlimitedVisibilityField,
|
||||
getVisiblePermissionFormFields,
|
||||
} from "@/lib/role-permissions";
|
||||
import { roleFormSchema, RoleFormValues } from "@/types";
|
||||
|
||||
import { UnlimitedVisibilityField } from "./unlimited-visibility-section";
|
||||
|
||||
export interface RoleGroupOption {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface RoleFormSubmitContext {
|
||||
form: UseFormReturn<RoleFormValues>;
|
||||
handleServerResponse: (data: unknown) => boolean;
|
||||
}
|
||||
|
||||
interface RoleFormProps {
|
||||
groups: RoleGroupOption[];
|
||||
defaultValues: DefaultValues<RoleFormValues>;
|
||||
submitText: string;
|
||||
onSubmit: (
|
||||
values: RoleFormValues,
|
||||
ctx: RoleFormSubmitContext,
|
||||
) => void | Promise<void>;
|
||||
onCancel?: () => void;
|
||||
}
|
||||
|
||||
export const RoleForm = ({
|
||||
groups,
|
||||
defaultValues,
|
||||
submitText,
|
||||
onSubmit,
|
||||
onCancel,
|
||||
}: RoleFormProps) => {
|
||||
const router = useRouter();
|
||||
|
||||
const form = useForm<RoleFormValues>({
|
||||
resolver: zodResolver(roleFormSchema),
|
||||
defaultValues,
|
||||
});
|
||||
|
||||
const isCloudEnvironment = process.env.NEXT_PUBLIC_IS_CLOUD_ENV === "true";
|
||||
const visiblePermissionFormFields =
|
||||
getVisiblePermissionFormFields(isCloudEnvironment);
|
||||
const showUnlimitedVisibilityField = !!getUnlimitedVisibilityField();
|
||||
|
||||
const { setPermissionValue, setUnlimitedVisibility } =
|
||||
useManageProvidersUnlimitedVisibility(form);
|
||||
const { handleServerResponse } = useFormServerErrors(form, {
|
||||
"/data/attributes/name": "name",
|
||||
});
|
||||
|
||||
const unlimitedVisibility = !!form.watch("unlimited_visibility");
|
||||
const isLoading = form.formState.isSubmitting;
|
||||
|
||||
const onSelectAllChange = (checked: boolean) => {
|
||||
visiblePermissionFormFields.forEach(({ field }) => {
|
||||
setPermissionValue(field, checked);
|
||||
});
|
||||
};
|
||||
|
||||
const handleCancel = onCancel ?? (() => router.push("/roles"));
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit((values) =>
|
||||
onSubmit(values, { form, handleServerResponse }),
|
||||
)}
|
||||
className="flex flex-col gap-6"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
Role Name <span className="text-text-error-primary">*</span>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Enter role name"
|
||||
{...field}
|
||||
value={field.value ?? ""}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="text-lg font-semibold">Admin Permissions</span>
|
||||
|
||||
{/* Select All Checkbox */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="select-all"
|
||||
size="sm"
|
||||
checked={visiblePermissionFormFields.every((perm) =>
|
||||
form.watch(perm.field as keyof RoleFormValues),
|
||||
)}
|
||||
onCheckedChange={(checked) => onSelectAllChange(Boolean(checked))}
|
||||
/>
|
||||
<label htmlFor="select-all" className="text-small">
|
||||
Grant all admin permissions
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Permissions Grid */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{visiblePermissionFormFields.map(
|
||||
({ field, label, description }) => (
|
||||
<div key={field} className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id={field}
|
||||
size="sm"
|
||||
checked={!!form.watch(field as keyof RoleFormValues)}
|
||||
onCheckedChange={(checked) =>
|
||||
setPermissionValue(field, Boolean(checked))
|
||||
}
|
||||
/>
|
||||
<label htmlFor={field} className="text-small">
|
||||
{label}
|
||||
</label>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="flex w-fit items-center justify-center">
|
||||
<InfoIcon
|
||||
className="text-muted-foreground cursor-pointer"
|
||||
aria-hidden="true"
|
||||
width={16}
|
||||
/>
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right">{description}</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator className="my-4" />
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="text-lg font-semibold">Visibility</span>
|
||||
|
||||
{showUnlimitedVisibilityField && (
|
||||
<UnlimitedVisibilityField
|
||||
isSelected={unlimitedVisibility}
|
||||
onValueChange={setUnlimitedVisibility}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!unlimitedVisibility && (
|
||||
<>
|
||||
<p className="text-small text-default-700 font-medium">
|
||||
Select the groups this role will have access to. If no groups
|
||||
are selected and unlimited visibility is not enabled, the role
|
||||
will not have access to any accounts.
|
||||
</p>
|
||||
|
||||
<Controller
|
||||
name="groups"
|
||||
control={form.control}
|
||||
render={({ field }) => (
|
||||
<div className="flex flex-col gap-2">
|
||||
<EnhancedMultiSelect
|
||||
options={groups.map((group) => ({
|
||||
label: group.name,
|
||||
value: group.id,
|
||||
}))}
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value || []}
|
||||
placeholder="Select groups"
|
||||
searchable={true}
|
||||
hideSelectAll={true}
|
||||
emptyIndicator="No results found"
|
||||
resetOnDefaultValueChange={true}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
{form.formState.errors.groups && (
|
||||
<p className="mt-2 text-sm text-red-600">
|
||||
{form.formState.errors.groups.message}
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<FormButtons
|
||||
submitText={submitText}
|
||||
isDisabled={isLoading}
|
||||
onCancel={handleCancel}
|
||||
/>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,56 @@
|
||||
import { InfoIcon } from "lucide-react";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
import { Checkbox } from "@/components/shadcn/checkbox/checkbox";
|
||||
|
||||
export const UnlimitedVisibilitySection = ({
|
||||
children,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<section className="space-y-2">
|
||||
<div className="text-muted-foreground flex items-start gap-2 text-sm">
|
||||
<InfoIcon
|
||||
aria-hidden="true"
|
||||
className="text-bg-data-info mt-0.5 h-4 w-4 shrink-0"
|
||||
/>
|
||||
<p>
|
||||
This is a tenant-wide visibility setting. It grants visibility into
|
||||
every provider, account, resource, finding, scan, and compliance
|
||||
result, regardless of the groups selected below. It is also{" "}
|
||||
<strong>required to use the Jira integration</strong>.
|
||||
</p>
|
||||
</div>
|
||||
<div>{children}</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export const UnlimitedVisibilityField = ({
|
||||
isSelected,
|
||||
onValueChange,
|
||||
}: {
|
||||
isSelected: boolean;
|
||||
onValueChange: (checked: boolean) => void;
|
||||
}) => {
|
||||
return (
|
||||
<UnlimitedVisibilitySection>
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="unlimited_visibility"
|
||||
name="unlimited_visibility"
|
||||
checked={isSelected}
|
||||
onCheckedChange={(checked) => onValueChange(Boolean(checked))}
|
||||
size="sm"
|
||||
/>
|
||||
<label
|
||||
htmlFor="unlimited_visibility"
|
||||
className="text-small font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Enable Unlimited Visibility for this role
|
||||
</label>
|
||||
</div>
|
||||
</UnlimitedVisibilitySection>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,42 @@
|
||||
import type {
|
||||
FieldValues,
|
||||
Path,
|
||||
PathValue,
|
||||
UseFormReturn,
|
||||
} from "react-hook-form";
|
||||
|
||||
type RolePermissionValues = {
|
||||
manage_providers?: boolean;
|
||||
unlimited_visibility?: boolean;
|
||||
};
|
||||
|
||||
const setBooleanFormValue = <T extends FieldValues>(
|
||||
form: Pick<UseFormReturn<T>, "setValue">,
|
||||
field: Path<T>,
|
||||
value: boolean,
|
||||
) => {
|
||||
form.setValue(field, value as PathValue<T, Path<T>>, {
|
||||
shouldValidate: true,
|
||||
shouldDirty: true,
|
||||
shouldTouch: true,
|
||||
});
|
||||
};
|
||||
|
||||
export const useManageProvidersUnlimitedVisibility = <
|
||||
T extends FieldValues & RolePermissionValues,
|
||||
>(
|
||||
form: Pick<UseFormReturn<T>, "setValue" | "watch">,
|
||||
) => {
|
||||
const setUnlimitedVisibility = (checked: boolean) => {
|
||||
setBooleanFormValue(form, "unlimited_visibility" as Path<T>, checked);
|
||||
};
|
||||
|
||||
const setPermissionValue = (field: string, checked: boolean) => {
|
||||
setBooleanFormValue(form, field as Path<T>, checked);
|
||||
};
|
||||
|
||||
return {
|
||||
setPermissionValue,
|
||||
setUnlimitedVisibility,
|
||||
};
|
||||
};
|
||||
+1
-1
@@ -433,7 +433,7 @@ export const permissionFormFields: PermissionInfo[] = [
|
||||
field: "unlimited_visibility",
|
||||
label: "Unlimited Visibility",
|
||||
description:
|
||||
"Provides complete visibility across all the providers and its related resources",
|
||||
"Grants tenant-wide visibility across all providers, accounts, resources, findings, scans, and compliance results without granting admin actions.",
|
||||
},
|
||||
{
|
||||
field: "manage_providers",
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
import { permissionFormFields } from "@/lib";
|
||||
|
||||
const hiddenOutsideCloudFields = ["manage_billing", "manage_alerts"];
|
||||
|
||||
export const getVisiblePermissionFormFields = (isCloudEnvironment: boolean) =>
|
||||
permissionFormFields.filter(
|
||||
(permission) =>
|
||||
permission.field !== "unlimited_visibility" &&
|
||||
(!hiddenOutsideCloudFields.includes(permission.field) ||
|
||||
isCloudEnvironment),
|
||||
);
|
||||
|
||||
export const getUnlimitedVisibilityField = () =>
|
||||
permissionFormFields.find(({ field }) => field === "unlimited_visibility");
|
||||
+3
-13
@@ -35,7 +35,8 @@ export const kubeconfigContainsExecAuthentication = (
|
||||
}
|
||||
};
|
||||
|
||||
export const addRoleFormSchema = z.object({
|
||||
// Create and edit share the same shape, so a single schema backs both flows.
|
||||
export const roleFormSchema = z.object({
|
||||
name: z.string().min(1, "Name is required"),
|
||||
manage_users: z.boolean().default(false),
|
||||
manage_account: z.boolean().default(false),
|
||||
@@ -48,18 +49,7 @@ export const addRoleFormSchema = z.object({
|
||||
groups: z.array(z.string()).optional(),
|
||||
});
|
||||
|
||||
export const editRoleFormSchema = z.object({
|
||||
name: z.string().min(1, "Name is required"),
|
||||
manage_users: z.boolean().default(false),
|
||||
manage_account: z.boolean().default(false),
|
||||
manage_billing: z.boolean().default(false),
|
||||
manage_providers: z.boolean().default(false),
|
||||
manage_integrations: z.boolean().default(false),
|
||||
manage_scans: z.boolean().default(false),
|
||||
manage_alerts: z.boolean().default(false),
|
||||
unlimited_visibility: z.boolean().default(false),
|
||||
groups: z.array(z.string()).optional(),
|
||||
});
|
||||
export type RoleFormValues = z.input<typeof roleFormSchema>;
|
||||
|
||||
export const onDemandScanFormSchema = () =>
|
||||
z.object({
|
||||
|
||||
Reference in New Issue
Block a user