From ce654379718017534fd832fa37a98077e5bd3daf Mon Sep 17 00:00:00 2001
From: Paul Gain <paul@javexconsulting.com>
Date: Mon, 4 Mar 2024 17:12:27 +0000
Subject: [PATCH] Add no results message to paginated data

---
 src/client/components/Resource/Paginated.js   |   4 +
 .../ExportWins/Status/WinsRejectedList.jsx    |   1 +
 .../ExportWins/Status/WinsSentList.jsx        |   1 +
 .../ExportWins/Status/WinsWonTable.jsx        | 101 +++++++++---------
 .../cypress/specs/Resource/Paginated.cy.jsx   |  53 +++++++++
 5 files changed, 111 insertions(+), 49 deletions(-)

diff --git a/src/client/components/Resource/Paginated.js b/src/client/components/Resource/Paginated.js
index da30b5fc449..526e03fded6 100644
--- a/src/client/components/Resource/Paginated.js
+++ b/src/client/components/Resource/Paginated.js
@@ -88,12 +88,14 @@ const PaginatedResource = multiInstance({
     onPageClick,
     currentPage,
     result,
+    noResults = "You don't have any results",
   }) => (
     <Route>
       {({ location }) => {
         const qsParams = qs.parse(location.search.slice(1))
         const routePage = parseInt(qsParams.page, 10) || 1
         const totalPages = result ? Math.ceil(result.count / pageSize) : 0
+        const hasZeroResults = result?.count === 0
 
         return (
           <Task>
@@ -122,6 +124,7 @@ const PaginatedResource = multiInstance({
                       }}
                     />
                   )}
+
                   {result ? (
                     <LoadingBox name={name} id={id}>
                       <CollectionHeader
@@ -152,6 +155,7 @@ const PaginatedResource = multiInstance({
                   ) : (
                     <Task.Status name={name} id={id} />
                   )}
+                  {hasZeroResults && <p data-test="no-results">{noResults}</p>}
                 </>
               )
             }}
diff --git a/src/client/modules/ExportWins/Status/WinsRejectedList.jsx b/src/client/modules/ExportWins/Status/WinsRejectedList.jsx
index ec3fe969340..02a3c6be920 100644
--- a/src/client/modules/ExportWins/Status/WinsRejectedList.jsx
+++ b/src/client/modules/ExportWins/Status/WinsRejectedList.jsx
@@ -10,6 +10,7 @@ import urls from '../../../../lib/urls'
 export default () => (
   <ExportWinsResource.Paginated
     id="export-wins-rejected"
+    noResults="You don't have any rejected export wins."
     payload={{ confirmed: WIN_FILTERS.REJECTED }}
   >
     {(page) => (
diff --git a/src/client/modules/ExportWins/Status/WinsSentList.jsx b/src/client/modules/ExportWins/Status/WinsSentList.jsx
index 2c991904167..229e33e69fd 100644
--- a/src/client/modules/ExportWins/Status/WinsSentList.jsx
+++ b/src/client/modules/ExportWins/Status/WinsSentList.jsx
@@ -10,6 +10,7 @@ import urls from '../../../../lib/urls'
 export default () => (
   <ExportWinsResource.Paginated
     id="export-wins-sent"
+    noResults="You don't have any sent export wins."
     payload={{ confirmed: WIN_FILTERS.SENT }}
   >
     {(page) => (
diff --git a/src/client/modules/ExportWins/Status/WinsWonTable.jsx b/src/client/modules/ExportWins/Status/WinsWonTable.jsx
index 83b1005082e..3aa8c9f98b3 100644
--- a/src/client/modules/ExportWins/Status/WinsWonTable.jsx
+++ b/src/client/modules/ExportWins/Status/WinsWonTable.jsx
@@ -13,60 +13,63 @@ const NoWrapCell = styled(Table.Cell)`
   white-space: nowrap;
 `
 
-export const WinsWonTable = ({ exportWins }) => (
-  <Table
-    head={
-      <Table.Row>
-        <Table.CellHeader>UK Company</Table.CellHeader>
-        <Table.CellHeader>Destination</Table.CellHeader>
-        <Table.CellHeader>Export amount</Table.CellHeader>
-        <Table.CellHeader>Date won</Table.CellHeader>
-        <Table.CellHeader>Date responded</Table.CellHeader>
-        <Table.CellHeader>Details</Table.CellHeader>
-      </Table.Row>
-    }
-  >
-    {exportWins.map(
-      ({
-        id,
-        company,
-        country,
-        date,
-        total_expected_export_value,
-        customer_response,
-      }) => (
-        <Table.Row key={id}>
-          <Table.Cell>
-            <Link
-              as={ReactRouterLink}
-              to={urls.companies.overview.index(company.id)}
-            >
-              {company.name}
-            </Link>
-          </Table.Cell>
-          <Table.Cell>{country.name}</Table.Cell>
-          <Table.Cell>{currencyGBP(total_expected_export_value)}</Table.Cell>
-          <NoWrapCell>{formatMediumDate(date)}</NoWrapCell>
-          <NoWrapCell>
-            {formatMediumDate(customer_response.responded_on)}
-          </NoWrapCell>
-          <NoWrapCell>
-            <Link
-              as={ReactRouterLink}
-              to={urls.companies.exportWins.details(id)}
-            >
-              View details
-            </Link>
-          </NoWrapCell>
+export const WinsWonTable = ({ exportWins }) => {
+  return exportWins.length === 0 ? null : (
+    <Table
+      head={
+        <Table.Row>
+          <Table.CellHeader>UK Company</Table.CellHeader>
+          <Table.CellHeader>Destination</Table.CellHeader>
+          <Table.CellHeader>Export amount</Table.CellHeader>
+          <Table.CellHeader>Date won</Table.CellHeader>
+          <Table.CellHeader>Date responded</Table.CellHeader>
+          <Table.CellHeader>Details</Table.CellHeader>
         </Table.Row>
-      )
-    )}
-  </Table>
-)
+      }
+    >
+      {exportWins.map(
+        ({
+          id,
+          company,
+          country,
+          date,
+          total_expected_export_value,
+          customer_response,
+        }) => (
+          <Table.Row key={id}>
+            <Table.Cell>
+              <Link
+                as={ReactRouterLink}
+                to={urls.companies.overview.index(company.id)}
+              >
+                {company.name}
+              </Link>
+            </Table.Cell>
+            <Table.Cell>{country.name}</Table.Cell>
+            <Table.Cell>{currencyGBP(total_expected_export_value)}</Table.Cell>
+            <NoWrapCell>{formatMediumDate(date)}</NoWrapCell>
+            <NoWrapCell>
+              {formatMediumDate(customer_response.responded_on)}
+            </NoWrapCell>
+            <NoWrapCell>
+              <Link
+                as={ReactRouterLink}
+                to={urls.companies.exportWins.details(id)}
+              >
+                View details
+              </Link>
+            </NoWrapCell>
+          </Table.Row>
+        )
+      )}
+    </Table>
+  )
+}
 
 export default () => (
   <ExportWinsResource.Paginated
     id="export-wins-won"
+    noResults="You don't have any won export wins."
     payload={{ confirmed: WIN_FILTERS.WON }}
   >
     {(page) => <WinsWonTable exportWins={page} />}
diff --git a/test/component/cypress/specs/Resource/Paginated.cy.jsx b/test/component/cypress/specs/Resource/Paginated.cy.jsx
index 34093c74db0..31543b3ebef 100644
--- a/test/component/cypress/specs/Resource/Paginated.cy.jsx
+++ b/test/component/cypress/specs/Resource/Paginated.cy.jsx
@@ -28,6 +28,8 @@ describe('Resource/Paginated', () => {
       </DataHubProvider>
     )
 
+    cy.get('[data-test="no-results"]').should('not.exist')
+
     cy.get('pre').as('page').should('have.text', JSON.stringify(PAGES[0]))
 
     cy.get('[data-test="pagination-summary"]')
@@ -108,4 +110,55 @@ describe('Resource/Paginated', () => {
     cy.contains('Loading')
     cy.get('pre').as('page').should('have.text', JSON.stringify(PAGES[0]))
   })
+
+  it('Should render the default no results message', () => {
+    cy.mount(
+      <DataHubProvider
+        resetTasks={true}
+        tasks={{
+          foo: () => ({
+            count: 0,
+            results: [],
+          }),
+        }}
+      >
+        <PaginatedResource name="foo" id="whatever" pageSize={PAGE_SIZE}>
+          {(page) => <pre>{JSON.stringify(page)}</pre>}
+        </PaginatedResource>
+      </DataHubProvider>
+    )
+    cy.get('[data-test="pagination-summary"]').should('not.exist')
+    cy.get('[data-test="pagination"]').should('not.exist')
+    cy.get('[data-test="no-results"]').should(
+      'have.text',
+      "You don't have any results"
+    )
+  })
+
+  it('Should override the default results message"', () => {
+    cy.mount(
+      <DataHubProvider
+        resetTasks={true}
+        tasks={{
+          foo: () => ({
+            count: 0,
+            results: [],
+          }),
+        }}
+      >
+        <PaginatedResource
+          name="foo"
+          id="whatever"
+          pageSize={PAGE_SIZE}
+          noResults="You don't have any sent export wins."
+        >
+          {(page) => <pre>{JSON.stringify(page)}</pre>}
+        </PaginatedResource>
+      </DataHubProvider>
+    )
+    cy.get('[data-test="no-results"]').should(
+      'have.text',
+      "You don't have any sent export wins."
+    )
+  })
 })