MMT-3561: Adding Pagination to Table Component

static/src/css/vendor/bootstrap/index.scss

@@ -47,7 +47,7 @@
 // @import "bootstrap/scss/card";
 @import "bootstrap/scss/breadcrumb";
 @import "bootstrap/scss/accordion";
-// @import "bootstrap/scss/pagination";
+@import "bootstrap/scss/pagination";
 @import "bootstrap/scss/badge";
 @import "bootstrap/scss/alert";
 // @import "bootstrap/scss/progress";

static/src/js/components/DraftList/DraftList.jsx

@@ -1,9 +1,8 @@
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { Link, useParams } from 'react-router-dom'
 import { useLazyQuery } from '@apollo/client'
 import { FaFileDownload } from 'react-icons/fa'
-import pluralize from 'pluralize'
 import Col from 'react-bootstrap/Col'
 import Placeholder from 'react-bootstrap/Placeholder'
 import Row from 'react-bootstrap/Row'
@@ -26,10 +25,17 @@ const DraftList = ({ draftType }) => {
   const { providerId } = user
   const { draftType: paramDraftType } = useParams()
 
-  const { drafts, error, loading } = useDraftsQuery({ draftType })
+  const [offset, setOffset] = useState(0)
+  const limit = 20
+
+  const { drafts, error, loading } = useDraftsQuery({
+    draftType,
+    offset,
+    limit
+  })
   const { count, items = [] } = drafts
 
-  const noDraftsError = `No ${draftType} drafts exist for the provider ${providerId}`
+  const noDataError = `No ${draftType} drafts exist for the provider ${providerId}`
 
   const [downloadDraft] = useLazyQuery(DOWNLOAD_DRAFT, {
     onCompleted: (getDraftData) => {
@@ -56,10 +62,11 @@ const DraftList = ({ draftType }) => {
   // Building a Table using Data in items
   const data = (items.map((item) => {
     const {
-      conceptId, revisionDate, previewMetadata: {
-        name, longName, shortName, title
-      }
+      conceptId, revisionDate, ummMetadata
     } = item
+    const {
+      ShortName, EntryTitle, Name, LongName
+    } = ummMetadata || {}
 
     const draftLink = `/drafts/${`${paramDraftType}`}/${conceptId}`
 
@@ -72,14 +79,14 @@ const DraftList = ({ draftType }) => {
               value:
               (
                 <Link to={draftLink}>
-                  {name || shortName || '<Blank Name>'}
+                  {Name || ShortName || '<Blank Name>'}
                 </Link>
               )
             },
             {
               value:
               (
-                longName || title || '<Untitled Record>'
+                LongName || EntryTitle || '<Untitled Record>'
               )
             },
             {
@@ -140,33 +147,25 @@ const DraftList = ({ draftType }) => {
               <>
                 {
                   loading
-                    ? (
+                    && (
                       <span className="d-block mb-3">
                         <Placeholder as="span" animation="glow">
                           <Placeholder xs={2} />
                         </Placeholder>
                       </span>
                     )
-                    : (
-                      <span className="d-block mb-3">
-                        Showing
-                        {' '}
-                        {count > 0 && 'all'}
-                        {' '}
-                        {count}
-                        {' '}
-                        {draftType}
-                        {' '}
-                        {pluralize('Draft', count)}
-                      </span>
-                    )
                 }
                 <Table
                   headers={['Short Name', 'Entry Title', 'Last Modified', 'Actions']}
                   classNames={['col-md-4', 'col-md-4', 'col-auto', 'col-auto']}
                   loading={loading}
                   data={data}
-                  error={noDraftsError}
+                  error={error}
+                  noDataError={noDataError}
+                  count={count}
+                  setOffset={setOffset}
+                  limit={limit}
+                  offset={offset}
                 />
               </>
             )

static/src/js/components/DraftList/__tests__/DraftList.test.js

@@ -97,16 +97,19 @@ describe('DraftList', () => {
             {
               conceptId: 'TD1200000092-MMT_2',
               revisionDate: '2023-12-08T17:56:09.385Z',
+              ummMetadata: {
+                Name: 'Tool TD1200000092 short name',
+                LongName: 'Tool TD1200000092 long name'
+              },
               previewMetadata: {
-                name: 'Tool TD1200000092 short name',
-                longName: 'Tool TD1200000092 long name',
                 __typename: 'Tool'
               },
               __typename: 'Draft'
             },
             {
               conceptId: 'TD1200000093-MMT_2',
               revisionDate: '2023-11-08T17:56:09.385Z',
+              ummMetadata: {},
               previewMetadata: {
                 __typename: 'Tool'
               },
@@ -115,9 +118,11 @@ describe('DraftList', () => {
             {
               conceptId: 'TD1200000094-MMT_2',
               revisionDate: '2023-10-08T17:56:09.385Z',
+              ummMetadata: {
+                Name: 'Tool TD1200000094 short name',
+                LongName: 'Tool TD1200000094 long name'
+              },
               previewMetadata: {
-                name: 'Tool TD1200000094 short name',
-                longName: 'Tool TD1200000094 long name',
                 __typename: 'Tool'
               },
               __typename: 'Draft'

static/src/js/components/Pagination/Pagination.jsx

@@ -0,0 +1,143 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import Pagination from 'react-bootstrap/Pagination'
+import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
+
+/**
+ * Table
+ * @typedef {Object} PaginationComponent
+ * @property {Number} limit A number that is set in parent element of table
+ * @property {Number} count A number that indicates how many results are in the total query
+ * @property {function} setOffset A function that resets the offset of results to come back
+ */
+
+const PaginationComponent = ({
+  limit,
+  count,
+  setOffset
+}) => {
+  const [pageNum, setPageNum] = useState(1)
+
+  const lastPageNum = parseInt(Math.ceil(count / limit), 10)
+
+  const defaultPaginationStyles = {
+    minWidth: '2.5rem',
+    textAlign: 'center'
+  }
+
+  const handleItemClick = (currentPage) => {
+    setPageNum(currentPage)
+    setOffset((currentPage - 1) * limit)
+  }
+
+  const generatePaginationItems = () => {
+    // Only show 3 pages, the current page and one before or after (within the valid range of pages)
+    const pages = [pageNum - 1, pageNum, pageNum + 1]
+      .filter((page) => page >= 1 && page <= lastPageNum)
+
+    const returnItems = []
+
+    // If the first page is not 1, add the pagination item for page 1
+    if (pages[0] !== 1) {
+      returnItems.push(
+        <Pagination.Item
+          key="page-1"
+          onClick={() => handleItemClick(1)}
+          active={pageNum === 1}
+          style={defaultPaginationStyles}
+        >
+          {1}
+        </Pagination.Item>
+      )
+
+      // And if the first page is not 2, add an ellipsis
+      if (pages[0] !== 2) {
+        returnItems.push(
+          <Pagination.Ellipsis
+            key="page-ellipsis-1"
+            disabled
+          />
+        )
+      }
+    }
+
+    pages.forEach((page) => {
+      returnItems.push(
+        <Pagination.Item
+          key={`page-${page}`}
+          onClick={() => handleItemClick(page)}
+          active={page === pageNum}
+          style={defaultPaginationStyles}
+        >
+          {page}
+        </Pagination.Item>
+      )
+    })
+
+    // If the last page is not lastPageNum, add the pagination item for the lastPageNum
+    if (pages[pages.length - 1] !== lastPageNum) {
+      // And if the last page is not lastPageNum - 1, add an ellipsis
+      if (pages[pages.length - 1] !== lastPageNum - 1) {
+        returnItems.push(
+          <Pagination.Ellipsis
+            key="page-ellipsis-2"
+            disabled
+          />
+        )
+      }
+
+      returnItems.push(
+        <Pagination.Item
+          key={`page-${lastPageNum}`}
+          onClick={() => handleItemClick(lastPageNum)}
+          active={pageNum === lastPageNum}
+          style={defaultPaginationStyles}
+        >
+          {lastPageNum}
+        </Pagination.Item>
+      )
+    }
+
+    return returnItems
+  }
+
+  const handlePageChange = (direction) => {
+    const newCurrentPage = pageNum + direction
+
+    setPageNum(newCurrentPage)
+    setOffset((newCurrentPage - 1) * limit)
+  }
+
+  return (
+    <Row>
+      <Col xs="auto">
+        <div className="mx-auto">
+          <Pagination>
+            <Pagination.Prev
+              disabled={pageNum === 1}
+              onClick={() => handlePageChange(-1)}
+            />
+            {generatePaginationItems()}
+            <Pagination.Next
+              onClick={() => handlePageChange(1)}
+              disabled={pageNum >= lastPageNum}
+            />
+          </Pagination>
+        </div>
+      </Col>
+    </Row>
+  )
+}
+
+PaginationComponent.defaultProps = {
+  count: null
+}
+
+PaginationComponent.propTypes = {
+  setOffset: PropTypes.func.isRequired,
+  limit: PropTypes.number.isRequired,
+  count: PropTypes.number
+}
+
+export default PaginationComponent

static/src/js/components/Pagination/__tests__/Pagination.test.js

@@ -0,0 +1,61 @@
+import React from 'react'
+import {
+  render,
+  screen,
+  fireEvent
+} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import PaginationComponent from '../Pagination'
+
+const setOffset = jest.fn()
+
+const setup = () => {
+  const props = {
+    limit: 2,
+    count: 14,
+    setOffset
+  }
+  render(
+    <PaginationComponent {...props} />
+  )
+
+  return {
+    props,
+    user: userEvent.setup()
+  }
+}
+
+describe('Pagination', () => {
+  describe('when pagination component is passed count < limit', () => {
+    test('renders pagination bar', () => {
+      setup()
+
+      expect(screen.queryAllByRole('button')).toHaveLength(3)
+
+      // Check individual buttons work
+      fireEvent.click(screen.getByRole('button', { name: '2' }))
+
+      // Check the next button works
+      fireEvent.click(screen.getByRole('button', { name: 'Next' }))
+
+      // // Click on Previous Page
+      fireEvent.click(screen.getByRole('button', { name: 'Previous' }))
+
+      // // Check pages[0] always stays at 1 and two ellipsis render
+      fireEvent.click(screen.getByRole('button', { name: 'Next' }))
+      fireEvent.click(screen.getByRole('button', { name: '4' }))
+      expect(screen.getByRole('button', { name: '1' }))
+      expect(screen.queryAllByText('More')).toHaveLength(2)
+
+      // Make sure onclick for pages[0] function above works
+      fireEvent.click(screen.getByRole('button', { name: '1' }))
+
+      // Can click on last page
+      fireEvent.click(screen.getByRole('button', { name: '7' }))
+      fireEvent.click(screen.getByRole('button', { name: 'Previous' }))
+      fireEvent.click(screen.getByRole('button', { name: 'Previous' }))
+      expect(screen.queryAllByText('More')).toHaveLength(1)
+    })
+  })
+})