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)
+ })
+ })
+})