From 5e64eac396f29b17873c362255487289c2805351 Mon Sep 17 00:00:00 2001
From: Brian Cao <brian@umami.is>
Date: Fri, 11 Aug 2023 13:52:10 -0700
Subject: [PATCH] Add no reports message.

---
 components/messages.js                        |  4 +++
 .../pages/websites/WebsiteReportsPage.js      | 34 ++++++++++++-------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/components/messages.js b/components/messages.js
index 85a46ff5..f47513e8 100644
--- a/components/messages.js
+++ b/components/messages.js
@@ -246,6 +246,10 @@ export const messages = defineMessages({
     id: 'message.no-websites-configured',
     defaultMessage: 'You do not have any websites configured.',
   },
+  noReportsConfigured: {
+    id: 'message.no-reports-configured',
+    defaultMessage: 'You do not have any reports configured.',
+  },
   noTeamWebsites: {
     id: 'message.no-team-websites',
     defaultMessage: 'This team does not have any websites.',
diff --git a/components/pages/websites/WebsiteReportsPage.js b/components/pages/websites/WebsiteReportsPage.js
index a1d49d10..beb9bc4f 100644
--- a/components/pages/websites/WebsiteReportsPage.js
+++ b/components/pages/websites/WebsiteReportsPage.js
@@ -1,12 +1,13 @@
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import Page from 'components/layout/Page';
-import Link from 'next/link';
-import { Button, Icon, Icons, Text, Flexbox } from 'react-basics';
-import { useMessages, useReports } from 'hooks';
 import ReportsTable from 'components/pages/reports/ReportsTable';
+import { useMessages, useReports } from 'hooks';
+import Link from 'next/link';
+import { Button, Flexbox, Icon, Icons, Text } from 'react-basics';
 import WebsiteHeader from './WebsiteHeader';
 
 export function WebsiteReportsPage({ websiteId }) {
-  const { formatMessage, labels } = useMessages();
+  const { formatMessage, labels, messages } = useMessages();
   const {
     reports,
     error,
@@ -18,6 +19,8 @@ export function WebsiteReportsPage({ websiteId }) {
     handlePageSizeChange,
   } = useReports(websiteId);
 
+  const hasData = reports && reports.data.length !== 0;
+
   const handleDelete = async id => {
     await deleteReport(id);
   };
@@ -35,14 +38,21 @@ export function WebsiteReportsPage({ websiteId }) {
           </Button>
         </Link>
       </Flexbox>
-      <ReportsTable
-        data={reports}
-        onDelete={handleDelete}
-        onFilterChange={handleFilterChange}
-        onPageChange={handlePageChange}
-        onPageSizeChange={handlePageSizeChange}
-        filterValue={filter}
-      />
+      {hasData && (
+        <ReportsTable
+          data={reports}
+          onDelete={handleDelete}
+          onFilterChange={handleFilterChange}
+          onPageChange={handlePageChange}
+          onPageSizeChange={handlePageSizeChange}
+          filterValue={filter}
+        />
+      )}
+      {!hasData && (
+        <EmptyPlaceholder message={formatMessage(messages.noReportsConfigured)}>
+          {/* {addButton} */}
+        </EmptyPlaceholder>
+      )}
     </Page>
   );
 }