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

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/steps/Review/ReviewStep.tsx

@@ -0,0 +1,211 @@
+import React, { useEffect, useState } from 'react';
+
+import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
+import {
+  ExpandableSection,
+  Text,
+  TextContent,
+  TextVariants,
+} from '@patternfly/react-core';
+import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
+
+import RepositoryUnavailable from './RepositoryUnavailable';
+import {
+  ContentList,
+  FSCList,
+  ImageDetailsList,
+  ImageOutputList,
+  OscapList,
+  RegisterLaterList,
+  RegisterNowList,
+  TargetEnvAWSList,
+  TargetEnvAzureList,
+  TargetEnvGCPList,
+  TargetEnvOciList,
+  TargetEnvOtherList,
+} from './ReviewStepTextLists';
+import UsrSubDirectoriesDisabled from './UsrSubDirectoriesDisabled';
+
+import isRhel from '../../../Utilities/isRhel';
+
+const ReviewStep = () => {
+  const { auth } = useChrome();
+  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 { change, getState } = useFormApi();
+
+  useEffect(() => {
+    const registerSystem = getState()?.values?.['register-system'];
+    if (registerSystem?.startsWith('register-now')) {
+      (async () => {
+        const userData = await auth?.getUser();
+        const id = userData?.identity?.internal?.org_id;
+        change('subscription-organization-id', id);
+      })();
+    }
+  });
+
+  const onToggleImageOutput = (isExpandedImageOutput) =>
+    setIsExpandedImageOutput(isExpandedImageOutput);
+  const onToggleTargetEnvs = (isExpandedTargetEnvs) =>
+    setIsExpandedTargetEnvs(isExpandedTargetEnvs);
+  const onToggleFSC = (isExpandedFSC) => setIsExpandedFSC(isExpandedFSC);
+  const onToggleContent = (isExpandedContent) =>
+    setIsExpandedContent(isExpandedContent);
+  const onToggleRegistration = (isExpandedRegistration) =>
+    setIsExpandedRegistration(isExpandedRegistration);
+  const onToggleImageDetail = (isExpandedImageDetail) =>
+    setIsExpandedImageDetail(isExpandedImageDetail);
+  const onToggleOscapDetails = (isExpandedOscapDetail) =>
+    setIsExpandedOscapDetail(isExpandedOscapDetail);
+
+  return (
+    <>
+      <RepositoryUnavailable />
+      {getState()?.values?.['file-system-configuration']?.find((mp) =>
+        mp.mountpoint.includes('/usr')
+      ) && <UsrSubDirectoriesDisabled />}
+      <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"
+      >
+        {getState()?.values?.['target-environment']?.aws && (
+          <TargetEnvAWSList />
+        )}
+        {getState()?.values?.['target-environment']?.gcp && (
+          <TargetEnvGCPList />
+        )}
+        {getState()?.values?.['target-environment']?.azure && (
+          <TargetEnvAzureList />
+        )}
+        {getState()?.values?.['target-environment']?.oci && (
+          <TargetEnvOciList />
+        )}
+        {getState()?.values?.['target-environment']?.vsphere && (
+          <TextContent>
+            <Text component={TextVariants.h3}>VMware vSphere (.vmdk)</Text>
+            <TargetEnvOtherList />
+          </TextContent>
+        )}
+        {getState()?.values?.['target-environment']?.['vsphere-ova'] && (
+          <TextContent>
+            <Text component={TextVariants.h3}>VMware vSphere (.ova)</Text>
+            <TargetEnvOtherList />
+          </TextContent>
+        )}
+        {getState()?.values?.['target-environment']?.['guest-image'] && (
+          <TextContent>
+            <Text component={TextVariants.h3}>
+              Virtualization - Guest image (.qcow2)
+            </Text>
+            <TargetEnvOtherList />
+          </TextContent>
+        )}
+        {getState()?.values?.['target-environment']?.['image-installer'] && (
+          <TextContent>
+            <Text component={TextVariants.h3}>
+              Bare metal - Installer (.iso)
+            </Text>
+            <TargetEnvOtherList />
+          </TextContent>
+        )}
+        {getState()?.values?.['target-environment']?.wsl && (
+          <TextContent>
+            <Text component={TextVariants.h3}>
+              WSL - Windows Subsystem for Linux (.tar.gz)
+            </Text>
+            <TargetEnvOtherList />
+          </TextContent>
+        )}
+      </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>
+      {isRhel(getState()?.values?.release) && (
+        <ExpandableSection
+          toggleContent={'Registration'}
+          onToggle={(_event, isExpandedRegistration) =>
+            onToggleRegistration(isExpandedRegistration)
+          }
+          isExpanded={isExpandedRegistration}
+          isIndented
+          data-testid="registration-expandable"
+        >
+          {getState()?.values?.['register-system'] === 'register-later' && (
+            <RegisterLaterList />
+          )}
+          {getState()?.values?.['register-system']?.startsWith(
+            'register-now'
+          ) && <RegisterNowList />}
+        </ExpandableSection>
+      )}
+      {(getState()?.values?.['image-name'] ||
+        getState()?.values?.['image-description']) && (
+        <ExpandableSection
+          toggleContent={'Image details'}
+          onToggle={(_event, isExpandedImageDetail) =>
+            onToggleImageDetail(isExpandedImageDetail)
+          }
+          isExpanded={isExpandedImageDetail}
+          isIndented
+          data-testid="image-details-expandable"
+        >
+          <ImageDetailsList />
+        </ExpandableSection>
+      )}
+      {getState()?.values?.['oscap-profile'] && (
+        <ExpandableSection
+          toggleContent={'OpenSCAP'}
+          onToggle={(_event, isExpandedOscapDetail) =>
+            onToggleOscapDetails(isExpandedOscapDetail)
+          }
+          isExpanded={isExpandedOscapDetail}
+          isIndented
+          data-testid="oscap-detail-expandable"
+        >
+          <OscapList />
+        </ExpandableSection>
+      )}
+    </>
+  );
+};
+
+export default ReviewStep;

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

@@ -0,0 +1,138 @@
+import React from 'react';
+
+import { useFormApi } from '@data-driven-forms/react-form-renderer';
+import { Alert, Panel, PanelMain, Spinner } from '@patternfly/react-core';
+import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import PropTypes from 'prop-types';
+
+import { UNIT_GIB, UNIT_MIB } from '../../../constants';
+import { useListRepositoriesQuery } from '../../../store/contentSourcesApi';
+
+const RepoName = ({ repoUrl }) => {
+  const { data, isSuccess, isFetching, isError } = useListRepositoriesQuery({
+    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 = () => {
+  const { getState } = useFormApi();
+  const fsc = getState().values['file-system-configuration'];
+  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>
+          <Tbody data-testid="file-system-configuration-tbody-review">
+            {fsc.map((partition, partitionIndex) => (
+              <Tr key={partitionIndex}>
+                <Td className="pf-m-width-30">{partition.mountpoint}</Td>
+                <Td className="pf-m-width-30">xfs</Td>
+                <Td className="pf-m-width-30">
+                  {partition.size}{' '}
+                  {partition.unit === UNIT_GIB
+                    ? 'GiB'
+                    : partition.unit === UNIT_MIB
+                    ? 'MiB'
+                    : 'KiB'}
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </PanelMain>
+    </Panel>
+  );
+};
+
+export const PackagesTable = () => {
+  const { getState } = useFormApi();
+  const packages = getState()?.values['selected-packages'];
+  return (
+    <Panel isScrollable>
+      <PanelMain maxHeight="30ch">
+        <Table aria-label="Packages table" variant="compact">
+          <Thead>
+            <Tr>
+              <Th>Name</Th>
+            </Tr>
+          </Thead>
+          <Tbody data-testid="packages-tbody-review">
+            {packages.map((pkg, pkgIndex) => (
+              <Tr key={pkgIndex}>
+                <Td className="pf-m-width-30">{pkg.name}</Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </PanelMain>
+    </Panel>
+  );
+};
+
+export const RepositoriesTable = () => {
+  const { getState } = useFormApi();
+  const repositories = getState()?.values?.['payload-repositories'];
+  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">
+            {repositories.map((repo, repoIndex) => (
+              <Tr key={repoIndex}>
+                <Td className="pf-m-width-60">
+                  <RepoName repoUrl={repo.baseurl} />
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </PanelMain>
+    </Panel>
+  );
+};
+
+RepoName.propTypes = {
+  repoUrl: PropTypes.string,
+};