CreateImageWizardV2: add package groups to the review step

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

@@ -20,6 +20,7 @@ import {
   selectCustomRepositories,
   selectDistribution,
   selectPackages,
+  selectGroups,
   selectPartitions,
   selectRecommendedRepositories,
 } from '../../../../store/wizardSlice';
@@ -191,6 +192,8 @@ export const SnapshotTable = ({
 
 export const PackagesTable = () => {
   const packages = useAppSelector(selectPackages);
+  const groups = useAppSelector(selectGroups);
+
   return (
     <Panel isScrollable>
       <PanelMain maxHeight="30ch">
@@ -220,6 +223,19 @@ export const PackagesTable = () => {
                 </Td>
               </Tr>
             ))}
+            {groups.map((grp, grpIndex) => (
+              <Tr key={grpIndex}>
+                <Td className="pf-m-width-30">@{grp.name}</Td>
+                <Td>{grp.description ? grp.description : 'Not available'}</Td>
+                <Td className="pf-m-width-30">
+                  {grp.repository === 'distro'
+                    ? 'Red Hat repository'
+                    : grp.repository === 'custom'
+                    ? 'Custom repository'
+                    : 'Not available'}
+                </Td>
+              </Tr>
+            ))}
           </Tbody>
         </Table>
       </PanelMain>

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

@@ -55,6 +55,7 @@ import {
   selectGcpEmail,
   selectGcpShareMethod,
   selectPackages,
+  selectGroups,
   selectRegistrationType,
   selectFileSystemPartitionMode,
   selectRecommendedRepositories,
@@ -425,6 +426,7 @@ export const ContentList = ({
 }) => {
   const customRepositories = useAppSelector(selectCustomRepositories);
   const packages = useAppSelector(selectPackages);
+  const groups = useAppSelector(selectGroups);
   const recommendedRepositories = useAppSelector(selectRecommendedRepositories);
   const snapshotDate = useAppSelector(selectSnapshotDate);
   const useLatest = useAppSelector(selectUseLatest);
@@ -576,7 +578,7 @@ export const ContentList = ({
             component={TextListItemVariants.dd}
             data-testid="chosen-packages-count"
           >
-            {packages?.length > 0 ? (
+            {packages?.length > 0 || groups?.length > 0 ? (
               <Popover
                 position="bottom"
                 headerContent="Additional packages"
@@ -589,7 +591,7 @@ export const ContentList = ({
                   aria-label="About packages"
                   className="pf-u-p-0"
                 >
-                  {packages?.length}
+                  {packages?.length + groups?.length}
                 </Button>
               </Popover>
             ) : (