Mmt 3902: As a user, I would like to paginate through my collection associations

static/src/js/components/ManageCollectionAssociation/ManageCollectionAssociation.jsx

@@ -1,15 +1,20 @@
+import {
+  Alert,
+  Col,
+  Row
+} from 'react-bootstrap'
+import { camelCase } from 'lodash-es'
 import { useMutation, useSuspenseQuery } from '@apollo/client'
-import React, { useCallback, useState } from 'react'
 import { useParams } from 'react-router'
 import { useSearchParams } from 'react-router-dom'
-import { Alert } from 'react-bootstrap'
-import { camelCase } from 'lodash-es'
+import React, { useCallback, useState } from 'react'
 
 import pluralize from 'pluralize'
 
 import Button from '@/js/components/Button/Button'
 import CustomModal from '@/js/components/CustomModal/CustomModal'
 import EllipsisText from '@/js/components/EllipsisText/EllipsisText'
+import Pagination from '@/js/components/Pagination/Pagination'
 import Table from '@/js/components/Table/Table'
 
 import conceptTypeQueries from '@/js/constants/conceptTypeQueries'
@@ -43,9 +48,17 @@ const ManageCollectionAssociation = () => {
 
   const derivedConceptType = getConceptTypeByConceptId(conceptId)
 
+  const limit = 20
+  const activePage = parseInt(searchParams.get('page'), 10) || 1
+  const offset = (activePage - 1) * limit
+
   let params = {
     params: {
       conceptId
+    },
+    collectionsParams: {
+      limit,
+      offset
     }
   }
 
@@ -55,6 +68,8 @@ const ManageCollectionAssociation = () => {
     params = {
       ...params,
       collectionsParams: {
+        limit,
+        offset,
         sortKey
       }
     }
@@ -185,6 +200,14 @@ const ManageCollectionAssociation = () => {
     }
   ]
 
+  const setPage = (nextPage) => {
+    setSearchParams((currentParams) => {
+      currentParams.set('page', nextPage)
+
+      return Object.fromEntries(currentParams)
+    })
+  }
+
   const toggleShowDeleteModal = (nextState) => {
     setShowDeleteModal(nextState)
   }
@@ -208,52 +231,72 @@ const ManageCollectionAssociation = () => {
 
   const { collections: associatedCollections } = concept
 
-  const { items, count } = associatedCollections
+  const { items = [], count } = associatedCollections
+
+  const totalPages = Math.ceil(count / limit)
+
+  const currentPageIndex = Math.floor(offset / limit)
+  const firstResultIndex = currentPageIndex * limit
+  const isLastPage = totalPages === activePage
+  const lastResultIndex = firstResultIndex + (isLastPage ? count % limit : limit)
+
+  const paginationMessage = count > 0
+    ? `Showing ${totalPages > 1 ? `Collection Associations ${firstResultIndex + 1}-${lastResultIndex} of ${count}` : `${count} ${pluralize('Collection Association', count)}`}`
+    : 'No Collection Associations found'
 
   return (
-    <>
-      <div className="mt-4">
-        <Alert className="fst-italic fs-6" variant="warning">
-          <i className="eui-icon eui-fa-info-circle" />
-          {' '}
-          Association operations may take some time. If you are not seeing what you expect below,
-          please
-          {' '}
-          <span
-            className="text-decoration-underline"
-            style={
-              {
-                color: 'blue',
-                cursor: 'pointer'
-              }
+    <div className="mt-4">
+      <Alert className="fst-italic fs-6" variant="warning">
+        <i className="eui-icon eui-fa-info-circle" />
+        {' '}
+        Association operations may take some time. If you are not seeing what you expect below,
+        please
+        {' '}
+        <span
+          className="text-decoration-underline"
+          style={
+            {
+              color: 'blue',
+              cursor: 'pointer'
             }
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...refreshAccessibleEventProps}
-          >
-            refresh the page
-          </span>
-        </Alert>
-      </div>
-      <div className="mt-4">
-        <span>
-          Showing
-          {' '}
-          {count}
-          {' '}
-          {pluralize('collection association', count)}
+          }
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...refreshAccessibleEventProps}
+        >
+          refresh the page
         </span>
-      </div>
+      </Alert>
+      <Row className="d-flex justify-content-between align-items-center mb-4 mt-5">
+        <Col className="mb-4 flex-grow-1" xs="auto">
+          {
+            (!!count) && (
+              <span className="text-secondary fw-bolder">{paginationMessage}</span>
+            )
+          }
+        </Col>
+        {
+          totalPages > 1 && (
+            <Col xs="auto">
+              <Pagination
+                setPage={setPage}
+                activePage={activePage}
+                totalPages={totalPages}
+              />
+            </Col>
+          )
+        }
+      </Row>
       <Table
         className="m-5"
-        id="associated-collections"
         columns={columns}
         data={items}
         generateCellKey={({ conceptId: conceptIdCell }, dataKey) => `column_${dataKey}_${conceptIdCell}`}
         generateRowKey={({ conceptId: conceptIdRow }) => `row_${conceptIdRow}`}
-        noDataMessage="No collection associations found."
+        id="associated-collections"
         limit={count}
+        noDataMessage="No collection associations found."
+        offset={offset}
       />
-
       <Button
         className="mt-4"
         variant="danger"
@@ -282,7 +325,7 @@ const ManageCollectionAssociation = () => {
           ]
         }
       />
-    </>
+    </div>
   )
 }
 

static/src/js/components/ManageCollectionAssociation/__tests__/ManageCollectionAssociation.test.jsx

@@ -27,6 +27,8 @@ import {
   deletedAssociationResponse,
   toolRecordSearch,
   toolRecordSearchError,
+  toolRecordSearchTestPage,
+  toolRecordSearchwithPages,
   toolRecordSortSearch
 } from './__mocks__/manageCollectionAssociationResults'
 
@@ -108,12 +110,26 @@ describe('ManageCollectionAssociation', () => {
     test('renders the collection association page with the associated collections', async () => {
       setup({})
 
-      expect(await screen.findByText('Showing 2 collection associations')).toBeInTheDocument()
+      expect(await screen.findByText('Showing 2 Collection Associations')).toBeInTheDocument()
       expect(screen.getByText('CIESIN_SEDAC_ESI_2000')).toBeInTheDocument()
       expect(screen.getByText('CIESIN_SEDAC_ESI_2001')).toBeInTheDocument()
     })
   })
 
+  describe('when paging through the table', () => {
+    test('navigate to the next page', async () => {
+      const { user } = setup({
+        overrideMocks: [toolRecordSearchTestPage, toolRecordSearchwithPages]
+      })
+
+      expect(await screen.findByText('Showing Collection Associations 1-20 of 50'))
+      const paginationButton = screen.getByRole('button', { name: 'Goto Page 3' })
+      await user.click(paginationButton)
+
+      expect(await screen.findByText('Showing Collection Associations 41-50 of 50'))
+    })
+  })
+
   describe.skip('when the request results in an error', () => {
     test('should call errorLogger and renders an ErrorBanner', async () => {
       setup({
@@ -163,7 +179,7 @@ describe('ManageCollectionAssociation', () => {
         const noButton = screen.getByRole('button', { name: 'No' })
         await user.click(noButton)
 
-        expect(await screen.findByText('Showing 2 collection associations')).toBeInTheDocument()
+        expect(await screen.findByText('Showing 2 Collection Associations')).toBeInTheDocument()
         expect(screen.getByText('CIESIN_SEDAC_ESI_2000')).toBeInTheDocument()
         expect(screen.getByText('CIESIN_SEDAC_ESI_2001')).toBeInTheDocument()
       })
@@ -300,7 +316,11 @@ describe('ManageCollectionAssociation', () => {
             ...toolRecordSortSearch.request,
             variables: {
               ...toolRecordSortSearch.request.variables,
-              collectionsParams: { sortKey: '-shortName' }
+              collectionsParams: {
+                limit: 20,
+                offset: 0,
+                sortKey: '-shortName'
+              }
             }
           },
           result: toolRecordSortSearch.result