Step progress bar changes for SSO setup link

components/layouts/SetupLinkLayout.tsx

@@ -38,10 +38,10 @@ export const SetupLinkLayout = ({ children }: { children: React.ReactNode }) =>
 
       {setupLink?.primaryColor && <style>{`:root { --p: ${hexToOklch(setupLink.primaryColor)}; }`}</style>}
 
-      <div className='mx-auto max-w-3xl'>
+      <div className='mx-auto p-6'>
         <div className='flex flex-1 flex-col'>
           <div className='top-0 flex h-16 flex-shrink-0 border-b'>
-            <div className='flex flex-shrink-0 items-center gap-4'>
+            <div className='flex flex-shrink-0 items-center gap-4 max-w-3xl'>
               <Link href={`/setup/${token}`}>
                 {setupLink?.logoUrl && (
                   <img src={setupLink.logoUrl} alt={setupLink.companyName || ''} className='max-h-10' />

components/setup-link/StepProgressBar.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const StepProgressBar = ({ currentStep, totalSteps, steps }) => {
+  return (
+    <div className='w-full flex flex-col gap-2 mt-4 mb-6'>
+      <div className='flex flex-col gap-4'>
+        {Array.from({ length: totalSteps }, (_, index) => (
+          <div key={index} className='flex items-center gap-4 p-2'>
+            <div
+              className={`w-8 h-8 rounded-full flex items-center justify-center shrink-0
+                ${
+                  index < currentStep
+                    ? 'bg-primary text-white'
+                    : index === currentStep
+                      ? 'bg-primary text-white'
+                      : 'bg-gray-200 text-gray-600'
+                }`}>
+              {index + 1}
+            </div>
+            <span className={`text-sm ${index === currentStep ? 'font-medium' : 'text-gray-600'}`}>
+              {steps[index]}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default StepProgressBar;

lib/constants.ts

@@ -5,55 +5,75 @@ export const identityProviders = [
     name: 'Auth0 SAML SSO',
     id: 'auth0',
     stepCount: 3,
+    steps: ['Create Application', 'Configure Application', 'Create SAML Connection'],
   },
   {
     name: 'Azure SAML SSO',
     id: 'azure',
     stepCount: 4,
+    steps: ['Create Application', 'Configure Application', 'Attribute Mapping', 'Create SAML Connection'],
   },
   {
     name: 'Google SAML SSO',
     id: 'google',
     stepCount: 4,
+    steps: ['Create Application', 'Configure Application', 'Attribute Mapping', 'Create SAML Connection'],
   },
   {
     name: 'JumpCloud SAML SSO',
     id: 'jumpcloud',
     stepCount: 4,
+    steps: ['Create Application', 'Configure Application', 'Attribute Mapping', 'Create SAML Connection'],
   },
   {
     name: 'Microsoft AD FS SAML SSO',
     id: 'microsoft-adfs',
     stepCount: 4,
+    steps: [
+      'Create a claims aware Relying Party Trust using federation metadata',
+      'Attribute Mapping',
+      'Transform Rule',
+      'Create SAML Connection',
+    ],
   },
   {
     name: 'Okta SAML SSO',
     id: 'okta',
     stepCount: 4,
+    steps: ['Create Application', 'Configure Application', 'Attribute Mapping', 'Create SAML Connection'],
   },
   {
     name: 'OneLogin SAML SSO',
     id: 'onelogin',
     stepCount: 4,
+    steps: ['Create Application', 'Configure Application', 'Attribute Mapping', 'Create SAML Connection'],
   },
   {
     name: 'PingOne SAML SSO',
     id: 'pingone',
     stepCount: 4,
+    steps: ['Create Application', 'Configure Application', 'Attribute Mapping', 'Create SAML Connection'],
   },
   {
     name: 'Rippling SAML SSO',
     id: 'rippling',
     stepCount: 3,
+    steps: ['Create Application', 'Configure Application', 'Create SAML Connection'],
   },
   {
     name: 'Generic SAML 2.0',
     id: 'generic-saml',
     stepCount: 3,
+    steps: [
+      'Configuration SAML Application',
+      'SAML Profile/Claims/Attributes Mapping',
+      'Create SAML Connection',
+    ],
   },
   {
     name: 'OIDC Provider',
     id: 'generic-oidc',
     stepCount: 2,
+    steps: ['Create Application', 'Create OIDC Connection'],
   },
 ];

pages/setup/[token]/sso-connection/new.tsx

@@ -21,6 +21,7 @@ import { InputWithCopyButton } from '@boxyhq/internal-ui';
 import PreviousButton from '@components/setup-link-instructions/PreviousButton';
 import CreateSSOConnection from '@components/setup-link-instructions/CreateSSOConnection';
 import SelectIdentityProviders from '@components/setup-link-instructions/SelectIdentityProviders';
+import StepProgressBar from '@components/setup-link/StepProgressBar';
 
 type NewConnectionProps = InferGetServerSidePropsType<typeof getServerSideProps>;
 
@@ -118,28 +119,61 @@ const NewConnection = ({
     heading = t('select_identity_provider');
   }
 
+  const getStepLabels = (provider) => {
+    if (!provider) return [];
+    return provider.steps;
+  };
+
   return (
     <>
-      <div className='flex space-y-4 flex-col pb-6'>
-        <div className='flex justify-between items-center'>
-          <h1 className='text-xl font-noraml'>{heading}</h1>
-          {source && (
-            <Link className='btn btn-xs h-0' href={linkSelectIdp}>
-              <ArrowsRightLeftIcon className='w-5 h-5' />
-              {t('change_identity_provider')}
-            </Link>
+      <div className='flex flex-row gap-8 w-full'>
+        <div className='w-64 py-6'>
+          {source ? (
+            <>
+              {idp && (
+                <StepProgressBar
+                  currentStep={parseInt(step as string) - 1}
+                  totalSteps={findIdp(idp)?.stepCount || 1}
+                  steps={getStepLabels(findIdp(idp))}
+                />
+              )}
+            </>
+          ) : (
+            <StepProgressBar
+              currentStep={0}
+              totalSteps={2}
+              steps={['Select Provider', 'Create Application']}
+            />
           )}
         </div>
-        {source && <progress className='progress progress-primary w-full' value={progress} max={100} />}
-      </div>
 
-      <article className={`${proseClassNames.join(' ')} max-w-4xl`}>
-        {source ? (
-          <MDXRemote {...source} components={components} scope={scope} />
-        ) : (
-          <SelectIdentityProviders />
-        )}
-      </article>
+        <div className='flex-1'>
+          <div className='flex flex-col space-y-4 pb-6'>
+            <div className='flex justify-between items-center'>
+              <h1 className='text-xl font-normal'>{heading}</h1>
+              {source && (
+                <Link className='btn btn-xs h-0' href={linkSelectIdp}>
+                  <ArrowsRightLeftIcon className='w-5 h-5' />
+                  {t('change_identity_provider')}
+                </Link>
+              )}
+            </div>
+            {source && (
+              <>
+                <progress className='progress progress-primary w-full' value={progress} max={100} />
+              </>
+            )}
+          </div>
+
+          <article className={`${proseClassNames.join(' ')} max-w-4xl`}>
+            {source ? (
+              <MDXRemote {...source} components={components} scope={scope} />
+            ) : (
+              <SelectIdentityProviders />
+            )}
+          </article>
+        </div>
+      </div>
     </>
   );
 };