feat(ui): redesign providers page with modern table and cloud recursion (#10292)

Author: alejandrobailo

ui/CHANGELOG.md

@@ -8,14 +8,15 @@ All notable changes to the **Prowler UI** are documented in this file.
 
 - Attack Paths: Improved error handling for server errors (5xx) and network failures with user-friendly messages instead of raw internal errors and layout changes. [(#10249)](https://github.com/prowler-cloud/prowler/pull/10249)
 - Refactor simple providers with new components and styles.[(#10259)](https://github.com/prowler-cloud/prowler/pull/10259)
+- Providers page redesigned with cloud organization hierarchy, HeroUI-to-shadcn migration, organization and account group filters, and row selection for bulk actions [(#10292)](https://github.com/prowler-cloud/prowler/pull/10292)
 - AWS Organizations onboarding now uses a clearer 3-step flow: deploy the ProwlerScan role in the management account via CloudFormation Stack, deploy to member accounts via StackSet with a copyable template URL, and confirm with the Role ARN [(#10274)](https://github.com/prowler-cloud/prowler/pull/10274)
 
----
-
 ### 🔐 Security
 
 - npm transitive dependencies patched to resolve 11 Dependabot alerts (6 HIGH, 4 MEDIUM, 1 LOW): hono, @hono/node-server, fast-xml-parser, serialize-javascript, minimatch [(#10267)](https://github.com/prowler-cloud/prowler/pull/10267)
 
+---
+
 ## [1.19.1] (Prowler v5.19.1 UNRELEASED)
 
 ### 🐞 Fixed

ui/actions/manage-groups/manage-groups.ts

@@ -22,7 +22,8 @@ export const getProviderGroups = async ({
 }): Promise<ProviderGroupsResponse | undefined> => {
   const headers = await getAuthHeaders({ contentType: false });
 
-  if (isNaN(Number(page)) || page < 1) redirect("/manage-groups");
+  if (isNaN(Number(page)) || page < 1)
+    redirect("/providers?tab=account-groups");
 
   const url = new URL(`${apiBaseUrl}/provider-groups`);
 
@@ -43,7 +44,7 @@ export const getProviderGroups = async ({
       headers,
     });
 
-    return handleApiResponse(response);
+    return await handleApiResponse(response);
   } catch (error) {
     console.error("Error fetching provider groups:", error);
     return undefined;
@@ -60,7 +61,7 @@ export const getProviderGroupInfoById = async (providerGroupId: string) => {
       headers,
     });
 
-    return handleApiResponse(response);
+    return await handleApiResponse(response);
   } catch (error) {
     handleApiError(error);
   }
@@ -111,7 +112,7 @@ export const createProviderGroup = async (formData: FormData) => {
       body,
     });
 
-    return handleApiResponse(response, "/manage-groups");
+    return await handleApiResponse(response, "/providers?tab=account-groups");
   } catch (error) {
     handleApiError(error);
   }
@@ -156,7 +157,7 @@ export const updateProviderGroup = async (
       body: JSON.stringify(payload),
     });
 
-    return handleApiResponse(response);
+    return await handleApiResponse(response);
   } catch (error) {
     handleApiError(error);
   }
@@ -168,7 +169,7 @@ export const deleteProviderGroup = async (formData: FormData) => {
 
   if (!providerGroupId) {
     return {
-      errors: [{ detail: "Provider Group ID is required." }],
+      errors: [{ detail: "Account Group ID is required." }],
     };
   }
 
@@ -196,7 +197,7 @@ export const deleteProviderGroup = async (formData: FormData) => {
       data = await response.json();
     }
 
-    revalidatePath("/manage-groups");
+    revalidatePath("/providers");
     return data || { success: true };
   } catch (error) {
     console.error("Error deleting provider group:", error);

ui/actions/organizations/organizations.test.ts

@@ -31,6 +31,10 @@ vi.mock("@/lib/server-actions-helper", () => ({
 import {
   applyDiscovery,
   getDiscovery,
+  listOrganizations,
+  listOrganizationsSafe,
+  listOrganizationUnits,
+  listOrganizationUnitsSafe,
   triggerDiscovery,
   updateOrganizationSecret,
 } from "./organizations";
@@ -137,4 +141,66 @@ describe("organizations actions", () => {
     expect(revalidatePathMock).toHaveBeenCalledTimes(1);
     expect(revalidatePathMock).toHaveBeenCalledWith("/providers");
   });
+
+  it("lists organizations with the expected filters", async () => {
+    // Given
+    handleApiResponseMock.mockResolvedValue({ data: [] });
+
+    // When
+    await listOrganizations();
+
+    // Then
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(fetchMock.mock.calls[0]?.[0]).toBe(
+      "https://api.example.com/api/v1/organizations?filter%5Borg_type%5D=aws",
+    );
+  });
+
+  it("lists organization units from the dedicated endpoint", async () => {
+    // Given
+    handleApiResponseMock.mockResolvedValue({ data: [] });
+
+    // When
+    await listOrganizationUnits();
+
+    // Then
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(fetchMock.mock.calls[0]?.[0]).toBe(
+      "https://api.example.com/api/v1/organizational-units",
+    );
+  });
+
+  it("returns an empty organizations payload when the safe organizations request fails", async () => {
+    // Given
+    fetchMock.mockResolvedValue(
+      new Response("Internal Server Error", {
+        status: 500,
+      }),
+    );
+
+    // When
+    const result = await listOrganizationsSafe();
+
+    // Then
+    expect(result).toEqual({ data: [] });
+    expect(handleApiResponseMock).not.toHaveBeenCalled();
+    expect(handleApiErrorMock).not.toHaveBeenCalled();
+  });
+
+  it("returns an empty organization units payload when the safe request fails", async () => {
+    // Given
+    fetchMock.mockResolvedValue(
+      new Response("Internal Server Error", {
+        status: 500,
+      }),
+    );
+
+    // When
+    const result = await listOrganizationUnitsSafe();
+
+    // Then
+    expect(result).toEqual({ data: [] });
+    expect(handleApiResponseMock).not.toHaveBeenCalled();
+    expect(handleApiErrorMock).not.toHaveBeenCalled();
+  });
 });

ui/actions/organizations/organizations.ts

@@ -4,6 +4,10 @@ import { revalidatePath } from "next/cache";
 
 import { apiBaseUrl, getAuthHeaders } from "@/lib";
 import { handleApiError, handleApiResponse } from "@/lib/server-actions-helper";
+import {
+  OrganizationListResponse,
+  OrganizationUnitListResponse,
+} from "@/types";
 
 const PATH_IDENTIFIER_PATTERN = /^[A-Za-z0-9_-]+$/;
 
@@ -37,6 +41,24 @@ function hasActionError(result: unknown): result is { error: unknown } {
   );
 }
 
+async function fetchOptionalCollection<T extends { data: unknown[] }>(
+  url: URL,
+): Promise<T> {
+  const headers = await getAuthHeaders({ contentType: false });
+
+  try {
+    const response = await fetch(url.toString(), { headers });
+
+    if (!response.ok) {
+      return { data: [] } as unknown as T;
+    }
+
+    return (await handleApiResponse(response)) as T;
+  } catch {
+    return { data: [] } as unknown as T;
+  }
+}
+
 /**
  * Creates an AWS Organization resource.
  * POST /api/v1/organizations
@@ -82,12 +104,62 @@ export const listOrganizationsByExternalId = async (externalId: string) => {
 
   try {
     const response = await fetch(url.toString(), { headers });
-    return handleApiResponse(response);
+    return await handleApiResponse(response);
   } catch (error) {
     return handleApiError(error);
   }
 };
 
+/**
+ * Lists AWS organizations available for the current tenant.
+ * GET /api/v1/organizations?filter[org_type]=aws
+ */
+export const listOrganizations = async () => {
+  const headers = await getAuthHeaders({ contentType: false });
+  const url = new URL(`${apiBaseUrl}/organizations`);
+  url.searchParams.set("filter[org_type]", "aws");
+
+  try {
+    const response = await fetch(url.toString(), { headers });
+    return await handleApiResponse(response);
+  } catch (error) {
+    return handleApiError(error);
+  }
+};
+
+export const listOrganizationsSafe =
+  async (): Promise<OrganizationListResponse> => {
+    const url = new URL(`${apiBaseUrl}/organizations`);
+    url.searchParams.set("filter[org_type]", "aws");
+    url.searchParams.set("page[size]", "100");
+
+    return fetchOptionalCollection<OrganizationListResponse>(url);
+  };
+
+/**
+ * Lists organization units available for the current tenant.
+ * GET /api/v1/organizational-units
+ */
+export const listOrganizationUnits = async () => {
+  const headers = await getAuthHeaders({ contentType: false });
+  const url = new URL(`${apiBaseUrl}/organizational-units`);
+
+  try {
+    const response = await fetch(url.toString(), { headers });
+    return await handleApiResponse(response);
+  } catch (error) {
+    return handleApiError(error);
+  }
+};
+
+export const listOrganizationUnitsSafe =
+  async (): Promise<OrganizationUnitListResponse> => {
+    const url = new URL(`${apiBaseUrl}/organizational-units`);
+    url.searchParams.set("page[size]", "100");
+
+    return fetchOptionalCollection<OrganizationUnitListResponse>(url);
+  };
+
 /**
  * Creates an organization secret (role-based credentials).
  * POST /api/v1/organization-secrets

ui/app/(prowler)/_overview/_components/provider-type-selector.tsx

@@ -186,14 +186,14 @@ export const ProviderTypeSelector = ({
     if (selectedTypes.length === 1) {
       const providerType = selectedTypes[0] as ProviderType;
       return (
-        <span className="flex items-center gap-2">
+        <span className="flex min-w-0 items-center gap-2">
           {renderIcon(providerType)}
-          <span>{PROVIDER_DATA[providerType].label}</span>
+          <span className="truncate">{PROVIDER_DATA[providerType].label}</span>
         </span>
       );
     }
     return (
-      <span className="truncate">
+      <span className="min-w-0 truncate">
         {selectedTypes.length} providers selected
       </span>
     );