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;