diff --git a/web/src/components/Layout/Layout.tsx b/web/src/components/Layout/Layout.tsx
index 9314696695..51a5294701 100644
--- a/web/src/components/Layout/Layout.tsx
+++ b/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 (
-
+
@@ -125,7 +125,7 @@ const Layout = ({hasMenu = false}: IProps) => {
-
+
);
};
diff --git a/web/src/components/Wizard/Steps/Steps.styled.ts b/web/src/components/Wizard/Content/Content.styled.ts
similarity index 100%
rename from web/src/components/Wizard/Steps/Steps.styled.ts
rename to web/src/components/Wizard/Content/Content.styled.ts
diff --git a/web/src/components/Wizard/Content/Content.tsx b/web/src/components/Wizard/Content/Content.tsx
new file mode 100644
index 0000000000..5bc5279053
--- /dev/null
+++ b/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) => (
+
+ {
+ event.preventDefault();
+ onChange(key);
+ }}
+ >
+ {steps.map((step, index) => {
+ const {component: Component, id} = step;
+ return (
+ } key={id}>
+
+
+ );
+ })}
+
+
+);
+
+export default Content;
diff --git a/web/src/components/Wizard/Steps/StepTab.tsx b/web/src/components/Wizard/Content/Tab.tsx
similarity index 81%
rename from web/src/components/Wizard/Steps/StepTab.tsx
rename to web/src/components/Wizard/Content/Tab.tsx
index ac0b2d79f8..31290001ea 100644
--- a/web/src/components/Wizard/Steps/StepTab.tsx
+++ b/web/src/components/Wizard/Content/Tab.tsx
@@ -1,6 +1,6 @@
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;
@@ -8,7 +8,7 @@ interface IProps {
step: IWizardStep;
}
-const StepTab = ({index, isActive, step}: IProps) => (
+const Tab = ({index, isActive, step}: IProps) => (
{step.status === 'complete' ? (
@@ -21,4 +21,4 @@ const StepTab = ({index, isActive, step}: IProps) => (
);
-export default StepTab;
+export default Tab;
diff --git a/web/src/components/Wizard/Steps/index.ts b/web/src/components/Wizard/Content/index.ts
similarity index 58%
rename from web/src/components/Wizard/Steps/index.ts
rename to web/src/components/Wizard/Content/index.ts
index 34168d110b..3ed5f67081 100644
--- a/web/src/components/Wizard/Steps/index.ts
+++ b/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';
diff --git a/web/src/components/Wizard/Header/Header.tsx b/web/src/components/Wizard/Header/Header.tsx
index 4d97bc3656..53c44804bf 100644
--- a/web/src/components/Wizard/Header/Header.tsx
+++ b/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) => (
🚀 Setup guide
-
+
- {activeStep} of {totalSteps} steps completed
+ {activeStep} of {totalCompleteSteps} steps completed
);
diff --git a/web/src/components/Wizard/StepFactory/StepFactory.tsx b/web/src/components/Wizard/StepFactory/StepFactory.tsx
deleted file mode 100644
index 24d9bdbaf1..0000000000
--- a/web/src/components/Wizard/StepFactory/StepFactory.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import {IWizardStep, IWizardStepComponentMap} from 'types/Wizard.types';
-
-const StepComponentMap: IWizardStepComponentMap = {
- Step1: () =>
Step 1
,
- Step2: () => Step 1
,
- Step3: () => Step 3
,
-};
-
-interface IProps {
- step: IWizardStep;
-}
-
-const StepFactory = ({step: {component}}: IProps) => {
- const Step = StepComponentMap[component];
-
- return ;
-};
-
-export default StepFactory;
diff --git a/web/src/components/Wizard/Steps/RunTest/RunTest.styled.ts b/web/src/components/Wizard/Steps/RunTest/RunTest.styled.ts
new file mode 100644
index 0000000000..09fd140a33
--- /dev/null
+++ b/web/src/components/Wizard/Steps/RunTest/RunTest.styled.ts
@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export const Container = styled.div``;
\ No newline at end of file
diff --git a/web/src/components/Wizard/Steps/RunTest/RuntTest.tsx b/web/src/components/Wizard/Steps/RunTest/RuntTest.tsx
new file mode 100644
index 0000000000..2b0854db36
--- /dev/null
+++ b/web/src/components/Wizard/Steps/RunTest/RuntTest.tsx
@@ -0,0 +1,9 @@
+const RunTest = () => {
+ return (
+
+
Create Test
+
+ );
+};
+
+export default RunTest;
diff --git a/web/src/components/Wizard/StepFactory/index.ts b/web/src/components/Wizard/Steps/RunTest/index.ts
similarity index 56%
rename from web/src/components/Wizard/StepFactory/index.ts
rename to web/src/components/Wizard/Steps/RunTest/index.ts
index 1011dfff43..8c897a06e4 100644
--- a/web/src/components/Wizard/StepFactory/index.ts
+++ b/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';
diff --git a/web/src/components/Wizard/Steps/Steps.tsx b/web/src/components/Wizard/Steps/Steps.tsx
deleted file mode 100644
index adf99500a8..0000000000
--- a/web/src/components/Wizard/Steps/Steps.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import {Tabs} from 'antd';
-import {IWizardStep} from 'types/Wizard.types';
-import * as S from './Steps.styled';
-import StepTab from './StepTab';
-
-interface IProps {
- activeStepId: string;
- componentFactory({step}: {step: IWizardStep}): React.ReactElement;
- steps: IWizardStep[];
-}
-
-const Steps = ({activeStepId, componentFactory: ComponentFactory, steps}: IProps) => (
-
- {
- event.preventDefault();
- // onGoTo(key);
- }}
- >
- {steps.map((step, index) => (
- } key={step.id}>
-
-
- ))}
-
-
-);
-
-export default Steps;
diff --git a/web/src/components/Wizard/Steps/TracingBackend/TracingBackend.styled.ts b/web/src/components/Wizard/Steps/TracingBackend/TracingBackend.styled.ts
new file mode 100644
index 0000000000..c33898348f
--- /dev/null
+++ b/web/src/components/Wizard/Steps/TracingBackend/TracingBackend.styled.ts
@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export const Container = styled.div``;
diff --git a/web/src/components/Wizard/Steps/TracingBackend/TracingBackend.tsx b/web/src/components/Wizard/Steps/TracingBackend/TracingBackend.tsx
new file mode 100644
index 0000000000..a7f1df7d06
--- /dev/null
+++ b/web/src/components/Wizard/Steps/TracingBackend/TracingBackend.tsx
@@ -0,0 +1,9 @@
+const TracingBackend = () => {
+ return (
+
+
Tracing Backend
+
+ );
+};
+
+export default TracingBackend;
\ No newline at end of file
diff --git a/web/src/components/Wizard/Steps/TracingBackend/index.ts b/web/src/components/Wizard/Steps/TracingBackend/index.ts
new file mode 100644
index 0000000000..774763c1f2
--- /dev/null
+++ b/web/src/components/Wizard/Steps/TracingBackend/index.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export {default} from './TracingBackend';
diff --git a/web/src/components/Wizard/Wrapper/Wrapper.tsx b/web/src/components/Wizard/Wrapper/Wrapper.tsx
new file mode 100644
index 0000000000..675b7e9fad
--- /dev/null
+++ b/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(
+ () => [
+ {
+ 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 {children};
+};
+
+export default Wrapper;
diff --git a/web/src/components/Wizard/Wrapper/index.ts b/web/src/components/Wizard/Wrapper/index.ts
new file mode 100644
index 0000000000..991a3f15af
--- /dev/null
+++ b/web/src/components/Wizard/Wrapper/index.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export {default} from './Wrapper';
diff --git a/web/src/pages/Wizard/Wizard.tsx b/web/src/pages/Wizard/Wizard.tsx
index a743d06261..8f1f011df8 100644
--- a/web/src/pages/Wizard/Wizard.tsx
+++ b/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 (
@@ -18,8 +18,8 @@ const Wizard = () => {
-
-
+
+
);
diff --git a/web/src/providers/Wizard/Wizard.provider.tsx b/web/src/providers/Wizard/Wizard.provider.tsx
index a54877ec04..4d3590e2c5 100644
--- a/web/src/providers/Wizard/Wizard.provider.tsx
+++ b/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({
@@ -16,38 +17,18 @@ export const Context = createContext({
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(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(
() => ({
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 {children};
diff --git a/web/src/types/Wizard.types.ts b/web/src/types/Wizard.types.ts
index c92377211e..c202a45c7c 100644
--- a/web/src/types/Wizard.types.ts
+++ b/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;
}