Merge pull request #2433 from kianamcc/PORTALS-3798

PORTALS-3798: Case where initial table pagination size is broken

Author: kianamcc

packages/synapse-react-client/src/components/SynapseTable/TablePagination.test.tsx

@@ -22,7 +22,7 @@ function renderComponent(options: {
   pageSize: number
   currentPage: number
   queryCount: number
-  maxRowsPerPage: number
+  maxRowsPerPage?: number
   queryContextOverrides?: Partial<QueryContextType>
 }) {
   const user = userEvent.setup()
@@ -130,19 +130,47 @@ describe('TablePagination component', () => {
     ).rejects.toThrow()
   })
 
+  it('hides pagination when maxRowsPerPage < 5', async () => {
+    renderComponent({
+      pageSize: 10,
+      currentPage: 1,
+      queryCount: 1,
+      maxRowsPerPage: 4,
+    })
+
+    await expect(
+      screen.findByRole('navigation', undefined, { timeout: 100 }),
+    ).rejects.toThrow()
+  })
+
   it('small max rows per page with more than one page of results', async () => {
     const { user } = renderComponent({
-      pageSize: 5,
+      pageSize: 10,
       currentPage: 1,
-      queryCount: 20,
-      maxRowsPerPage: 5,
+      queryCount: 13,
+      maxRowsPerPage: 11,
     })
 
     const comboBox = await screen.findByRole('combobox')
     await user.click(comboBox)
     const pageSizeOptions = await screen.findAllByRole('option')
     expect(pageSizeOptions).toHaveLength(1)
-    expect(pageSizeOptions[0].textContent).toEqual('5 per page')
+    expect(pageSizeOptions[0].textContent).toEqual('10 per page')
+  })
+
+  it('no maxRowsPerPage value set', async () => {
+    const { user } = renderComponent({
+      pageSize: 3,
+      currentPage: 1,
+      queryCount: 3,
+      maxRowsPerPage: undefined,
+    })
+
+    const comboBox = await screen.findByRole('combobox')
+    await user.click(comboBox)
+    const pageSizeOptions = await screen.findAllByRole('option')
+    expect(pageSizeOptions).toHaveLength(1)
+    expect(pageSizeOptions[0].textContent).toEqual('10 per page')
   })
 
   it('prefetches a page on hover', async () => {
@@ -168,30 +196,4 @@ describe('TablePagination component', () => {
     // Verify we did not go to a new page
     expect(mockGoToPage).not.toHaveBeenCalled()
   })
-
-  it('query.limit value that is not a default page size option is added to the page size options', async () => {
-    const addLimitOption = 7
-    const { user } = renderComponent({
-      pageSize: 7,
-      currentPage: 1,
-      queryCount: 100,
-      maxRowsPerPage: 100,
-      queryContextOverrides: {
-        currentQueryRequest: {
-          ...mockQueryBundleRequest,
-          query: {
-            ...mockQueryBundleRequest.query,
-            limit: addLimitOption,
-          },
-        },
-      },
-    })
-
-    // Verify that the current limit is displayed
-    const pageSizeOptions = await screen.findByRole('combobox')
-    await screen.findByText('7 per page')
-
-    await user.click(pageSizeOptions)
-    await user.click(await screen.findByRole('option', { name: '7 per page' }))
-  })
 })

packages/synapse-react-client/src/components/SynapseTable/TablePagination.tsx

@@ -20,6 +20,8 @@ import { useSuspenseGetQueryMetadata } from '../QueryWrapper/useGetQueryMetadata
 
 import { usePrefetchTableRows } from './usePrefetchTableData'
 
+const PAGE_SIZE_OPTIONS = [10, 25, 100, 500]
+
 export const TablePagination = (): React.ReactNode => {
   const { goToPage, pageSize, setPageSize, currentPage, currentQueryRequest } =
     useQueryContext()
@@ -31,29 +33,38 @@ export const TablePagination = (): React.ReactNode => {
   } = useSuspenseGetQueryMetadata()
 
   const currentLimit = currentQueryRequest.query.limit
-  const maxPageSize = maxRowsPerPage ?? pageSize
+  const resolvedPageSize = currentLimit ?? pageSize
 
-  const pageSizeOptions = [10, 25, 100, 500]
-  if (currentLimit && !pageSizeOptions.includes(currentLimit)) {
-    pageSizeOptions.push(currentLimit)
-    pageSizeOptions.sort((a, b) => a - b)
-  }
-  const pageSizeOptionsBasedOnData = pageSizeOptions.filter(
-    value => value < maxPageSize,
-  )
-  if (pageSizeOptionsBasedOnData.length == 0) {
-    pageSizeOptionsBasedOnData.push(maxPageSize)
-    if (maxRowsPerPage && pageSize > maxRowsPerPage) {
-      setPageSize(maxRowsPerPage)
+  // Filter by backend limit maxRowsPerPage
+  let pageSizeOptions = maxRowsPerPage
+    ? PAGE_SIZE_OPTIONS.filter(option => option < maxRowsPerPage)
+    : [...PAGE_SIZE_OPTIONS]
+
+  if (queryCount) {
+    // first option that is >= queryCount (show all rows)
+    const firstSufficientOptionIndex = pageSizeOptions.findIndex(
+      option => option >= queryCount,
+    )
+    // If found, slice to only include options up to and including that one
+    if (firstSufficientOptionIndex !== -1) {
+      pageSizeOptions = pageSizeOptions.slice(0, firstSufficientOptionIndex + 1)
     }
   }
+
+  // If resolvedPageSize isn't in the options, use the smallest available option
+  const displayedPageSize = pageSizeOptions.includes(resolvedPageSize)
+    ? resolvedPageSize
+    : pageSizeOptions[0]
+
   const handlePage = (_event: ChangeEvent<unknown>, value: number) => {
     goToPage(value)
   }
 
   const handlePageSize = (event: SelectChangeEvent<number>) => {
     const value = event.target.value
+
     setPageSize(value)
+    goToPage(1)
   }
 
   // A custom `renderItem` implementation for the MUI Pagination component that prefetches a page's data when the page number button is hovered over
@@ -91,7 +102,8 @@ export const TablePagination = (): React.ReactNode => {
   // Also hide pagination if the query count is unavailable.
   if (
     (currentPage == 1 && queryCount == 1 && pageSize != 1) ||
-    queryCount == undefined
+    queryCount == undefined ||
+    (maxRowsPerPage && maxRowsPerPage < 5)
   ) {
     return null
   }
@@ -100,7 +112,7 @@ export const TablePagination = (): React.ReactNode => {
     <div>
       <Pagination
         page={currentPage}
-        count={Math.ceil(queryCount / pageSize)}
+        count={Math.ceil(queryCount / displayedPageSize)}
         color="secondary"
         onChange={handlePage}
         shape={'rounded'}
@@ -116,12 +128,12 @@ export const TablePagination = (): React.ReactNode => {
       </Typography>
       <Select
         name="page size"
-        value={pageSize}
+        value={displayedPageSize}
         size="small"
         onChange={handlePageSize}
         sx={{ ml: 0.5 }}
       >
-        {pageSizeOptionsBasedOnData.map(pageSize => {
+        {pageSizeOptions.map(pageSize => {
           return (
             <MenuItem key={pageSize} value={pageSize}>
               {pageSize} per page