feat: onboarding stepper (#8100)

Unleash · Sep 5, 2024 · 2daa0cd · 2daa0cd
1 parent 01fb748
commit 2daa0cd
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 5 deletions.
diff --git a/frontend/src/component/onboarding/ConnectSdkDialog.tsx b/frontend/src/component/onboarding/ConnectSdkDialog.tsx
@@ -44,7 +44,6 @@ const StyledDialog = styled(Dialog)(({ theme }) => ({
 }));
 
 const Navigation = styled('div')(({ theme }) => ({
-    marginTop: theme.spacing(16),
     borderTop: `1px solid ${theme.palette.divider}}`,
     display: 'flex',
     justifyContent: 'flex-end',

diff --git a/frontend/src/component/onboarding/GenerateApiKey.tsx b/frontend/src/component/onboarding/GenerateApiKey.tsx
@@ -16,6 +16,7 @@ import EnvironmentsIcon from '@mui/icons-material/CloudCircle';
 import { ArcherContainer, ArcherElement } from 'react-archer';
 import { useEffect } from 'react';
 import { SectionHeader } from './SharedComponents';
+import { Stepper } from './Stepper';
 
 const ChooseEnvironment = ({
     environments,
@@ -226,7 +227,8 @@ export const GenerateApiKey = ({
     return (
         <SpacedContainer>
             <Typography variant='h2'>Connect an SDK to Unleash</Typography>
-            <Box sx={{ mt: 4 }}>
+            <Stepper active={1} steps={3} />
+            <Box sx={{ mt: 2 }}>
                 <SectionHeader>Environment</SectionHeader>
                 <SectionDescription>
                     The environment SDK will connect to in order to retrieve

diff --git a/frontend/src/component/onboarding/SelectSdk.tsx b/frontend/src/component/onboarding/SelectSdk.tsx
@@ -3,6 +3,7 @@ import type { FC } from 'react';
 import { formatAssetPath } from 'utils/formatPath';
 import { SectionHeader } from './SharedComponents';
 import { clientSdks, type Sdk, serverSdks } from './sharedTypes';
+import { Stepper } from './Stepper';
 
 const SpacedContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(5, 8, 8, 8),
@@ -59,7 +60,8 @@ export const SelectSdk: FC<ISelectSdkProps> = ({ onSelect }) => {
     return (
         <SpacedContainer>
             <Typography variant='h2'>Connect an SDK to Unleash</Typography>
-            <Box sx={{ mt: 4 }}>
+            <Stepper active={0} steps={3} />
+            <Box sx={{ mt: 2 }}>
                 <SectionHeader>Select SDK</SectionHeader>
                 <SecondarySectionHeader>
                     Server side SDKs

diff --git a/frontend/src/component/onboarding/Stepper.tsx b/frontend/src/component/onboarding/Stepper.tsx
@@ -0,0 +1,38 @@
+import { styled } from '@mui/material';
+import type { FC } from 'react';
+
+const StepContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
+    marginTop: theme.spacing(2),
+}));
+
+const Step = styled('div')(({ theme }) => ({
+    background: theme.palette.background.application,
+    borderRadius: theme.shape.borderRadius,
+    width: theme.spacing(7),
+    height: theme.spacing(1),
+}));
+const ActiveStep = styled('div')(({ theme }) => ({
+    background: theme.palette.background.sidebar,
+    borderRadius: theme.shape.borderRadius,
+    width: theme.spacing(7),
+    height: theme.spacing(1),
+}));
+
+export const Stepper: FC<{ active: number; steps: number }> = ({
+    active,
+    steps,
+}) => {
+    return (
+        <StepContainer>
+            {Array.from({ length: steps }, (_, index) =>
+                index === active ? (
+                    <ActiveStep key={index} />
+                ) : (
+                    <Step key={index} />
+                ),
+            )}
+        </StepContainer>
+    );
+};
diff --git a/frontend/src/component/onboarding/TestSdkConnection.tsx b/frontend/src/component/onboarding/TestSdkConnection.tsx
@@ -20,9 +20,10 @@ import copy from 'copy-to-clipboard';
 import useToast from 'hooks/useToast';
 import CopyIcon from '@mui/icons-material/FileCopy';
 import { formatAssetPath } from '../../utils/formatPath';
+import { Stepper } from './Stepper';
 
 const SpacedContainer = styled('div')(({ theme }) => ({
-    padding: theme.spacing(5, 8, 8, 8),
+    padding: theme.spacing(5, 8, 2, 8),
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(3),
@@ -37,6 +38,7 @@ const StyledCodeBlock = styled('pre')(({ theme }) => ({
     wordBreak: 'break-all',
     whiteSpace: 'pre-wrap',
     position: 'relative',
+    maxHeight: theme.spacing(34),
 }));
 
 const CopyToClipboard = styled(Tooltip)(({ theme }) => ({
@@ -114,7 +116,8 @@ export const TestSdkConnection: FC<ITestSdkConnectionProps> = ({
     return (
         <SpacedContainer>
             <Typography variant='h2'>Connect an SDK to Unleash</Typography>
-            <Box sx={{ mt: 4 }}>
+            <Stepper active={2} steps={3} />
+            <Box sx={{ mt: 2 }}>
                 <ChangeSdk>
                     {sdkIcon ? (
                         <Avatar