fix(ui): clarify Unlimited Visibility in RBAC forms

ui/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to the **Prowler UI** are documented in this file.
 
+## [1.33.1] (Prowler UNRELEASED)
+
+### 🔄 Changed
+
+- RBAC role forms now explain Unlimited Visibility in a dedicated section and preserve explicit visibility choices when admin permissions are toggled [(#11851)](https://github.com/prowler-cloud/prowler/pull/11851)
+
+---
+
 ## [1.33.0] (Prowler v5.33.0)
 
 ### 🚀 Added

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

@@ -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();
+  });
 });