V2Wizard: Add full bottom pagination to Repositories and Packages

This adds full pagination to the bottom of Repositories and Packages steps which will allow the user to get to the very end of the tables in a case of many results.

src/Components/CreateImageWizardV2/steps/Packages/Packages.tsx

@@ -8,6 +8,7 @@ import {
   EmptyStateIcon,
   EmptyStateVariant,
   Pagination,
+  PaginationVariant,
   SearchInput,
   ToggleGroup,
   ToggleGroupItem,
@@ -454,7 +455,7 @@ const Packages = () => {
         page={page}
         onSetPage={handleSetPage}
         onPerPageSelect={handlePerPageSelect}
-        isCompact
+        variant={PaginationVariant.bottom}
       />
     </>
   );

src/Components/CreateImageWizardV2/steps/Repositories/Repositories.tsx

@@ -19,6 +19,7 @@ import {
   EmptyStateFooter,
   ToggleGroup,
   ToggleGroupItem,
+  PaginationVariant,
 } from '@patternfly/react-core';
 import {
   Dropdown,
@@ -410,7 +411,6 @@ const Repositories = () => {
                     perPage={perPage}
                     page={page}
                     onSetPage={handleSetPage}
-                    widgetId="compact-example"
                     onPerPageSelect={handlePerPageSelect}
                     isCompact
                   />
@@ -519,6 +519,16 @@ const Repositories = () => {
                 </Table>
               </PanelMain>
             </Panel>
+            <Pagination
+              itemCount={
+                filteredRepositoryURLs && filteredRepositoryURLs.length
+              }
+              perPage={perPage}
+              page={page}
+              onSetPage={handleSetPage}
+              onPerPageSelect={handlePerPageSelect}
+              variant={PaginationVariant.bottom}
+            />
           </>
         )}
       </>

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

@@ -512,7 +512,7 @@ describe('Step Custom repositories', () => {
       (await getFirstRepoCheckbox()) as HTMLInputElement;
 
     const getNextPageButton = async () =>
-      await screen.findByRole('button', {
+      await screen.findAllByRole('button', {
         name: /go to next page/i,
       });
 
@@ -522,7 +522,7 @@ describe('Step Custom repositories', () => {
     await user.click(firstRepoCheckbox);
     expect(firstRepoCheckbox.checked).toEqual(true);
 
-    await user.click(nextPageButton);
+    await user.click(nextPageButton[0]);
 
     const getSelectedButton = async () =>
       await screen.findByRole('button', {