V2Wizard: Add <ArchSelect> to Image Output step

This commit drops the DDF dependency from the `<ArchSelect>`.

src/Components/CreateImageWizardV2/steps/ImageOutput/ArchSelect.tsx

@@ -1,30 +1,35 @@
-import React, { useState } from 'react';
+import React, { ReactElement, useState } from 'react';
 
-import { FormSpy } from '@data-driven-forms/react-form-renderer';
-import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';
-import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
 import { FormGroup } from '@patternfly/react-core';
 import {
   Select,
   SelectOption,
   SelectVariant,
 } from '@patternfly/react-core/deprecated';
-import PropTypes from 'prop-types';
 
-import { ARCHS } from '../../../constants';
+import { ARCHS } from '../../../../constants';
+import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
+import { ImageRequest } from '../../../../store/imageBuilderApi';
+import {
+  changeArchitecture,
+  selectArchitecture,
+} from '../../../../store/wizardSlice';
 
-const ArchSelect = ({ label, isRequired, ...props }) => {
-  const { change, getState } = useFormApi();
-  const { input } = useFieldApi(props);
+const ArchSelect = () => {
+  const arch = useAppSelector((state) => selectArchitecture(state));
+  const dispatch = useAppDispatch();
   const [isOpen, setIsOpen] = useState(false);
 
-  const setArch = (_, selection) => {
-    change(input.name, selection);
+  const setArch = (
+    _event: React.MouseEvent,
+    selection: ImageRequest['architecture']
+  ) => {
+    dispatch(changeArchitecture(selection));
     setIsOpen(false);
   };
 
   const setSelectOptions = () => {
-    var options = [];
+    const options: ReactElement[] = [];
     ARCHS.forEach((arch) => {
       options.push(
         <SelectOption key={arch} value={arch}>
@@ -37,28 +42,19 @@ const ArchSelect = ({ label, isRequired, ...props }) => {
   };
 
   return (
-    <FormSpy>
-      {() => (
-        <FormGroup isRequired={isRequired} label={label}>
-          <Select
-            ouiaId="arch_select"
-            variant={SelectVariant.single}
-            onToggle={() => setIsOpen(!isOpen)}
-            onSelect={setArch}
-            selections={getState()?.values?.[input.name]}
-            isOpen={isOpen}
-          >
-            {setSelectOptions()}
-          </Select>
-        </FormGroup>
-      )}
-    </FormSpy>
+    <FormGroup isRequired={true} label="Architecture">
+      <Select
+        ouiaId="arch_select"
+        variant={SelectVariant.single}
+        onToggle={() => setIsOpen(!isOpen)}
+        onSelect={setArch}
+        selections={arch}
+        isOpen={isOpen}
+      >
+        {setSelectOptions()}
+      </Select>
+    </FormGroup>
   );
 };
 
-ArchSelect.propTypes = {
-  label: PropTypes.node,
-  isRequired: PropTypes.bool,
-};
-
 export default ArchSelect;

src/Components/CreateImageWizardV2/steps/ImageOutput/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { Text, Form, Title } from '@patternfly/react-core';
 
+import ArchSelect from './ArchSelect';
 import ReleaseLifecycle from './ReleaseLifecycle';
 import ReleaseSelect from './ReleaseSelect';
 
@@ -19,6 +20,7 @@ const ImageOutputStep = () => {
       </Text>
       <ReleaseSelect />
       <ReleaseLifecycle />
+      <ArchSelect />
     </Form>
   );
 };

src/store/wizardSlice.ts

@@ -1,19 +1,25 @@
 import { PayloadAction, createSlice } from '@reduxjs/toolkit';
 
-import { Distributions } from './imageBuilderApi';
+import { Distributions, ImageRequest } from './imageBuilderApi';
 
-import { RHEL_9 } from '../constants';
+import { RHEL_9, X86_64 } from '../constants';
 
 import { RootState } from '.';
 
 type wizardState = {
+  architecture: ImageRequest['architecture'];
   distribution: Distributions;
 };
 
 const initialState: wizardState = {
+  architecture: X86_64,
   distribution: RHEL_9,
 };
 
+export const selectArchitecture = (state: RootState) => {
+  return state.wizard.architecture;
+};
+
 export const selectDistribution = (state: RootState) => {
   return state.wizard.distribution;
 };
@@ -23,11 +29,18 @@ export const wizardSlice = createSlice({
   initialState,
   reducers: {
     initializeWizard: () => initialState,
+    changeArchitecture: (
+      state,
+      action: PayloadAction<ImageRequest['architecture']>
+    ) => {
+      state.architecture = action.payload;
+    },
     changeDistribution: (state, action: PayloadAction<Distributions>) => {
       state.distribution = action.payload;
     },
   },
 });
 
-export const { initializeWizard, changeDistribution } = wizardSlice.actions;
+export const { initializeWizard, changeArchitecture, changeDistribution } =
+  wizardSlice.actions;
 export default wizardSlice.reducer;