Psp 7128 fix table pagination when table size prop is supplied. (#3559)

* psp-7128 Correct document paging

* lint correction.

* test corrections.

source/frontend/src/components/Table/PageSizeSelector.tsx

@@ -40,7 +40,6 @@ export const TablePageSizeSelector: React.FC<React.PropsWithChildren<IProps>> =
     <Menu options={pageSizeOptions} alignTop={alignTop}>
       <div style={{ display: 'flex' }}>
         <StyledText>Show</StyledText>
-        {/*the selector appears to capture the click event which prevents the page change from being registered*/}
         <Form.Control
           size="sm"
           value={`${selected}`}

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 () => {

source/frontend/src/components/Table/Table.tsx

@@ -260,7 +260,9 @@ export const Table = <T extends IIdentifiedObject, TFilter extends object = {}>(
   const filterFormRef = useRef<FormikProps<any>>();
 
   const [expandedRows, setExpandedRows] = React.useState<T[]>([]);
-  const [internalPageSize, setInternalPageSize] = React.useState<number>(DEFAULT_PAGE_SIZE);
+  const [internalPageSize, setInternalPageSize] = React.useState<number>(
+    props.pageSize ?? DEFAULT_PAGE_SIZE,
+  );
   const defaultColumn = React.useMemo(
     () => ({
       // When using the useFlexLayout:
@@ -292,7 +294,7 @@ export const Table = <T extends IIdentifiedObject, TFilter extends object = {}>(
   } = 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 / internalPageSize);
   const selectedRowsRef = React.useRef<T[]>(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.

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}
     ></Table>