diff --git a/package.json b/package.json index 9f1dac724..4622cb826 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,6 @@ "bootstrap": "^5.3.2", "classnames": "^2.3.2", "commafy": "^0.0.6", - "commafy-anything": "^3.0.4", "compact-object-deep": "^1.0.0", "cookie": "^0.6.0", "esbuild": "^0.19.5", diff --git a/static.config.json b/static.config.json index d609d790b..34fa3e597 100644 --- a/static.config.json +++ b/static.config.json @@ -6,7 +6,6 @@ "cmrHost": "http://localhost:4000", "version": "development", "jwtSecret": "jwt_secret" - }, "ummVersions": { "ummC": "1.17.3", diff --git a/static/src/js/components/DraftList/DraftList.jsx b/static/src/js/components/DraftList/DraftList.jsx index eee45e899..cf053a208 100644 --- a/static/src/js/components/DraftList/DraftList.jsx +++ b/static/src/js/components/DraftList/DraftList.jsx @@ -34,9 +34,8 @@ const DraftList = ({ draftType }) => { limit }) const { count, items = [] } = drafts - console.log(count) - 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) => { @@ -161,7 +160,8 @@ const DraftList = ({ draftType }) => { 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} diff --git a/static/src/js/components/Pagination/Pagination.jsx b/static/src/js/components/Pagination/Pagination.jsx index c6a7541be..81af2c308 100644 --- a/static/src/js/components/Pagination/Pagination.jsx +++ b/static/src/js/components/Pagination/Pagination.jsx @@ -15,7 +15,7 @@ import Col from 'react-bootstrap/Col' const PaginationComponent = ({ limit, count, - setoffset + setOffset }) => { const [pageNum, setPageNum] = useState(1) @@ -28,7 +28,7 @@ const PaginationComponent = ({ const handleItemClick = (currentPage) => { setPageNum(currentPage) - setoffset((currentPage - 1) * limit) + setOffset((currentPage - 1) * limit) } const generatePaginationItems = () => { @@ -106,22 +106,19 @@ const PaginationComponent = ({ const newCurrentPage = pageNum + direction setPageNum(newCurrentPage) - setoffset((newCurrentPage - 1) * limit) + setOffset((newCurrentPage - 1) * limit) } return ( - {/*

Pagination

*/}
handlePageChange(-1)} /> - {generatePaginationItems()} - handlePageChange(1)} disabled={pageNum >= lastPageNum} @@ -138,7 +135,7 @@ PaginationComponent.defaultProps = { } PaginationComponent.propTypes = { - setoffset: PropTypes.func.isRequired, + setOffset: PropTypes.func.isRequired, limit: PropTypes.number.isRequired, count: PropTypes.number } diff --git a/static/src/js/components/Pagination/__tests__/Pagination.test.js b/static/src/js/components/Pagination/__tests__/Pagination.test.js index e537e6f1d..281738245 100644 --- a/static/src/js/components/Pagination/__tests__/Pagination.test.js +++ b/static/src/js/components/Pagination/__tests__/Pagination.test.js @@ -8,13 +8,13 @@ import userEvent from '@testing-library/user-event' import PaginationComponent from '../Pagination' -const setoffset = jest.fn() +const setOffset = jest.fn() const setup = () => { const props = { limit: 2, count: 14, - setoffset + setOffset } render( diff --git a/static/src/js/components/Table/Table.jsx b/static/src/js/components/Table/Table.jsx index f474287ca..a90dd1e24 100644 --- a/static/src/js/components/Table/Table.jsx +++ b/static/src/js/components/Table/Table.jsx @@ -11,18 +11,30 @@ import For from '../For/For' /** * Table * @typedef {Object} Table + * @property {Array} headers A list of custom headers + * @property {Array} classNames A list of classNames for each header * @property {Boolean} loading A value provided by whichever useQuery is being used in parent component - * @property {Object[]} headers A list of header titles for a table * @property {Array} data An array of formatted rows with data already populated - * @property {String} error A string with a specific error for table + * @property {String} error A string that comes from { loading, data, error } = useQuery + * @property {String} noDataError An option string for custom error if data.length === 0 + * @property {Number} count A number of the total amount of data without limit + * @property {Function} setOffset A useState function that loads the appropriate data set based on user input + * @property {limit} limit A number that limits the data set that comes in. **Note this number should always be 20 + * @property {limit} offset A number that dictates where the dataset should start from */ const Table = ({ - headers, classNames, loading, data, error, count, setOffset, limit, offset + headers, + classNames, + loading, + data, + error, + noDataError, + count, + setOffset, + limit, + offset }) => { - // Current page of rows - const pagedRows = data - // Does this provider have enough Rows to page? We hide the pagination buttons if not const hasPages = count > limit @@ -30,6 +42,8 @@ const Table = ({ {header} )) + const dataLengthExists = (data && data.length) && data.length + const content = [] if (loading) { @@ -60,8 +74,8 @@ const Table = ({ } ) - } else if (pagedRows.length > 0) { - const rowData = pagedRows.map((row) => { + } else if (dataLengthExists > 0) { + const rowData = data.map((row) => { const { cells, key } = row const rowKey = key @@ -84,6 +98,8 @@ const Table = ({ }) content.push(rowData) + } else if (dataLengthExists === 0) { + content.push({noDataError}) } else { content.push({error}) } @@ -93,17 +109,7 @@ const Table = ({ - Showing - {' '} - {count > 0 ? offset : 0} - - - {data.length === limit ? offset + limit : offset + data.length} - {' '} - of - {' '} - {count} - {' '} - Results + {`Showing ${count > 0 ? offset : 0}-${dataLengthExists === limit ? offset + limit : offset + dataLengthExists} of ${count} Results`} @@ -111,7 +117,7 @@ const Table = ({ { hasPages && ( @@ -141,7 +147,8 @@ const Table = ({ Table.defaultProps = { classNames: [], loading: null, - error: 'No Data to Display', + error: 'Error', + noDataError: 'No Data to Display', count: null } @@ -154,6 +161,7 @@ Table.propTypes = { cells: PropTypes.arrayOf(PropTypes.shape({})) })).isRequired, error: PropTypes.string, + noDataError: PropTypes.string, count: PropTypes.number, offset: PropTypes.number.isRequired, setOffset: PropTypes.func.isRequired, diff --git a/static/src/js/components/Table/__tests__/Table.test.js b/static/src/js/components/Table/__tests__/Table.test.js index 49e1509ae..db075268c 100644 --- a/static/src/js/components/Table/__tests__/Table.test.js +++ b/static/src/js/components/Table/__tests__/Table.test.js @@ -59,6 +59,7 @@ describe('Table', () => { expect(screen.getByText('column 1')).toBeInTheDocument() expect(screen.getByRole('table')).toBeInTheDocument() expect(screen.getByText('Showing 0-2 of 14 Results')).toBeInTheDocument() + expect(screen.getByText('Row 2 Cell 2')).toBeInTheDocument() }) }) @@ -67,13 +68,24 @@ describe('Table', () => { setup({ data: [], count: 0, - error: 'Custom Error Message' + noDataError: 'Custom Error Message' }) expect(screen.getByText('Custom Error Message')).toBeInTheDocument() }) }) + describe('when the table component has an error from useQuery', () => { + test('renders error message', () => { + setup({ + data: null, + error: 'Error Message' + }) + + expect(screen.getByText('Error Message')).toBeInTheDocument() + }) + }) + describe('when the table component is passed loading:true', () => { test('renders loading screen', () => { setup({