Skip to content

Commit

Permalink
V2Wizard: Add <CreateImageWizard>
Browse files Browse the repository at this point in the history
Adds the scaffolding for the V2 wizard, only empty Image output and
Review steps present at this time.
  • Loading branch information
lucasgarfield authored and regexowl committed Jan 8, 2024
1 parent 8d33971 commit 6e57efb
Show file tree
Hide file tree
Showing 2 changed files with 135 additions and 0 deletions.
66 changes: 66 additions & 0 deletions src/Components/CreateImageWizardV2/CreateImageWizard.scss
Original file line number Diff line number Diff line change
@@ -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;
}
69 changes: 69 additions & 0 deletions src/Components/CreateImageWizardV2/CreateImageWizard.tsx
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 6e57efb

Please sign in to comment.