Skip to content

Commit

Permalink
PSP-6895 Digital Documents - Default number of entries on the List Vi…
Browse files Browse the repository at this point in the history
…ew should be 10 instead of 1 (#3508)

* Code cleanup

* Fix default page size for Document List

* Update snapshots
  • Loading branch information
asanchezr authored Oct 11, 2023
1 parent 193e5e7 commit 2f0522e
Show file tree
Hide file tree
Showing 11 changed files with 259 additions and 61 deletions.
14 changes: 6 additions & 8 deletions source/frontend/src/components/Table/Table.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import './Table.scss';

import classnames from 'classnames';
import classNames from 'classnames';
import clsx from 'classnames';
import cx from 'classnames';
import { Form, Formik, FormikProps } from 'formik';
import keys from 'lodash/keys';
import map from 'lodash/map';
Expand Down Expand Up @@ -518,7 +516,7 @@ export const Table = <T extends IIdentifiedObject, TFilter extends object = {}>(
{...(props.hideHeaders
? columnProps.getHeaderProps(noHeadersGetter)
: columnProps.getHeaderProps(headerPropsGetter))}
className={classnames(
className={cx(
'th',
columnProps.isSorted ? (columnProps.isSortedDesc ? 'sort-desc' : 'sort-asc') : '',
)}
Expand Down Expand Up @@ -635,7 +633,7 @@ export const Table = <T extends IIdentifiedObject, TFilter extends object = {}>(
const renderRow = (row: Row<T>, index: number) => {
return (
<div key={index} className="tr-wrapper">
<div {...row.getRowProps()} className={clsx('tr', row.isSelected ? 'selected' : '')}>
<div {...row.getRowProps()} className={cx('tr', row.isSelected ? 'selected' : '')}>
{/* If canRowExpand prop is passed only allow expansions on those rows */}
{props.canRowExpand &&
props.canRowExpand(row) &&
Expand Down Expand Up @@ -666,7 +664,7 @@ export const Table = <T extends IIdentifiedObject, TFilter extends object = {}>(
<div
{...cell.getCellProps(cellPropsGetter)}
title={cell.column.clickable && clickableTooltip ? clickableTooltip : ''}
className={classnames(
className={cx(
'td',
cell.column.clickable ? 'clickable' : '',
cell.column.className,
Expand Down Expand Up @@ -733,7 +731,7 @@ export const Table = <T extends IIdentifiedObject, TFilter extends object = {}>(
<>
<div
{...getTableProps({ style: { minWidth: undefined } })}
className={classNames('table', props.className ?? '')}
className={cx('table', props.className ?? '')}
data-testid={`${props.name}`}
>
<div className="thead thead-light">
Expand Down Expand Up @@ -769,7 +767,7 @@ export const Table = <T extends IIdentifiedObject, TFilter extends object = {}>(
<RowBootstrap>
<ColBootstrap xs="auto" className="align-self-center">
{canShowTotals && props.data.length > 0 && (
<span>{`${initialCount} - ${finalCount} of ${totalItems}`}</span>
<span>{`${initialCount} - ${finalCount} of ${totalItems}`}</span>
)}
</ColBootstrap>
<ColBootstrap xs="auto" className="ml-auto align-self-center">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ exports[`Generic table component matches snapshot 1`] = `
class="align-self-center col-auto"
>
<span>
1 - 6 of 6
1 - 6 of 6
</span>
</div>
<div
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1062,7 +1062,7 @@ exports[`Contact Search Results Table matches snapshot 1`] = `
class="align-self-center col-auto"
>
<span>
1 - 3 of 3
1 - 3 of 3
</span>
</div>
<div
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -697,7 +697,7 @@ exports[`Manage access requests Snapshot matches 1`] = `
class="align-self-center col-auto"
>
<span>
1 - 2 of 2
1 - 2 of 2
</span>
</div>
<div
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { noop } from 'lodash';

import { Claims } from '@/constants/claims';
import { DocumentRow } from '@/features/documents/ComposedDocument';
import { mockDocumentsResponse } from '@/mocks/documents.mock';
import { mockDocumentResponse, mockDocumentsResponse } from '@/mocks/documents.mock';
import { cleanup, mockKeycloak, render, RenderOptions } from '@/utils/test-utils';

import { DocumentResults, IDocumentResultProps } from './DocumentResults';
Expand Down Expand Up @@ -121,13 +121,12 @@ describe('Document Results Table', () => {
expect(deleteButtons[0]).toBeVisible();
});

it('displays document delete button', async () => {
mockKeycloak({ claims: [Claims.DOCUMENT_VIEW, Claims.DOCUMENT_DELETE] });
const { getAllByTestId } = setup({
results: mockDocumentsResponse().map(x => DocumentRow.fromApi(x)),
});

const deleteButtons = await getAllByTestId('document-delete-button');
expect(deleteButtons[0]).toBeVisible();
it('displays default number of entries of 10', async () => {
mockKeycloak({ claims: [Claims.DOCUMENT_VIEW] });
const largeDataset = Array.from({ length: 15 }, (id: number) =>
DocumentRow.fromApi(mockDocumentResponse(id)),
);
const { findByText } = setup({ results: largeDataset });
expect(await findByText('1 - 10 of 15')).toBeVisible();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const DocumentResults: React.FunctionComponent<
externalSort={{ sort, setSort }}
data={results ?? []}
noRowsMessage="No matching Documents found"
pageSize={1}
pageSize={10}
manualPagination={false}
{...rest}
></Table>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -347,6 +347,97 @@ exports[`Document Results Table matches snapshot 1`] = `
</div>
</div>
</div>
<div
class="tr-wrapper"
>
<div
class="tr"
role="row"
style="display: flex; flex: 1 0 auto; min-width: 150px;"
>
<div
class="td"
role="cell"
style="box-sizing: border-box; flex: 100 0 auto; min-width: 30px; width: 100px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
title=""
>
MOTIPLAN
</div>
<div
class="td"
role="cell"
style="box-sizing: border-box; flex: 100 0 auto; min-width: 30px; width: 100px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
title=""
>
<span
data-testid="document-view-filename-text"
>
moti_plan.txt
</span>
</div>
<div
class="td"
role="cell"
style="box-sizing: border-box; flex: 100 0 auto; min-width: 30px; width: 100px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
title=""
>
<div
class="no-gutters row"
>
<div
class="col"
>
Sep 8, 2022
</div>
<div
class="col-auto"
>
<span
class=""
>
<span
class="tooltip-icon"
data-testid="tooltip-icon-initiator-tooltip"
id="initiator-tooltip"
>
<svg
fill="currentColor"
height="15"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
width="15"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M256 288c79.5 0 144-64.5 144-144S335.5 0 256 0 112 64.5 112 144s64.5 144 144 144zm128 32h-55.1c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16H128C57.3 320 0 377.3 0 448v16c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48v-16c0-70.7-57.3-128-128-128z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
<div
class="td"
role="cell"
style="box-sizing: border-box; flex: 100 0 auto; min-width: 30px; width: 100px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
title=""
>
Amended
</div>
<div
class="td"
role="cell"
style="box-sizing: border-box; flex: 90 0 auto; min-width: 30px; width: 90px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
title=""
>
<div
class="c3 no-gutters row"
/>
</div>
</div>
</div>
</div>
</div>
.c0 {
Expand All @@ -360,7 +451,7 @@ exports[`Document Results Table matches snapshot 1`] = `
class="align-self-center col-auto"
>
<span>
1 - 1 of 2
1 - 2 of 2
</span>
</div>
<div
Expand Down Expand Up @@ -388,7 +479,7 @@ exports[`Document Results Table matches snapshot 1`] = `
disabled=""
style="width: 50px; margin-left: 10px; margin-right: 10px; background-color: white;"
type="number"
value="1"
value="10"
/>
<span
class="c0"
Expand Down Expand Up @@ -473,28 +564,15 @@ exports[`Document Results Table matches snapshot 1`] = `
</a>
</li>
<li
class="page-item"
>
<a
aria-label="Page 2"
class="page-link"
rel="next"
role="button"
tabindex="0"
>
2
</a>
</li>
<li
class="page-item"
class="page-item disabled"
>
<a
aria-disabled="false"
aria-disabled="true"
aria-label="Next page"
class="page-link"
class="page-link "
rel="next"
role="button"
tabindex="0"
tabindex="-1"
>
&gt;
</a>
Expand Down
Loading

0 comments on commit 2f0522e

Please sign in to comment.