V2Wizard: Create a folder for Review step and copy review component a…

…nd enable tests

This created a new folder for the Review step and copies components that will be needed:
- ReviewStep.tsx
- ReviewStepTables.tsx
- ReviewStepTextLists.tsx

src/Components/CreateImageWizardV2/CreateImageWizard.tsx

@@ -14,6 +14,7 @@ import ImageOutputStep from './steps/ImageOutput';
 import OscapStep from './steps/Oscap';
 import RegistrationStep from './steps/Registration';
 import RepositoriesStep from './steps/Repositories';
+import ReviewStep from './steps/Review';
 import Aws from './steps/TargetEnvironment/Aws';
 import Gcp from './steps/TargetEnvironment/Gcp';
 import {
@@ -212,7 +213,9 @@ const CreateImageWizard = () => {
             name="Review"
             id="step-review"
             footer={<CustomWizardFooter disableNext={true} />}
-          ></WizardStep>
+          >
+            <ReviewStep />
+          </WizardStep>
         </Wizard>
       </section>
     </>

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

@@ -0,0 +1,196 @@
+import React, { useState } from 'react';
+
+import {
+  ExpandableSection,
+  Text,
+  TextContent,
+  TextVariants,
+} from '@patternfly/react-core';
+
+import {
+  ContentList,
+  FSCList,
+  ImageDetailsList,
+  ImageOutputList,
+  OscapList,
+  RegisterLaterList,
+  RegisterNowList,
+  TargetEnvAWSList,
+  TargetEnvGCPList,
+  TargetEnvOciList,
+  TargetEnvOtherList,
+} from './ReviewStepTextLists';
+
+import isRhel from '../../../../../src/Utilities/isRhel';
+import { useAppSelector } from '../../../../store/hooks';
+import {
+  selectBlueprintDescription,
+  selectBlueprintName,
+  selectDistribution,
+  selectImageTypes,
+  selectProfile,
+  selectRegistrationType,
+} from '../../../../store/wizardSlice';
+
+const Review = () => {
+  const blueprintName = useAppSelector((state) => selectBlueprintName(state));
+  const blueprintDescription = useAppSelector((state) =>
+    selectBlueprintDescription(state)
+  );
+  const distribution = useAppSelector((state) => selectDistribution(state));
+  const environments = useAppSelector((state) => selectImageTypes(state));
+  const oscapProfile = useAppSelector((state) => selectProfile(state));
+  const registrationType = useAppSelector((state) =>
+    selectRegistrationType(state)
+  );
+
+  const [isExpandedImageOutput, setIsExpandedImageOutput] = useState(false);
+  const [isExpandedTargetEnvs, setIsExpandedTargetEnvs] = useState(false);
+  const [isExpandedFSC, setIsExpandedFSC] = useState(false);
+  const [isExpandedContent, setIsExpandedContent] = useState(false);
+  const [isExpandedRegistration, setIsExpandedRegistration] = useState(false);
+  const [isExpandedImageDetail, setIsExpandedImageDetail] = useState(false);
+  const [isExpandedOscapDetail, setIsExpandedOscapDetail] = useState(false);
+
+  const onToggleImageOutput = (isExpandedImageOutput: boolean) =>
+    setIsExpandedImageOutput(isExpandedImageOutput);
+  const onToggleTargetEnvs = (isExpandedTargetEnvs: boolean) =>
+    setIsExpandedTargetEnvs(isExpandedTargetEnvs);
+  const onToggleFSC = (isExpandedFSC: boolean) =>
+    setIsExpandedFSC(isExpandedFSC);
+  const onToggleContent = (isExpandedContent: boolean) =>
+    setIsExpandedContent(isExpandedContent);
+  const onToggleRegistration = (isExpandedRegistration: boolean) =>
+    setIsExpandedRegistration(isExpandedRegistration);
+  const onToggleImageDetail = (isExpandedImageDetail: boolean) =>
+    setIsExpandedImageDetail(isExpandedImageDetail);
+  const onToggleOscapDetails = (isExpandedOscapDetail: boolean) =>
+    setIsExpandedOscapDetail(isExpandedOscapDetail);
+
+  return (
+    <>
+      <ExpandableSection
+        toggleContent={'Image output'}
+        onToggle={(_event, isExpandedImageOutput) =>
+          onToggleImageOutput(isExpandedImageOutput)
+        }
+        isExpanded={isExpandedImageOutput}
+        isIndented
+        data-testid="image-output-expandable"
+      >
+        <ImageOutputList />
+      </ExpandableSection>
+      <ExpandableSection
+        toggleContent={'Target environments'}
+        onToggle={(_event, isExpandedTargetEnvs) =>
+          onToggleTargetEnvs(isExpandedTargetEnvs)
+        }
+        isExpanded={isExpandedTargetEnvs}
+        isIndented
+        data-testid="target-environments-expandable"
+      >
+        {environments.includes('aws') && <TargetEnvAWSList />}
+        {environments.includes('gcp') && <TargetEnvGCPList />}
+        {environments.includes('oci') && <TargetEnvOciList />}
+        {environments.includes('vsphere') && (
+          <TextContent>
+            <Text component={TextVariants.h3}>VMware vSphere (.vmdk)</Text>
+            <TargetEnvOtherList />
+          </TextContent>
+        )}
+        {environments.includes('vsphere-ova') && (
+          <TextContent>
+            <Text component={TextVariants.h3}>VMware vSphere (.ova)</Text>
+            <TargetEnvOtherList />
+          </TextContent>
+        )}
+        {environments.includes('guest-image') && (
+          <TextContent>
+            <Text component={TextVariants.h3}>
+              Virtualization - Guest image (.qcow2)
+            </Text>
+            <TargetEnvOtherList />
+          </TextContent>
+        )}
+        {environments.includes('image-installer') && (
+          <TextContent>
+            <Text component={TextVariants.h3}>
+              Bare metal - Installer (.iso)
+            </Text>
+            <TargetEnvOtherList />
+          </TextContent>
+        )}
+        {environments.includes('wsl') && (
+          <TextContent>
+            <Text component={TextVariants.h3}>
+              WSL - Windows Subsystem for Linux (.tar.gz)
+            </Text>
+            <TargetEnvOtherList />
+          </TextContent>
+        )}
+      </ExpandableSection>
+      {isRhel(distribution) && (
+        <ExpandableSection
+          toggleContent={'Registration'}
+          onToggle={(_event, isExpandedRegistration) =>
+            onToggleRegistration(isExpandedRegistration)
+          }
+          isExpanded={isExpandedRegistration}
+          isIndented
+          data-testid="registration-expandable"
+        >
+          {registrationType === 'register-later' && <RegisterLaterList />}
+          {registrationType.startsWith('register-now') && <RegisterNowList />}
+        </ExpandableSection>
+      )}
+      {oscapProfile && (
+        <ExpandableSection
+          toggleContent={'OpenSCAP'}
+          onToggle={(_event, isExpandedOscapDetail) =>
+            onToggleOscapDetails(isExpandedOscapDetail)
+          }
+          isExpanded={isExpandedOscapDetail}
+          isIndented
+          data-testid="oscap-detail-expandable"
+        >
+          <OscapList />
+        </ExpandableSection>
+      )}
+      <ExpandableSection
+        toggleContent={'File system configuration'}
+        onToggle={(_event, isExpandedFSC) => onToggleFSC(isExpandedFSC)}
+        isExpanded={isExpandedFSC}
+        isIndented
+        data-testid="file-system-configuration-expandable"
+      >
+        <FSCList />
+      </ExpandableSection>
+      <ExpandableSection
+        toggleContent={'Content'}
+        onToggle={(_event, isExpandedContent) =>
+          onToggleContent(isExpandedContent)
+        }
+        isExpanded={isExpandedContent}
+        isIndented
+        data-testid="content-expandable"
+      >
+        <ContentList />
+      </ExpandableSection>
+      {(blueprintName || blueprintDescription) && (
+        <ExpandableSection
+          toggleContent={'Image details'}
+          onToggle={(_event, isExpandedImageDetail) =>
+            onToggleImageDetail(isExpandedImageDetail)
+          }
+          isExpanded={isExpandedImageDetail}
+          isIndented
+          data-testid="image-details-expandable"
+        >
+          <ImageDetailsList />
+        </ExpandableSection>
+      )}
+    </>
+  );
+};
+
+export default Review;

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

@@ -0,0 +1,104 @@
+import React from 'react';
+
+import { Alert, Panel, PanelMain, Spinner } from '@patternfly/react-core';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+
+import { useListRepositoriesQuery } from '../../../../store/contentSourcesApi';
+import { useAppSelector } from '../../../../store/hooks';
+import { selectCustomRepositories } from '../../../../store/wizardSlice';
+
+type repoPropType = {
+  repoUrl: string[] | undefined;
+};
+
+const RepoName = ({ repoUrl }: repoPropType) => {
+  const { data, isSuccess, isFetching, isError } = useListRepositoriesQuery({
+    // @ts-ignore
+    url: repoUrl,
+    contentType: 'rpm',
+    origin: 'external',
+  });
+
+  const errorLoading = () => {
+    return (
+      <Alert
+        variant="danger"
+        isInline
+        isPlain
+        title="Error loading repository name"
+      />
+    );
+  };
+
+  return (
+    <>
+      {/*
+        this might be a tad bit hacky
+        "isSuccess" indicates only that the query fetched successfuly, but it
+        doesn't differentiate between a scenario when the repository was found
+        in the response and when it was not
+        for this reason I've split the "isSuccess" into two paths:
+        - query finished and the repo was found -> render the name of the repo
+        - query finished, but the repo was not found -> render an error
+      */}
+      {isSuccess && data.data?.[0]?.name && <p>{data.data?.[0].name}</p>}
+      {isSuccess && !data.data?.[0]?.name && errorLoading()}
+      {isFetching && <Spinner size="md" />}
+      {isError && errorLoading()}
+    </>
+  );
+};
+
+export const FSReviewTable = () => {
+  return (
+    <Panel isScrollable>
+      <PanelMain maxHeight="30ch">
+        <Table aria-label="File system configuration table" variant="compact">
+          <Thead>
+            <Tr>
+              <Th>Mount point</Th>
+              <Th>File system type</Th>
+              <Th>Minimum size</Th>
+            </Tr>
+          </Thead>
+        </Table>
+      </PanelMain>
+    </Panel>
+  );
+};
+
+export const PackagesTable = () => {
+  return (
+    <Panel isScrollable>
+      <PanelMain maxHeight="30ch"></PanelMain>
+    </Panel>
+  );
+};
+
+export const RepositoriesTable = () => {
+  const repositoriesList = useAppSelector((state) =>
+    selectCustomRepositories(state)
+  );
+  return (
+    <Panel isScrollable>
+      <PanelMain maxHeight="30ch">
+        <Table aria-label="Custom repositories table" variant="compact">
+          <Thead>
+            <Tr>
+              <Th>Name</Th>
+            </Tr>
+          </Thead>
+          <Tbody data-testid="repositories-tbody-review">
+            {repositoriesList?.map((repo, repoIndex) => (
+              <Tr key={repoIndex}>
+                <Td className="pf-m-width-60">
+                  <RepoName repoUrl={repo.baseurl} />
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </PanelMain>
+    </Panel>
+  );
+};