feat(ui): ResetConnectionDialog + ConfigureSSO confirmation restyle#8706
Draft
iagodahlem wants to merge 8 commits into
Draft
feat(ui): ResetConnectionDialog + ConfigureSSO confirmation restyle#8706iagodahlem wants to merge 8 commits into
iagodahlem wants to merge 8 commits into
Conversation
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.
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.
…tainer 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.
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.
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.
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.
Covers the type-to-confirm gating, cancel and reset interactions, and the successful submit chain (delete + provider clear + wizard rewind + onClose).
Lets a step render an inline badge next to the title without crowding the right-aligned children slot. The SSO confirmation step now passes its active status badge through this prop instead of layering its own header component inside the body.
🦋 Changeset detectedLatest commit: 929090b The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| '@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. |
Member
There was a problem hiding this comment.
We can keep all in the same changeset for a single patch on clerk/ui + use pnpm run changeset for the file naming convention
then separate those items with bullet points
| }; | ||
|
|
||
| describe('ResetConnectionDialog', () => { | ||
| it('returns null when isOpen is false', async () => { |
Member
There was a problem hiding this comment.
Suggested change
| it('returns null when isOpen is false', async () => { | |
| it('does not render when `isOpen` is `false`', async () => { |
| }); | ||
| }); | ||
|
|
||
| it('does not delete when the active enterprise connection is missing', async () => { |
Member
There was a problem hiding this comment.
Is there a case for it? Once we select the provider, then the connection gets created
I thought of not displaying this button if the connection doesn't exist
Comment on lines
32
to
+36
| * 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; |
Member
There was a problem hiding this comment.
I think we'll have to adjust this JSDocs based on the new flow
Once the user selects the provider, then the connection already gets created for that organization
Previously we were relying on verifying the email address, to then create the connection, so I think the comment is just stale
Comment on lines
+19
to
+24
| /** | ||
| * 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. | ||
| */ |
Member
There was a problem hiding this comment.
Suggested change
| /** | |
| * 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. | |
| */ |
I believe it's fine if we remove this, especially if we want to change later the underlying value used for confirmation - the prop has enough semantics
| const { enterpriseConnection, deleteEnterpriseConnection, setProvider } = useConfigureSSO(); | ||
| const { goToStep } = useWizard(); | ||
|
|
||
| const deleteConnection = useReverification((id: string) => deleteEnterpriseConnection(id)); |
Member
There was a problem hiding this comment.
Do we need reverification here? I'm not sure if all FAPI mutations rely on it
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
<ResetConnectionDialog />— modal-based, type-to-confirm gated, scoped to the ConfigureSSO wizard chrome viacontentRefportal. Wraps the destructive flow:useReverification(user.deleteEnterpriseConnection) → setProvider(undefined) → goToStep('select-provider').Step.Headerwith inline status badge, two-column details grid, outlinedConfigure again, destructiveReset connectionbutton, sticky inactive footer banner.badgeprop toStep.Headerso steps can render an inline status pill next to the title without crowding the right-alignedchildrenslot.OrganizationProfileso it forwards itsProfileCardcontentRefdown toConfigureSSO— required for the dialog to portal into the wizard chrome (instead of the document body) when embedded under<OrganizationProfile />.<ResetConnectionDialog />covering type-to-confirm gating, cancel, and the successful submit chain.Linear: ORGS-1588. Follow-up commits on this branch will add the wizard-wide reset entry for ORGS-1550 before this PR exits draft.
Test plan
SSO Successfully configured+Inactivebadge inline, two-column details (Enable SSO, Domain, Configuration details), outlinedConfigure again, destructive solidReset connection, sticky info bannerSSO is inactive and you need to enable it to authenticateat the bottom.Activebadge, no inactive banner.<OrganizationProfile />: dialog still portals into the wizard chrome, not the page body.pnpm vitest run packages/ui/src/components/ConfigureSSO/__tests__/ResetConnectionDialog.test.tsxgreen (8/8).