diff --git a/components/layouts/SetupLinkLayout.tsx b/components/layouts/SetupLinkLayout.tsx index 43537443c..88fcbb04e 100644 --- a/components/layouts/SetupLinkLayout.tsx +++ b/components/layouts/SetupLinkLayout.tsx @@ -38,10 +38,10 @@ export const SetupLinkLayout = ({ children }: { children: React.ReactNode }) => {setupLink?.primaryColor && } -
+
-
+
{setupLink?.logoUrl && ( {setupLink.companyName diff --git a/components/setup-link/StepProgressBar.tsx b/components/setup-link/StepProgressBar.tsx new file mode 100644 index 000000000..06fe54d19 --- /dev/null +++ b/components/setup-link/StepProgressBar.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +const StepProgressBar = ({ currentStep, totalSteps, steps }) => { + return ( +
+
+ {Array.from({ length: totalSteps }, (_, index) => ( +
+
+ {index + 1} +
+ + {steps[index]} + +
+ ))} +
+
+ ); +}; + +export default StepProgressBar; diff --git a/lib/constants.ts b/lib/constants.ts index 5ece815c0..1c1d37580 100644 --- a/lib/constants.ts +++ b/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'], }, ]; diff --git a/pages/setup/[token]/sso-connection/new.tsx b/pages/setup/[token]/sso-connection/new.tsx index 99632efeb..e7ebc660e 100644 --- a/pages/setup/[token]/sso-connection/new.tsx +++ b/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; @@ -118,28 +119,61 @@ const NewConnection = ({ heading = t('select_identity_provider'); } + const getStepLabels = (provider) => { + if (!provider) return []; + return provider.steps; + }; + return ( <> -
-
-

{heading}

- {source && ( - - - {t('change_identity_provider')} - +
+
+ {source ? ( + <> + {idp && ( + + )} + + ) : ( + )}
- {source && } -
-
- {source ? ( - - ) : ( - - )} -
+
+
+
+

{heading}

+ {source && ( + + + {t('change_identity_provider')} + + )} +
+ {source && ( + <> + + + )} +
+ +
+ {source ? ( + + ) : ( + + )} +
+
+
); };