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

components/pages/settings/websites/WebsitesList.js

@@ -10,19 +10,21 @@ import useMessages from 'hooks/useMessages';
 import { ROLES } from 'lib/constants';
 import useApiFilter from 'hooks/useApiFilter';
 
-export function WebsitesList() {
+export function WebsitesList({ showTeam, showHeader = true, includeTeams, onlyTeams, fetch }) {
   const { formatMessage, labels, messages } = useMessages();
   const { user } = useUser();
   const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
     useApiFilter();
   const { get, useQuery } = useApi();
   const { data, isLoading, error, refetch } = useQuery(
-    ['websites', user?.id, filter, page, pageSize],
+    ['websites', fetch, user?.id, filter, page, pageSize, includeTeams, onlyTeams],
     () =>
       get(`/users/${user?.id}/websites`, {
         filter,
         page,
         pageSize,
+        includeTeams,
+        onlyTeams,
       }),
     { enabled: !!user },
   );
@@ -54,10 +56,11 @@ export function WebsitesList() {
 
   return (
     <Page loading={isLoading} error={error}>
-      <PageHeader title={formatMessage(labels.websites)}>{addButton}</PageHeader>
+      {showHeader && <PageHeader title={formatMessage(labels.websites)}>{addButton}</PageHeader>}
       {hasData && (
         <WebsitesTable
           data={data}
+          showTeam={showTeam}
           onFilterChange={handleFilterChange}
           onPageChange={handlePageChange}
           onPageSizeChange={handlePageSizeChange}
@@ -65,7 +68,7 @@ export function WebsitesList() {
         />
       )}
       {!hasData && (
-        <EmptyPlaceholder message={formatMessage(messages.noWebsitesConfigured)}>
+        <EmptyPlaceholder message={formatMessage(messages.noDataAvailable)}>
           {addButton}
         </EmptyPlaceholder>
       )}

components/pages/settings/websites/WebsitesTable.js

@@ -3,6 +3,7 @@ import { Button, Text, Icon, Icons } from 'react-basics';
 import SettingsTable from 'components/common/SettingsTable';
 import useMessages from 'hooks/useMessages';
 import useConfig from 'hooks/useConfig';
+import useUser from 'hooks/useUser';
 
 export function WebsitesTable({
   data = [],
@@ -10,13 +11,21 @@ export function WebsitesTable({
   onFilterChange,
   onPageChange,
   onPageSizeChange,
+  showTeam,
 }) {
   const { formatMessage, labels } = useMessages();
   const { openExternal } = useConfig();
+  const { user } = useUser();
+
+  const teamColumns = [
+    { name: 'teamName', label: formatMessage(labels.teamName) },
+    { name: 'owner', label: formatMessage(labels.owner) },
+  ];
 
   const columns = [
     { name: 'name', label: formatMessage(labels.name) },
     { name: 'domain', label: formatMessage(labels.domain) },
+    ...(showTeam ? teamColumns : []),
     { name: 'action', label: ' ' },
   ];
 
@@ -32,18 +41,28 @@ export function WebsitesTable({
       filterValue={filterValue}
     >
       {row => {
-        const { id } = row;
+        const {
+          id,
+          teamWebsite,
+          user: { username, id: ownerId },
+        } = row;
+        if (showTeam) {
+          row.teamName = teamWebsite[0]?.team.name;
+          row.owner = username;
+        }
 
         return (
           <>
-            <Link href={`/settings/websites/${id}`}>
-              <Button>
-                <Icon>
-                  <Icons.Edit />
-                </Icon>
-                <Text>{formatMessage(labels.edit)}</Text>
-              </Button>
-            </Link>
+            {(!showTeam || ownerId === user.id) && (
+              <Link href={`/settings/websites/${id}`}>
+                <Button>
+                  <Icon>
+                    <Icons.Edit />
+                  </Icon>
+                  <Text>{formatMessage(labels.edit)}</Text>
+                </Button>
+              </Link>
+            )}
             <Link href={`/websites/${id}`} target={openExternal ? '_blank' : null}>
               <Button>
                 <Icon>

components/pages/websites/WebsiteReportsPage.js

@@ -1,7 +1,7 @@
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import Page from 'components/layout/Page';
 import ReportsTable from 'components/pages/reports/ReportsTable';
-import { useMessages, useReports } from 'hooks';
+import { useMessages, useWebsiteReports } from 'hooks';
 import Link from 'next/link';
 import { Button, Flexbox, Icon, Icons, Text } from 'react-basics';
 import WebsiteHeader from './WebsiteHeader';
@@ -17,9 +17,9 @@ export function WebsiteReportsPage({ websiteId }) {
     handleFilterChange,
     handlePageChange,
     handlePageSizeChange,
-  } = useReports(websiteId);
+  } = useWebsiteReports(websiteId);
 
-  const hasData = reports && reports.data.length !== 0;
+  const hasData = (reports && reports.data.length !== 0) || filter;
 
   const handleDelete = async id => {
     await deleteReport(id);
@@ -48,11 +48,7 @@ export function WebsiteReportsPage({ websiteId }) {
           filterValue={filter}
         />
       )}
-      {!hasData && (
-        <EmptyPlaceholder message={formatMessage(messages.noReportsConfigured)}>
-          {/* {addButton} */}
-        </EmptyPlaceholder>
-      )}
+      {!hasData && <EmptyPlaceholder message={formatMessage(messages.noDataAvailable)} />}
     </Page>
   );
 }

components/pages/websites/WebsitesPage.js

@@ -0,0 +1,67 @@
+import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
+import WebsiteAddForm from 'components/pages/settings/websites/WebsiteAddForm';
+import WebsiteList from 'components/pages/settings/websites/WebsitesList';
+import { useMessages } from 'hooks';
+import useUser from 'hooks/useUser';
+import { ROLES } from 'lib/constants';
+import { useState } from 'react';
+import {
+  Button,
+  Icon,
+  Icons,
+  Item,
+  Modal,
+  ModalTrigger,
+  Tabs,
+  Text,
+  useToasts,
+} from 'react-basics';
+
+export function WebsitesPage() {
+  const { formatMessage, labels, messages } = useMessages();
+  const [tab, setTab] = useState('my-websites');
+  const [fetch, setFetch] = useState(1);
+  const { user } = useUser();
+  const { showToast } = useToasts();
+
+  const handleSave = async () => {
+    setFetch(fetch + 1);
+    showToast({ message: formatMessage(messages.saved), variant: 'success' });
+  };
+
+  const addButton = (
+    <>
+      {user.role !== ROLES.viewOnly && (
+        <ModalTrigger>
+          <Button variant="primary">
+            <Icon>
+              <Icons.Plus />
+            </Icon>
+            <Text>{formatMessage(labels.addWebsite)}</Text>
+          </Button>
+          <Modal title={formatMessage(labels.addWebsite)}>
+            {close => <WebsiteAddForm onSave={handleSave} onClose={close} />}
+          </Modal>
+        </ModalTrigger>
+      )}
+    </>
+  );
+
+  return (
+    <Page>
+      <PageHeader title={formatMessage(labels.websites)}>{addButton}</PageHeader>
+      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
+        <Item key="my-websites">{formatMessage(labels.myWebsites)}</Item>
+        <Item key="team-webaites">{formatMessage(labels.teamWebsites)}</Item>
+      </Tabs>
+
+      {tab === 'my-websites' && <WebsiteList showHeader={false} fetch={fetch} />}
+      {tab === 'team-webaites' && (
+        <WebsiteList showHeader={false} fetch={fetch} showTeam={true} onlyTeams={true} />
+      )}
+    </Page>
+  );
+}
+
+export default WebsitesPage;