Uh oh!
There was an error while loading. Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork 469
feat(ui,shared,localizations): Delete organization domains in self-serve SSO#8866
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
LauraBeatris
merged 12 commits into
main
from
laura/orgs-1623-sdk-add-support-for-removing-domainsJun 17, 2026
+407
−84
Merged
Changes from all commits
Commits
Show all changes
12 commits
Select commit
Hold shift + click to select a range
21470c6
Allow patching connection with domains
LauraBeatris b3f9f11
Add first draft for delete dialog
LauraBeatris 1176ba3
Add changeset
LauraBeatris b1ac6d1
Remove certificate from confirmation and security page
LauraBeatris bb04ce9
Fix text color of button
LauraBeatris 6245f6e
Update `name` to optional on create connection
LauraBeatris 65a4a88
Fix changeset
LauraBeatris e54bbd4
Add UI test for removal error
LauraBeatris 797205a
Fix unit tests for `createConnection`
LauraBeatris 1a03ffc
Disable remove button with tooltip
LauraBeatris bb9f220
Fix patch connection logic
LauraBeatris a9de041
Move patch domains on attempt effect
LauraBeatris File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Uh oh!
There was an error while loading. Please reload this page.
Jump to
Jump to file
Failed to load files.
Loading
Uh oh!
There was an error while loading. Please reload this page.
Diff view
Diff view
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@clerk/localizations': patch | ||
| '@clerk/shared': patch | ||
| '@clerk/ui': patch | ||
| --- | ||
| Add confirmation dialog for organization domain deletion as part of self-serve SSO |
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
20 changes: 18 additions & 2 deletions
20 packages/shared/src/react/hooks/useOrganizationDomains.tsx
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
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
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
109 changes: 109 additions & 0 deletions
109 packages/ui/src/components/ConfigureSSO/RemoveDomainDialog.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| import { useMemo } from 'react'; | ||
| import { Col, descriptors, 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 { handleError } from '@/utils/errorHandler'; | ||
| type RemoveDomainDialogProps = { | ||
| isOpen: boolean; | ||
| onClose: () => void; | ||
| domain: string; | ||
| isConnectionActive: boolean; | ||
| onRemove: () => Promise<unknown>; | ||
| contentRef: React.RefObject<HTMLDivElement>; | ||
| }; | ||
| export const RemoveDomainDialog = (props: RemoveDomainDialogProps): JSX.Element | null => { | ||
| if (!props.isOpen) { | ||
| return null; | ||
| } | ||
| return ( | ||
| <Modal | ||
| handleClose={props.onClose} | ||
| canCloseModal={false} | ||
| portalRoot={props.contentRef} | ||
| containerSx={t => ({ | ||
| alignItems: 'center', | ||
| position: 'absolute', | ||
| inset: 0, | ||
| width: 'auto', | ||
| height: 'auto', | ||
| backgroundColor: 'inherit', | ||
| backdropFilter: `blur(${t.sizes.$2})`, | ||
| })} | ||
| > | ||
| <RemoveDomainDialogContent {...props} /> | ||
| </Modal> | ||
| ); | ||
| }; | ||
| const RemoveDomainDialogContent = withCardStateProvider((props: RemoveDomainDialogProps) => { | ||
| const { onClose, onRemove } = props; | ||
| const card = useCardState(); | ||
| const subtitle = useMemo( | ||
| () => | ||
| props.isConnectionActive | ||
| ? localizationKeys('configureSSO.organizationDomainsStep.removeDomainDialog.subtitle__active', { | ||
| domain: props.domain, | ||
| }) | ||
| : localizationKeys('configureSSO.organizationDomainsStep.removeDomainDialog.subtitle__inactive', { | ||
| domain: props.domain, | ||
| }), | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| [], | ||
| ); | ||
| const onSubmit = async () => { | ||
| try { | ||
| await onRemove(); | ||
| onClose(); | ||
| } catch (err) { | ||
| handleError(err as Error, [], card.setError); | ||
| } | ||
| }; | ||
| return ( | ||
| <Card.Root | ||
| elementDescriptor={descriptors.configureSSORemoveDomainDialog} | ||
| sx={t => ({ borderRadius: t.radii.$md })} | ||
| > | ||
| <Card.Content sx={t => ({ textAlign: 'start', padding: t.sizes.$5 })}> | ||
| <FormContainer | ||
| headerTitle={localizationKeys('configureSSO.organizationDomainsStep.removeDomainDialog.title')} | ||
| headerSubtitle={subtitle} | ||
| sx={t => ({ gap: t.space.$4 })} | ||
| > | ||
| <Form.Root onSubmit={onSubmit}> | ||
| <Col gap={4}> | ||
| <FormButtonContainer> | ||
| <Form.SubmitButton | ||
| elementDescriptor={descriptors.configureSSORemoveDomainDialogSubmitButton} | ||
| block={false} | ||
| colorScheme='danger' | ||
| localizationKey={localizationKeys( | ||
| 'configureSSO.organizationDomainsStep.removeDomainDialog.removeButton', | ||
| )} | ||
| /> | ||
| <Form.ResetButton | ||
| elementDescriptor={descriptors.configureSSORemoveDomainDialogCancelButton} | ||
| block={false} | ||
| localizationKey={localizationKeys( | ||
| 'configureSSO.organizationDomainsStep.removeDomainDialog.cancelButton', | ||
| )} | ||
| onClick={onClose} | ||
| /> | ||
| </FormButtonContainer> | ||
| </Col> | ||
| </Form.Root> | ||
| </FormContainer> | ||
| </Card.Content> | ||
| </Card.Root> | ||
| ); | ||
| }); | ||
136 changes: 136 additions & 0 deletions
136 packages/ui/src/components/ConfigureSSO/__tests__/RemoveDomainDialog.test.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| import { ClerkAPIResponseError } from '@clerk/shared/error'; | ||
| import { describe, expect, it, vi } from 'vitest'; | ||
| import { bindCreateFixtures } from '@/test/create-fixtures'; | ||
| import { render, screen, waitFor } from '@/test/utils'; | ||
| import { CardStateProvider } from '@/ui/elements/contexts'; | ||
| import { RemoveDomainDialog } from '../RemoveDomainDialog'; | ||
| const onRemove = vi.fn(); | ||
| const { createFixtures } = bindCreateFixtures('ConfigureSSO'); | ||
| const renderDialog = ( | ||
| wrapper: React.ComponentType<{ children?: React.ReactNode }>, | ||
| props: { | ||
| isOpen?: boolean; | ||
| onClose?: () => void; | ||
| domain?: string; | ||
| isConnectionActive?: boolean; | ||
| } = {}, | ||
| ) => { | ||
| const onClose = props.onClose ?? vi.fn(); | ||
| const utils = render( | ||
| <CardStateProvider> | ||
| <RemoveDomainDialog | ||
| isOpen={props.isOpen ?? true} | ||
| onClose={onClose} | ||
| domain={props.domain ?? 'acme.com'} | ||
| isConnectionActive={props.isConnectionActive ?? false} | ||
| onRemove={() => onRemove()} | ||
| contentRef={{ current: null }} | ||
| /> | ||
| </CardStateProvider>, | ||
| { wrapper }, | ||
| ); | ||
| return { ...utils, onClose }; | ||
| }; | ||
| const resetMocks = () => { | ||
| onRemove.mockReset(); | ||
| onRemove.mockResolvedValue(undefined); | ||
| }; | ||
| describe('RemoveDomainDialog', () => { | ||
| it('does not render when `isOpen` is `false`', async () => { | ||
| resetMocks(); | ||
| const { wrapper } = await createFixtures(); | ||
| renderDialog(wrapper, { isOpen: false }); | ||
| expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); | ||
| expect(screen.queryByRole('heading', { name: 'Removing domain' })).not.toBeInTheDocument(); | ||
| }); | ||
| it('renders the dialog chrome and actions when isOpen is true', async () => { | ||
| resetMocks(); | ||
| const { wrapper } = await createFixtures(); | ||
| renderDialog(wrapper, { domain: 'acme.com' }); | ||
| expect(screen.getByRole('dialog')).toBeInTheDocument(); | ||
| expect(screen.getByRole('heading', { name: 'Removing domain' })).toBeInTheDocument(); | ||
| expect(screen.getByRole('button', { name: 'Remove domain' })).toBeInTheDocument(); | ||
| expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument(); | ||
| }); | ||
| it('warns about sign-in impact when the connection is active', async () => { | ||
| resetMocks(); | ||
| const { wrapper } = await createFixtures(); | ||
| renderDialog(wrapper, { domain: 'acme.com', isConnectionActive: true }); | ||
| expect(screen.getByText(/Users won't be able to sign-in with acme\.com anymore/i)).toBeInTheDocument(); | ||
| }); | ||
| it('shows the neutral copy when the connection is inactive', async () => { | ||
| resetMocks(); | ||
| const { wrapper } = await createFixtures(); | ||
| renderDialog(wrapper, { domain: 'acme.com', isConnectionActive: false }); | ||
| expect(screen.getByText("You're about to remove acme.com from this enterprise connection.")).toBeInTheDocument(); | ||
| expect(screen.queryByText(/Users won't be able to sign-in/i)).not.toBeInTheDocument(); | ||
| }); | ||
| it('invokes onClose when Cancel is clicked', async () => { | ||
| resetMocks(); | ||
| const onClose = vi.fn(); | ||
| const { wrapper } = await createFixtures(); | ||
| const { userEvent } = renderDialog(wrapper, { onClose }); | ||
| await userEvent.click(screen.getByRole('button', { name: 'Cancel' })); | ||
| expect(onClose).toHaveBeenCalledTimes(1); | ||
| expect(onRemove).not.toHaveBeenCalled(); | ||
| }); | ||
| it('awaits the removal and closes on a successful submit', async () => { | ||
| resetMocks(); | ||
| const onClose = vi.fn(); | ||
| const { wrapper } = await createFixtures(); | ||
| const { userEvent } = renderDialog(wrapper, { onClose }); | ||
| await userEvent.click(screen.getByRole('button', { name: 'Remove domain' })); | ||
| await waitFor(() => { | ||
| expect(onRemove).toHaveBeenCalledTimes(1); | ||
| }); | ||
| await waitFor(() => { | ||
| expect(onClose).toHaveBeenCalledTimes(1); | ||
| }); | ||
| }); | ||
| it('keeps the dialog open and surfaces an error when removal fails', async () => { | ||
| resetMocks(); | ||
| onRemove.mockRejectedValueOnce( | ||
| new ClerkAPIResponseError('Error', { | ||
| data: [ | ||
| { | ||
| code: 'internal_server_error', | ||
| long_message: 'Something went wrong while removing the domain.', | ||
| message: 'Removal failed.', | ||
| }, | ||
| ], | ||
| status: 500, | ||
| }), | ||
| ); | ||
| const onClose = vi.fn(); | ||
| const { wrapper } = await createFixtures(); | ||
| const { userEvent } = renderDialog(wrapper, { onClose }); | ||
| await userEvent.click(screen.getByRole('button', { name: 'Remove domain' })); | ||
| await waitFor(() => { | ||
| expect(onRemove).toHaveBeenCalledTimes(1); | ||
| }); | ||
| expect(await screen.findByText('Something went wrong while removing the domain.')).toBeInTheDocument(); | ||
| expect(onClose).not.toHaveBeenCalled(); | ||
| }); | ||
| }); | ||
LauraBeatris marked this conversation as resolved.
Uh oh!There was an error while loading. Please reload this page. | ||
Oops, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
Oops, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
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.
Uh oh!
There was an error while loading. Please reload this page.