From 6e57efb7119a95a2fb6866b2424c1025486a749b Mon Sep 17 00:00:00 2001
From: lucasgarfield <lucas@redhat.com>
Date: Fri, 5 Jan 2024 18:18:21 +0100
Subject: [PATCH] V2Wizard: Add `<CreateImageWizard>`

Adds the scaffolding for the V2 wizard, only empty Image output and
Review steps present at this time.
---
 .../CreateImageWizard.scss                    | 66 ++++++++++++++++++
 .../CreateImageWizardV2/CreateImageWizard.tsx | 69 +++++++++++++++++++
 2 files changed, 135 insertions(+)
 create mode 100644 src/Components/CreateImageWizardV2/CreateImageWizard.scss
 create mode 100644 src/Components/CreateImageWizardV2/CreateImageWizard.tsx

diff --git a/src/Components/CreateImageWizardV2/CreateImageWizard.scss b/src/Components/CreateImageWizardV2/CreateImageWizard.scss
new file mode 100644
index 000000000..16b0ff4ce
--- /dev/null
+++ b/src/Components/CreateImageWizardV2/CreateImageWizard.scss
@@ -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;
+}
diff --git a/src/Components/CreateImageWizardV2/CreateImageWizard.tsx b/src/Components/CreateImageWizardV2/CreateImageWizard.tsx
new file mode 100644
index 000000000..571d52663
--- /dev/null
+++ b/src/Components/CreateImageWizardV2/CreateImageWizard.tsx
@@ -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;