New reports screens.

components/messages.js

@@ -133,6 +133,8 @@ export const labels = defineMessages({
   runQuery: { id: 'label.run-query', defaultMessage: 'Run query' },
   field: { id: 'label.field', defaultMessage: 'Field' },
   fields: { id: 'label.fields', defaultMessage: 'Fields' },
+  createReport: { id: 'labels.create-report', defaultMessage: 'Create report' },
+  description: { id: 'labels.description', defaultMessage: 'Description' },
 });
 
 export const messages = defineMessages({

components/pages/reports/ReportTemplates.js

@@ -5,7 +5,8 @@ import PageHeader from 'components/layout/PageHeader';
 import Funnel from 'assets/funnel.svg';
 import Nodes from 'assets/nodes.svg';
 import Lightbulb from 'assets/lightbulb.svg';
-import styles from './ReportList.module.css';
+import styles from './ReportTemplates.module.css';
+import { useMessages } from 'hooks';
 
 const reports = [
   {
@@ -50,10 +51,12 @@ function ReportItem({ title, description, url, icon }) {
   );
 }
 
-export function ReportList() {
+export function ReportTemplates() {
+  const { formatMessage, labels } = useMessages();
+
   return (
     <Page>
-      <PageHeader title="Reports" />
+      <PageHeader title={formatMessage(labels.reports)} />
       <div className={styles.reports}>
         {reports.map(({ title, description, url, icon }) => {
           return (
@@ -65,4 +68,4 @@ export function ReportList() {
   );
 }
 
-export default ReportList;
+export default ReportTemplates;

components/pages/reports/ReportsList.js

@@ -0,0 +1,29 @@
+import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
+import Link from 'next/link';
+import { Button, Icon, Icons, Text } from 'react-basics';
+import { useMessages, useReports } from 'hooks';
+import ReportsTable from './ReportsTable';
+
+export function ReportsList() {
+  const { formatMessage, labels } = useMessages();
+  const { reports, error, isLoading } = useReports();
+
+  return (
+    <Page loading={isLoading} error={error}>
+      <PageHeader title="Reports">
+        <Link href="/reports/create">
+          <Button variant="primary">
+            <Icon>
+              <Icons.Plus />
+            </Icon>
+            <Text>{formatMessage(labels.createReport)}</Text>
+          </Button>
+        </Link>
+      </PageHeader>
+      <ReportsTable data={reports} />
+    </Page>
+  );
+}
+
+export default ReportsList;

components/pages/reports/ReportsTable.js

@@ -0,0 +1,37 @@
+import Link from 'next/link';
+import { Button, Text, Icon, Icons } from 'react-basics';
+import SettingsTable from 'components/common/SettingsTable';
+import useMessages from 'hooks/useMessages';
+import useConfig from 'hooks/useConfig';
+
+export function ReportsTable({ data = [] }) {
+  const { formatMessage, labels } = useMessages();
+  const { openExternal } = useConfig();
+
+  const columns = [
+    { name: 'name', label: formatMessage(labels.name) },
+    { name: 'description', label: formatMessage(labels.description) },
+    { name: 'action', label: ' ' },
+  ];
+
+  return (
+    <SettingsTable columns={columns} data={data}>
+      {row => {
+        const { id } = row;
+
+        return (
+          <Link href={`/reports/${id}`}>
+            <Button>
+              <Icon>
+                <Icons.ArrowRight />
+              </Icon>
+              <Text>{formatMessage(labels.view)}</Text>
+            </Button>
+          </Link>
+        );
+      }}
+    </SettingsTable>
+  );
+}
+
+export default ReportsTable;

hooks/index.js

@@ -10,6 +10,7 @@ export * from './useLocale';
 export * from './useMessages';
 export * from './usePageQuery';
 export * from './useReport';
+export * from './useReports';
 export * from './useRequireLogin';
 export * from './useShareToken';
 export * from './useSticky';

hooks/useReports.js

@@ -0,0 +1,10 @@
+import useApi from './useApi';
+
+export function useReports() {
+  const { get, useQuery } = useApi();
+  const { data, error, isLoading } = useQuery(['reports'], () => get(`/reports`));
+
+  return { reports: data, error, isLoading };
+}
+
+export default useReports;

pages/reports/create.js

@@ -0,0 +1,13 @@
+import AppLayout from 'components/layout/AppLayout';
+import ReportTemplates from 'components/pages/reports/ReportTemplates';
+import { useMessages } from 'hooks';
+
+export default function ReportsPage() {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <AppLayout title={formatMessage(labels.reports)}>
+      <ReportTemplates />
+    </AppLayout>
+  );
+}

pages/reports/index.js

@@ -1,21 +1,13 @@
-import { useState } from 'react';
-import { Item, Tabs } from 'react-basics';
 import AppLayout from 'components/layout/AppLayout';
-import ReportList from 'components/pages/reports/ReportList';
 import useMessages from 'hooks/useMessages';
+import ReportsList from 'components/pages/reports/ReportsList';
 
 export default function ReportsPage() {
-  const [tab, setTab] = useState('create');
   const { formatMessage, labels } = useMessages();
 
   return (
     <AppLayout title={formatMessage(labels.reports)}>
-      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30, fontSize: 14 }}>
-        <Item key="create">{formatMessage(labels.reports)}</Item>
-        <Item key="saved">{formatMessage(labels.save)}</Item>
-      </Tabs>
-      {tab === 'create' && <ReportList />}
-      {tab === 'saved' && <h1>My reports</h1>}
+      <ReportsList />
     </AppLayout>
   );
 }