Add no reports message.

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.',

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>
   );
 }