fix(ui): keep ConfigureSSO wizard mounted while security page data refetches

.changeset/old-dancers-judge.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Fix the self-serve SSO configuration wizard losing your place when organization data refetches mid-flow. After submitting a Configure step (for example saving an identity provider's metadata), a background refetch on the OrganizationProfile Security page could unmount the open ConfigureSSO wizard and re-render it on an earlier step. The wizard now stays on its current step while data loads in the background.

packages/ui/src/components/OrganizationProfile/OrganizationSecurityPage.tsx

@@ -47,7 +47,13 @@ const OrganizationSecurityPageContent = ({ contentRef }: OrganizationSecurityPag
     setView('wizard');
   };
 
-  if (isLoading) {
+  // Gate the page-level loading overview to the overview view only. A wizard is
+  // only ever opened after the overview has settled (it gates on `isLoading`),
+  // so once `view === 'wizard'` the connection data is present and stays warm; a
+  // later `isLoading` flip (e.g. the test-runs query cold-loading after a
+  // configure write) must not tear the open wizard down and reseat it — each
+  // wizard step owns its own loading UI.
+  if (isLoading && view === 'overview') {
     return (
       <SecurityPageOverview fillHeight>
         <Flex

packages/ui/src/components/OrganizationProfile/__tests__/OrganizationSecurityPageWizardLoading.test.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { bindCreateFixtures } from '@/test/create-fixtures';
+import { act, render, screen } from '@/test/utils';
+
+import { organizationEnterpriseConnection as buildOrganizationEnterpriseConnection } from '../../ConfigureSSO/domain/organizationEnterpriseConnection';
+
+// External, test-controllable loading flag. The mocked umbrella hook reads it
+// through `useSyncExternalStore`, so flipping it inside `act` triggers a real
+// re-render of the page — exactly how a mid-wizard refetch toggles `isLoading`
+// in production (the test-runs query cold-loading after a configure write).
+const loadingStore = vi.hoisted(() => {
+  let loading = false;
+  const listeners = new Set<() => void>();
+  return {
+    get: () => loading,
+    set: (next: boolean) => {
+      loading = next;
+      listeners.forEach(l => l());
+    },
+    subscribe: (l: () => void) => {
+      listeners.add(l);
+      return () => listeners.delete(l);
+    },
+  };
+});
+
+// An active, fully-configured connection with all domains verified and a
+// successful test run. Every wizard step is reachable, so the furthest-reachable
+// seed is the last step (`activate`).
+const activeConnection = {
+  id: 'ent_1',
+  name: 'clerk.com',
+  provider: 'saml_okta',
+  active: true,
+  organizationId: 'Org1',
+  domains: ['clerk.com'],
+  samlConnection: {
+    idpSsoUrl: 'https://idp.example.com/sso',
+    idpEntityId: 'https://idp.example.com/entity',
+    idpCertificate: 'CERT',
+  },
+} as any;
+
+const verifiedDomain = {
+  id: 'dmn_verified',
+  name: 'clerk.com',
+  organizationId: 'Org1',
+  enrollmentMode: 'enterprise_sso',
+  ownershipVerification: { status: 'verified', strategy: 'txt' },
+} as any;
+
+const noop = () => Promise.resolve(undefined);
+
+// Mock the umbrella hook so the test owns `isLoading` and the connection state
+// directly, while the real OrganizationSecurityPage / ConfigureSSOWizard / Wizard
+// render. This isolates the bug to the page's loading-vs-view gating.
+vi.mock('../../ConfigureSSO/hooks/useOrganizationEnterpriseConnection', () => ({
+  useOrganizationEnterpriseConnection: () => {
+    const isLoading = React.useSyncExternalStore(loadingStore.subscribe, loadingStore.get, loadingStore.get);
+    return {
+      isLoading,
+      user: { primaryEmailAddress: { emailAddress: 'test@clerk.com' } },
+      session: {},
+      organization: { name: 'Org1' },
+      enterpriseConnection: activeConnection,
+      organizationEnterpriseConnection: buildOrganizationEnterpriseConnection({
+        connection: activeConnection,
+        hasSuccessfulTestRun: true,
+      }),
+      enterpriseConnectionMutations: {
+        createConnection: noop,
+        changeProvider: noop,
+        updateConnection: noop,
+        setConnectionActive: noop,
+        deleteConnection: noop,
+        createTestRun: noop,
+      },
+      testRuns: {
+        rows: [{ id: 'run_1', status: 'success' }],
+        totalCount: 1,
+        isLoading: false,
+        isFetching: false,
+        isPolling: false,
+        page: 1,
+        setPage: () => {},
+        refresh: noop,
+      },
+      organizationDomains: [verifiedDomain],
+      organizationDomainMutations: {
+        createDomain: noop,
+        prepareOwnershipVerification: noop,
+        attemptOwnershipVerification: noop,
+        revalidate: noop,
+      },
+    };
+  },
+}));
+
+import { OrganizationSecurityPage } from '../OrganizationSecurityPage';
+
+const { createFixtures } = bindCreateFixtures('OrganizationProfile');
+
+const withSecurityPageFixtures = (f: Parameters<Parameters<typeof createFixtures>[0]>[0]) => {
+  f.withEnterpriseSso({ selfServeSSO: true });
+  f.withEmailAddress();
+  f.withOrganizations();
+  f.withUser({
+    email_addresses: ['test@clerk.com'],
+    organization_memberships: [{ name: 'Org1', permissions: ['org:sys_entconns:manage'] }],
+  });
+};
+
+describe('OrganizationSecurityPage — wizard survives a mid-flow loading toggle', () => {
+  it('keeps the open wizard on its current step when isLoading flips true→false', async () => {
+    loadingStore.set(false);
+    const { wrapper } = await createFixtures(withSecurityPageFixtures);
+
+    const { userEvent } = render(<OrganizationSecurityPage contentRef={{ current: null }} />, { wrapper });
+
+    // Enter the wizard from the overview via Edit, which forces the first step.
+    await userEvent.click(await screen.findByRole('button', { name: /open menu/i }));
+    await userEvent.click(await screen.findByRole('menuitem', { name: 'Edit' }));
+    expect(await screen.findByRole('heading', { name: /add SSO domains/i })).toBeInTheDocument();
+
+    // Navigate forward to the Activate step via the breadcrumb (reachable because
+    // the connection is active). This puts the user on a step OTHER than the
+    // forced seed, so a reseat is observable.
+    await userEvent.click(screen.getByRole('button', { name: /^Activate$/ }));
+    expect(await screen.findByRole('heading', { name: /SSO connection is active/i })).toBeInTheDocument();
+
+    // A transient refetch: isLoading flips true then back to false while the user
+    // is mid-wizard. The wizard must NOT unmount and reseat.
+    act(() => loadingStore.set(true));
+    act(() => loadingStore.set(false));
+
+    // The wizard stays on the Activate step; it did not snap back to the forced
+    // first step (Domains). On the unfixed page-level gate the wizard unmounts
+    // during the `true` frame and remounts at the forced first step, so the
+    // Activate heading is gone and "Add SSO domains" is shown instead.
+    expect(screen.getByRole('heading', { name: /SSO connection is active/i })).toBeInTheDocument();
+    expect(screen.queryByRole('heading', { name: /add SSO domains/i })).not.toBeInTheDocument();
+  });
+});