feat(ui,localizations,shared): add the organization Security page SSO overview (#8813)

Author: iagodahlem

.changeset/orange-pandas-shake.md

@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/shared': patch
+'@clerk/ui': patch
+---
+
+Add an overview to the organization profile Security page. The page now lands on a summary of the SSO connection — a status badge (Unconfigured, In Progress, Active, Inactive), the configuration details framed in a card (provider, domain, sign-on URL, issuer, certificate), and an actions menu with Edit, Activate / Deactivate, and Remove — and switches into the existing configuration flow on Start, Continue, or Edit.

packages/localizations/src/en-US.ts

@@ -1066,6 +1066,38 @@ export const enUS: LocalizationResource = {
       successMessage: '{{domain}} has been removed.',
       title: 'Remove domain',
     },
+    securityPage: {
+      removeDialog: {
+        confirmButton: 'Remove connection',
+        subtitle:
+          'Are you sure you want to remove the connection? This action is irreversible and deletes the connection and all of its configuration.',
+        title: 'Remove SSO connection',
+      },
+      ssoSection: {
+        badge__active: 'Active',
+        badge__inactive: 'Inactive',
+        badge__inProgress: 'In Progress',
+        badge__unconfigured: 'Unconfigured',
+        certificateLabel: 'Certificate',
+        descriptionLine1:
+          'Require members to sign in through your identity provider using their domain email. Members without a matching domain are unaffected.',
+        descriptionLine2:
+          'Anyone who signs in will be automatically added to this organization. New members will be assigned to {{role}}.',
+        descriptionLine2__noRole: 'Anyone who signs in will be automatically added to this organization.',
+        domainLabel: 'Domain',
+        issuerLabel: 'Issuer',
+        menuAction__activate: 'Activate',
+        menuAction__deactivate: 'Deactivate',
+        menuAction__edit: 'Edit',
+        menuAction__remove: 'Remove',
+        primaryButton__continueConfiguration: 'Continue configuration',
+        primaryButton__startConfiguration: 'Start configuration',
+        providerLabel: 'Provider',
+        signOnUrlLabel: 'Sign on URL',
+        title: 'SSO',
+      },
+      title: 'Security',
+    },
     start: {
       headerTitle__general: 'General',
       headerTitle__members: 'Members',

packages/shared/src/types/elementIds.ts

@@ -53,6 +53,7 @@ export type ProfileSectionId =
   | 'manageVerifiedDomains'
   | 'subscriptionsList'
   | 'paymentMethods'
+  | 'sso'
   | 'ssoStatus'
   | 'enableSso'
   | 'ssoDomain'
@@ -61,7 +62,13 @@ export type ProfileSectionId =
   | 'resetSso'
   | 'testSsoUrl'
   | 'testResults';
-export type ProfilePageId = 'account' | 'security' | 'organizationGeneral' | 'organizationMembers' | 'billing';
+export type ProfilePageId =
+  | 'account'
+  | 'security'
+  | 'organizationGeneral'
+  | 'organizationMembers'
+  | 'organizationSecurity'
+  | 'billing';
 
 export type UserPreviewId = 'userButton' | 'personalWorkspace';
 export type OrganizationPreviewId =

packages/shared/src/types/localization.ts

@@ -1130,6 +1130,35 @@ export type __internal_LocalizationResource = {
       messageLine2: LocalizationValue;
       successMessage: LocalizationValue;
     };
+    securityPage: {
+      title: LocalizationValue;
+      removeDialog: {
+        title: LocalizationValue;
+        subtitle: LocalizationValue;
+        confirmButton: LocalizationValue;
+      };
+      ssoSection: {
+        title: LocalizationValue;
+        badge__unconfigured: LocalizationValue;
+        badge__inProgress: LocalizationValue;
+        badge__active: LocalizationValue;
+        badge__inactive: LocalizationValue;
+        descriptionLine1: LocalizationValue;
+        descriptionLine2: LocalizationValue<'role'>;
+        descriptionLine2__noRole: LocalizationValue;
+        primaryButton__startConfiguration: LocalizationValue;
+        primaryButton__continueConfiguration: LocalizationValue;
+        providerLabel: LocalizationValue;
+        domainLabel: LocalizationValue;
+        signOnUrlLabel: LocalizationValue;
+        issuerLabel: LocalizationValue;
+        certificateLabel: LocalizationValue;
+        menuAction__edit: LocalizationValue;
+        menuAction__activate: LocalizationValue;
+        menuAction__deactivate: LocalizationValue;
+        menuAction__remove: LocalizationValue;
+      };
+    };
     membersPage: {
       detailsTitle__emptyRow: LocalizationValue;
       action__invite: LocalizationValue;

packages/ui/src/components/ConfigureSSO/ResetConnectionDialog.tsx

@@ -1,3 +1,4 @@
+import type { LocalizationKey } from '@/customizables';
 import { Col, descriptors, localizationKeys } from '@/customizables';
 import { Card } from '@/elements/Card';
 import { useCardState, withCardStateProvider } from '@/elements/contexts';
@@ -8,17 +9,19 @@ import { Modal } from '@/elements/Modal';
 import { useFormControl } from '@/ui/utils/useFormControl';
 import { handleError } from '@/utils/errorHandler';
 
-import { useConfigureSSO } from './ConfigureSSOContext';
-
 type ResetConnectionDialogProps = {
   isOpen: boolean;
   onClose: () => void;
   confirmationValue: string;
+  onDelete: () => Promise<unknown>;
+  contentRef: React.RefObject<HTMLDivElement>;
+  /** Defaults to the Reset copy; overridden when the dialog is reused for the Remove action. */
+  title?: LocalizationKey;
+  subtitle?: LocalizationKey;
+  confirmButtonLabel?: LocalizationKey;
 };
 
 export const ResetConnectionDialog = (props: ResetConnectionDialogProps): JSX.Element | null => {
-  const { contentRef } = useConfigureSSO();
-
   if (!props.isOpen) {
     return null;
   }
@@ -27,7 +30,7 @@ export const ResetConnectionDialog = (props: ResetConnectionDialogProps): JSX.El
     <Modal
       handleClose={props.onClose}
       canCloseModal={false}
-      portalRoot={contentRef}
+      portalRoot={props.contentRef}
       containerSx={t => ({
         alignItems: 'center',
         position: 'absolute',
@@ -44,9 +47,12 @@ export const ResetConnectionDialog = (props: ResetConnectionDialogProps): JSX.El
 };
 
 const ResetConnectionDialogContent = withCardStateProvider((props: ResetConnectionDialogProps) => {
-  const { onClose, confirmationValue } = props;
+  const { onClose, onDelete, confirmationValue } = props;
+  const title = props.title ?? localizationKeys('configureSSO.resetConnectionDialog.title');
+  const subtitle = props.subtitle ?? localizationKeys('configureSSO.resetConnectionDialog.subtitle');
+  const confirmButtonLabel =
+    props.confirmButtonLabel ?? localizationKeys('configureSSO.resetConnectionDialog.resetButton');
   const card = useCardState();
-  const { enterpriseConnection, mutations } = useConfigureSSO();
 
   const confirmationField = useFormControl('deleteConfirmation', '', {
     type: 'text',
@@ -60,18 +66,12 @@ const ResetConnectionDialogContent = withCardStateProvider((props: ResetConnecti
   const canSubmit = Boolean(confirmationValue && confirmationField.value === confirmationValue);
 
   const onSubmit = async () => {
-    if (!enterpriseConnection || !canSubmit) {
+    if (!canSubmit) {
       return;
     }
 
     try {
-      // Reset is a pure delete — no navigation. Dropping `hasConnection` breaks
-      // the active step's entry guard, so the wizard self-corrects to the
-      // furthest-reachable step. The mutation is already reverification-wrapped.
-      // No `useWizard()` here — that lets this dialog be triggered from ANY
-      // footer (including the nested SAML configure footers) without binding to
-      // a nested wizard.
-      await mutations.deleteConnection(enterpriseConnection.id);
+      await onDelete();
       onClose();
     } catch (err) {
       handleError(err as Error, [confirmationField], card.setError);
@@ -85,8 +85,8 @@ const ResetConnectionDialogContent = withCardStateProvider((props: ResetConnecti
     >
       <Card.Content sx={t => ({ textAlign: 'start', padding: t.sizes.$5 })}>
         <FormContainer
-          headerTitle={localizationKeys('configureSSO.resetConnectionDialog.title')}
-          headerSubtitle={localizationKeys('configureSSO.resetConnectionDialog.subtitle')}
+          headerTitle={title}
+          headerSubtitle={subtitle}
           sx={t => ({ gap: t.space.$4 })}
         >
           <Form.Root onSubmit={onSubmit}>
@@ -104,7 +104,7 @@ const ResetConnectionDialogContent = withCardStateProvider((props: ResetConnecti
                   block={false}
                   colorScheme='danger'
                   isDisabled={!canSubmit}
-                  localizationKey={localizationKeys('configureSSO.resetConnectionDialog.resetButton')}
+                  localizationKey={confirmButtonLabel}
                 />
                 <Form.ResetButton
                   elementDescriptor={descriptors.configureSSOResetConnectionDialogCancelButton}

packages/ui/src/components/ConfigureSSO/__tests__/ResetConnectionDialog.test.tsx

@@ -1,39 +1,26 @@
-import type { EnterpriseConnectionResource } from '@clerk/shared/types';
 import { describe, expect, it, vi } from 'vitest';
 
+import { localizationKeys } from '@/customizables';
 import { bindCreateFixtures } from '@/test/create-fixtures';
 import { render, screen, waitFor } from '@/test/utils';
 import { CardStateProvider } from '@/ui/elements/contexts';
 
-// The dialog no longer touches the wizard. On confirm it calls the
-// reverification-wrapped `mutations.deleteConnection(id)` directly — a pure
-// delete, no navigation — and the wizard self-corrects to the
-// furthest-reachable step once the active step's guard breaks. That lets the
-// dialog be triggered from ANY footer (including nested SAML configure footers)
-// without binding to a nested wizard.
-const deleteConnection = vi.fn();
-
-const connectionMockState = vi.hoisted(() => ({
-  current: { id: 'idn_connection_1' } as Partial<EnterpriseConnectionResource> | null,
-}));
-
-vi.mock('../ConfigureSSOContext', () => ({
-  useConfigureSSO: () => ({
-    enterpriseConnection: connectionMockState.current,
-    contentRef: { current: null },
-    // The dialog's confirm calls the reverification-wrapped `deleteConnection`
-    // mutation directly. No navigation — the wizard self-corrects.
-    mutations: { deleteConnection },
-  }),
-}));
-
 import { ResetConnectionDialog } from '../ResetConnectionDialog';
 
+const deleteConnection = vi.fn();
+
 const { createFixtures } = bindCreateFixtures('ConfigureSSO');
 
 const renderDialog = (
   wrapper: React.ComponentType<{ children?: React.ReactNode }>,
-  props: { isOpen?: boolean; onClose?: () => void; confirmationValue?: string } = {},
+  props: {
+    isOpen?: boolean;
+    onClose?: () => void;
+    confirmationValue?: string;
+    title?: ReturnType<typeof localizationKeys>;
+    subtitle?: ReturnType<typeof localizationKeys>;
+    confirmButtonLabel?: ReturnType<typeof localizationKeys>;
+  } = {},
 ) => {
   const onClose = props.onClose ?? vi.fn();
   const utils = render(
@@ -42,6 +29,11 @@ const renderDialog = (
         isOpen={props.isOpen ?? true}
         onClose={onClose}
         confirmationValue={props.confirmationValue ?? 'Acme Inc'}
+        onDelete={() => deleteConnection('idn_connection_1')}
+        contentRef={{ current: null }}
+        title={props.title}
+        subtitle={props.subtitle}
+        confirmButtonLabel={props.confirmButtonLabel}
       />
     </CardStateProvider>,
     { wrapper },
@@ -52,7 +44,6 @@ const renderDialog = (
 const resetMocks = () => {
   deleteConnection.mockReset();
   deleteConnection.mockResolvedValue(undefined);
-  connectionMockState.current = { id: 'idn_connection_1' };
 };
 
 describe('ResetConnectionDialog', () => {
@@ -81,6 +72,25 @@ describe('ResetConnectionDialog', () => {
     expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
   });
 
+  it('renders override copy when title, subtitle, and confirm label props are supplied', async () => {
+    resetMocks();
+    const { wrapper } = await createFixtures();
+    renderDialog(wrapper, {
+      confirmationValue: 'Acme Inc',
+      title: localizationKeys('organizationProfile.securityPage.removeDialog.title'),
+      subtitle: localizationKeys('organizationProfile.securityPage.removeDialog.subtitle'),
+      confirmButtonLabel: localizationKeys('organizationProfile.securityPage.removeDialog.confirmButton'),
+    });
+
+    expect(screen.getByRole('heading', { name: 'Remove SSO connection' })).toBeInTheDocument();
+    expect(screen.queryByRole('heading', { name: 'Reset connection' })).not.toBeInTheDocument();
+    expect(screen.getByText(/Are you sure you want to remove the connection\?/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Remove connection' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Reset connection' })).not.toBeInTheDocument();
+    // Type-to-confirm is unchanged by the override.
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+  });
+
   it('keeps Reset disabled while the input is empty', async () => {
     resetMocks();
     const { wrapper } = await createFixtures();

packages/ui/src/components/ConfigureSSO/elements/Step.tsx

@@ -206,11 +206,11 @@ FooterContinue.displayName = 'Step.Footer.Continue';
  * footer row, matching the prior destructive affordance.
  */
 const FooterReset = (): JSX.Element | null => {
-  const { organizationEnterpriseConnection: c } = useConfigureSSO();
+  const { enterpriseConnection, mutations, contentRef } = useConfigureSSO();
   const organization = __internal_useOrganizationBase();
   const [isOpen, setIsOpen] = useState(false);
 
-  if (!c.hasConnection) {
+  if (!enterpriseConnection) {
     return null;
   }
 
@@ -229,6 +229,8 @@ const FooterReset = (): JSX.Element | null => {
         isOpen={isOpen}
         onClose={() => setIsOpen(false)}
         confirmationValue={organization?.name ?? ''}
+        onDelete={() => mutations.deleteConnection(enterpriseConnection.id)}
+        contentRef={contentRef}
       />
     </>
   );

packages/ui/src/components/ConfigureSSO/steps/ConfirmationStep.tsx

@@ -254,6 +254,7 @@ const ConfigurationDetailsSection = (): JSX.Element => {
 };
 
 const ResetConnectionSection = (): JSX.Element => {
+  const { enterpriseConnection, mutations, contentRef } = useConfigureSSO();
   const { organization } = useOrganization();
   const [isOpen, setIsOpen] = useState(false);
 
@@ -277,6 +278,10 @@ const ResetConnectionSection = (): JSX.Element => {
         isOpen={isOpen}
         onClose={() => setIsOpen(false)}
         confirmationValue={organization?.name ?? ''}
+        // The confirmation step is only reachable with a connection, so the resource is set.
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        onDelete={() => mutations.deleteConnection(enterpriseConnection!.id)}
+        contentRef={contentRef}
       />
     </ProfileSection.Root>
   );