Updates to reports.

components/pages/reports/funnel/FunnelParameters.js

@@ -6,98 +6,99 @@ import {
   FormButtons,
   FormInput,
   FormRow,
-  Modal,
+  PopupTrigger,
+  Popup,
   SubmitButton,
   Text,
   TextField,
   Tooltip,
 } from 'react-basics';
 import Icons from 'components/icons';
-import AddUrlForm from './AddUrlForm';
+import UrlAddForm from './UrlAddForm';
 import { ReportContext } from 'components/pages/reports/Report';
 import styles from './FunnelParameters.module.css';
+import BaseParameters from '../BaseParameters';
 
 export function FunnelParameters() {
   const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
-  const [show, setShow] = useState(false);
   const ref = useRef(null);
-  const { websiteId, parameters } = report || {};
-  const queryDisabled = !websiteId || parameters?.urls?.length < 2;
+
+  const { parameters } = report || {};
+  const { websiteId, dateRange, urls } = parameters || {};
+  const queryDisabled = !websiteId || !dateRange || urls?.length < 2;
 
   const handleSubmit = values => {
     runReport(values);
   };
 
   const handleAddUrl = url => {
-    updateReport({ parameters: { ...parameters, urls: parameters.urls.concat(url) } });
+    updateReport({ parameters: { urls: parameters.urls.concat(url) } });
   };
 
   const handleRemoveUrl = (index, e) => {
     e.stopPropagation();
     const urls = [...parameters.urls];
     urls.splice(index, 1);
-    updateReport({ parameters: { ...parameters, urls } });
+    updateReport({ parameters: { urls } });
   };
 
-  const showAddForm = () => setShow(true);
-  const hideAddForm = () => setShow(false);
-
   return (
-    <>
-      <Form ref={ref} values={parameters} onSubmit={handleSubmit}>
-        <FormRow label={formatMessage(labels.window)}>
-          <FormInput
-            name="window"
-            rules={{ required: formatMessage(labels.required), pattern: /[0-9]+/ }}
-          >
-            <TextField autoComplete="off" />
-          </FormInput>
-        </FormRow>
-        <FormRow label={formatMessage(labels.urls)} action={<AddUrlButton onClick={showAddForm} />}>
-          <div className={styles.urls}>
-            {parameters?.urls?.map((url, index) => {
-              return (
-                <div key={index} className={styles.url}>
-                  <Text>{url}</Text>
-                  <Tooltip
-                    className={styles.icon}
-                    label={formatMessage(labels.remove)}
-                    position="right"
-                  >
-                    <Icon onClick={handleRemoveUrl.bind(null, index)}>
-                      <Icons.Close />
-                    </Icon>
-                  </Tooltip>
-                </div>
-              );
-            })}
-          </div>
-        </FormRow>
-        <FormButtons>
-          <SubmitButton variant="primary" disabled={queryDisabled} loading={isRunning}>
-            {formatMessage(labels.runQuery)}
-          </SubmitButton>
-        </FormButtons>
-      </Form>
-      {show && (
-        <Modal onClose={hideAddForm}>
-          <AddUrlForm onSave={handleAddUrl} onClose={hideAddForm} />
-        </Modal>
-      )}
-    </>
+    <Form ref={ref} values={parameters} onSubmit={handleSubmit}>
+      <BaseParameters />
+      <FormRow label={formatMessage(labels.window)}>
+        <FormInput
+          name="window"
+          rules={{ required: formatMessage(labels.required), pattern: /[0-9]+/ }}
+        >
+          <TextField autoComplete="off" />
+        </FormInput>
+      </FormRow>
+      <FormRow label={formatMessage(labels.urls)} action={<AddUrlButton onAdd={handleAddUrl} />}>
+        <div className={styles.urls}>
+          {parameters?.urls?.map((url, index) => {
+            return (
+              <div key={index} className={styles.url}>
+                <Text>{url}</Text>
+                <Tooltip
+                  className={styles.icon}
+                  label={formatMessage(labels.remove)}
+                  position="right"
+                >
+                  <Icon onClick={handleRemoveUrl.bind(null, index)}>
+                    <Icons.Close />
+                  </Icon>
+                </Tooltip>
+              </div>
+            );
+          })}
+        </div>
+      </FormRow>
+      <FormButtons>
+        <SubmitButton variant="primary" disabled={queryDisabled} loading={isRunning}>
+          {formatMessage(labels.runQuery)}
+        </SubmitButton>
+      </FormButtons>
+    </Form>
   );
 }
 
-function AddUrlButton({ onClick }) {
+function AddUrlButton({ onAdd }) {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <Tooltip label={formatMessage(labels.addUrl)}>
-      <Icon onClick={onClick}>
-        <Icons.Plus />
-      </Icon>
-    </Tooltip>
+    <PopupTrigger>
+      <Tooltip label={formatMessage(labels.addUrl)}>
+        <Icon>
+          <Icons.Plus />
+        </Icon>
+      </Tooltip>
+      <Popup position="bottom" alignment="start">
+        {close => {
+          return <UrlAddForm onSave={onAdd} onClose={close} />;
+        }}
+      </Popup>
+    </PopupTrigger>
   );
 }
 

components/pages/reports/funnel/FunnelReport.js

@@ -1,17 +1,15 @@
-import { useContext } from 'react';
 import FunnelChart from './FunnelChart';
 import FunnelTable from './FunnelTable';
 import FunnelParameters from './FunnelParameters';
-import Report, { ReportContext } from '../Report';
+import Report from '../Report';
 import ReportHeader from '../ReportHeader';
 import ReportMenu from '../ReportMenu';
 import ReportBody from '../ReportBody';
 import Funnel from 'assets/funnel.svg';
-import { useReport } from 'hooks';
 
 const defaultParameters = {
   type: 'funnel',
-  parameters: { window: 60, urls: ['/', '/docs'] },
+  parameters: { window: 60, urls: [] },
 };
 
 export default function FunnelReport({ reportId }) {

components/pages/reports/funnel/UrlAddForm.js

@@ -1,8 +1,9 @@
 import { useState } from 'react';
 import { useMessages } from 'hooks';
 import { Button, Form, FormButtons, FormRow, TextField } from 'react-basics';
+import styles from './UrlAddForm.module.css';
 
-export function AddUrlForm({ defaultValue = '', onSave, onClose }) {
+export function UrlAddForm({ defaultValue = '', onSave, onClose }) {
   const [url, setUrl] = useState(defaultValue);
   const { formatMessage, labels } = useMessages();
 
@@ -22,7 +23,7 @@ export function AddUrlForm({ defaultValue = '', onSave, onClose }) {
   };
 
   return (
-    <Form>
+    <Form className={styles.form}>
       <FormRow label={formatMessage(labels.url)}>
         <TextField
           name="url"
@@ -42,4 +43,4 @@ export function AddUrlForm({ defaultValue = '', onSave, onClose }) {
   );
 }
 
-export default AddUrlForm;
+export default UrlAddForm;

components/pages/reports/funnel/UrlAddForm.module.css

@@ -0,0 +1,8 @@
+.form {
+  background: var(--base50);
+  padding: 30px;
+  margin-top: 10px;
+  border: 1px solid var(--base400);
+  border-radius: var(--border-radius);
+  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1);
+}