feat(ui): add reset connection entry on ConfigureSSO step footers

Introduces a Step.Footer.Reset compound part that renders a destructive
ghost button in the left of the step footer and opens the existing
ResetConnectionDialog. Wires it into the Verify Domain, Configure, and Test
steps so the reset action is reachable from anywhere in the wizard, not just
the confirmation step. The slot gates itself on an existing enterprise
connection so it stays hidden on the provider selection step.

Author: iagodahlem

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

@@ -1,4 +1,5 @@
-import { type PropsWithChildren, type ReactNode } from 'react';
+import { useOrganization } from '@clerk/shared/react';
+import { type PropsWithChildren, type ReactNode, useState } from 'react';
 
 import {
   Badge,
@@ -9,12 +10,15 @@ import {
   Heading,
   Icon,
   type LocalizationKey,
+  localizationKeys,
   Text,
   useLocalizations,
 } from '@/customizables';
 import { ChevronLeft, ChevronRight } from '@/icons';
 import { common, type PropsOfComponent } from '@/styledSystem';
 
+import { useConfigureSSO } from '../ConfigureSSOContext';
+import { ResetConnectionDialog } from '../ResetConnectionDialog';
 import { ProfileCardFooter } from './ProfileCard';
 
 type StepLayoutProps = PropsOfComponent<typeof Col>;
@@ -188,11 +192,42 @@ const FooterContinue = ({ onClick, isDisabled, isLoading, label = 'Continue' }:
 };
 FooterContinue.displayName = 'Step.Footer.Continue';
 
+const FooterReset = (): JSX.Element | null => {
+  const { enterpriseConnection } = useConfigureSSO();
+  const { organization } = useOrganization();
+  const [isOpen, setIsOpen] = useState(false);
+
+  if (!enterpriseConnection) {
+    return null;
+  }
+
+  return (
+    <>
+      <Button
+        elementDescriptor={descriptors.configureSSOFooterResetButton}
+        variant='ghost'
+        size='sm'
+        colorScheme='danger'
+        onClick={() => setIsOpen(true)}
+        localizationKey={localizationKeys('configureSSO.confirmation.resetSection.title')}
+        sx={{ marginInlineEnd: 'auto' }}
+      />
+      <ResetConnectionDialog
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        confirmationValue={organization?.name ?? ''}
+      />
+    </>
+  );
+};
+FooterReset.displayName = 'Step.Footer.Reset';
+
 const Footer = ({ children }: PropsWithChildren): JSX.Element => <ProfileCardFooter>{children}</ProfileCardFooter>;
 
 const FooterCompound = Object.assign(Footer, {
   Previous: FooterPrevious,
   Continue: FooterContinue,
+  Reset: FooterReset,
 });
 
 type StepCounterProps = {

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

@@ -130,6 +130,7 @@ const SamlCustomCreateAppStep = (): JSX.Element => {
       </Step.Body>
 
       <Step.Footer>
+        <Step.Footer.Reset />
         <Step.Footer.Previous
           onClick={() => goPrev()}
           isDisabled={isFirstStep}
@@ -204,6 +205,7 @@ const SamlCustomAttributeMappingStep = (): JSX.Element => {
       </Step.Body>
 
       <Step.Footer>
+        <Step.Footer.Reset />
         <Step.Footer.Previous
           onClick={() => goPrev()}
           isDisabled={isFirstStep}
@@ -239,6 +241,7 @@ const SamlCustomAssignUsersStep = (): JSX.Element => {
       </Step.Body>
 
       <Step.Footer>
+        <Step.Footer.Reset />
         <Step.Footer.Previous
           onClick={() => goPrev()}
           isDisabled={isFirstStep}
@@ -368,6 +371,7 @@ const SamlCustomIdentityProviderMetadataStep = (): JSX.Element => {
       </Step.Body>
 
       <Step.Footer>
+        <Step.Footer.Reset />
         <Step.Footer.Previous
           onClick={() => goPrev()}
           isDisabled={isFirstStep || card.isLoading}

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

@@ -240,6 +240,7 @@ const SamlOktaCreateAppStep = (): JSX.Element => {
       </Step.Body>
 
       <Step.Footer>
+        <Step.Footer.Reset />
         <Step.Footer.Previous
           onClick={() => goPrev()}
           isDisabled={isFirstStep}
@@ -346,6 +347,7 @@ const SamlOktaAttributeMappingStep = (): JSX.Element => {
       </Step.Body>
 
       <Step.Footer>
+        <Step.Footer.Reset />
         <Step.Footer.Previous
           onClick={() => goPrev()}
           isDisabled={isFirstStep}
@@ -437,6 +439,7 @@ const SamlOktaAssignUsersStep = (): JSX.Element => {
       </Step.Body>
 
       <Step.Footer>
+        <Step.Footer.Reset />
         <Step.Footer.Previous
           onClick={() => goPrev()}
           isDisabled={isFirstStep}
@@ -564,6 +567,7 @@ const SamlOktaIdentityProviderMetadataStep = (): JSX.Element => {
       </Step.Body>
 
       <Step.Footer>
+        <Step.Footer.Reset />
         <Step.Footer.Previous
           onClick={() => goPrev()}
           isDisabled={isFirstStep || card.isLoading}

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

@@ -177,6 +177,7 @@ export const TestConfigurationStep = (): JSX.Element => {
         ) : null}
 
         <Step.Footer>
+          <Step.Footer.Reset />
           <Step.Footer.Previous onClick={() => goPrev()} />
           <ContinueTestSsoStepButton
             enterpriseConnectionId={enterpriseConnection?.id}

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

@@ -119,6 +119,7 @@ export const VerifyDomainStep = (): JSX.Element => {
           </Step.Body>
 
           <Step.Footer>
+            <Step.Footer.Reset />
             <Step.Footer.Continue onClick={() => outerGoNext()} />
           </Step.Footer>
         </Step>
@@ -299,6 +300,7 @@ export const ProvideEmailStep = ({ emailAddressRef, preExistingEmailIdRef }: Pro
       </Step.Section>
 
       <Step.Footer>
+        <Step.Footer.Reset />
         <Step.Footer.Previous
           onClick={() => goPrev()}
           isDisabled
@@ -416,6 +418,7 @@ export const EnterVerificationCodeStep = ({
       </Step.Section>
 
       <Step.Footer>
+        <Step.Footer.Reset />
         <Step.Footer.Previous
           onClick={() => goPrev()}
           isDisabled={!!primaryEmailAddress}

packages/ui/src/customizables/elementDescriptors.ts

@@ -554,6 +554,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'configureSSOFooter',
   'configureSSOFooterPreviousButton',
   'configureSSOFooterContinueButton',
+  'configureSSOFooterResetButton',
 
   'configureSSOProviderGroup',
   'configureSSOProviderGroupLabel',

packages/ui/src/internal/appearance.ts

@@ -690,6 +690,7 @@ export type ElementsConfig = {
   configureSSOFooter: WithOptions;
   configureSSOFooterPreviousButton: WithOptions;
   configureSSOFooterContinueButton: WithOptions;
+  configureSSOFooterResetButton: WithOptions;
 
   configureSSOProviderGroup: WithOptions<string>;
   configureSSOProviderGroupLabel: WithOptions<string>;