Feature: pagination page select

package.json

@@ -93,7 +93,7 @@
     "moment-duration-format": "^2.3.2",
     "moment-timezone": "^0.5.33",
     "mui-color-input": "^9.0.0",
-    "openstack-uicore-foundation": "5.0.58",
+    "openstack-uicore-foundation": "5.0.61-beta.7",
     "p-limit": "^6.1.0",
     "path-browserify": "^1.0.1",
     "postcss-loader": "^6.2.1",

src/actions/event-actions.js

@@ -321,7 +321,7 @@ export const getEvents =
       createAction(RECEIVE_EVENTS),
       `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/events`,
       authErrorHandler,
-      { order, orderDir, term, summitTZ, filters, extraColumns }
+      { order, perPage, orderDir, term, summitTZ, filters, extraColumns }
     )(params)(dispatch).then((data) => {
       dispatch(stopLoading());
       return data.response;

src/actions/sponsor-actions.js

@@ -388,7 +388,7 @@ export const getSponsorSponsorships =
       createAction(RECEIVE_SPONSOR_SPONSORSHIPS),
       `${window.API_BASE_URL}/api/v1/summits/${currentSummit.id}/sponsors/${sponsorId}/sponsorships`,
       authErrorHandler,
-      { order, orderDir }
+      { order, orderDir, perPage }
     )(params)(dispatch).then(() => {
       dispatch(stopLoading());
     });

src/actions/summit-actions.js

@@ -179,7 +179,8 @@ export const loadSummits =
       createAction(REQUEST_SUMMITS),
       createAction(RECEIVE_SUMMITS),
       `${window.API_BASE_URL}/api/v1/summits/all`,
-      authErrorHandler
+      authErrorHandler,
+      { page, per_page: perPage }
     )(params)(dispatch, getState).then(() => {
       dispatch(stopLoading());
     });

src/components/audit-logs/__tests__/index.test.js

@@ -253,7 +253,7 @@ describe("AuditLogs pagination", () => {
     );
     getAuditLog.mockClear();
 
-    await userEvent.click(screen.getByRole("combobox"));
+    await userEvent.click(screen.getAllByRole("combobox")[0]);
     await userEvent.click(await screen.findByRole("option", { name: "20" }));
 
     await waitFor(() => {

src/i18n/en.json

@@ -4137,13 +4137,6 @@
     "form_template_item_created": "Form Template Item created successfully.",
     "form_template_item_saved": "Form Template Item saved successfully."
   },
-  "mui_table": {
-    "no_items": "No items found.",
-    "rows_per_page": "Rows per page",
-    "sorted_desc": "sorted descending",
-    "sorted_asc": "sorted ascending",
-    "total": "Total"
-  },
   "event_rsvp_list": {
     "name": "Name",
     "no_rsvp": "No RSVP found.",

src/pages/events/summit-event-list-page/index.js

@@ -159,7 +159,7 @@ const SummitEventListPage = ({
   };
 
   const handlePerPageChange = (newPerPage) => {
-    _getEvents({ perPage: newPerPage });
+    _getEvents({ page: 1, perPage: newPerPage });
   };
 
   const handleSort = (index, key, dir) => {
@@ -341,6 +341,7 @@ const SummitEventListPage = ({
           variant="contained"
           onClick={handleNewEvent}
           startIcon={<AddIcon />}
+          sx={{ whiteSpace: "nowrap", flexShrink: 0, minWidth: 140 }}
         >
           {T.translate("event_list.add_event")}
         </Button>
@@ -350,7 +351,7 @@ const SummitEventListPage = ({
         <Button
           variant="outlined"
           onClick={handleMUXImport}
-          sx={{ whiteSpace: "nowrap", flexShrink: 0 }}
+          sx={{ whiteSpace: "nowrap", flexShrink: 0, minWidth: 190 }}
         >
           {T.translate("event_list.mux_import")}
         </Button>
@@ -407,6 +408,7 @@ const SummitEventListPage = ({
             deleteDialogBody={(name) =>
               `${T.translate("event_list.delete_event_warning")} ${name}`
             }
+            showPageJump
           />
         </div>
       )}

src/pages/sponsors/sponsor-page/tabs/sponsor-purchases-tab/__tests__/sponsor-purchases-list.test.js

@@ -416,10 +416,10 @@ describe("SponsorPurchasesTab", () => {
         initialState: createInitialState({ currentPage: 1, totalCount: 25 })
       });
 
-      // MUI TablePagination renders an "Go to next page" / "next page" button
+      // pagination now renders top and bottom, so take the first match
       await act(async () => {
         await userEvent.click(
-          screen.getByRole("button", { name: /next page/i })
+          screen.getAllByRole("button", { name: "mui_table.next_page" })[0]
         );
       });
 
@@ -438,8 +438,8 @@ describe("SponsorPurchasesTab", () => {
         initialState: createInitialState({ currentPage: 3, totalCount: 0 })
       });
 
-      // MUI TablePagination labels the rows-per-page Select with labelRowsPerPage
-      const rowsPerPageSelect = screen.getByRole("combobox", {
+      // pagination now renders top and bottom, so take the first match
+      const [rowsPerPageSelect] = screen.getAllByRole("combobox", {
         name: "mui_table.rows_per_page"
       });
 

src/reducers/events/event-list-reducer.js

@@ -50,13 +50,21 @@ const eventListReducer = (state = DEFAULT_STATE, action) => {
       return DEFAULT_STATE;
     }
     case REQUEST_EVENTS: {
-      const { order, orderDir, term, summitTZ, filters, extraColumns } =
-        payload;
+      const {
+        order,
+        orderDir,
+        perPage,
+        term,
+        summitTZ,
+        filters,
+        extraColumns
+      } = payload;
 
       return {
         ...state,
         order,
         orderDir,
+        perPage,
         term,
         summitTZ,
         filters,

src/reducers/sponsors/sponsor-reducer.js

@@ -495,12 +495,17 @@ const sponsorReducer = (state = DEFAULT_STATE, action) => {
       };
     }
     case REQUEST_SPONSOR_SPONSORSHIPS: {
-      const { order, orderDir } = payload;
+      const { order, orderDir, perPage } = payload;
       return {
         ...state,
-        sponsorships_collection: {
-          order,
-          orderDir
+        entity: {
+          ...state.entity,
+          sponsorships_collection: {
+            ...state.entity.sponsorships_collection,
+            order,
+            orderDir,
+            perPage
+          }
         }
       };
     }

yarn.lock

@@ -9042,10 +9042,10 @@ open@^10.0.3:
     is-inside-container "^1.0.0"
     wsl-utils "^0.1.0"
 
-openstack-uicore-foundation@5.0.58:
-  version "5.0.58"
-  resolved "https://registry.yarnpkg.com/openstack-uicore-foundation/-/openstack-uicore-foundation-5.0.58.tgz#641aa67d2d231373dda1e5f5edaebbd68e908320"
-  integrity sha512-9p28r/arDv6Y6RF3KT/xppOyO8gvo+QdZqxGwsk5+6/AEBtcXVD9nRBV2jeMfO0cZKiEe8ocXFElptymSN7WWg==
+openstack-uicore-foundation@5.0.61-beta.7:
+  version "5.0.61-beta.7"
+  resolved "https://registry.yarnpkg.com/openstack-uicore-foundation/-/openstack-uicore-foundation-5.0.61-beta.7.tgz#39aee0e4a2092aed47c8a89356a0e3692aea9eef"
+  integrity sha512-7MtwIJtTuVwK+2vn/p1CJ/tWkFVdl0gaP5UzzGqktEVtdgkWiPadWgihMXg0IbR4PZwRrRzuLRLKvDYpmltp0g==
   dependencies:
     use-sync-external-store "^1.6.0"