wizard/review: add the review step

Bring in a review step in the wizard. The purpose is to incrementally
develop it while new steps are added to the mix. This way the Wizard
gets to be integration testable from the early beginning.

Right now the review step is only showing information about the Image
Output step. Even though the Image Output step contains data about the
target environment, these information are going to need the Target
Environment step to be developed in order to be fully shown.

src/Components/CreateImageWizardV2/CreateImageWizard.tsx

@@ -16,6 +16,7 @@ import {
   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 './CreateImageWizard.scss';
@@ -135,6 +136,13 @@ const CreateImageWizard = () => {
               isSuccess={isSuccess}
             />
           </WizardStep>
+          <WizardStep
+            name="Review"
+            id="step-review"
+            footer={<CustomWizardFooter isNextDisabled={true} />}
+          >
+            <ReviewStep release={release} arch={arch} />
+          </WizardStep>
         </Wizard>
       </section>
     </>

src/Components/CreateImageWizardV2/steps/Review/ReviewStep.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+
+import { ExpandableSection, Form, Title } from '@patternfly/react-core';
+
+import { ImageOutputList } from './imageOutput';
+
+import {
+  ArchitectureItem,
+  Distributions,
+} from '../../../../store/imageBuilderApi';
+
+type ReviewStepPropTypes = {
+  release: Distributions;
+  arch: ArchitectureItem['arch'];
+};
+
+const ReviewStep = ({ release, arch }: ReviewStepPropTypes) => {
+  const [isExpandedImageOutput, setIsExpandedImageOutput] = useState(false);
+
+  const onToggleImageOutput = (isExpandedImageOutput: boolean) =>
+    setIsExpandedImageOutput(isExpandedImageOutput);
+  return (
+    <>
+      <Form>
+        <Title headingLevel="h2">Review</Title>
+        <ExpandableSection
+          toggleContent={'Image output'}
+          onToggle={(_event, isExpandedImageOutput) =>
+            onToggleImageOutput(isExpandedImageOutput)
+          }
+          isExpanded={isExpandedImageOutput}
+          isIndented
+          data-testid="image-output-expandable"
+        >
+          <ImageOutputList release={release} arch={arch} />
+        </ExpandableSection>
+      </Form>
+    </>
+  );
+};
+
+export default ReviewStep;

src/Components/CreateImageWizardV2/steps/Review/imageOutput.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import {
+  TextContent,
+  TextList,
+  TextListItem,
+  TextListVariants,
+  TextListItemVariants,
+} from '@patternfly/react-core';
+
+import { RELEASES } from '../../../../constants';
+import {
+  ArchitectureItem,
+  Distributions,
+} from '../../../../store/imageBuilderApi';
+
+type ImageOutputListPropTypes = {
+  release: Distributions;
+  arch: ArchitectureItem['arch'];
+};
+
+export const ImageOutputList = ({
+  release,
+  arch,
+}: ImageOutputListPropTypes) => {
+  return (
+    <TextContent>
+      <TextList component={TextListVariants.dl}>
+        <TextListItem
+          component={TextListItemVariants.dt}
+          className="pf-u-min-width"
+        >
+          Release
+        </TextListItem>
+        <TextListItem component={TextListItemVariants.dd}>
+          {RELEASES.get(release)}
+        </TextListItem>
+        <TextListItem component={TextListItemVariants.dt}>
+          Architecture
+        </TextListItem>
+        <TextListItem component={TextListItemVariants.dd}>{arch}</TextListItem>
+      </TextList>
+      <br />
+    </TextContent>
+  );
+};