fix(ui): keep update credentials wizard open

ui/CHANGELOG.md

@@ -12,6 +12,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 
 - Findings group resource filters now strip unsupported scan parameters, display scan name instead of provider alias in filter badges, migrate mute modal from HeroUI to shadcn, and add searchable accounts/provider type selectors [(#10662)](https://github.com/prowler-cloud/prowler/pull/10662)
 - Compliance detail page header now reflects the actual provider, alias and UID of the selected scan instead of always defaulting to AWS [(#10674)](https://github.com/prowler-cloud/prowler/pull/10674)
+- Provider wizard modal moved to a stable page-level host so the providers table refreshes after link, authenticate, and connection check without closing the modal [(#10675)](https://github.com/prowler-cloud/prowler/pull/10675)
 
 ---
 
@@ -40,10 +41,8 @@ All notable changes to the **Prowler UI** are documented in this file.
 ### 🐞 Fixed
 
 - Preserve query parameters in callbackUrl during invitation flow [(#10571)](https://github.com/prowler-cloud/prowler/pull/10571)
-- Deleting the active organization now switches to the target org before deleting, preventing JWT rejection from the backend [(#10491)](https://github.com/prowler-cloud/prowler/pull/10491)
-- Clear Filters now resets all filters including muted findings and auto-applies, Clear all in pills only removes pill-visible sub-filters, and the discard icon is now an Undo text button [(#10446)](https://github.com/prowler-cloud/prowler/pull/10446)
-- Send to Jira modal now dynamically fetches and displays available issue types per project instead of hardcoding `"Task"`, fixing failures on non-English Jira instances [(#10534)](https://github.com/prowler-cloud/prowler/pull/10534)
-- Exclude service filter from finding group resources endpoint to prevent empty results when a service filter is active [(#10652)](https://github.com/prowler-cloud/prowler/pull/10652)
+- Attack Paths scan auto-refresh now correctly detects "available" (queued) scans as active [(#10476)](https://github.com/prowler-cloud/prowler/pull/10476)
+- Attack Paths empty state not showing when no scans exist [(#10469)](https://github.com/prowler-cloud/prowler/pull/10469)
 
 ---
 

ui/actions/providers/providers.test.ts

@@ -0,0 +1,135 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const {
+  fetchMock,
+  getAuthHeadersMock,
+  getFormValueMock,
+  handleApiErrorMock,
+  handleApiResponseMock,
+} = vi.hoisted(() => ({
+  fetchMock: vi.fn(),
+  getAuthHeadersMock: vi.fn(),
+  getFormValueMock: vi.fn(),
+  handleApiErrorMock: vi.fn(),
+  handleApiResponseMock: vi.fn(),
+}));
+
+vi.mock("next/cache", () => ({
+  revalidatePath: vi.fn(),
+}));
+
+vi.mock("next/navigation", () => ({
+  redirect: vi.fn(),
+}));
+
+vi.mock("@/lib", () => ({
+  apiBaseUrl: "https://api.example.com/api/v1",
+  getAuthHeaders: getAuthHeadersMock,
+  getFormValue: getFormValueMock,
+  wait: vi.fn(),
+}));
+
+vi.mock("@/lib/provider-credentials/build-crendentials", () => ({
+  buildSecretConfig: vi.fn(() => ({
+    secretType: "access-secret-key",
+    secret: { key: "value" },
+  })),
+}));
+
+vi.mock("@/lib/provider-filters", () => ({
+  appendSanitizedProviderInFilters: vi.fn(),
+}));
+
+vi.mock("@/lib/server-actions-helper", () => ({
+  handleApiError: handleApiErrorMock,
+  handleApiResponse: handleApiResponseMock,
+}));
+
+import {
+  addCredentialsProvider,
+  addProvider,
+  checkConnectionProvider,
+  updateCredentialsProvider,
+} from "./providers";
+
+describe("providers actions", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.stubGlobal("fetch", fetchMock);
+    getAuthHeadersMock.mockResolvedValue({ Authorization: "Bearer token" });
+    getFormValueMock.mockImplementation((formData: FormData, field: string) =>
+      formData.get(field),
+    );
+    handleApiErrorMock.mockReturnValue({ error: "Unexpected error" });
+    handleApiResponseMock.mockResolvedValue({ data: { id: "secret-1" } });
+    fetchMock.mockResolvedValue(
+      new Response(JSON.stringify({ data: { id: "secret-1" } }), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+  });
+
+  it("should revalidate providers after linking a cloud provider", async () => {
+    // Given
+    const formData = new FormData();
+    formData.set("providerType", "aws");
+    formData.set("providerUid", "111111111111");
+
+    // When
+    await addProvider(formData);
+
+    // Then
+    expect(handleApiResponseMock).toHaveBeenCalledWith(
+      expect.any(Response),
+      "/providers",
+    );
+  });
+
+  it("should revalidate providers after adding credentials in the wizard", async () => {
+    // Given
+    const formData = new FormData();
+    formData.set("providerId", "provider-1");
+    formData.set("providerType", "aws");
+
+    // When
+    await addCredentialsProvider(formData);
+
+    // Then
+    expect(handleApiResponseMock).toHaveBeenCalledWith(
+      expect.any(Response),
+      "/providers",
+    );
+  });
+
+  it("should revalidate providers after updating credentials in the wizard", async () => {
+    // Given
+    const formData = new FormData();
+    formData.set("providerId", "provider-1");
+    formData.set("providerType", "oraclecloud");
+
+    // When
+    await updateCredentialsProvider("secret-1", formData);
+
+    // Then
+    expect(handleApiResponseMock).toHaveBeenCalledWith(
+      expect.any(Response),
+      "/providers",
+    );
+  });
+
+  it("should revalidate providers when checking connection from the wizard", async () => {
+    // Given
+    const formData = new FormData();
+    formData.set("providerId", "provider-1");
+
+    // When
+    await checkConnectionProvider(formData);
+
+    // Then
+    expect(handleApiResponseMock).toHaveBeenCalledWith(
+      expect.any(Response),
+      "/providers",
+    );
+  });
+});

ui/app/(prowler)/providers/page.tsx

@@ -1,11 +1,6 @@
 import { Suspense } from "react";
 
-import {
-  AddProviderButton,
-  MutedFindingsConfigButton,
-  ProvidersAccountsTable,
-  ProvidersFilters,
-} from "@/components/providers";
+import { ProvidersAccountsView } from "@/components/providers";
 import { SkeletonTableProviders } from "@/components/providers/table";
 import { Skeleton } from "@/components/shadcn/skeleton/skeleton";
 import { ContentLayout } from "@/components/ui";
@@ -56,15 +51,6 @@ export default async function Providers({
   );
 }
 
-const ProvidersActions = () => {
-  return (
-    <div className="flex flex-wrap gap-4 md:justify-end">
-      <MutedFindingsConfigButton />
-      <AddProviderButton />
-    </div>
-  );
-};
-
 const ProvidersTableFallback = () => {
   return (
     <div className="flex flex-col gap-6">
@@ -120,17 +106,12 @@ const ProvidersAccountsContent = async ({
   });
 
   return (
-    <div className="flex flex-col gap-6">
-      <ProvidersFilters
-        filters={providersView.filters}
-        providers={providersView.providers}
-        actions={<ProvidersActions />}
-      />
-      <ProvidersAccountsTable
-        isCloud={process.env.NEXT_PUBLIC_IS_CLOUD_ENV === "true"}
-        metadata={providersView.metadata}
-        rows={providersView.rows}
-      />
-    </div>
+    <ProvidersAccountsView
+      isCloud={process.env.NEXT_PUBLIC_IS_CLOUD_ENV === "true"}
+      filters={providersView.filters}
+      providers={providersView.providers}
+      metadata={providersView.metadata}
+      rows={providersView.rows}
+    />
   );
 };

ui/components/providers/add-provider-button.tsx

@@ -5,13 +5,28 @@ import { useState } from "react";
 import { ProviderWizardModal } from "@/components/providers/wizard";
 import { Button } from "@/components/shadcn";
 
-export const AddProviderButton = () => {
+interface AddProviderButtonProps {
+  onOpenWizard?: () => void;
+}
+
+export const AddProviderButton = ({ onOpenWizard }: AddProviderButtonProps) => {
   const [open, setOpen] = useState(false);
 
+  const handleOpen = () => {
+    if (onOpenWizard) {
+      onOpenWizard();
+      return;
+    }
+
+    setOpen(true);
+  };
+
   return (
     <>
-      <Button onClick={() => setOpen(true)}>Add Provider</Button>
-      <ProviderWizardModal open={open} onOpenChange={setOpen} />
+      <Button onClick={handleOpen}>Add Provider</Button>
+      {!onOpenWizard && (
+        <ProviderWizardModal open={open} onOpenChange={setOpen} />
+      )}
     </>
   );
 };

ui/components/providers/index.ts

@@ -5,6 +5,7 @@ export * from "./forms/delete-form";
 export * from "./link-to-scans";
 export * from "./muted-findings-config-button";
 export * from "./providers-accounts-table";
+export * from "./providers-accounts-view";
 export * from "./providers-filters";
 export * from "./radio-card";
 export * from "./radio-group-provider";

ui/components/providers/providers-accounts-table.tsx

@@ -3,6 +3,10 @@
 import { RowSelectionState } from "@tanstack/react-table";
 import { useEffect, useState } from "react";
 
+import type {
+  OrgWizardInitialData,
+  ProviderWizardInitialData,
+} from "@/components/providers/wizard/types";
 import { DataTable } from "@/components/ui/table";
 import { MetaDataProps } from "@/types";
 import {
@@ -16,6 +20,8 @@ interface ProvidersAccountsTableProps {
   isCloud: boolean;
   metadata?: MetaDataProps;
   rows: ProvidersTableRow[];
+  onOpenProviderWizard: (initialData?: ProviderWizardInitialData) => void;
+  onOpenOrganizationWizard: (initialData: OrgWizardInitialData) => void;
 }
 
 function computeTestableProviderIds(
@@ -48,6 +54,8 @@ export function ProvidersAccountsTable({
   isCloud,
   metadata,
   rows,
+  onOpenProviderWizard,
+  onOpenOrganizationWizard,
 }: ProvidersAccountsTableProps) {
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
 
@@ -65,6 +73,8 @@ export function ProvidersAccountsTable({
     rowSelection,
     testableProviderIds,
     clearSelection,
+    onOpenProviderWizard,
+    onOpenOrganizationWizard,
   );
 
   return (

ui/components/providers/providers-accounts-view.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { useState } from "react";
+
+import { AddProviderButton } from "@/components/providers/add-provider-button";
+import { MutedFindingsConfigButton } from "@/components/providers/muted-findings-config-button";
+import { ProvidersAccountsTable } from "@/components/providers/providers-accounts-table";
+import { ProvidersFilters } from "@/components/providers/providers-filters";
+import { ProviderWizardModal } from "@/components/providers/wizard";
+import type {
+  OrgWizardInitialData,
+  ProviderWizardInitialData,
+} from "@/components/providers/wizard/types";
+import type { FilterOption, MetaDataProps, ProviderProps } from "@/types";
+import type { ProvidersTableRow } from "@/types/providers-table";
+
+interface ProvidersAccountsViewProps {
+  isCloud: boolean;
+  filters: FilterOption[];
+  metadata?: MetaDataProps;
+  providers: ProviderProps[];
+  rows: ProvidersTableRow[];
+}
+
+export function ProvidersAccountsView({
+  isCloud,
+  filters,
+  metadata,
+  providers,
+  rows,
+}: ProvidersAccountsViewProps) {
+  const [isProviderWizardOpen, setIsProviderWizardOpen] = useState(false);
+  const [providerWizardInitialData, setProviderWizardInitialData] = useState<
+    ProviderWizardInitialData | undefined
+  >(undefined);
+  const [orgWizardInitialData, setOrgWizardInitialData] = useState<
+    OrgWizardInitialData | undefined
+  >(undefined);
+
+  const openProviderWizard = (initialData?: ProviderWizardInitialData) => {
+    setOrgWizardInitialData(undefined);
+    setProviderWizardInitialData(initialData);
+    setIsProviderWizardOpen(true);
+  };
+
+  const openOrganizationWizard = (initialData: OrgWizardInitialData) => {
+    setProviderWizardInitialData(undefined);
+    setOrgWizardInitialData(initialData);
+    setIsProviderWizardOpen(true);
+  };
+
+  const handleWizardOpenChange = (open: boolean) => {
+    setIsProviderWizardOpen(open);
+
+    if (!open) {
+      setProviderWizardInitialData(undefined);
+      setOrgWizardInitialData(undefined);
+    }
+  };
+
+  return (
+    <>
+      <ProvidersFilters
+        filters={filters}
+        providers={providers}
+        actions={
+          <>
+            <MutedFindingsConfigButton />
+            <AddProviderButton onOpenWizard={() => openProviderWizard()} />
+          </>
+        }
+      />
+      <ProvidersAccountsTable
+        isCloud={isCloud}
+        metadata={metadata}
+        rows={rows}
+        onOpenProviderWizard={openProviderWizard}
+        onOpenOrganizationWizard={openOrganizationWizard}
+      />
+      <ProviderWizardModal
+        open={isProviderWizardOpen}
+        onOpenChange={handleWizardOpenChange}
+        initialData={providerWizardInitialData}
+        orgInitialData={orgWizardInitialData}
+      />
+    </>
+  );
+}