From 64c6d73b77c7f6b1d8081c8c7d6aed80d7d87515 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 5 Jun 2023 03:08:43 -0700
Subject: [PATCH] Update report parameters.

---
 components/input/WebsiteSelect.js             |  1 -
 components/layout/PageHeader.js               |  2 +-
 components/layout/PageHeader.module.css       |  2 +-
 components/messages.js                        |  4 +-
 components/pages/reports/BaseParameters.js    |  2 +-
 components/pages/reports/ReportHeader.js      | 55 ++++++++++---------
 .../pages/reports/ReportHeader.module.css     |  3 +
 .../pages/reports/funnel/FunnelParameters.js  |  6 +-
 components/pages/reports/funnel/UrlAddForm.js |  8 +--
 components/pages/reports/reports.module.css   |  1 +
 10 files changed, 44 insertions(+), 40 deletions(-)
 create mode 100644 components/pages/reports/ReportHeader.module.css

diff --git a/components/input/WebsiteSelect.js b/components/input/WebsiteSelect.js
index a0ac38e4..b77ae57c 100644
--- a/components/input/WebsiteSelect.js
+++ b/components/input/WebsiteSelect.js
@@ -19,7 +19,6 @@ export function WebsiteSelect({ websiteId, onSelect }) {
       onChange={onSelect}
       alignment="end"
       placeholder={formatMessage(labels.selectWebsite)}
-      style={{ width: 200 }}
     >
       {({ id, name }) => <Item key={id}>{name}</Item>}
     </Dropdown>
diff --git a/components/layout/PageHeader.js b/components/layout/PageHeader.js
index c01192d2..f1363140 100644
--- a/components/layout/PageHeader.js
+++ b/components/layout/PageHeader.js
@@ -5,7 +5,7 @@ import styles from './PageHeader.module.css';
 export function PageHeader({ title, children, className }) {
   return (
     <div className={classNames(styles.header, className)}>
-      <div className={styles.title}>{title}</div>
+      {title && <div className={styles.title}>{title}</div>}
       <div className={styles.actions}>{children}</div>
     </div>
   );
diff --git a/components/layout/PageHeader.module.css b/components/layout/PageHeader.module.css
index 5ea85b70..03a1c7c8 100644
--- a/components/layout/PageHeader.module.css
+++ b/components/layout/PageHeader.module.css
@@ -4,7 +4,6 @@
   align-items: center;
   align-content: center;
   align-self: stretch;
-  margin-bottom: 40px;
   flex-wrap: wrap;
 }
 
@@ -23,6 +22,7 @@
   font-weight: 700;
   gap: 20px;
   height: 60px;
+  flex: 1;
 }
 
 .actions {
diff --git a/components/messages.js b/components/messages.js
index bcb2a5c1..166a121b 100644
--- a/components/messages.js
+++ b/components/messages.js
@@ -48,6 +48,8 @@ export const labels = defineMessages({
   deleteWebsite: { id: 'label.delete-website', defaultMessage: 'Delete website' },
   reset: { id: 'label.reset', defaultMessage: 'Reset' },
   addWebsite: { id: 'label.add-website', defaultMessage: 'Add website' },
+  addField: { id: 'label.add-field', defaultMessage: 'Add field' },
+  addDescription: { id: 'label.add-description', defaultMessage: 'Add description' },
   changePassword: { id: 'label.change-password', defaultMessage: 'Change password' },
   currentPassword: { id: 'label.current-password', defaultMessage: 'Current password' },
   newPassword: { id: 'label.new-password', defaultMessage: 'New password' },
@@ -129,8 +131,8 @@ export const labels = defineMessages({
   window: { id: 'label.window', defaultMessage: 'Window' },
   addUrl: { id: 'label.add-url', defaultMessage: 'Add URL' },
   runQuery: { id: 'label.run-query', defaultMessage: 'Run query' },
+  field: { id: 'label.field', defaultMessage: 'Field' },
   fields: { id: 'label.fields', defaultMessage: 'Fields' },
-  addField: { id: 'label.add-field', defaultMessage: 'Add field' },
 });
 
 export const messages = defineMessages({
diff --git a/components/pages/reports/BaseParameters.js b/components/pages/reports/BaseParameters.js
index 2d04f228..5dbe0f60 100644
--- a/components/pages/reports/BaseParameters.js
+++ b/components/pages/reports/BaseParameters.js
@@ -15,7 +15,7 @@ export function BaseParameters() {
   const { value, startDate, endDate } = dateRange || {};
 
   const handleWebsiteSelect = websiteId => {
-    updateReport({ parameters: { websiteId } });
+    updateReport({ websiteId, parameters: { websiteId } });
   };
 
   const handleDateChange = value => {
diff --git a/components/pages/reports/ReportHeader.js b/components/pages/reports/ReportHeader.js
index 08465ef9..b8104203 100644
--- a/components/pages/reports/ReportHeader.js
+++ b/components/pages/reports/ReportHeader.js
@@ -1,13 +1,11 @@
 import { useContext } from 'react';
 import { useRouter } from 'next/router';
-import { Flexbox, Icon, LoadingButton, InlineEditField, useToast } from 'react-basics';
-import WebsiteSelect from 'components/input/WebsiteSelect';
+import { Icon, LoadingButton, InlineEditField, useToast } from 'react-basics';
 import PageHeader from 'components/layout/PageHeader';
-import DateFilter from 'components/input/DateFilter';
-import { parseDateRange } from 'lib/date';
 import { useMessages, useApi } from 'hooks';
 import { ReportContext } from './Report';
-import styles from './reports.module.css';
+import styles from './ReportHeader.module.css';
+import reportStyles from './reports.module.css';
 
 export function ReportHeader({ icon }) {
   const { report, updateReport } = useContext(ReportContext);
@@ -20,17 +18,8 @@ export function ReportHeader({ icon }) {
     post(`/reports/${data.id}`, data),
   );
 
-  const { name, parameters } = report || {};
+  const { name, description, parameters } = report || {};
   const { websiteId, dateRange } = parameters || {};
-  const { value, startDate, endDate } = dateRange || {};
-
-  const handleWebsiteSelect = websiteId => {
-    updateReport({ parameters: { websiteId } });
-  };
-
-  const handleDateChange = value => {
-    updateReport({ parameters: { dateRange: { ...parseDateRange(value) } } });
-  };
 
   const handleSave = async () => {
     if (!report.id) {
@@ -53,27 +42,41 @@ export function ReportHeader({ icon }) {
     updateReport({ name });
   };
 
+  const handleDescriptionChange = description => {
+    updateReport({ description });
+  };
+
   const Title = () => {
     return (
       <>
         <Icon size="lg">{icon}</Icon>
-        <InlineEditField value={name} onCommit={handleNameChange} />
+        <InlineEditField name="name" value={name} onCommit={handleNameChange} />
       </>
     );
   };
 
   return (
-    <PageHeader title={<Title />} className={styles.header}>
-      <LoadingButton
-        variant="primary"
-        loading={isCreating || isUpdating}
-        disabled={!websiteId || !value}
-        onClick={handleSave}
-      >
-        {formatMessage(labels.save)}
-      </LoadingButton>
+    <div className={reportStyles.header}>
+      <PageHeader title={<Title />}>
+        <LoadingButton
+          variant="primary"
+          loading={isCreating || isUpdating}
+          disabled={!websiteId || !dateRange?.value || !name}
+          onClick={handleSave}
+        >
+          {formatMessage(labels.save)}
+        </LoadingButton>
+      </PageHeader>
+      <div className={styles.description}>
+        <InlineEditField
+          name="description"
+          value={description}
+          placeholder={`+ ${formatMessage(labels.addDescription)}`}
+          onCommit={handleDescriptionChange}
+        />
+      </div>
       {toast}
-    </PageHeader>
+    </div>
   );
 }
 
diff --git a/components/pages/reports/ReportHeader.module.css b/components/pages/reports/ReportHeader.module.css
new file mode 100644
index 00000000..01e483a0
--- /dev/null
+++ b/components/pages/reports/ReportHeader.module.css
@@ -0,0 +1,3 @@
+.description {
+  color: var(--font-color300);
+}
diff --git a/components/pages/reports/funnel/FunnelParameters.js b/components/pages/reports/funnel/FunnelParameters.js
index 991bf690..cf22f19c 100644
--- a/components/pages/reports/funnel/FunnelParameters.js
+++ b/components/pages/reports/funnel/FunnelParameters.js
@@ -28,8 +28,10 @@ export function FunnelParameters() {
   const { websiteId, dateRange, urls } = parameters || {};
   const queryDisabled = !websiteId || !dateRange || urls?.length < 2;
 
-  const handleSubmit = values => {
-    runReport(values);
+  const handleSubmit = data => {
+    if (!queryDisabled) {
+      runReport(data);
+    }
   };
 
   const handleAddUrl = url => {
diff --git a/components/pages/reports/funnel/UrlAddForm.js b/components/pages/reports/funnel/UrlAddForm.js
index b9d25f29..17d19a91 100644
--- a/components/pages/reports/funnel/UrlAddForm.js
+++ b/components/pages/reports/funnel/UrlAddForm.js
@@ -17,13 +17,8 @@ export function UrlAddForm({ defaultValue = '', onSave, onClose }) {
     setUrl(e.target.value);
   };
 
-  const handleClose = () => {
-    setUrl('');
-    onClose();
-  };
-
   return (
-    <Form className={styles.form}>
+    <Form className={styles.form} onSubmit={handleSave}>
       <FormRow label={formatMessage(labels.url)}>
         <TextField
           name="url"
@@ -37,7 +32,6 @@ export function UrlAddForm({ defaultValue = '', onSave, onClose }) {
         <Button variant="primary" onClick={handleSave}>
           {formatMessage(labels.save)}
         </Button>
-        <Button onClick={handleClose}>{formatMessage(labels.cancel)}</Button>
       </FormButtons>
     </Form>
   );
diff --git a/components/pages/reports/reports.module.css b/components/pages/reports/reports.module.css
index b75aee64..6fa54281 100644
--- a/components/pages/reports/reports.module.css
+++ b/components/pages/reports/reports.module.css
@@ -7,6 +7,7 @@
 .header {
   grid-row: 1 / 2;
   grid-column: 1 / 3;
+  margin-bottom: 40px;
 }
 
 .menu {