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:
parent
58fcdc0dab
commit
bb6bf51068
2 changed files with 135 additions and 0 deletions
69
src/Components/CreateImageWizardV2/CreateImageWizard.tsx
Normal file
69
src/Components/CreateImageWizardV2/CreateImageWizard.tsx
Normal 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;
|
||||
Loading…
Add table
Add a link
Reference in a new issue