Event data report UI.

components/pages/reports/funnel/FunnelParameters.js

@@ -9,15 +9,13 @@ import {
   PopupTrigger,
   Popup,
   SubmitButton,
-  Text,
   TextField,
-  TooltipPopup,
 } from 'react-basics';
 import Icons from 'components/icons';
 import UrlAddForm from './UrlAddForm';
 import { ReportContext } from 'components/pages/reports/Report';
-import styles from './FunnelParameters.module.css';
 import BaseParameters from '../BaseParameters';
+import ParameterList from '../ParameterList';
 
 export function FunnelParameters() {
   const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
@@ -28,7 +26,9 @@ export function FunnelParameters() {
   const { websiteId, dateRange, urls } = parameters || {};
   const queryDisabled = !websiteId || !dateRange || urls?.length < 2;
 
-  const handleSubmit = data => {
+  const handleSubmit = (data, e) => {
+    e.stopPropagation();
+    e.preventDefault();
     if (!queryDisabled) {
       runReport(data);
     }
@@ -45,8 +45,23 @@ export function FunnelParameters() {
     updateReport({ parameters: { urls } });
   };
 
+  const AddUrlButton = () => {
+    return (
+      <PopupTrigger>
+        <Icon>
+          <Icons.Plus />
+        </Icon>
+        <Popup position="bottom" alignment="start">
+          {(close, element) => {
+            return <UrlAddForm element={element} onAdd={handleAddUrl} onClose={close} />;
+          }}
+        </Popup>
+      </PopupTrigger>
+    );
+  };
+
   return (
-    <Form ref={ref} values={parameters} onSubmit={handleSubmit}>
+    <Form ref={ref} values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
       <BaseParameters />
       <FormRow label={formatMessage(labels.window)}>
         <FormInput
@@ -56,25 +71,8 @@ export function FunnelParameters() {
           <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>
-                <TooltipPopup
-                  className={styles.icon}
-                  label={formatMessage(labels.remove)}
-                  position="right"
-                >
-                  <Icon onClick={handleRemoveUrl.bind(null, index)}>
-                    <Icons.Close />
-                  </Icon>
-                </TooltipPopup>
-              </div>
-            );
-          })}
-        </div>
+      <FormRow label={formatMessage(labels.urls)} action={<AddUrlButton />}>
+        <ParameterList items={urls} onRemove={handleRemoveUrl} />
       </FormRow>
       <FormButtons>
         <SubmitButton variant="primary" disabled={queryDisabled} loading={isRunning}>
@@ -85,25 +83,4 @@ export function FunnelParameters() {
   );
 }
 
-function AddUrlButton({ onAdd }) {
-  const { formatMessage, labels } = useMessages();
-
-  return (
-    <PopupTrigger>
-      <TooltipPopup label={formatMessage(labels.addUrl)}>
-        <Icon>
-          <Icons.Plus />
-        </Icon>
-      </TooltipPopup>
-      <Popup position="bottom" alignment="start">
-        {(close, element) => {
-          const { right, bottom } = element.getBoundingClientRect();
-
-          return <UrlAddForm onSave={onAdd} onClose={close} style={{ left: right, top: bottom }} />;
-        }}
-      </Popup>
-    </PopupTrigger>
-  );
-}
-
 export default FunnelParameters;

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

@@ -1,20 +0,0 @@
-.urls {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.url {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px;
-  border: 1px solid var(--base400);
-  border-radius: var(--border-radius);
-  box-shadow: 1px 1px 1px var(--base400);
-}
-
-.icon {
-  align-self: center;
-}

components/pages/reports/funnel/UrlAddForm.js

@@ -1,16 +1,15 @@
 import { useState } from 'react';
-import { createPortal } from 'react-dom';
 import { useMessages } from 'hooks';
 import { Button, Form, FormRow, TextField, Flexbox } from 'react-basics';
 import styles from './UrlAddForm.module.css';
+import PopupForm from '../PopupForm';
 
-export function UrlAddForm({ defaultValue = '', style, onSave, onClose }) {
+export function UrlAddForm({ defaultValue = '', element, onAdd, onClose }) {
   const [url, setUrl] = useState(defaultValue);
   const { formatMessage, labels } = useMessages();
 
-  const handleSave = e => {
-    e?.stopPropagation?.();
-    onSave?.(url);
+  const handleSave = () => {
+    onAdd(url);
     setUrl('');
     onClose();
   };
@@ -19,29 +18,33 @@ export function UrlAddForm({ defaultValue = '', style, onSave, onClose }) {
     setUrl(e.target.value);
   };
 
-  const handleClick = e => {
-    e.stopPropagation();
+  const handleKeyDown = e => {
+    if (e.key === 'Enter') {
+      e.stopPropagation();
+      handleSave();
+    }
   };
 
-  return createPortal(
-    <Form className={styles.form} onSubmit={handleSave} style={style} onClick={handleClick}>
-      <FormRow label={formatMessage(labels.url)}>
-        <Flexbox gap={10}>
-          <TextField
-            className={styles.input}
-            name="url"
-            value={url}
-            onChange={handleChange}
-            autoFocus={true}
-            autoComplete="off"
-          />
-          <Button variant="primary" onClick={handleSave}>
-            {formatMessage(labels.add)}
-          </Button>
-        </Flexbox>
-      </FormRow>
-    </Form>,
-    document.body,
+  return (
+    <PopupForm element={element}>
+      <Form>
+        <FormRow label={formatMessage(labels.url)}>
+          <Flexbox gap={10}>
+            <TextField
+              className={styles.input}
+              value={url}
+              onChange={handleChange}
+              autoFocus={true}
+              autoComplete="off"
+              onKeyDown={handleKeyDown}
+            />
+            <Button variant="primary" onClick={handleSave}>
+              {formatMessage(labels.add)}
+            </Button>
+          </Flexbox>
+        </FormRow>
+      </Form>
+    </PopupForm>
   );
 }