From 98042d018dacb8ce74cd36da0211ac4a53a3f1b1 Mon Sep 17 00:00:00 2001 From: R Ranathunga Date: Fri, 26 Jul 2024 13:07:02 -0700 Subject: [PATCH 1/3] chore: update dependency for MUI --- app/components/Table/Pagination.tsx | 5 +- app/package.json | 2 +- app/yarn.lock | 196 +++++++++++++++------------- 3 files changed, 111 insertions(+), 92 deletions(-) diff --git a/app/components/Table/Pagination.tsx b/app/components/Table/Pagination.tsx index 4c9aea4ca..a2815cb83 100644 --- a/app/components/Table/Pagination.tsx +++ b/app/components/Table/Pagination.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import PaginationUnstyled from '@mui/base/TablePaginationUnstyled'; +import { TablePagination } from '@mui/base/TablePagination'; import { Dropdown, Button } from '@button-inc/bcgov-theme'; import styled from 'styled-components'; @@ -96,8 +96,7 @@ const FilterableTablePagination: React.FunctionComponent = ({ aria-disabled={disabled} className={disabled ? 'disabled' : ''} > - =0.0.2: resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: + name wrap-ansi-cjs version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -14384,15 +14413,6 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" -wrap-ansi@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" From 0ff39b014666823a55486c512c19e06ca004cc54 Mon Sep 17 00:00:00 2001 From: R Ranathunga Date: Fri, 26 Jul 2024 14:02:41 -0700 Subject: [PATCH 2/3] chore: update dependency for MUI pagination --- app/components/Table/Pagination.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/components/Table/Pagination.tsx b/app/components/Table/Pagination.tsx index a2815cb83..1d7057005 100644 --- a/app/components/Table/Pagination.tsx +++ b/app/components/Table/Pagination.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { TablePagination } from '@mui/base/TablePagination'; import { Dropdown, Button } from '@button-inc/bcgov-theme'; import styled from 'styled-components'; +import TablePagination from '@mui/material/TablePagination'; interface Props { /** @@ -97,6 +97,7 @@ const FilterableTablePagination: React.FunctionComponent = ({ className={disabled ? 'disabled' : ''} > = ({ onPageChange={handlePageChange} onRowsPerPageChange={handlePageSizeChange} labelRowsPerPage="Items per page:" - slots={paginationComponents} + slots={paginationComponents as any} slotProps={paginationComponentsProps as any} /> From 037c448387c82f97d549382079f56b8887b0989b Mon Sep 17 00:00:00 2001 From: R Ranathunga Date: Thu, 1 Aug 2024 15:01:56 -0700 Subject: [PATCH 3/3] 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 = ({ totalCount, pageSize = DEFAULT_PAGE_SIZE, @@ -97,16 +58,28 @@ const FilterableTablePagination: React.FunctionComponent = ({ className={disabled ? 'disabled' : ''} > ); 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', () => { ); - 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); });