Updates to reports.

components/pages/reports/event-data/EventDataParameters.js

@@ -0,0 +1,66 @@
+import { useContext, useRef } from 'react';
+import { useApi, useMessages } from 'hooks';
+import { Form, FormRow, FormButtons, SubmitButton, Loading } from 'react-basics';
+import { ReportContext } from 'components/pages/reports/Report';
+import NoData from 'components/common/NoData';
+import styles from './EventDataParameters.module.css';
+import { DATA_TYPES } from 'lib/constants';
+
+function useFields(websiteId, startDate, endDate) {
+  const { get, useQuery } = useApi();
+  const { data, error, isLoading } = useQuery(
+    ['fields', websiteId, startDate, endDate],
+    () => get('/reports/event-data', { websiteId, startAt: +startDate, endAt: +endDate }),
+    { enabled: !!(websiteId && startDate && endDate) },
+  );
+
+  return { data, error, isLoading };
+}
+
+export function EventDataParameters() {
+  const { report, runReport, isRunning } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+  const ref = useRef(null);
+  const { parameters } = report || {};
+  const { websiteId, dateRange } = parameters || {};
+  const { startDate, endDate } = dateRange || {};
+  const queryDisabled = !websiteId || !dateRange;
+  const { data, error, isLoading } = useFields(websiteId, startDate, endDate);
+
+  const handleSubmit = values => {
+    runReport(values);
+  };
+
+  if (!websiteId || !dateRange) {
+    return null;
+  }
+
+  if (isLoading) {
+    return <Loading icon="dots" />;
+  }
+
+  return (
+    <Form ref={ref} values={parameters} error={error} onSubmit={handleSubmit}>
+      <FormRow label={formatMessage(labels.fields)}>
+        <div className={styles.fields}>
+          {!data?.length && <NoData />}
+          {data?.map?.(({ eventKey, eventDataType }) => {
+            return (
+              <div className={styles.field} key={eventKey}>
+                <div className={styles.key}>{eventKey}</div>
+                <div className={styles.type}>{DATA_TYPES[eventDataType]}</div>
+              </div>
+            );
+          })}
+        </div>
+      </FormRow>
+      <FormButtons>
+        <SubmitButton variant="primary" disabled={queryDisabled} loading={isRunning}>
+          {formatMessage(labels.runQuery)}
+        </SubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default EventDataParameters;

components/pages/reports/event-data/EventDataParameters.module.css

@@ -0,0 +1,27 @@
+.fields {
+  max-height: 300px;
+  overflow: auto;
+}
+
+.field {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 30px;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: var(--border-radius);
+}
+
+.field:hover {
+  background: var(--base75);
+}
+
+.key {
+  font-weight: 400;
+}
+
+.type {
+  color: var(--font-color300);
+}

components/pages/reports/event-data/EventDataReport.js

@@ -1,30 +1,23 @@
-import { useState } from 'react';
-import { Form, FormRow, FormInput, TextField } from 'react-basics';
 import Report from '../Report';
 import ReportHeader from '../ReportHeader';
-import useMessages from 'hooks/useMessages';
+import ReportMenu from '../ReportMenu';
+import ReportBody from '../ReportBody';
+import EventDataParameters from './EventDataParameters';
 import Nodes from 'assets/nodes.svg';
-import styles from '../reports.module.css';
 
-export default function EventDataReport({ websiteId, data }) {
-  const [values, setValues] = useState({ query: '' });
-  const { formatMessage, labels } = useMessages();
+const defaultParameters = {
+  type: 'event-data',
+  parameters: { fields: [], filters: [] },
+};
 
+export default function EventDataReport({ reportId }) {
   return (
-    <Report>
-      <ReportHeader title={formatMessage(labels.eventData)} icon={<Nodes />} />
-      <div className={styles.container}>
-        <div className={styles.menu}>
-          <Form>
-            <FormRow label="Properties">
-              <FormInput name="query">
-                <TextField value={values.query} />
-              </FormInput>
-            </FormRow>
-          </Form>
-        </div>
-        <div className={styles.content}></div>
-      </div>
+    <Report reportId={reportId} defaultParameters={defaultParameters}>
+      <ReportHeader icon={<Nodes />} />
+      <ReportMenu>
+        <EventDataParameters />
+      </ReportMenu>
+      <ReportBody>hi.</ReportBody>
     </Report>
   );
 }

components/pages/reports/event-data/FieldAddForm.js

@@ -0,0 +1,28 @@
+import { useMessages } from 'hooks';
+import { Button, Form, FormButtons, FormRow } from 'react-basics';
+
+export function FieldAddForm({ onClose }) {
+  const { formatMessage, labels } = useMessages();
+
+  const handleSave = () => {
+    onClose();
+  };
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  return (
+    <Form>
+      <FormRow label={formatMessage(labels.url)}></FormRow>
+      <FormButtons align="center" flex>
+        <Button variant="primary" onClick={handleSave}>
+          {formatMessage(labels.save)}
+        </Button>
+        <Button onClick={handleClose}>{formatMessage(labels.cancel)}</Button>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default FieldAddForm;