Event data report UI.

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>
   );
 }