feat(frontend): wizard structure

web/src/components/Layout/Layout.tsx

@@ -14,7 +14,7 @@ import VariableSetProvider from 'providers/VariableSet';
 import {useSettingsValues} from 'providers/SettingsValues/SettingsValues.provider';
 import MissingVariablesModalProvider from 'providers/MissingVariablesModal/MissingVariablesModal.provider';
 import NotificationProvider from 'providers/Notification/Notification.provider';
-import WizardProvider from 'providers/Wizard';
+import WizardWrapper from 'components/Wizard/Wrapper';
 import {ConfigMode} from 'types/DataStore.types';
 import * as S from './Layout.styled';
 import MenuBottom from './MenuBottom';
@@ -69,7 +69,7 @@ const Layout = ({hasMenu = false}: IProps) => {
 
   return (
     <NotificationProvider>
-      <WizardProvider>
+      <WizardWrapper>
         <MissingVariablesModalProvider>
           <FileViewerModalProvider>
             <ConfirmationModalProvider>
@@ -125,7 +125,7 @@ const Layout = ({hasMenu = false}: IProps) => {
             </ConfirmationModalProvider>
           </FileViewerModalProvider>
         </MissingVariablesModalProvider>
-      </WizardProvider>
+      </WizardWrapper>
     </NotificationProvider>
   );
 };

web/src/components/Wizard/Content/Content.tsx

@@ -0,0 +1,35 @@
+import {Tabs} from 'antd';
+import {IWizardStep} from 'types/Wizard.types';
+import * as S from './Content.styled';
+import Tab from './Tab';
+
+interface IProps {
+  activeStepId: string;
+  steps: IWizardStep[];
+  onChange(key: string): void;
+}
+
+const Content = ({activeStepId, steps, onChange}: IProps) => (
+  <S.Container>
+    <Tabs
+      type="card"
+      activeKey={activeStepId}
+      tabPosition="left"
+      onTabClick={(key, event) => {
+        event.preventDefault();
+        onChange(key);
+      }}
+    >
+      {steps.map((step, index) => {
+        const {component: Component, id} = step;
+        return (
+          <Tabs.TabPane tab={<Tab index={index + 1} isActive={id === activeStepId} step={step} />} key={id}>
+            <Component />
+          </Tabs.TabPane>
+        );
+      })}
+    </Tabs>
+  </S.Container>
+);
+
+export default Content;

web/src/components/Wizard/Steps/StepTab.tsx → web/src/components/Wizard/Content/Tab.tsx

@@ -1,14 +1,14 @@
 import {CheckOutlined} from '@ant-design/icons';
 import {IWizardStep} from 'types/Wizard.types';
-import * as S from './Steps.styled';
+import * as S from './Content.styled';
 
 interface IProps {
   index: number;
   isActive: boolean;
   step: IWizardStep;
 }
 
-const StepTab = ({index, isActive, step}: IProps) => (
+const Tab = ({index, isActive, step}: IProps) => (
   <S.StepTabContainer $isActive={isActive}>
     {step.status === 'complete' ? (
       <S.StepTabCheck>
@@ -21,4 +21,4 @@ const StepTab = ({index, isActive, step}: IProps) => (
   </S.StepTabContainer>
 );
 
-export default StepTab;
+export default Tab;

web/src/components/Wizard/Steps/index.ts → web/src/components/Wizard/Content/index.ts

@@ -1,2 +1,2 @@
 // eslint-disable-next-line no-restricted-exports
-export {default} from './Steps';
+export {default} from './Content';

web/src/components/Wizard/Header/Header.tsx

@@ -7,15 +7,15 @@ function calculatePercent(activeStep: number, totalSteps: number) {
 
 interface IProps {
   activeStep: number;
-  totalSteps: number;
+  totalCompleteSteps: number;
 }
 
-const Header = ({activeStep, totalSteps}: IProps) => (
+const Header = ({activeStep, totalCompleteSteps}: IProps) => (
   <S.Container>
     <S.Title>🚀 Setup guide</S.Title>
-    <Progress percent={calculatePercent(activeStep, totalSteps)} showInfo={false} />
+    <Progress percent={calculatePercent(activeStep, totalCompleteSteps)} showInfo={false} />
     <S.Text>
-      {activeStep} of {totalSteps} steps completed
+      {activeStep} of {totalCompleteSteps} steps completed
     </S.Text>
   </S.Container>
 );

web/src/components/Wizard/Steps/RunTest/RunTest.styled.ts

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export const Container = styled.div``;

web/src/components/Wizard/Steps/RunTest/RuntTest.tsx

@@ -0,0 +1,9 @@
+const RunTest = () => {
+  return (
+    <div>
+      <h1>Create Test</h1>
+    </div>
+  );
+};
+
+export default RunTest;

web/src/components/Wizard/StepFactory/index.ts → web/src/components/Wizard/Steps/RunTest/index.ts

@@ -1,2 +1,2 @@
 // eslint-disable-next-line no-restricted-exports
-export {default} from './StepFactory';
+export {default} from './RuntTest';

web/src/components/Wizard/Steps/TracingBackend/TracingBackend.styled.ts

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export const Container = styled.div``;

web/src/components/Wizard/Steps/TracingBackend/TracingBackend.tsx

@@ -0,0 +1,9 @@
+const TracingBackend = () => {
+  return (
+    <div>
+      <h1>Tracing Backend</h1>
+    </div>
+  );
+};
+
+export default TracingBackend;

web/src/components/Wizard/Steps/TracingBackend/index.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export {default} from './TracingBackend';

web/src/components/Wizard/Wrapper/Wrapper.tsx

@@ -0,0 +1,35 @@
+import {useMemo} from 'react';
+import {IWizardStep} from 'types/Wizard.types';
+import WizardProvider from 'providers/Wizard/Wizard.provider';
+import TracingBackend from '../Steps/TracingBackend/TracingBackend';
+import RunTest from '../Steps/RunTest';
+
+interface IProps {
+  children: React.ReactNode;
+}
+
+const Wrapper = ({children}: IProps) => {
+  const steps = useMemo<IWizardStep[]>(
+    () => [
+      {
+        id: 'tracing-backend',
+        name: 'Setup your Tracing Backend',
+        description: '',
+        component: TracingBackend,
+        status: 'pending', // grab status from somewhere else
+      },
+      {
+        id: 'run-test',
+        name: 'Run your first test',
+        description: '',
+        component: RunTest,
+        status: 'pending',
+      },
+    ],
+    []
+  );
+
+  return <WizardProvider steps={steps}>{children}</WizardProvider>;
+};
+
+export default Wrapper;

web/src/components/Wizard/Wrapper/index.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export {default} from './Wrapper';

web/src/pages/Wizard/Wizard.tsx

@@ -1,12 +1,12 @@
 import withAnalytics from 'components/WithAnalytics/WithAnalytics';
 import Header from 'components/Wizard/Header';
-import StepFactory from 'components/Wizard/StepFactory';
-import Steps from 'components/Wizard/Steps';
+import Steps from 'components/Wizard/Content';
 import {useWizard} from 'providers/Wizard';
 import * as S from './Wizard.styled';
 
 const Wizard = () => {
-  const {activeStep, activeStepId, steps} = useWizard();
+  const {activeStepId, steps, onGoTo} = useWizard();
+  const completedSteps = steps.filter(({status}) => status === 'complete').length;
 
   return (
     <S.Container>
@@ -18,8 +18,8 @@ const Wizard = () => {
       </S.Header>
 
       <S.Body>
-        <Header activeStep={activeStep} totalSteps={steps.length} />
-        <Steps activeStepId={activeStepId} componentFactory={StepFactory} steps={steps} />
+        <Header activeStep={completedSteps} totalCompleteSteps={steps.length} />
+        <Steps activeStepId={activeStepId} steps={steps} onChange={onGoTo} />
       </S.Body>
     </S.Container>
   );

web/src/providers/Wizard/Wizard.provider.tsx

@@ -7,6 +7,7 @@ interface IContext extends IWizardState {
   isLoading: boolean;
   onNext(): void;
   onPrev(): void;
+  onGoTo(key: string): void;
 }
 
 export const Context = createContext<IContext>({
@@ -16,38 +17,18 @@ export const Context = createContext<IContext>({
   isLoading: false,
   onNext: noop,
   onPrev: noop,
+  onGoTo: noop,
 });
 
 interface IProps {
   children: React.ReactNode;
+  steps: IWizardStep[];
 }
 
 export const useWizard = () => useContext(Context);
 
-const initialSteps: IWizardStep[] = [
-  {
-    id: 'step1',
-    name: 'Step 1',
-    description: 'Step 1 description',
-    component: 'Step1',
-  },
-  {
-    id: 'step2',
-    name: 'Step 2',
-    description: 'Step 2 description',
-    component: 'Step2',
-  },
-  {
-    id: 'step3',
-    name: 'Step 3',
-    description: 'Step 3 description',
-    component: 'Step3',
-  },
-];
-
-const WizardProvider = ({children}: IProps) => {
+const WizardProvider = ({children, steps = []}: IProps) => {
   const [activeStep, setActiveStep] = useState(0);
-  const [steps, setSteps] = useState<IWizardStep[]>(initialSteps);
 
   const activeStepId = steps[activeStep]?.id;
   const isFinalStep = activeStep === steps.length - 1;
@@ -62,6 +43,14 @@ const WizardProvider = ({children}: IProps) => {
     setActiveStep(step => step - 1);
   }, []);
 
+  const onGoTo = useCallback(
+    key => {
+      const index = steps.findIndex(step => step.id === key);
+      setActiveStep(index);
+    },
+    [steps]
+  );
+
   const value = useMemo<IContext>(
     () => ({
       activeStep,
@@ -70,8 +59,9 @@ const WizardProvider = ({children}: IProps) => {
       isLoading: false, // TODO: implement loading
       onNext,
       onPrev,
+      onGoTo,
     }),
-    [activeStep, activeStepId, onNext, onPrev, steps]
+    [activeStep, activeStepId, onGoTo, onNext, onPrev, steps]
   );
 
   return <Context.Provider value={value}>{children}</Context.Provider>;

web/src/types/Wizard.types.ts

@@ -7,7 +7,7 @@ export interface IWizardStep {
   id: string;
   name: string;
   description: string;
-  component: string;
+  component: React.FC;
   status?: TWizardStepStatus;
 }