From 470ca4ad1e3fc81bf9741f1bed7e2f9da197cbb0 Mon Sep 17 00:00:00 2001 From: Iago Dahlem Lorensini Date: Thu, 28 May 2026 09:33:41 -0300 Subject: [PATCH 01/19] feat(ui): add ResetConnectionDialog component for ConfigureSSO Standalone modal dialog with type-to-confirm gating. Wraps the destructive delete flow (useReverification + deleteEnterpriseConnection + provider clear + wizard rewind to select-provider). Controlled via isOpen/onClose props with the confirmation value injected by the caller. Widens ConfigureSSOContext.setProvider to accept undefined so the dialog can clear the local provider selection after deleting the connection, and adds the configureSSO.resetConnectionDialog localization keys (and matching type entries in @clerk/shared) for the dialog copy. --- .changeset/sso-reset-dialog.md | 5 + packages/localizations/src/en-US.ts | 9 ++ packages/shared/src/types/localization.ts | 8 ++ .../ConfigureSSO/ConfigureSSOContext.tsx | 5 +- .../ConfigureSSO/ResetConnectionDialog.tsx | 112 ++++++++++++++++++ 5 files changed, 137 insertions(+), 2 deletions(-) create mode 100644 .changeset/sso-reset-dialog.md create mode 100644 packages/ui/src/components/ConfigureSSO/ResetConnectionDialog.tsx diff --git a/.changeset/sso-reset-dialog.md b/.changeset/sso-reset-dialog.md new file mode 100644 index 00000000000..a6c37916c27 --- /dev/null +++ b/.changeset/sso-reset-dialog.md @@ -0,0 +1,5 @@ +--- +'@clerk/ui': patch +--- + +Add ResetConnectionDialog component to the ConfigureSSO wizard. diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts index 6ee9ba5587c..d69179c4271 100644 --- a/packages/localizations/src/en-US.ts +++ b/packages/localizations/src/en-US.ts @@ -235,6 +235,15 @@ export const enUS: LocalizationResource = { navbar: { title: 'Configure Single Sign-On (SSO)', }, + resetConnectionDialog: { + cancelButton: 'Cancel', + confirmationFieldLabel: 'Type "{{name}}" below to continue', + confirmationFieldPlaceholder: '{{name}}', + resetButton: 'Reset connection', + subtitle: + 'Are you sure you want to reset the connection? This action is irreversible and you will have to configure all steps again', + title: 'Reset connection', + }, selectProviderStep: { title: 'Select your identity provider', subtitle: 'We’ll guide you through the detailed setup process next.', diff --git a/packages/shared/src/types/localization.ts b/packages/shared/src/types/localization.ts index 7964a4b4f6e..efd941ed8cf 100644 --- a/packages/shared/src/types/localization.ts +++ b/packages/shared/src/types/localization.ts @@ -1301,6 +1301,14 @@ export type __internal_LocalizationResource = { navbar: { title: LocalizationValue; }; + resetConnectionDialog: { + cancelButton: LocalizationValue; + confirmationFieldLabel: LocalizationValue<'name'>; + confirmationFieldPlaceholder: LocalizationValue<'name'>; + resetButton: LocalizationValue; + subtitle: LocalizationValue; + title: LocalizationValue; + }; selectProviderStep: { title: LocalizationValue; subtitle: LocalizationValue; diff --git a/packages/ui/src/components/ConfigureSSO/ConfigureSSOContext.tsx b/packages/ui/src/components/ConfigureSSO/ConfigureSSOContext.tsx index 51c217f17a3..fdda72f87fc 100644 --- a/packages/ui/src/components/ConfigureSSO/ConfigureSSOContext.tsx +++ b/packages/ui/src/components/ConfigureSSO/ConfigureSSOContext.tsx @@ -30,9 +30,10 @@ export interface ConfigureSSOData { provider: ProviderType | undefined; /** * Sets the local provider selection used by Select Provider before a - * connection has been created. + * connection has been created. Pass `undefined` to clear the selection + * (e.g. after deleting the connection from the reset dialog). */ - setProvider: (provider: ProviderType) => void; + setProvider: (provider: ProviderType | undefined) => void; /** * Ref to the scrollable content container of the wizard. */ diff --git a/packages/ui/src/components/ConfigureSSO/ResetConnectionDialog.tsx b/packages/ui/src/components/ConfigureSSO/ResetConnectionDialog.tsx new file mode 100644 index 00000000000..020f1cd61fb --- /dev/null +++ b/packages/ui/src/components/ConfigureSSO/ResetConnectionDialog.tsx @@ -0,0 +1,112 @@ +import { useReverification } from '@clerk/shared/react'; + +import { Col, localizationKeys } from '@/customizables'; +import { Card } from '@/elements/Card'; +import { useCardState, withCardStateProvider } from '@/elements/contexts'; +import { Form } from '@/elements/Form'; +import { FormButtonContainer } from '@/elements/FormButtons'; +import { FormContainer } from '@/elements/FormContainer'; +import { Modal } from '@/elements/Modal'; +import { useFormControl } from '@/ui/utils/useFormControl'; +import { handleError } from '@/utils/errorHandler'; + +import { useConfigureSSO } from './ConfigureSSOContext'; +import { useWizard } from './elements/Wizard'; + +type ResetConnectionDialogProps = { + isOpen: boolean; + onClose: () => void; + /** + * The string the user must type to enable the destructive submit button. + * Today this is the organization name; long-term it may swap to the + * connection's domain — the dialog stays agnostic so callers own the + * canonical value. + */ + confirmationValue: string; +}; + +const ResetConnectionDialogContent = withCardStateProvider((props: ResetConnectionDialogProps) => { + const { onClose, confirmationValue } = props; + const card = useCardState(); + const { enterpriseConnection, deleteEnterpriseConnection, setProvider } = useConfigureSSO(); + const { goToStep } = useWizard(); + + const deleteConnection = useReverification((id: string) => deleteEnterpriseConnection(id)); + + const confirmationField = useFormControl('deleteConfirmation', '', { + type: 'text', + label: localizationKeys('configureSSO.resetConnectionDialog.confirmationFieldLabel', { + name: confirmationValue, + }), + isRequired: true, + placeholder: confirmationValue, + }); + + const canSubmit = Boolean(confirmationValue && confirmationField.value === confirmationValue); + + const onSubmit = async () => { + if (!enterpriseConnection || !canSubmit) { + return; + } + + try { + await deleteConnection(enterpriseConnection.id); + setProvider(undefined); + await goToStep('select-provider'); + onClose(); + } catch (err) { + handleError(err as Error, [confirmationField], card.setError); + } + }; + + return ( + + + ({ gap: t.space.$4 })} + > + + + + + + + + + + + + + + + ); +}); + +export const ResetConnectionDialog = (props: ResetConnectionDialogProps): JSX.Element | null => { + if (!props.isOpen) { + return null; + } + + return ( + + + + ); +}; From f0163de0ad6016fadedb3162dd3d377573ef2138 Mon Sep 17 00:00:00 2001 From: Iago Dahlem Lorensini Date: Thu, 28 May 2026 17:03:59 -0300 Subject: [PATCH 02/19] feat(ui): wire ResetConnectionDialog into ConfigureSSO confirmation step Replaces the inline reset confirmation card (Action.Root / Action.Card pattern) with the new ResetConnectionDialog modal. The destructive button now opens the dialog instead of expanding an inline form; the dialog handles type-to-confirm, reverification, deletion, and wizard rewind internally. --- .../sso-confirmation-wire-reset-dialog.md | 5 + .../ConfigureSSO/steps/ConfirmationStep.tsx | 131 ++++-------------- 2 files changed, 30 insertions(+), 106 deletions(-) create mode 100644 .changeset/sso-confirmation-wire-reset-dialog.md diff --git a/.changeset/sso-confirmation-wire-reset-dialog.md b/.changeset/sso-confirmation-wire-reset-dialog.md new file mode 100644 index 00000000000..65b846aa9d3 --- /dev/null +++ b/.changeset/sso-confirmation-wire-reset-dialog.md @@ -0,0 +1,5 @@ +--- +'@clerk/ui': patch +--- + +Replace the inline ConfigureSSO reset confirmation with the ResetConnectionDialog component. diff --git a/packages/ui/src/components/ConfigureSSO/steps/ConfirmationStep.tsx b/packages/ui/src/components/ConfigureSSO/steps/ConfirmationStep.tsx index e7da25dbd4f..e3e5c19a0f8 100644 --- a/packages/ui/src/components/ConfigureSSO/steps/ConfirmationStep.tsx +++ b/packages/ui/src/components/ConfigureSSO/steps/ConfirmationStep.tsx @@ -1,23 +1,17 @@ -import { useReverification } from '@clerk/shared/react'; +import { useOrganization, useReverification } from '@clerk/shared/react'; import { useState } from 'react'; import { Badge, Col, descriptors, Flex, Flow, Grid, Link, localizationKeys, Text } from '@/customizables'; -import { Action } from '@/elements/Action'; -import { useActionContext } from '@/elements/Action/ActionRoot'; -import { useCardState, withCardStateProvider } from '@/elements/contexts'; -import { Form } from '@/elements/Form'; -import { FormButtons } from '@/elements/FormButtons'; -import type { FormProps } from '@/elements/FormContainer'; -import { FormContainer } from '@/elements/FormContainer'; +import { useCardState } from '@/elements/contexts'; import { ProfileSection } from '@/elements/Section'; import { Switch } from '@/elements/Switch'; import { mqu } from '@/styledSystem'; -import { useFormControl } from '@/ui/utils/useFormControl'; import { handleError } from '@/utils/errorHandler'; import { useConfigureSSO } from '../ConfigureSSOContext'; import { Step } from '../elements/Step'; import { useWizard } from '../elements/Wizard'; +import { ResetConnectionDialog } from '../ResetConnectionDialog'; export const ConfirmationStep = (): JSX.Element => { return ( @@ -31,7 +25,7 @@ export const ConfirmationStep = (): JSX.Element => { - + @@ -226,109 +220,34 @@ const ConfigurationDetailsSection = (): JSX.Element => { ); }; -const ResetConnectionForm = withCardStateProvider((props: FormProps) => { - const { onReset, onSuccess } = props; - const card = useCardState(); - const { enterpriseConnection, deleteEnterpriseConnection } = useConfigureSSO(); - const { goToStep } = useWizard(); - - const deleteConnection = useReverification((id: string) => deleteEnterpriseConnection(id)); - - const confirmationField = useFormControl('deleteConfirmation', '', { - type: 'text', - label: localizationKeys('configureSSO.confirmation.resetSection.confirmationFieldLabel', { - name: enterpriseConnection?.name ?? '', - }), - isRequired: true, - placeholder: enterpriseConnection?.name, - }); - - const canSubmit = Boolean(enterpriseConnection?.name && confirmationField.value === enterpriseConnection.name); - - const onSubmit = async () => { - if (!enterpriseConnection || !canSubmit) { - return; - } - - try { - await deleteConnection(enterpriseConnection.id); - onSuccess(); - await goToStep('select-provider'); - } catch (err) { - handleError(err as Error, [confirmationField], card.setError); - } - }; - - return ( - ({ gap: t.space.$0x5 })} - > - - - - - - - - - - - ); -}); - -const ResetConnectionScreen = (): JSX.Element => { - const { close } = useActionContext(); - return ( - - ); -}; +const ResetConnectionRow = (): JSX.Element => { + const { organization } = useOrganization(); + const [isOpen, setIsOpen] = useState(false); -const ResetConnectionSection = (): JSX.Element => { return ( - - - - - - - - - - - - - - - + + setIsOpen(true)} + /> + + setIsOpen(false)} + confirmationValue={organization?.name ?? ''} + /> ); }; From b95f5d7cad047dfeeabb39230021d252339db61b Mon Sep 17 00:00:00 2001 From: Iago Dahlem Lorensini Date: Thu, 28 May 2026 17:27:02 -0300 Subject: [PATCH 03/19] fix(ui): scope ResetConnectionDialog backdrop to the ConfigureSSO container MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Portals the dialog into the wizard's content container instead of the document body and switches the backdrop to absolute positioning so it stays inside the ConfigureSSO card. Disables the modal-context toggle so the auto-rendered close button is suppressed — the Cancel button is the explicit dismiss for the destructive flow. --- .../ConfigureSSO/ResetConnectionDialog.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/components/ConfigureSSO/ResetConnectionDialog.tsx b/packages/ui/src/components/ConfigureSSO/ResetConnectionDialog.tsx index 020f1cd61fb..9a9d0a648ac 100644 --- a/packages/ui/src/components/ConfigureSSO/ResetConnectionDialog.tsx +++ b/packages/ui/src/components/ConfigureSSO/ResetConnectionDialog.tsx @@ -97,6 +97,8 @@ const ResetConnectionDialogContent = withCardStateProvider((props: ResetConnecti }); export const ResetConnectionDialog = (props: ResetConnectionDialogProps): JSX.Element | null => { + const { contentRef } = useConfigureSSO(); + if (!props.isOpen) { return null; } @@ -104,7 +106,15 @@ export const ResetConnectionDialog = (props: ResetConnectionDialogProps): JSX.El return ( From be99f42b850b8ab6a6be199bd438f9d842e3e8b7 Mon Sep 17 00:00:00 2001 From: Iago Dahlem Lorensini Date: Fri, 29 May 2026 10:59:00 -0300 Subject: [PATCH 04/19] style(ui): polish ResetConnectionDialog backdrop and card layout Backdrop now uses a transparent fill plus backdrop-filter blur so the wizard chrome shows through without an opaque tint. Card switches to a tighter border radius, start-aligned text, and reduced padding to match the design spec for the inline reset confirmation. --- .../ConfigureSSO/ResetConnectionDialog.tsx | 56 ++++++++++--------- .../ConfigureSSO/steps/ConfirmationStep.tsx | 1 + 2 files changed, 30 insertions(+), 27 deletions(-) diff --git a/packages/ui/src/components/ConfigureSSO/ResetConnectionDialog.tsx b/packages/ui/src/components/ConfigureSSO/ResetConnectionDialog.tsx index 9a9d0a648ac..d76a6689396 100644 --- a/packages/ui/src/components/ConfigureSSO/ResetConnectionDialog.tsx +++ b/packages/ui/src/components/ConfigureSSO/ResetConnectionDialog.tsx @@ -25,6 +25,33 @@ type ResetConnectionDialogProps = { confirmationValue: string; }; +export const ResetConnectionDialog = (props: ResetConnectionDialogProps): JSX.Element | null => { + const { contentRef } = useConfigureSSO(); + + if (!props.isOpen) { + return null; + } + + return ( + ({ + alignItems: 'center', + position: 'absolute', + inset: 0, + width: 'auto', + height: 'auto', + backgroundColor: 'inherit', + backdropFilter: `blur(${t.sizes.$2})`, + })} + > + + + ); +}; + const ResetConnectionDialogContent = withCardStateProvider((props: ResetConnectionDialogProps) => { const { onClose, confirmationValue } = props; const card = useCardState(); @@ -60,8 +87,8 @@ const ResetConnectionDialogContent = withCardStateProvider((props: ResetConnecti }; return ( - - + ({ borderRadius: t.radii.$md })}> + ({ textAlign: 'start', padding: t.sizes.$5 })}> ); }); - -export const ResetConnectionDialog = (props: ResetConnectionDialogProps): JSX.Element | null => { - const { contentRef } = useConfigureSSO(); - - if (!props.isOpen) { - return null; - } - - return ( - - - - ); -}; diff --git a/packages/ui/src/components/ConfigureSSO/steps/ConfirmationStep.tsx b/packages/ui/src/components/ConfigureSSO/steps/ConfirmationStep.tsx index e3e5c19a0f8..c5569809bd3 100644 --- a/packages/ui/src/components/ConfigureSSO/steps/ConfirmationStep.tsx +++ b/packages/ui/src/components/ConfigureSSO/steps/ConfirmationStep.tsx @@ -243,6 +243,7 @@ const ResetConnectionRow = (): JSX.Element => { onClick={() => setIsOpen(true)} /> + setIsOpen(false)} From bed41be3e16aa07bf8e92b1647056fd6a0b450f1 Mon Sep 17 00:00:00 2001 From: Iago Dahlem Lorensini Date: Fri, 29 May 2026 10:59:22 -0300 Subject: [PATCH 05/19] fix(ui): pass OrganizationProfile contentRef into ConfigureSSO The OrganizationProfile self-serve SSO page was creating its own contentRef that diverged from the ProfileCard content ref. ConfigureSSO needs the same container ref to portal child modals (ResetConnectionDialog) into the wizard chrome instead of the document body, so the SSO page now receives the shared ref from the surrounding routes and forwards it down. --- .../OrganizationProfile/OrganizationProfileRoutes.tsx | 8 ++++++-- .../OrganizationProfile/OrganizationSelfServeSSOPage.tsx | 8 +++++--- packages/ui/src/components/OrganizationProfile/index.tsx | 3 ++- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationProfileRoutes.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationProfileRoutes.tsx index 314f410c077..6711bfb15d8 100644 --- a/packages/ui/src/components/OrganizationProfile/OrganizationProfileRoutes.tsx +++ b/packages/ui/src/components/OrganizationProfile/OrganizationProfileRoutes.tsx @@ -43,7 +43,11 @@ const OrganizationSelfServeSSOPage = lazy(() => })), ); -export const OrganizationProfileRoutes = () => { +type OrganizationProfileRoutesProps = { + contentRef: React.RefObject; +}; + +export const OrganizationProfileRoutes = ({ contentRef }: OrganizationProfileRoutesProps) => { const { pages, isMembersPageRoot, @@ -155,7 +159,7 @@ export const OrganizationProfileRoutes = () => { - + diff --git a/packages/ui/src/components/OrganizationProfile/OrganizationSelfServeSSOPage.tsx b/packages/ui/src/components/OrganizationProfile/OrganizationSelfServeSSOPage.tsx index ca506f95b28..9086097f711 100644 --- a/packages/ui/src/components/OrganizationProfile/OrganizationSelfServeSSOPage.tsx +++ b/packages/ui/src/components/OrganizationProfile/OrganizationSelfServeSSOPage.tsx @@ -1,11 +1,13 @@ import { useOrganization } from '@clerk/shared/react'; -import { useRef } from 'react'; import { ConfigureSSOContent } from '../ConfigureSSO/ConfigureSSO'; -export const OrganizationSelfServeSSOPage = () => { +type OrganizationSelfServeSSOPageProps = { + contentRef: React.RefObject; +}; + +export const OrganizationSelfServeSSOPage = ({ contentRef }: OrganizationSelfServeSSOPageProps) => { const { organization } = useOrganization(); - const contentRef = useRef(null); if (!organization) { // We should never reach this point, but we'll return null to make TS happy diff --git a/packages/ui/src/components/OrganizationProfile/index.tsx b/packages/ui/src/components/OrganizationProfile/index.tsx index 57bbf21672b..287301dcfce 100644 --- a/packages/ui/src/components/OrganizationProfile/index.tsx +++ b/packages/ui/src/components/OrganizationProfile/index.tsx @@ -39,6 +39,7 @@ const OrganizationProfileInternal = () => { const AuthenticatedRoutes = withCoreUserGuard(() => { const contentRef = React.useRef(null); + return ( ({ display: 'grid', gridTemplateColumns: '1fr 3fr', height: t.sizes.$176, overflow: 'hidden' })} @@ -49,7 +50,7 @@ const AuthenticatedRoutes = withCoreUserGuard(() => { contentRef={contentRef} scrollBoxId={ORGANIZATION_PROFILE_CARD_SCROLLBOX_ID} > - + From 97e1d3826a965cdb05e50dad50b518a4ae73dc5c Mon Sep 17 00:00:00 2001 From: Iago Dahlem Lorensini Date: Fri, 29 May 2026 11:13:33 -0300 Subject: [PATCH 06/19] feat(ui): restyle ConfigureSSO confirmation step Unifies the SSO Successfully configured title with the status badge, lays out configuration details in a two-column grid, swaps the configure-again and reset connection actions to dedicated outlined and destructive buttons, and adds a sticky inactive banner inside the step footer when the connection is disabled. --- .changeset/sso-confirmation-restyle.md | 5 + packages/localizations/src/en-US.ts | 5 +- packages/shared/src/types/localization.ts | 3 + .../ConfigureSSO/steps/ConfirmationStep.tsx | 298 +++++++++++------- 4 files changed, 190 insertions(+), 121 deletions(-) create mode 100644 .changeset/sso-confirmation-restyle.md diff --git a/.changeset/sso-confirmation-restyle.md b/.changeset/sso-confirmation-restyle.md new file mode 100644 index 00000000000..e328f544a11 --- /dev/null +++ b/.changeset/sso-confirmation-restyle.md @@ -0,0 +1,5 @@ +--- +'@clerk/ui': patch +--- + +Restyle the ConfigureSSO confirmation step with a unified header, two-column details layout, dedicated Configure again and Reset connection buttons, and an inactive-state banner. diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts index d69179c4271..5ac237a6cd2 100644 --- a/packages/localizations/src/en-US.ts +++ b/packages/localizations/src/en-US.ts @@ -225,7 +225,10 @@ export const enUS: LocalizationResource = { statusSection: { activeBadge: 'Active', inactiveBadge: 'Inactive', - title: 'SSO Status', + title: 'SSO Successfully configured', + }, + inactiveBanner: { + title: 'SSO is inactive and you need to enable it to authenticate', }, }, missingManageEnterpriseConnectionsPermission: { diff --git a/packages/shared/src/types/localization.ts b/packages/shared/src/types/localization.ts index efd941ed8cf..ba4e114c4b9 100644 --- a/packages/shared/src/types/localization.ts +++ b/packages/shared/src/types/localization.ts @@ -1799,6 +1799,9 @@ export type __internal_LocalizationResource = { confirmationFieldLabel: LocalizationValue<'name'>; submitButton: LocalizationValue; }; + inactiveBanner: { + title: LocalizationValue; + }; }; }; apiKeys: { diff --git a/packages/ui/src/components/ConfigureSSO/steps/ConfirmationStep.tsx b/packages/ui/src/components/ConfigureSSO/steps/ConfirmationStep.tsx index c5569809bd3..2a02d9d92ce 100644 --- a/packages/ui/src/components/ConfigureSSO/steps/ConfirmationStep.tsx +++ b/packages/ui/src/components/ConfigureSSO/steps/ConfirmationStep.tsx @@ -1,11 +1,22 @@ import { useOrganization, useReverification } from '@clerk/shared/react'; import { useState } from 'react'; -import { Badge, Col, descriptors, Flex, Flow, Grid, Link, localizationKeys, Text } from '@/customizables'; +import { + Badge, + Button, + Col, + descriptors, + Flex, + Flow, + Grid, + Heading, + Link, + localizationKeys, + Text, +} from '@/customizables'; import { useCardState } from '@/elements/contexts'; -import { ProfileSection } from '@/elements/Section'; import { Switch } from '@/elements/Switch'; -import { mqu } from '@/styledSystem'; +import { Alert } from '@/ui/elements/Alert'; import { handleError } from '@/utils/errorHandler'; import { useConfigureSSO } from '../ConfigureSSOContext'; @@ -14,53 +25,97 @@ import { useWizard } from '../elements/Wizard'; import { ResetConnectionDialog } from '../ResetConnectionDialog'; export const ConfirmationStep = (): JSX.Element => { + const { enterpriseConnection } = useConfigureSSO(); + const isActive = !!enterpriseConnection?.active; + return ( - ({ paddingInline: t.space.$8, paddingBlock: t.space.$4 })}> - - - - - + ({ paddingInline: t.space.$6, paddingBlock: t.space.$5, gap: t.space.$5 })}> + + - + + {!isActive && ( + + )} + ); }; -const SsoStatusSection = (): JSX.Element => { - const { enterpriseConnection } = useConfigureSSO(); - const isActive = !!enterpriseConnection?.active; +type StatusHeaderProps = { + isActive: boolean; +}; +const StatusHeader = ({ isActive }: StatusHeaderProps): JSX.Element => { return ( - ({ + gap: t.space.$3, + paddingBlockEnd: t.space.$4, + borderBottomWidth: t.borderWidths.$normal, + borderBottomStyle: t.borderStyles.$solid, + borderBottomColor: t.colors.$borderAlpha100, + })} > - - - - + + + ); }; -const EnableSsoSection = (): JSX.Element => { +const DetailsGrid = (): JSX.Element => { + return ( + ({ + width: '100%', + rowGap: t.space.$4, + columnGap: t.space.$4, + alignItems: 'center', + gridTemplateColumns: 'minmax(160px, 220px) minmax(0, 1fr)', + })} + > + + + + + + + ); +}; + +const RowLabel = ({ localizationKey }: { localizationKey: ReturnType }): JSX.Element => ( + +); + +const EnableSsoRow = (): JSX.Element => { const { enterpriseConnection, updateEnterpriseConnection } = useConfigureSSO(); const card = useCardState(); @@ -93,22 +148,19 @@ const EnableSsoSection = (): JSX.Element => { }; return ( - ({ border: 0, paddingBlock: t.space.$2 })} - > + <> + void onActiveChange(active)} aria-label='Enable SSO' /> - + ); }; -const DomainSection = (): JSX.Element | null => { +const DomainRow = (): JSX.Element | null => { const { enterpriseConnection } = useConfigureSSO(); const domain = enterpriseConnection?.domains?.[0]; @@ -118,11 +170,8 @@ const DomainSection = (): JSX.Element | null => { } return ( - + <> + { whiteSpace: 'nowrap', textOverflow: 'ellipsis', textDecoration: 'underline', + minWidth: 0, }} > {domain} - + ); }; -const ConfigurationDetailsSection = (): JSX.Element => { +const ConfigurationDetailsRow = (): JSX.Element => { const { enterpriseConnection } = useConfigureSSO(); - const { goToStep } = useWizard(); // This will later be expanded to support OIDC connections as well const samlConnection = enterpriseConnection?.samlConnection; return ( - - - + + ({ + width: '100%', + rowGap: t.space.$3, + columnGap: t.space.$3, + alignItems: 'center', + gridTemplateColumns: 'minmax(120px, 160px) minmax(0, 1fr)', + })} + > + + - - - {samlConnection?.idpSsoUrl} - - - - - {samlConnection?.idpEntityId} - - - - - {samlConnection?.idpCertificate} - - - - ({ marginTop: t.space.$2, paddingInlineStart: 0, marginInline: '-10px' })} + {samlConnection?.idpSsoUrl} + + + + - + + + + {samlConnection?.idpCertificate} + + + + ); +}; + +const ConfigureAgainRow = (): JSX.Element => { + const { goToStep } = useWizard(); + + return ( + <> + + ({ + paddingBlock: t.space.$2, + borderBottomWidth: t.borderWidths.$normal, + borderBottomStyle: t.borderStyles.$solid, + borderBottomColor: t.colors.$borderAlpha100, + gridColumn: '2 / -1', + })} + > + +