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,66 @@
.pf-v5-c-wizard__nav-list {
padding-right: 0px;
}
.pf-v5-c-wizard__nav {
overflow-y: unset;
}
.pf-c-popover[data-popper-reference-hidden="true"] {
font-weight: initial;
visibility: initial;
pointer-events: initial;
}
.pf-v5-c-dual-list-selector {
--pf-v5-c-dual-list-selector__menu--MinHeight: 18rem;
--pf-v5-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max: 100vw;
}
.pf-c-form {
--pf-c-form--GridGap: var(--pf-global--spacer--md);
}
.pf-c-form__group-label {
--pf-c-form__group-label--PaddingBottom: var(--pf-global--spacer--xs);
}
.tiles {
display: flex;
}
.tile {
flex: 1 0 0px;
max-width: 250px;
}
.pf-c-tile:focus {
--pf-c-tile__title--Color: var(--pf-c-tile__title--Color);
--pf-c-tile__icon--Color: var(---pf-global--Color--100);
--pf-c-tile--before--BorderWidth: var(--pf-global--BorderWidth--sm);
--pf-c-tile--before--BorderColor: var(--pf-global--BorderColor--100);
}
.pf-c-tile.pf-m-selected:focus {
--pf-c-tile__title--Color: var(--pf-c-tile--focus__title--Color);
--pf-c-tile__icon--Color: var(--pf-c-tile--focus__icon--Color);
}
.provider-icon {
width: 1em;
height: 1em;
}
.pf-u-min-width {
--pf-u-min-width--MinWidth: 18ch;
}
.pf-u-max-width {
--pf-u-max-width--MaxWidth: 26rem;
}
ul.pf-m-plain {
list-style: none;
padding-left: 0;
margin-left: 0;
}

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;