MMT-3908: Adding pagination to ACL (#1304)

nasa · Sep 27, 2024 · 86b5bf0 · 86b5bf0
1 parent ff39279
commit 86b5bf0
Show file tree

Hide file tree

Showing 4 changed files with 276 additions and 91 deletions.
diff --git a/static/src/js/components/ManageCollectionAssociation/ManageCollectionAssociation.jsx b/static/src/js/components/ManageCollectionAssociation/ManageCollectionAssociation.jsx
@@ -41,7 +41,6 @@ const ManageCollectionAssociation = () => {
 
   const { addNotification } = useNotificationsContext()
 
-  // Const [error, setError] = useState()
   const [searchParams, setSearchParams] = useSearchParams()
   const [collectionConceptIds, setCollectionConceptIds] = useState([])
   const [showDeleteModal, setShowDeleteModal] = useState(false)

diff --git a/static/src/js/components/PermissionCollectionTable/PermissionCollectionTable.jsx b/static/src/js/components/PermissionCollectionTable/PermissionCollectionTable.jsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react'
+import pluralize from 'pluralize'
 import { useSuspenseQuery } from '@apollo/client'
 import { useParams } from 'react-router'
 import { useSearchParams } from 'react-router-dom'
@@ -11,13 +12,23 @@ import Table from '@/js/components/Table/Table'
 
 import { GET_COLLECTION_PERMISSION } from '@/js/operations/queries/getCollectionPermission'
 
+import Pagination from '../Pagination/Pagination'
+
 const PermissionCollectionTable = () => {
   const { conceptId } = useParams()
 
   const [searchParams, setSearchParams] = useSearchParams()
 
+  const limit = 20
+  const activePage = parseInt(searchParams.get('page'), 10) || 1
+  const offset = (activePage - 1) * limit
+
   let params = {
-    conceptId
+    conceptId,
+    collectionParams: {
+      limit,
+      offset
+    }
   }
 
   const sortKey = searchParams.get('sortKey')
@@ -26,6 +37,8 @@ const PermissionCollectionTable = () => {
     params = {
       ...params,
       collectionParams: {
+        limit,
+        offset,
         sortKey
       }
     }
@@ -38,7 +51,7 @@ const PermissionCollectionTable = () => {
   const { acl } = data
   const { collections } = acl
 
-  const { items, count } = collections || {}
+  const { items, count } = collections
 
   const sortFn = useCallback((key, order) => {
     let nextSortKey
@@ -59,6 +72,14 @@ const PermissionCollectionTable = () => {
     })
   }, [])
 
+  const setPage = (nextPage) => {
+    setSearchParams((currentParams) => {
+      currentParams.set('page', nextPage)
+
+      return Object.fromEntries(currentParams)
+    })
+  }
+
   const buildEllipsisLinkCell = useCallback((cellData, rowData) => {
     const { conceptId: collectionConceptId } = rowData
 
@@ -91,8 +112,35 @@ const PermissionCollectionTable = () => {
     }
   ]
 
+  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 = `Showing ${totalPages > 1 ? `Collection Associations ${firstResultIndex + 1}-${lastResultIndex} of ${count}` : `${count} ${pluralize('Collection Association', count)}`}`
+
   return (
-    <Row>
+    <Row className="d-flex justify-content-between align-items-center mb-4 mt-5">
+      <Col className="mb-4 mt-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>
+        )
+      }
       <Col md={12}>
         {
           items && (

diff --git a/.../src/js/components/PermissionCollectionTable/__tests__/PermissionCollectionTable.test.jsx b/.../src/js/components/PermissionCollectionTable/__tests__/PermissionCollectionTable.test.jsx
@@ -17,98 +17,23 @@ import { GET_COLLECTION_PERMISSION } from '@/js/operations/queries/getCollection
 import { InMemoryCache, defaultDataIdFromObject } from '@apollo/client'
 import PermissionCollectionTable from '../PermissionCollectionTable'
 
-const mockPermission = {
-  __typename: 'Acl',
-  conceptId: 'ACL00000-CMR',
-  collections: {
-    __typename: 'CollectionList',
-    count: 1,
-    items: [
-      {
-        __typename: 'Collection',
-        conceptId: 'C1200450691-MMT_2',
-        shortName: 'Collection 1',
-        title: 'Mock Collection 1',
-        version: '1',
-        provider: 'MMT_2'
-      },
-      {
-        __typename: 'Collection',
-        conceptId: 'C1200450692-MMT_2',
-        shortName: 'Collection 2',
-        title: 'Mock Collection 2',
-        version: '2',
-        provider: 'MMT_2'
-      }
-    ]
-  },
-  identityType: 'Catalog Item',
-  location: 'https://cmr.sit.earthdata.nasa.gov:443/access-control/acls/ACL00000-CMR',
-  name: 'Mock Permission',
-  providerIdentity: null,
-  revisionId: 5,
-  systemIdentity: null,
-  catalogItemIdentity: {
-    __typename: 'CatalogItemIdentity',
-    collectionApplicable: true,
-    granuleApplicable: false,
-    granuleIdentifier: null,
-    name: 'Mock Permission',
-    providerId: 'MMT_2',
-    collectionIdentifier: {
-      __typename: 'CollectionIdentifier',
-      accessValue: null,
-      temporal: null
-    }
-  },
-  groups: {
-    __typename: 'AclGroupList',
-    items: [
-      {
-        __typename: 'GroupPermission',
-        permissions: [
-          'read'
-        ],
-        userType: 'guest',
-        group: null,
-        id: null,
-        name: null
-      },
-      {
-        __typename: 'GroupPermission',
-        permissions: [
-          'read'
-        ],
-        userType: 'registered',
-        group: null,
-        id: null,
-        name: null
-      }
-    ]
-  }
-}
+import {
+  mockPermission,
+  mockCollectionPermissionSearch,
+  mockCollectionPermissionSearchWithPages
+} from './__mocks__/permissionCollectionTableResults'
+
 const setup = ({
-  additionalMock = []
+  additionalMock = [],
+  overrideMocks = false
 }) => {
-  const mocks = [{
-    request: {
-      query: GET_COLLECTION_PERMISSION,
-      variables: {
-        conceptId: 'ACL00000-CMR'
-      }
-    },
-    result: {
-      data: {
-        acl: mockPermission
-      }
-    }
-  }, ...additionalMock]
+  const mocks = [mockCollectionPermissionSearch, ...additionalMock]
 
   const user = userEvent.setup()
 
   render(
     <MockedProvider
-      mocks={mocks}
+      mocks={overrideMocks || mocks}
       cache={
         new InMemoryCache({
           dataIdFromObject: (object) => {
@@ -168,7 +93,11 @@ describe('PermissionCollectionTable', () => {
             query: GET_COLLECTION_PERMISSION,
             variables: {
               conceptId: 'ACL00000-CMR',
-              collectionParams: { sortKey: '-shortName' }
+              collectionParams: {
+                limit: 20,
+                offset: 0,
+                sortKey: '-shortName'
+              }
             }
           },
           result: {
@@ -197,7 +126,11 @@ describe('PermissionCollectionTable', () => {
             query: GET_COLLECTION_PERMISSION,
             variables: {
               conceptId: 'ACL00000-CMR',
-              collectionParams: { sortKey: 'entryTitle' }
+              collectionParams: {
+                limit: 20,
+                offset: 0,
+                sortKey: 'entryTitle'
+              }
             }
           },
           result: {
@@ -217,4 +150,30 @@ describe('PermissionCollectionTable', () => {
       expect(await within(row1).findByRole('button', { name: /Sort Short Name in descending order/ })).toHaveClass('table__sort-button--inactive')
     })
   })
+
+  describe('when paging through the table', () => {
+    test('navigate to the next page', async () => {
+      const { user } = setup({
+        overrideMocks: [mockCollectionPermissionSearchWithPages, {
+          request: {
+            ...mockCollectionPermissionSearchWithPages.request,
+            variables: {
+              conceptId: 'ACL00000-CMR',
+              collectionParams: {
+                limit: 20,
+                offset: 40
+              }
+            }
+          },
+          result: mockCollectionPermissionSearchWithPages.result
+        }]
+      })
+
+      expect(await screen.findByText('Showing Collection Associations 1-20 of 45'))
+      const paginationButton = screen.getByRole('button', { name: 'Goto Page 3' })
+      await user.click(paginationButton)
+
+      expect(await screen.findByText('Showing Collection Associations 41-45 of 45'))
+    })
+  })
 })