PSP-6895 Digital Documents - Default number of entries on the List View should be 10 instead of 1

source/frontend/src/components/Table/Table.tsx

@@ -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';
@@ -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') : '',
             )}
@@ -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) &&
@@ -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,
@@ -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">
@@ -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">

source/frontend/src/components/Table/__snapshots__/Table.test.tsx.snap

@@ -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

source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/__snapshots__/ContactResultComponent.test.tsx.snap

@@ -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

source/frontend/src/features/admin/access/__snapshots__/ManageAccessRequestsPage.test.tsx.snap

@@ -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

source/frontend/src/features/documents/list/DocumentResults/DocumentResults.test.tsx

@@ -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';
@@ -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();
   });
 });

source/frontend/src/features/documents/list/DocumentResults/DocumentResults.tsx

@@ -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>

source/frontend/src/features/documents/list/DocumentResults/__snapshots__/DocumentResults.test.tsx.snap

@@ -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 {
@@ -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
@@ -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"
@@ -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>