CreateImageWizardV2: fix pagination when search is empty

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

@@ -1351,8 +1351,15 @@ const Packages = () => {
             </ToolbarItem>
             <ToolbarItem variant="pagination">
               <Pagination
+                data-testid="packages-pagination-top"
                 itemCount={
-                  transformedPackages.length + transformedGroups.length
+                  searchTerm === '' && toggleSelected === 'toggle-available'
+                    ? 0
+                    : showPackages && showGroups
+                    ? transformedPackages.length + transformedGroups.length
+                    : showPackages
+                    ? transformedPackages.length
+                    : transformedGroups.length
                 }
                 perPage={perPage}
                 page={page}
@@ -1389,7 +1396,16 @@ const Packages = () => {
         <Tbody>{bodyContent}</Tbody>
       </Table>
       <Pagination
-        itemCount={transformedPackages.length + transformedGroups.length}
+        data-testid="packages-pagination-bottom"
+        itemCount={
+          searchTerm === '' && toggleSelected === 'toggle-available'
+            ? 0
+            : showPackages && showGroups
+            ? transformedPackages.length + transformedGroups.length
+            : showPackages
+            ? transformedPackages.length
+            : transformedGroups.length
+        }
         perPage={perPage}
         page={page}
         onSetPage={handleSetPage}

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

@@ -84,6 +84,13 @@ const searchForGroup = async () => {
   await userEvent.type(searchBox, '@grouper');
 };
 
+const clearSearchInput = async () => {
+  const clearSearchBtn = await screen.findByRole('button', {
+    name: /clear-package-search/i,
+  });
+  await userEvent.click(clearSearchBtn);
+};
+
 const selectFirstPackage = async () => {
   await userEvent.click(
     await screen.findByRole('checkbox', { name: /select row 0/i })
@@ -262,3 +269,45 @@ describe('Packages edit mode', () => {
     expect(receivedRequest).toEqual(expectedRequest);
   });
 });
+
+describe('pagination on packages step', () => {
+  test('itemcount correct after search', async () => {
+    await renderCreateMode();
+    await goToPackagesStep();
+    await searchForPackage();
+    await selectFirstPackage();
+    // the pagination in the top right
+    const top = await screen.findByTestId('packages-pagination-top');
+    await expect(top).toHaveTextContent('of 6');
+    const bottom = await screen.findByTestId('packages-pagination-bottom');
+    await expect(bottom).toHaveTextContent('of 6');
+  });
+
+  test('itemcount correct after toggling selected', async () => {
+    await renderCreateMode();
+    await goToPackagesStep();
+    await searchForPackage();
+    await selectFirstPackage();
+    await switchToSelected();
+
+    // the pagination in the top right
+    const top = await screen.findByTestId('packages-pagination-top');
+    await expect(top).toHaveTextContent('of 1');
+    const bottom = await screen.findByTestId('packages-pagination-bottom');
+    await expect(bottom).toHaveTextContent('of 1');
+  });
+
+  test('itemcount correct after clearing search input', async () => {
+    await renderCreateMode();
+    await goToPackagesStep();
+    await searchForPackage();
+    await selectFirstPackage();
+    await clearSearchInput();
+
+    // the pagination in the top right
+    const top = await screen.findByTestId('packages-pagination-top');
+    await expect(top).toHaveTextContent('of 0');
+    const bottom = await screen.findByTestId('packages-pagination-bottom');
+    await expect(bottom).toHaveTextContent('of 0');
+  });
+});