Add (hidden) pagination to list results header (#6234)

ui/v2.5/src/components/List/ListResultsHeader.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ListFilterModel } from "src/models/list-filter/filter";
-import { PaginationIndex } from "../List/Pagination";
+import { Pagination, PaginationIndex } from "../List/Pagination";
 import { ButtonToolbar } from "react-bootstrap";
 import { ListViewOptions } from "../List/ListViewOptions";
 import { PageSizeSelector, SortBySelect } from "../List/ListFilter";
@@ -53,6 +53,12 @@ export const ListResultsHeader: React.FC<{
         />
       </div>
       <div className="pagination-index-container">
+        <Pagination
+          currentPage={filter.currentPage}
+          itemsPerPage={filter.itemsPerPage}
+          totalItems={totalCount}
+          onChangePage={(page) => onChangeFilter(filter.changePage(page))}
+        />
         <PaginationIndex
           loading={loading}
           itemsPerPage={filter.itemsPerPage}

ui/v2.5/src/components/List/styles.scss

@@ -1305,7 +1305,7 @@ input[type="range"].zoom-slider {
 }
 
 .list-results-header {
-  align-items: center;
+  align-items: flex-start;
   background-color: $body-bg;
   display: flex;
 
@@ -1327,6 +1327,18 @@ input[type="range"].zoom-slider {
   }
 }
 
+.list-results-header .pagination-index-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  .pagination {
+    // hidden by default. Can be shown via css override if needed
+    display: none;
+    margin: 0;
+  }
+}
+
 .list-results-header {
   gap: 0.25rem;
   margin-bottom: 0.5rem;
@@ -1342,7 +1354,7 @@ input[type="range"].zoom-slider {
     }
 
     & > div.pagination-index-container {
-      justify-content: flex-end;
+      align-items: flex-end;
       order: 3;
     }
   }
@@ -1356,6 +1368,10 @@ input[type="range"].zoom-slider {
       margin-left: auto;
       margin-right: auto;
     }
+
+    & > div.pagination-index-container {
+      align-items: center;
+    }
   }
 }