Do not allow going back to provider selection

Author: LauraBeatris

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

@@ -100,24 +100,33 @@ export const ConfigureSSOContent = ({ contentRef }: { contentRef: React.RefObjec
 };
 
 const ConfigureSSOSteps = () => {
-  const { initialStepId } = useConfigureSSO();
+  const { initialStepId, enterpriseConnection } = useConfigureSSO();
 
   return (
     <Wizard initialStepId={initialStepId}>
       <ResetCardErrorOnStepChange />
       <ConfigureSSOHeader />
 
+      {/*
+       * `select-provider` is only a wizard step while there's no enterprise
+       * connection yet — creating one unregisters this step, which:
+       *   1. Hides it from the breadcrumb (no need for a manual filter), and
+       *   2. Prevents `goPrev` from any later step (e.g. configure's first
+       *      substep) from ever bubbling back into provider selection.
+       */}
+      {!enterpriseConnection && (
+        <Wizard.Step id='select-provider'>
+          <SelectProviderStep />
+        </Wizard.Step>
+      )}
+
       <Wizard.Step
         id='verify-domain'
         label='Verify domain'
       >
         <VerifyDomainStep />
       </Wizard.Step>
 
-      <Wizard.Step id='select-provider'>
-        <SelectProviderStep />
-      </Wizard.Step>
-
       <Wizard.Step
         id='configure'
         label='Configure'

packages/ui/src/components/ConfigureSSO/ConfigureSSOHeader.tsx

@@ -7,10 +7,10 @@ import { useWizard } from './elements/Wizard';
 export const ConfigureSSOHeader = (): JSX.Element => {
   const { activeSteps, currentStep, goToStep } = useWizard();
   const { t } = useLocalizations();
-  // Select Provider isn't part of the visual breadcrumb per the design —
-  // filter it out here. The wizard still tracks it as the first step
-  // for navigation (goNext from it advances to verify-domain, Previous
-  // is naturally disabled because isFirstStep is true).
+
+  // `select-provider` is only mounted while there's no enterprise connection,
+  // but per design it should never appear in the visual breadcrumb regardless,
+  // so we always filter it out here
   const visibleSteps = activeSteps.filter(step => step.id !== 'select-provider');
   const currentIndex = visibleSteps.findIndex(step => step.id === currentStep?.id);
 

packages/ui/src/components/ConfigureSSO/deriveInitialStep.ts

@@ -12,7 +12,11 @@ export const deriveInitialStep = (
 ): WizardStepId => {
   const { isDomainTakenByOtherOrg, hasSuccessfulTestRun } = options;
 
-  if (isDomainTakenByOtherOrg || !enterpriseConnection) {
+  if (!enterpriseConnection) {
+    return 'select-provider';
+  }
+
+  if (isDomainTakenByOtherOrg) {
     return 'verify-domain';
   }
 

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

@@ -42,8 +42,12 @@ const PROVIDER_GROUPS: ReadonlyArray<{
 
 export const SelectProviderStep = (): JSX.Element => {
   const { goToStep } = useWizard();
-  const { setProvider, createEnterpriseConnection } = useConfigureSSO();
-  const [selected, setSelected] = React.useState<ProviderType | null>(null);
+  const { provider, setProvider, createEnterpriseConnection } = useConfigureSSO();
+
+  // Re-hydrate from context so users returning from `verify-domain`
+  // (after picking a provider but needing to verify their email first)
+  // don't have to re-click their provider.
+  const [selected, setSelected] = React.useState<ProviderType | null>(provider ?? null);
   const { user } = useUser();
   const card = useCardState();