Skip to content

Commit da93ece

Browse files
iagodahlemLauraBeatris
iagodahlem
and
LauraBeatris
authored
feat(ui): Add reset connection action on footer (#8711)
Co-authored-by: Laura Beatris <laurabeatriserafim@gmail.com>
1 parent 4dd97bd commit da93ece

10 files changed

Lines changed: 68 additions & 1 deletion

File tree

‎.changeset/humble-insects-rhyme.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
'@clerk/ui': patch
3+
---
4+
5+
Adds a wizard-wide reset connection entry on the `<ConfigureSSO />` step footers:
6+
7+
- New `Step.Footer.Reset` compound part that renders a destructive ghost button on the leading edge of the footer and opens the existing `ResetConnectionDialog`. The slot owns its own open state and gates itself on the current enterprise connection, so it stays hidden on the provider selection step.
8+
- Wires the reset entry into the Verify Domain, Configure (Okta and Custom SAML), and Test steps so the reset action is reachable from anywhere in the wizard. The confirmation step keeps its in-body destructive button.
9+
- Exposes a `configureSSOFooterResetButton` element descriptor so the new button surface can be themed via appearance customizations.

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

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { type PropsWithChildren, type ReactNode } from 'react';
1+
import { __internal_useOrganizationBase } from '@clerk/shared/react';
2+
import { type PropsWithChildren, type ReactNode, useState } from 'react';
23

34
import {
45
Badge,
@@ -9,12 +10,15 @@ import {
910
Heading,
1011
Icon,
1112
type LocalizationKey,
13+
localizationKeys,
1214
Text,
1315
useLocalizations,
1416
} from '@/customizables';
1517
import { ChevronLeft, ChevronRight } from '@/icons';
1618
import { common, type PropsOfComponent } from '@/styledSystem';
1719

20+
import { useConfigureSSO } from '../ConfigureSSOContext';
21+
import { ResetConnectionDialog } from '../ResetConnectionDialog';
1822
import { ProfileCardFooter } from './ProfileCard';
1923

2024
type StepLayoutProps = PropsOfComponent<typeof Col>;
@@ -188,11 +192,42 @@ const FooterContinue = ({ onClick, isDisabled, isLoading, label = 'Continue' }:
188192
};
189193
FooterContinue.displayName = 'Step.Footer.Continue';
190194

195+
const FooterReset = (): JSX.Element | null => {
196+
const { enterpriseConnection } = useConfigureSSO();
197+
const organization = __internal_useOrganizationBase();
198+
const [isOpen, setIsOpen] = useState(false);
199+
200+
if (!enterpriseConnection) {
201+
return null;
202+
}
203+
204+
return (
205+
<>
206+
<Button
207+
elementDescriptor={descriptors.configureSSOFooterResetButton}
208+
variant='ghost'
209+
size='sm'
210+
colorScheme='danger'
211+
onClick={() => setIsOpen(true)}
212+
localizationKey={localizationKeys('configureSSO.confirmation.resetSection.title')}
213+
sx={{ marginInlineEnd: 'auto' }}
214+
/>
215+
<ResetConnectionDialog
216+
isOpen={isOpen}
217+
onClose={() => setIsOpen(false)}
218+
confirmationValue={organization?.name ?? ''}
219+
/>
220+
</>
221+
);
222+
};
223+
FooterReset.displayName = 'Step.Footer.Reset';
224+
191225
const Footer = ({ children }: PropsWithChildren): JSX.Element => <ProfileCardFooter>{children}</ProfileCardFooter>;
192226

193227
const FooterCompound = Object.assign(Footer, {
194228
Previous: FooterPrevious,
195229
Continue: FooterContinue,
230+
Reset: FooterReset,
196231
});
197232

198233
type StepCounterProps = {

‎packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/SamlCustomConfigureSteps.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,7 @@ const SamlCustomCreateAppStep = (): JSX.Element => {
151151
</Step.Body>
152152

153153
<Step.Footer>
154+
<Step.Footer.Reset />
154155
<Step.Footer.Previous
155156
onClick={() => goPrev()}
156157
isDisabled={isFirstStep}
@@ -265,6 +266,7 @@ const SamlCustomAttributeMappingStep = (): JSX.Element => {
265266
</Step.Body>
266267

267268
<Step.Footer>
269+
<Step.Footer.Reset />
268270
<Step.Footer.Previous
269271
onClick={() => goPrev()}
270272
isDisabled={isFirstStep}
@@ -300,6 +302,7 @@ const SamlCustomAssignUsersStep = (): JSX.Element => {
300302
</Step.Body>
301303

302304
<Step.Footer>
305+
<Step.Footer.Reset />
303306
<Step.Footer.Previous
304307
onClick={() => goPrev()}
305308
isDisabled={isFirstStep}
@@ -488,6 +491,7 @@ const SamlCustomIdentityProviderMetadataStep = (): JSX.Element => {
488491
</Step.Body>
489492

490493
<Step.Footer>
494+
<Step.Footer.Reset />
491495
<Step.Footer.Previous
492496
onClick={() => goPrev()}
493497
isDisabled={isFirstStep || card.isLoading}

‎packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/SamlGoogleConfigureSteps.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,7 @@ const SamlGoogleCreateAppStep = (): JSX.Element => {
154154
</Step.Body>
155155

156156
<Step.Footer>
157+
<Step.Footer.Reset />
157158
<Step.Footer.Previous
158159
onClick={() => goPrev()}
159160
isDisabled={isFirstStep}
@@ -353,6 +354,7 @@ const SamlGoogleIdentityProviderMetadataStep = (): JSX.Element => {
353354
</Step.Body>
354355

355356
<Step.Footer>
357+
<Step.Footer.Reset />
356358
<Step.Footer.Previous
357359
onClick={() => goPrev()}
358360
isDisabled={isFirstStep || card.isLoading}
@@ -460,6 +462,7 @@ const SamlGoogleServiceProviderStep = (): JSX.Element => {
460462
</Step.Body>
461463

462464
<Step.Footer>
465+
<Step.Footer.Reset />
463466
<Step.Footer.Previous
464467
onClick={() => goPrev()}
465468
isDisabled={isFirstStep}
@@ -598,6 +601,7 @@ const SamlGoogleAttributeMappingStep = (): JSX.Element => {
598601
</Step.Body>
599602

600603
<Step.Footer>
604+
<Step.Footer.Reset />
601605
<Step.Footer.Previous
602606
onClick={() => goPrev()}
603607
isDisabled={isFirstStep}
@@ -673,6 +677,7 @@ const SamlGoogleConfigureUserAccessStep = (): JSX.Element => {
673677
</Step.Body>
674678

675679
<Step.Footer>
680+
<Step.Footer.Reset />
676681
<Step.Footer.Previous
677682
onClick={() => goPrev()}
678683
isDisabled={isFirstStep}

‎packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/SamlMicrosoftConfigureSteps.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -274,6 +274,7 @@ const SamlMicrosoftCreateAppStep = (): JSX.Element => {
274274
</Step.Body>
275275

276276
<Step.Footer>
277+
<Step.Footer.Reset />
277278
<Step.Footer.Previous
278279
onClick={() => goPrev()}
279280
isDisabled={isFirstStep}
@@ -407,6 +408,7 @@ const SamlMicrosoftServiceProviderStep = (): JSX.Element => {
407408
</Step.Body>
408409

409410
<Step.Footer>
411+
<Step.Footer.Reset />
410412
<Step.Footer.Previous
411413
onClick={() => goPrev()}
412414
isDisabled={isFirstStep}
@@ -601,6 +603,7 @@ const SamlMicrosoftAttributeMappingStep = (): JSX.Element => {
601603
</Step.Body>
602604

603605
<Step.Footer>
606+
<Step.Footer.Reset />
604607
<Step.Footer.Previous
605608
onClick={() => goPrev()}
606609
isDisabled={isFirstStep}
@@ -791,6 +794,7 @@ const SamlMicrosoftIdentityProviderMetadataStep = (): JSX.Element => {
791794
</Step.Body>
792795

793796
<Step.Footer>
797+
<Step.Footer.Reset />
794798
<Step.Footer.Previous
795799
onClick={() => goPrev()}
796800
isDisabled={isFirstStep || card.isLoading}

‎packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/SamlOktaConfigureSteps.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -261,6 +261,7 @@ const SamlOktaCreateAppStep = (): JSX.Element => {
261261
</Step.Body>
262262

263263
<Step.Footer>
264+
<Step.Footer.Reset />
264265
<Step.Footer.Previous
265266
onClick={() => goPrev()}
266267
isDisabled={isFirstStep}
@@ -399,6 +400,7 @@ const SamlOktaAttributeMappingStep = (): JSX.Element => {
399400
</Step.Body>
400401

401402
<Step.Footer>
403+
<Step.Footer.Reset />
402404
<Step.Footer.Previous
403405
onClick={() => goPrev()}
404406
isDisabled={isFirstStep}
@@ -490,6 +492,7 @@ const SamlOktaAssignUsersStep = (): JSX.Element => {
490492
</Step.Body>
491493

492494
<Step.Footer>
495+
<Step.Footer.Reset />
493496
<Step.Footer.Previous
494497
onClick={() => goPrev()}
495498
isDisabled={isFirstStep}
@@ -673,6 +676,7 @@ const SamlOktaIdentityProviderMetadataStep = (): JSX.Element => {
673676
</Step.Body>
674677

675678
<Step.Footer>
679+
<Step.Footer.Reset />
676680
<Step.Footer.Previous
677681
onClick={() => goPrev()}
678682
isDisabled={isFirstStep || card.isLoading}

‎packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,7 @@ export const TestConfigurationStep = (): JSX.Element => {
177177
) : null}
178178

179179
<Step.Footer>
180+
<Step.Footer.Reset />
180181
<Step.Footer.Previous onClick={() => goPrev()} />
181182
<ContinueTestSsoStepButton
182183
enterpriseConnectionId={enterpriseConnection?.id}

‎packages/ui/src/components/ConfigureSSO/steps/VerifyDomainStep.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ export const VerifyDomainStep = (): JSX.Element => {
119119
</Step.Body>
120120

121121
<Step.Footer>
122+
<Step.Footer.Reset />
122123
<Step.Footer.Continue onClick={() => outerGoNext()} />
123124
</Step.Footer>
124125
</Step>
@@ -299,6 +300,7 @@ export const ProvideEmailStep = ({ emailAddressRef, preExistingEmailIdRef }: Pro
299300
</Step.Section>
300301

301302
<Step.Footer>
303+
<Step.Footer.Reset />
302304
<Step.Footer.Previous
303305
onClick={() => goPrev()}
304306
isDisabled
@@ -416,6 +418,7 @@ export const EnterVerificationCodeStep = ({
416418
</Step.Section>
417419

418420
<Step.Footer>
421+
<Step.Footer.Reset />
419422
<Step.Footer.Previous
420423
onClick={() => goPrev()}
421424
isDisabled={!!primaryEmailAddress}

‎packages/ui/src/customizables/elementDescriptors.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -554,6 +554,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
554554
'configureSSOFooter',
555555
'configureSSOFooterPreviousButton',
556556
'configureSSOFooterContinueButton',
557+
'configureSSOFooterResetButton',
557558

558559
'configureSSOProviderGroup',
559560
'configureSSOProviderGroupLabel',

‎packages/ui/src/internal/appearance.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -690,6 +690,7 @@ export type ElementsConfig = {
690690
configureSSOFooter: WithOptions;
691691
configureSSOFooterPreviousButton: WithOptions;
692692
configureSSOFooterContinueButton: WithOptions;
693+
configureSSOFooterResetButton: WithOptions;
693694

694695
configureSSOProviderGroup: WithOptions<string>;
695696
configureSSOProviderGroupLabel: WithOptions<string>;

0 commit comments

Comments
 (0)