From 2173545f60fdef604e17a47b59b93095b3bf0937 Mon Sep 17 00:00:00 2001
From: Thomas Lavocat <tlavocat@redhat.com>
Date: Thu, 9 Nov 2023 09:29:31 +0100
Subject: [PATCH] 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.
---
 .../CreateImageWizardV2/CreateImageWizard.tsx |  8 ++++
 .../steps/Review/ReviewStep.tsx               | 42 +++++++++++++++++
 .../steps/Review/imageOutput.tsx              | 46 +++++++++++++++++++
 3 files changed, 96 insertions(+)
 create mode 100644 src/Components/CreateImageWizardV2/steps/Review/ReviewStep.tsx
 create mode 100644 src/Components/CreateImageWizardV2/steps/Review/imageOutput.tsx

diff --git a/src/Components/CreateImageWizardV2/CreateImageWizard.tsx b/src/Components/CreateImageWizardV2/CreateImageWizard.tsx
index 5f8a8873..a16e1fe2 100644
--- a/src/Components/CreateImageWizardV2/CreateImageWizard.tsx
+++ b/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>
     </>
diff --git a/src/Components/CreateImageWizardV2/steps/Review/ReviewStep.tsx b/src/Components/CreateImageWizardV2/steps/Review/ReviewStep.tsx
new file mode 100644
index 00000000..51864d9e
--- /dev/null
+++ b/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;
diff --git a/src/Components/CreateImageWizardV2/steps/Review/imageOutput.tsx b/src/Components/CreateImageWizardV2/steps/Review/imageOutput.tsx
new file mode 100644
index 00000000..d9d24bed
--- /dev/null
+++ b/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>
+  );
+};