V2 Wizard - Foundations

src/Components/CreateImageWizardV2/CreateImageWizard.scss

@@ -64,7 +64,3 @@ ul.pf-m-plain {
     padding-left: 0;
     margin-left: 0;
 }
-
-button.pf-v5-c-menu-toggle {
-  max-width: 100%;
-}

src/Components/CreateImageWizardV2/CreateImageWizard.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import {
   Button,
@@ -9,58 +9,23 @@ import {
 } from '@patternfly/react-core';
 import { useNavigate } from 'react-router-dom';
 
-import {
-  EnvironmentStateType,
-  filterEnvironment,
-  hasUserSelectedAtLeastOneEnv,
-  useGetAllowedTargets,
-} from './steps/ImageOutput/Environment';
-import ImageOutputStep from './steps/ImageOutput/ImageOutput';
-import ReviewStep from './steps/Review/ReviewStep';
-
-import { RHEL_9, X86_64 } from '../../constants';
+import { useAppDispatch } from '../../store/hooks';
 import './CreateImageWizard.scss';
-import { ArchitectureItem, Distributions } from '../../store/imageBuilderApi';
+import { initializeWizard } from '../../store/wizardSlice';
 import { resolveRelPath } from '../../Utilities/path';
 import { ImageBuilderHeader } from '../sharedComponents/ImageBuilderHeader';
 
-/**
- * @return true if the array in prevAllowedTargets is equivalent to the array
- * allowedTargets, false otherwise
- */
-const isIdenticalToPrev = (
-  prevAllowedTargets: string[],
-  allowedTargets: string[]
-) => {
-  let identicalToPrev = true;
-  if (allowedTargets.length === prevAllowedTargets.length) {
-    allowedTargets.forEach((elem) => {
-      if (!prevAllowedTargets.includes(elem)) {
-        identicalToPrev = false;
-      }
-    });
-  } else {
-    identicalToPrev = false;
-  }
-  return identicalToPrev;
-};
-
 type CustomWizardFooterPropType = {
-  isNextDisabled: boolean;
+  disableNext: boolean;
 };
-/**
- * The custom wizard footer is only switching the order of the buttons compared
- * to the default wizard footer from the PF5 library.
- */
-const CustomWizardFooter = ({ isNextDisabled }: CustomWizardFooterPropType) => {
+
+export const CustomWizardFooter = ({
+  disableNext: disableNext,
+}: CustomWizardFooterPropType) => {
   const { goToNextStep, goToPrevStep, close } = useWizardContext();
   return (
     <WizardFooterWrapper>
-      <Button
-        variant="primary"
-        onClick={goToNextStep}
-        isDisabled={isNextDisabled}
-      >
+      <Button variant="primary" onClick={goToNextStep} isDisabled={disableNext}>
         Next
       </Button>
       <Button variant="secondary" onClick={goToPrevStep}>
@@ -75,41 +40,11 @@ const CustomWizardFooter = ({ isNextDisabled }: CustomWizardFooterPropType) => {
 
 const CreateImageWizard = () => {
   const navigate = useNavigate();
-  // Image output step states
-  const [release, setRelease] = useState<Distributions>(RHEL_9);
-  const [arch, setArch] = useState<ArchitectureItem['arch']>(X86_64);
-  const {
-    data: allowedTargets,
-    isFetching,
-    isSuccess,
-    isError,
-  } = useGetAllowedTargets({
-    architecture: arch,
-    release: release,
-  });
-  const [environment, setEnvironment] = useState<EnvironmentStateType>(
-    filterEnvironment(
-      {
-        aws: { selected: false, authorized: false },
-        azure: { selected: false, authorized: false },
-        gcp: { selected: false, authorized: false },
-        oci: { selected: false, authorized: false },
-        'vsphere-ova': { selected: false, authorized: false },
-        vsphere: { selected: false, authorized: false },
-        'guest-image': { selected: false, authorized: false },
-        'image-installer': { selected: false, authorized: false },
-        wsl: { selected: false, authorized: false },
-      },
-      allowedTargets
-    )
-  );
-  // Update of the environment when the architecture and release are changed.
-  // This pattern prevents the usage of a useEffect See https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
-  const [prevAllowedTargets, setPrevAllowedTargets] = useState(allowedTargets);
-  if (!isIdenticalToPrev(prevAllowedTargets, allowedTargets)) {
-    setPrevAllowedTargets(allowedTargets);
-    setEnvironment(filterEnvironment(environment, allowedTargets));
-  }
+  const dispatch = useAppDispatch();
+
+  // Ensure the wizard starts with a fresh initial state
+  dispatch(initializeWizard);
+
   return (
     <>
       <ImageBuilderHeader />
@@ -118,31 +53,13 @@ const CreateImageWizard = () => {
           <WizardStep
             name="Image output"
             id="step-image-output"
-            footer={
-              <CustomWizardFooter
-                isNextDisabled={!hasUserSelectedAtLeastOneEnv(environment)}
-              />
-            }
-          >
-            <ImageOutputStep
-              release={release}
-              setRelease={setRelease}
-              arch={arch}
-              setArch={setArch}
-              environment={environment}
-              setEnvironment={setEnvironment}
-              isFetching={isFetching}
-              isError={isError}
-              isSuccess={isSuccess}
-            />
-          </WizardStep>
+            footer={<CustomWizardFooter disableNext={false} />}
+          ></WizardStep>
           <WizardStep
             name="Review"
             id="step-review"
-            footer={<CustomWizardFooter isNextDisabled={true} />}
-          >
-            <ReviewStep release={release} arch={arch} />
-          </WizardStep>
+            footer={<CustomWizardFooter disableNext={true} />}
+          ></WizardStep>
         </Wizard>
       </section>
     </>