From 2daa0cd8ca5bc3cba27e45321d0936ffff4063e7 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Thu, 5 Sep 2024 14:11:39 +0200
Subject: [PATCH] feat: onboarding stepper (#8100)

---
 .../component/onboarding/ConnectSdkDialog.tsx |  1 -
 .../component/onboarding/GenerateApiKey.tsx   |  4 +-
 .../src/component/onboarding/SelectSdk.tsx    |  4 +-
 frontend/src/component/onboarding/Stepper.tsx | 38 +++++++++++++++++++
 .../onboarding/TestSdkConnection.tsx          |  7 +++-
 5 files changed, 49 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/component/onboarding/Stepper.tsx

diff --git a/frontend/src/component/onboarding/ConnectSdkDialog.tsx b/frontend/src/component/onboarding/ConnectSdkDialog.tsx
index 256dd349e510..5d0c5b79f20a 100644
--- 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
index 8fdf0db3f677..7da36026d497 100644
--- 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
index 1f062a9af893..69047b0564c0 100644
--- 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
new file mode 100644
index 000000000000..59a61217eed2
--- /dev/null
+++ 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
index 849cdcf712f2..1b73e17dc844 100644
--- 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