Merge remote-tracking branch 'origin/dev' into dev

components/pages/reports/ReportsPage.js

@@ -1,13 +1,29 @@
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
+import { useMessages, useReports } from 'hooks';
 import Link from 'next/link';
 import { Button, Icon, Icons, Text } from 'react-basics';
-import { useMessages, useReports } from 'hooks';
 import ReportsTable from './ReportsTable';
 
 export function ReportsPage() {
-  const { formatMessage, labels } = useMessages();
-  const { reports, error, isLoading } = useReports();
+  const { formatMessage, labels, messages } = useMessages();
+  const {
+    reports,
+    error,
+    isLoading,
+    deleteReport,
+    filter,
+    handleFilterChange,
+    handlePageChange,
+    handlePageSizeChange,
+  } = useReports();
+
+  const hasData = (reports && reports?.data.length !== 0) || filter;
+
+  const handleDelete = async id => {
+    await deleteReport(id);
+  };
 
   return (
     <Page loading={isLoading} error={error}>
@@ -21,7 +37,23 @@ export function ReportsPage() {
           </Button>
         </Link>
       </PageHeader>
-      <ReportsTable data={reports} />
+
+      {hasData && (
+        <ReportsTable
+          data={reports}
+          showSearch={true}
+          showPaging={true}
+          onFilterChange={handleFilterChange}
+          onPageChange={handlePageChange}
+          onPageSizeChange={handlePageSizeChange}
+          onDelete={deleteReport}
+          filterValue={filter}
+          showDomain={true}
+        />
+      )}
+      {!hasData && (
+        <EmptyPlaceholder message={formatMessage(messages.noDataAvailable)}></EmptyPlaceholder>
+      )}
     </Page>
   );
 }

components/pages/reports/ReportsTable.js

@@ -1,9 +1,10 @@
-import { useState } from 'react';
-import { Flexbox, Icon, Icons, Text, Button, Modal } from 'react-basics';
+import ConfirmDeleteForm from 'components/common/ConfirmDeleteForm';
 import LinkButton from 'components/common/LinkButton';
 import SettingsTable from 'components/common/SettingsTable';
-import ConfirmDeleteForm from 'components/common/ConfirmDeleteForm';
 import { useMessages } from 'hooks';
+import useUser from 'hooks/useUser';
+import { useState } from 'react';
+import { Button, Flexbox, Icon, Icons, Modal, Text } from 'react-basics';
 
 export function ReportsTable({
   data = [],
@@ -12,14 +13,24 @@ export function ReportsTable({
   onFilterChange,
   onPageChange,
   onPageSizeChange,
+  showDomain,
 }) {
   const [report, setReport] = useState(null);
   const { formatMessage, labels } = useMessages();
+  const { user } = useUser();
+
+  const domainColumn = [
+    {
+      name: 'domain',
+      label: formatMessage(labels.domain),
+    },
+  ];
 
   const columns = [
     { name: 'name', label: formatMessage(labels.name) },
     { name: 'description', label: formatMessage(labels.description) },
     { name: 'type', label: formatMessage(labels.type) },
+    ...(showDomain ? domainColumn : []),
     { name: 'action', label: ' ' },
   ];
 
@@ -40,11 +51,15 @@ export function ReportsTable({
         filterValue={filterValue}
       >
         {row => {
-          const { id } = row;
+          const { id, userId: reportOwnerId, website } = row;
+          if (showDomain) {
+            row.domain = website.domain;
+          }
 
           return (
             <Flexbox gap={10}>
               <LinkButton href={`/reports/${id}`}>{formatMessage(labels.view)}</LinkButton>
+              {!showDomain || user.id === reportOwnerId || user.id === website?.userId}
               <Button onClick={() => setReport(row)}>
                 <Icon>
                   <Icons.Trash />