From a6799eeabcb58351b001ad2dd4e3eab7873bd966 Mon Sep 17 00:00:00 2001 From: devinleighsmith Date: Tue, 31 Oct 2023 16:38:26 -0700 Subject: [PATCH 1/3] psp-7128 Correct document paging --- source/frontend/src/components/Table/PageSizeSelector.tsx | 2 -- source/frontend/src/components/Table/Table.test.tsx | 2 +- source/frontend/src/components/Table/Table.tsx | 7 +++++-- .../documents/list/DocumentResults/DocumentResults.tsx | 1 - 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/source/frontend/src/components/Table/PageSizeSelector.tsx b/source/frontend/src/components/Table/PageSizeSelector.tsx index 0a17dd5ce5..3f099b8df8 100644 --- a/source/frontend/src/components/Table/PageSizeSelector.tsx +++ b/source/frontend/src/components/Table/PageSizeSelector.tsx @@ -40,13 +40,11 @@ export const TablePageSizeSelector: React.FC> =
Show - {/*the selector appears to capture the click event which prevents the page change from being registered*/} Entries
diff --git a/source/frontend/src/components/Table/Table.test.tsx b/source/frontend/src/components/Table/Table.test.tsx index c14985b20b..c26f841000 100644 --- a/source/frontend/src/components/Table/Table.test.tsx +++ b/source/frontend/src/components/Table/Table.test.tsx @@ -1,4 +1,4 @@ -import { act, render, RenderOptions, userEvent } from '@/utils/test-utils'; +import { act, render, RenderOptions, userEvent, waitFor } from '@/utils/test-utils'; import { ColumnWithProps, Table, TableProps } from '.'; import { IIdentifiedObject } from './Table'; diff --git a/source/frontend/src/components/Table/Table.tsx b/source/frontend/src/components/Table/Table.tsx index e529694123..b677122ebe 100644 --- a/source/frontend/src/components/Table/Table.tsx +++ b/source/frontend/src/components/Table/Table.tsx @@ -289,10 +289,13 @@ export const Table = ( externalSort, isSingleSelect, disableSelection, + lockPageSize, } = props; const manualSortBy = !!externalSort || props.manualSortBy; const totalItems = externalTotalItems ?? data?.length; - const pageCount = externalPageCount ?? Math.ceil(totalItems / (pageSizeProp ?? internalPageSize)); + const pageCount = + externalPageCount ?? + Math.ceil(totalItems / (!!lockPageSize ? pageSizeProp ?? internalPageSize : internalPageSize)); const selectedRowsRef = React.useRef(externalSelectedRows ?? []); // used as a global var for providing up to date list of selected rows to code within the table (that is arrow function scoped). // manually update the contents of the global ref of selected rows if the list of external selected rows changes. @@ -330,7 +333,7 @@ export const Table = ( ? { sortBy, pageIndex: pageIndexProp ?? 0, - pageSize: pageSizeProp ?? internalPageSize, + pageSize: lockPageSize ? pageSizeProp : internalPageSize, } : { sortBy, pageIndex: pageIndexProp ?? 0 }, manualPagination: (props.hideToolbar || manualPagination) ?? true, // Tell the usePagination hook diff --git a/source/frontend/src/features/documents/list/DocumentResults/DocumentResults.tsx b/source/frontend/src/features/documents/list/DocumentResults/DocumentResults.tsx index f49e116450..3f6a499cd1 100644 --- a/source/frontend/src/features/documents/list/DocumentResults/DocumentResults.tsx +++ b/source/frontend/src/features/documents/list/DocumentResults/DocumentResults.tsx @@ -33,7 +33,6 @@ export const DocumentResults: React.FunctionComponent< externalSort={{ sort, setSort }} data={results ?? []} noRowsMessage="No matching Documents found" - pageSize={10} manualPagination={false} {...rest} > From f4594e267667d89e691d448b5e06667b8df09a90 Mon Sep 17 00:00:00 2001 From: devinleighsmith Date: Tue, 31 Oct 2023 16:41:54 -0700 Subject: [PATCH 2/3] lint correction. --- source/frontend/src/components/Table/Table.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/frontend/src/components/Table/Table.test.tsx b/source/frontend/src/components/Table/Table.test.tsx index c26f841000..c14985b20b 100644 --- a/source/frontend/src/components/Table/Table.test.tsx +++ b/source/frontend/src/components/Table/Table.test.tsx @@ -1,4 +1,4 @@ -import { act, render, RenderOptions, userEvent, waitFor } from '@/utils/test-utils'; +import { act, render, RenderOptions, userEvent } from '@/utils/test-utils'; import { ColumnWithProps, Table, TableProps } from '.'; import { IIdentifiedObject } from './Table'; From 3680e1323ee875ea5aabf099ec3047fa561689c5 Mon Sep 17 00:00:00 2001 From: devinleighsmith Date: Tue, 31 Oct 2023 18:08:14 -0700 Subject: [PATCH 3/3] test corrections. --- .../src/components/Table/PageSizeSelector.tsx | 1 + .../src/components/Table/Table.test.tsx | 19 ++++++++++++++++++- .../frontend/src/components/Table/Table.tsx | 11 +++++------ 3 files changed, 24 insertions(+), 7 deletions(-) diff --git a/source/frontend/src/components/Table/PageSizeSelector.tsx b/source/frontend/src/components/Table/PageSizeSelector.tsx index 3f099b8df8..6850bfa477 100644 --- a/source/frontend/src/components/Table/PageSizeSelector.tsx +++ b/source/frontend/src/components/Table/PageSizeSelector.tsx @@ -45,6 +45,7 @@ export const TablePageSizeSelector: React.FC> = value={`${selected}`} type="number" style={{ width: 50, marginLeft: 10, marginRight: 10, backgroundColor: 'white' }} + disabled /> Entries diff --git a/source/frontend/src/components/Table/Table.test.tsx b/source/frontend/src/components/Table/Table.test.tsx index c14985b20b..c11630f2b7 100644 --- a/source/frontend/src/components/Table/Table.test.tsx +++ b/source/frontend/src/components/Table/Table.test.tsx @@ -1,4 +1,4 @@ -import { act, render, RenderOptions, userEvent } from '@/utils/test-utils'; +import { act, render, RenderOptions, userEvent, waitFor } from '@/utils/test-utils'; import { ColumnWithProps, Table, TableProps } from '.'; import { IIdentifiedObject } from './Table'; @@ -172,6 +172,23 @@ describe('Generic table component', () => { }); expect(onPageSizeChange).toHaveBeenCalledWith(5); }); + + it('page size displays a second page as expected', async () => { + const { getByLabelText, container } = setup({ + props: { + pageSize: 5, + manualPagination: false, + }, + }); + + await act(async () => { + userEvent.click(getByLabelText('Page 2')); + }); + await waitFor(async () => { + const tableRows = container.querySelectorAll('.table .tbody .tr-wrapper'); + expect(tableRows).toHaveLength(1); + }); + }); }); it('can select only one row at a time when single select prop set', async () => { diff --git a/source/frontend/src/components/Table/Table.tsx b/source/frontend/src/components/Table/Table.tsx index b677122ebe..27ec01251c 100644 --- a/source/frontend/src/components/Table/Table.tsx +++ b/source/frontend/src/components/Table/Table.tsx @@ -260,7 +260,9 @@ export const Table = ( const filterFormRef = useRef>(); const [expandedRows, setExpandedRows] = React.useState([]); - const [internalPageSize, setInternalPageSize] = React.useState(DEFAULT_PAGE_SIZE); + const [internalPageSize, setInternalPageSize] = React.useState( + props.pageSize ?? DEFAULT_PAGE_SIZE, + ); const defaultColumn = React.useMemo( () => ({ // When using the useFlexLayout: @@ -289,13 +291,10 @@ export const Table = ( externalSort, isSingleSelect, disableSelection, - lockPageSize, } = props; const manualSortBy = !!externalSort || props.manualSortBy; const totalItems = externalTotalItems ?? data?.length; - const pageCount = - externalPageCount ?? - Math.ceil(totalItems / (!!lockPageSize ? pageSizeProp ?? internalPageSize : internalPageSize)); + const pageCount = externalPageCount ?? Math.ceil(totalItems / internalPageSize); const selectedRowsRef = React.useRef(externalSelectedRows ?? []); // used as a global var for providing up to date list of selected rows to code within the table (that is arrow function scoped). // manually update the contents of the global ref of selected rows if the list of external selected rows changes. @@ -333,7 +332,7 @@ export const Table = ( ? { sortBy, pageIndex: pageIndexProp ?? 0, - pageSize: lockPageSize ? pageSizeProp : internalPageSize, + pageSize: pageSizeProp ?? internalPageSize, } : { sortBy, pageIndex: pageIndexProp ?? 0 }, manualPagination: (props.hideToolbar || manualPagination) ?? true, // Tell the usePagination hook