V2Wizard: Add packages to the Review step

This adds packages counter and a table of packages in a popover to the Review step.

The name of the field was also updated to "Additional packages".

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

@@ -5,7 +5,10 @@ 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';
+import {
+  selectCustomRepositories,
+  selectPackages,
+} from '../../../../store/wizardSlice';
 
 type repoPropType = {
   repoUrl: string[] | undefined;
@@ -68,9 +71,33 @@ export const FSReviewTable = () => {
 };
 
 export const PackagesTable = () => {
+  const packages = useAppSelector((state) => selectPackages(state));
   return (
     <Panel isScrollable>
-      <PanelMain maxHeight="30ch"></PanelMain>
+      <PanelMain maxHeight="30ch">
+        <Table aria-label="Packages table" variant="compact">
+          <Thead>
+            <Tr>
+              <Th>Name</Th>
+              <Th>Description</Th>
+              <Th>Package repository</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>
+                <Td>{pkg.summary}</Td>
+                <Td className="pf-m-width-20">
+                  {pkg.repository === 'distro'
+                    ? 'Red Hat repository'
+                    : 'Custom repository'}
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </PanelMain>
     </Panel>
   );
 };

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

@@ -18,7 +18,7 @@ import { ExclamationTriangleIcon, HelpIcon } from '@patternfly/react-icons';
 import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
 
 import ActivationKeyInformation from './../Registration/ActivationKeyInformation';
-import { RepositoriesTable } from './ReviewStepTables';
+import { PackagesTable, RepositoriesTable } from './ReviewStepTables';
 
 import {
   RELEASES,
@@ -43,6 +43,7 @@ import {
   selectGcpAccountType,
   selectGcpEmail,
   selectGcpShareMethod,
+  selectPackages,
   selectRegistrationType,
 } from '../../../../store/wizardSlice';
 import { toMonthAndYear } from '../../../../Utilities/time';
@@ -271,23 +272,10 @@ export const ContentList = () => {
   const customRepositories = useAppSelector((state) =>
     selectCustomRepositories(state)
   );
+  const packages = useAppSelector((state) => selectPackages(state));
   return (
     <TextContent>
       <TextList component={TextListVariants.dl}>
-        <TextListItem
-          component={TextListItemVariants.dt}
-          className="pf-u-min-width"
-        >
-          Additional Red Hat
-          <br />
-          and 3rd party packages
-        </TextListItem>
-        <TextListItem
-          component={TextListItemVariants.dd}
-          data-testid="chosen-packages-count"
-        >
-          {0}
-        </TextListItem>
         <TextListItem component={TextListItemVariants.dt}>
           Custom repositories
         </TextListItem>
@@ -315,6 +303,36 @@ export const ContentList = () => {
             0
           )}
         </TextListItem>
+        <TextListItem
+          component={TextListItemVariants.dt}
+          className="pf-u-min-width"
+        >
+          Additional packages
+        </TextListItem>
+        <TextListItem
+          component={TextListItemVariants.dd}
+          data-testid="chosen-packages-count"
+        >
+          {packages?.length > 0 ? (
+            <Popover
+              position="bottom"
+              headerContent="Additional packages"
+              hasAutoWidth
+              minWidth="60rem"
+              bodyContent={<PackagesTable />}
+            >
+              <Button
+                variant="link"
+                aria-label="About packages"
+                className="pf-u-p-0"
+              >
+                {packages?.length}
+              </Button>
+            </Popover>
+          ) : (
+            0
+          )}
+        </TextListItem>
       </TextList>
       <br />
     </TextContent>

src/test/Components/CreateImageWizardV2/CreateImageWizard.test.tsx

@@ -1059,7 +1059,8 @@ describe('Step Upload to AWS', () => {
       await user.click(registrationExpandable);
       await user.click(contentExpandable);
 
-      await screen.findByText('Additional Red Hatand 3rd party packages');
+      await within(contentExpandable).findByText('Custom repositories');
+      await within(contentExpandable).findByText('Additional packages');
       //  await user.click(fscExpandable);
       // await screen.findByText('Configuration type');
     });
@@ -1078,8 +1079,10 @@ describe('Step Upload to AWS', () => {
       ).not.toBeInTheDocument();
       await user.click(targetExpandable);
       await screen.findByText('AWS');
+
       await user.click(contentExpandable);
-      await screen.findByText('Additional Red Hatand 3rd party packages');
+      await within(contentExpandable).findByText('Custom repositories');
+      await within(contentExpandable).findByText('Additional packages');
     });
   });
   //     await user.click(fscExpandable);