feat(ui): create enterprise connection on Select Provider Continue

Wires Wizard.initialStepId via deriveInitialStep so the ConfigureSSO
wizard re-mounts on the right step after reload. Renames the local
ProviderType ids in Select Provider from 'okta' / 'custom_saml' to the
backend values 'saml_okta' / 'saml_custom' so the Continue handler can
forward them directly. Continue now sets the provider on the flow
context, calls createConnection, and advances the wizard — wrapped in
useCardState for loading and error display following the same pattern
as Verify Domain.

Author: iagodahlem

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

@@ -10,10 +10,11 @@ import { ProfileCard } from '@/elements/ProfileCard';
 import { ExclamationTriangle } from '@/icons';
 import { Route, Switch } from '@/router';
 
-import { ConfigureSSOFlowProvider } from './ConfigureSSOContext';
+import { ConfigureSSOFlowProvider, useConfigureSSOFlow } from './ConfigureSSOContext';
 import { ConfigureSSOHeader } from './ConfigureSSOHeader';
 import { ConfigureSSONavbar } from './ConfigureSSONavbar';
 import { ConfigureSSOSkeleton } from './ConfigureSSOSkeleton';
+import { deriveInitialStep } from './deriveInitialStep';
 import { ProfileCardFooter, ProfileCardHeader } from './elements/ProfileCard';
 import { Step } from './elements/Step';
 import { Wizard } from './elements/Wizard';
@@ -74,43 +75,55 @@ const ConfigureSSOCardContent = () => {
   }
 
   return (
-    <ConfigureSSOFlowProvider enterpriseConnection={enterpriseConnection}>
-      <Wizard>
-        <ConfigureSSOHeader />
+    <ConfigureSSOFlowProvider
+      enterpriseConnection={enterpriseConnection}
+      isLoading={isLoading}
+    >
+      <ConfigureSSOSteps />
+    </ConfigureSSOFlowProvider>
+  );
+};
 
-        <Wizard.Step id='select-provider'>
-          <SelectProviderStep />
-        </Wizard.Step>
+const ConfigureSSOSteps = () => {
+  const { enterpriseConnection } = useConfigureSSOFlow();
+  const initialStepId = deriveInitialStep(enterpriseConnection);
 
-        <Wizard.Step
-          id='verify-domain'
-          label='Verify domain'
-        >
-          <VerifyDomainStep />
-        </Wizard.Step>
+  return (
+    <Wizard initialStepId={initialStepId}>
+      <ConfigureSSOHeader />
 
-        <Wizard.Step
-          id='configure'
-          label='Configure'
-        >
-          <ConfigureStep />
-        </Wizard.Step>
+      <Wizard.Step id='select-provider'>
+        <SelectProviderStep />
+      </Wizard.Step>
 
-        <Wizard.Step
-          id='test'
-          label='Test'
-        >
-          <TestConfigurationStep />
-        </Wizard.Step>
+      <Wizard.Step
+        id='verify-domain'
+        label='Verify domain'
+      >
+        <VerifyDomainStep />
+      </Wizard.Step>
 
-        <Wizard.Step
-          id='confirmation'
-          label='Confirmation'
-        >
-          <ConfirmationStep />
-        </Wizard.Step>
-      </Wizard>
-    </ConfigureSSOFlowProvider>
+      <Wizard.Step
+        id='configure'
+        label='Configure'
+      >
+        <ConfigureStep />
+      </Wizard.Step>
+
+      <Wizard.Step
+        id='test'
+        label='Test'
+      >
+        <TestConfigurationStep />
+      </Wizard.Step>
+
+      <Wizard.Step
+        id='confirmation'
+        label='Confirmation'
+      >
+        <ConfirmationStep />
+      </Wizard.Step>
+    </Wizard>
   );
 };
 

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

@@ -13,26 +13,48 @@ import {
   Text,
   useLocalizations,
 } from '@/customizables';
+import { useCardState } from '@/elements/contexts';
 import { Alert } from '@/ui/elements/Alert';
+import { handleError } from '@/utils/errorHandler';
 
+import { type ProviderType, useConfigureSSOFlow } from '../ConfigureSSOContext';
 import { Step } from '../elements/Step';
 import { useWizard } from '../elements/Wizard';
 
-type ProviderType = 'okta' | 'custom_saml';
-
 const PROVIDER_OPTIONS: ReadonlyArray<{ id: ProviderType; label: LocalizationKey; iconId: string }> = [
-  { id: 'okta', label: localizationKeys('configureSSO.selectProviderStep.saml.okta'), iconId: 'okta' },
+  { id: 'saml_okta', label: localizationKeys('configureSSO.selectProviderStep.saml.okta'), iconId: 'okta' },
   {
-    id: 'custom_saml',
+    id: 'saml_custom',
     label: localizationKeys('configureSSO.selectProviderStep.saml.customSaml'),
     iconId: 'saml',
   },
 ];
 
 export const SelectProviderStep = (): JSX.Element => {
   const { goNext, goPrev, isFirstStep, isLastStep } = useWizard();
+  const { setProvider, createConnection } = useConfigureSSOFlow();
+  const card = useCardState();
   const [selected, setSelected] = React.useState<ProviderType | null>(null);
 
+  const handleContinue = async () => {
+    if (!selected) {
+      return;
+    }
+
+    setProvider(selected);
+    card.setError(undefined);
+    card.setLoading();
+
+    try {
+      await createConnection();
+      void goNext();
+    } catch (err) {
+      handleError(err as Error, [], card.setError);
+    } finally {
+      card.setIdle();
+    }
+  };
+
   return (
     <Flow.Part part='selectProvider'>
       <Step
@@ -90,6 +112,16 @@ export const SelectProviderStep = (): JSX.Element => {
               variant='warning'
               title={localizationKeys('configureSSO.selectProviderStep.warning')}
             />
+
+            {card.error ? (
+              <Text
+                as='p'
+                variant='body'
+                sx={theme => ({ color: theme.colors.$danger500, fontSize: theme.fontSizes.$sm })}
+              >
+                {card.error}
+              </Text>
+            ) : null}
           </Step.Section>
         </Step.Body>
 
@@ -99,8 +131,9 @@ export const SelectProviderStep = (): JSX.Element => {
             isDisabled={isFirstStep}
           />
           <Step.Footer.Continue
-            onClick={() => goNext()}
-            isDisabled={isLastStep || !selected}
+            onClick={handleContinue}
+            isLoading={card.isLoading}
+            isDisabled={isLastStep || !selected || card.isLoading}
           />
         </Step.Footer>
       </Step>