From 037c448387c82f97d549382079f56b8887b0989b Mon Sep 17 00:00:00 2001
From: R Ranathunga <rumesha.ranathunga@gov.bc.ca>
Date: Thu, 1 Aug 2024 15:01:56 -0700
Subject: [PATCH] chore: update table pagination mui

---
 app/components/Table/Pagination.tsx           | 67 ++++++-------------
 .../components/Table/Pagination.test.tsx      |  8 ++-
 2 files changed, 26 insertions(+), 49 deletions(-)

diff --git a/app/components/Table/Pagination.tsx b/app/components/Table/Pagination.tsx
index 1d7057005..0ee824e6b 100644
--- a/app/components/Table/Pagination.tsx
+++ b/app/components/Table/Pagination.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
-import { Dropdown, Button } from '@button-inc/bcgov-theme';
-import styled from 'styled-components';
-import TablePagination from '@mui/material/TablePagination';
+import { IconButtonProps, TablePagination } from '@mui/material';
 
 interface Props {
   /**
@@ -25,21 +23,7 @@ export const DEFAULT_PAGE_SIZE = 20;
 
 const PAGE_SIZE_OPTIONS = [20, 50, 100];
 
-const paginationComponents = {
-  select: Dropdown,
-  toolbar: styled.div`
-    display: flex;
-    font-size: 0.8rem;
-    justify-content: flex-end;
-    align-items: baseline;
-    & > * {
-      margin-right: 0.5rem;
-    }
-  `,
-};
-
-const actionButtonProps = {
-  variant: 'secondary',
+const actionButtonProps: IconButtonProps = {
   size: 'small',
   style: {
     padding: '0.33rem 0.50rem',
@@ -47,29 +31,6 @@ const actionButtonProps = {
   },
 };
 
-const paginationComponentsProps = {
-  actions: {
-    components: {
-      FirstButton: Button,
-      LastButton: Button,
-      NextButton: Button,
-      BackButton: Button,
-    },
-    componentsProps: {
-      firstButton: actionButtonProps,
-      lastButton: actionButtonProps,
-      nextButton: actionButtonProps,
-      backButton: actionButtonProps,
-    },
-    showFirstButton: true,
-    showLastButton: true,
-  },
-  select: {
-    size: 'small',
-    style: { width: '3.5rem' },
-  },
-};
-
 const FilterableTablePagination: React.FunctionComponent<Props> = ({
   totalCount,
   pageSize = DEFAULT_PAGE_SIZE,
@@ -97,16 +58,28 @@ const FilterableTablePagination: React.FunctionComponent<Props> = ({
       className={disabled ? 'disabled' : ''}
     >
       <TablePagination
-        component="div"
+        rowsPerPageOptions={PAGE_SIZE_OPTIONS}
+        colSpan={3}
         count={totalCount}
-        page={activePage}
         rowsPerPage={pageSize}
-        rowsPerPageOptions={PAGE_SIZE_OPTIONS}
+        page={activePage}
+        labelRowsPerPage="Items per page:"
+        showFirstButton
+        showLastButton
+        slotProps={{
+          select: {
+            size: 'small',
+            style: { width: '3.5rem' },
+          },
+          actions: {
+            firstButton: actionButtonProps,
+            lastButton: actionButtonProps,
+            nextButton: actionButtonProps,
+            previousButton: actionButtonProps,
+          },
+        }}
         onPageChange={handlePageChange}
         onRowsPerPageChange={handlePageSizeChange}
-        labelRowsPerPage="Items per page:"
-        slots={paginationComponents as any}
-        slotProps={paginationComponentsProps as any}
       />
     </td>
   );
diff --git a/app/tests/components/Table/Pagination.test.tsx b/app/tests/components/Table/Pagination.test.tsx
index 80ca9c3b7..b329a9792 100644
--- a/app/tests/components/Table/Pagination.test.tsx
+++ b/app/tests/components/Table/Pagination.test.tsx
@@ -137,9 +137,13 @@ describe('PaginationBar', () => {
         </tfoot>
       </table>
     );
-    fireEvent.change(screen.getByLabelText(/items per page/i), {
-      target: { value: 50 },
+    const pageSizeSelect = screen.getByRole('combobox', {
+      name: /items per page/i,
     });
+    fireEvent.mouseDown(pageSizeSelect);
+
+    const pageSizeOption = screen.getByRole('option', { name: /50/i });
+    fireEvent.click(pageSizeOption);
 
     expect(handlePageSizeChange).toHaveBeenCalledWith(50);
   });