V2Wizard: Add <CreateImageWizard>

Adds the scaffolding for the V2 wizard, only empty Image output and
Review steps present at this time.
This commit is contained in:
lucasgarfield 2024-01-05 18:18:21 +01:00 committed by Lucas Garfield
parent 58fcdc0dab
commit bb6bf51068
2 changed files with 135 additions and 0 deletions

View file

@ -0,0 +1,69 @@
import React from 'react';
import {
Button,
Wizard,
WizardFooterWrapper,
WizardStep,
useWizardContext,
} from '@patternfly/react-core';
import { useNavigate } from 'react-router-dom';
import { useAppDispatch } from '../../store/hooks';
import './CreateImageWizard.scss';
import { initializeWizard } from '../../store/wizardSlice';
import { resolveRelPath } from '../../Utilities/path';
import { ImageBuilderHeader } from '../sharedComponents/ImageBuilderHeader';
type CustomWizardFooterPropType = {
disableNext: boolean;
};
export const CustomWizardFooter = ({
disableNext: disableNext,
}: CustomWizardFooterPropType) => {
const { goToNextStep, goToPrevStep, close } = useWizardContext();
return (
<WizardFooterWrapper>
<Button variant="primary" onClick={goToNextStep} isDisabled={disableNext}>
Next
</Button>
<Button variant="secondary" onClick={goToPrevStep}>
Back
</Button>
<Button variant="link" onClick={close}>
Cancel
</Button>
</WizardFooterWrapper>
);
};
const CreateImageWizard = () => {
const navigate = useNavigate();
const dispatch = useAppDispatch();
// Ensure the wizard starts with a fresh initial state
dispatch(initializeWizard);
return (
<>
<ImageBuilderHeader />
<section className="pf-l-page__main-section pf-c-page__main-section">
<Wizard onClose={() => navigate(resolveRelPath(''))} isVisitRequired>
<WizardStep
name="Image output"
id="step-image-output"
footer={<CustomWizardFooter disableNext={false} />}
></WizardStep>
<WizardStep
name="Review"
id="step-review"
footer={<CustomWizardFooter disableNext={true} />}
></WizardStep>
</Wizard>
</section>
</>
);
};
export default CreateImageWizard;