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; }