🐛 Fix wave subtable pagination (#1689)

Resolves https://issues.redhat.com/browse/MTA-1790 <img width="1613" alt="Screenshot 2024-02-15 at 2 09 40 PM" src="https://github.com/konveyor/tackle2-ui/assets/11218376/ce001d5f-24b5-49fc-b4ea-a879b4839308"> <img width="1630" alt="Screenshot 2024-02-15 at 2 09 08 PM" src="https://github.com/konveyor/tackle2-ui/assets/11218376/8a46de3e-5025-4648-aab6-2dd1f6e899cb"> <img width="1618" alt="Screenshot 2024-02-15 at 2 09 01 PM" src="https://github.com/konveyor/tackle2-ui/assets/11218376/a0f7c3c4-0879-465b-8e51-a0c92750bb7a"> Signed-off-by: Ian Bolton <[email protected]>
konveyor · Feb 16, 2024 · 9be2ac1 · 9be2ac1
1 parent 6217116
commit 9be2ac1
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 10 deletions.
diff --git a/client/src/app/pages/migration-waves/components/stakeholders-table.tsx b/client/src/app/pages/migration-waves/components/stakeholders-table.tsx
@@ -58,11 +58,14 @@ export const WaveStakeholdersTable: React.FC<IWaveStakeholdersTableProps> = ({
       <Toolbar {...toolbarProps}>
         <ToolbarContent>
           <ToolbarItem {...paginationToolbarItemProps}>
-            <SimplePagination
-              idPrefix={`expanded-migration-wave-${migrationWave.name}-apps-table`}
-              isTop
-              paginationProps={paginationProps}
-            />
+            {migrationWave.allStakeholders.length > 9 && (
+              <SimplePagination
+                idPrefix={`expanded-migration-wave-${migrationWave.name}-apps-table`}
+                isTop
+                paginationProps={paginationProps}
+                isCompact
+              />
+            )}
           </ToolbarItem>
         </ToolbarContent>
       </Toolbar>
@@ -116,6 +119,14 @@ export const WaveStakeholdersTable: React.FC<IWaveStakeholdersTableProps> = ({
           </Tbody>
         </ConditionalTableBody>
       </Table>
+      {migrationWave.allStakeholders.length > 9 && (
+        <SimplePagination
+          idPrefix={`expanded-migration-wave-${migrationWave.name}-apps-table`}
+          isTop={false}
+          paginationProps={paginationProps}
+          isCompact
+        />
+      )}
     </>
   );
 };
diff --git a/client/src/app/pages/migration-waves/components/wave-applications-table.tsx b/client/src/app/pages/migration-waves/components/wave-applications-table.tsx
@@ -73,11 +73,14 @@ export const WaveApplicationsTable: React.FC<IWaveApplicationsTableProps> = ({
       <Toolbar {...toolbarProps}>
         <ToolbarContent>
           <ToolbarItem {...paginationToolbarItemProps}>
-            <SimplePagination
-              idPrefix={`expanded-migration-wave-${migrationWave.name}-apps-table`}
-              isTop
-              paginationProps={paginationProps}
-            />
+            {migrationWave.fullApplications.length > 9 && (
+              <SimplePagination
+                idPrefix={`expanded-migration-wave-${migrationWave.name}-apps-table`}
+                isTop
+                paginationProps={paginationProps}
+                isCompact
+              />
+            )}
           </ToolbarItem>
         </ToolbarContent>
       </Toolbar>
@@ -155,6 +158,14 @@ export const WaveApplicationsTable: React.FC<IWaveApplicationsTableProps> = ({
           </Tbody>
         </ConditionalTableBody>
       </Table>
+      {migrationWave.fullApplications.length > 9 && (
+        <SimplePagination
+          idPrefix={`expanded-migration-wave-${migrationWave.name}-apps-table`}
+          isTop={false}
+          paginationProps={paginationProps}
+          isCompact
+        />
+      )}
     </>
   );
 };