Fixed report issues.

components/messages.js

@@ -135,6 +135,8 @@ export const labels = defineMessages({
   fields: { id: 'label.fields', defaultMessage: 'Fields' },
   createReport: { id: 'labels.create-report', defaultMessage: 'Create report' },
   description: { id: 'labels.description', defaultMessage: 'Description' },
+  untitled: { id: 'labels.untitled', defaultMessage: 'Untitled' },
+  type: { id: 'labels.type', defaultMessage: 'Type' },
 });
 
 export const messages = defineMessages({

components/pages/reports/ReportHeader.js

@@ -50,7 +50,13 @@ export function ReportHeader({ icon }) {
     return (
       <>
         <Icon size="lg">{icon}</Icon>
-        <InlineEditField name="name" value={name} onCommit={handleNameChange} />
+        <InlineEditField
+          key={name}
+          name="name"
+          value={name}
+          placeholder={formatMessage(labels.untitled)}
+          onCommit={handleNameChange}
+        />
       </>
     );
   };
@@ -69,6 +75,7 @@ export function ReportHeader({ icon }) {
       </PageHeader>
       <div className={styles.description}>
         <InlineEditField
+          key={description}
           name="description"
           value={description}
           placeholder={`+ ${formatMessage(labels.addDescription)}`}

components/pages/reports/ReportsTable.js

@@ -2,15 +2,14 @@ import Link from 'next/link';
 import { Button, Text, Icon, Icons } from 'react-basics';
 import SettingsTable from 'components/common/SettingsTable';
 import useMessages from 'hooks/useMessages';
-import useConfig from 'hooks/useConfig';
 
 export function ReportsTable({ data = [] }) {
   const { formatMessage, labels } = useMessages();
-  const { openExternal } = useConfig();
 
   const columns = [
     { name: 'name', label: formatMessage(labels.name) },
     { name: 'description', label: formatMessage(labels.description) },
+    { name: 'type', label: formatMessage(labels.type) },
     { name: 'action', label: ' ' },
   ];
 

components/pages/reports/funnel/FunnelParameters.js

@@ -96,8 +96,10 @@ function AddUrlButton({ onAdd }) {
         </Icon>
       </TooltipPopup>
       <Popup position="bottom" alignment="start">
-        {close => {
-          return <UrlAddForm onSave={onAdd} onClose={close} />;
+        {(close, element) => {
+          const { right, bottom } = element.getBoundingClientRect();
+
+          return <UrlAddForm onSave={onAdd} onClose={close} style={{ left: right, top: bottom }} />;
         }}
       </Popup>
     </PopupTrigger>

components/pages/reports/funnel/UrlAddForm.js

@@ -1,13 +1,15 @@
 import { useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useMessages } from 'hooks';
-import { Button, Form, FormButtons, FormRow, TextField } from 'react-basics';
+import { Button, Form, FormRow, TextField, Flexbox } from 'react-basics';
 import styles from './UrlAddForm.module.css';
 
-export function UrlAddForm({ defaultValue = '', onSave, onClose }) {
+export function UrlAddForm({ defaultValue = '', style, onSave, onClose }) {
   const [url, setUrl] = useState(defaultValue);
   const { formatMessage, labels } = useMessages();
 
-  const handleSave = () => {
+  const handleSave = e => {
+    e?.stopPropagation?.();
     onSave?.(url);
     setUrl('');
     onClose();
@@ -17,23 +19,29 @@ export function UrlAddForm({ defaultValue = '', onSave, onClose }) {
     setUrl(e.target.value);
   };
 
-  return (
-    <Form className={styles.form} onSubmit={handleSave}>
+  const handleClick = e => {
+    e.stopPropagation();
+  };
+
+  return createPortal(
+    <Form className={styles.form} onSubmit={handleSave} style={style} onClick={handleClick}>
       <FormRow label={formatMessage(labels.url)}>
-        <TextField
-          name="url"
-          value={url}
-          onChange={handleChange}
-          autoFocus={true}
-          autoComplete="off"
-        />
+        <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>
-      <FormButtons align="center" flex>
-        <Button variant="primary" onClick={handleSave}>
-          {formatMessage(labels.save)}
-        </Button>
-      </FormButtons>
-    </Form>
+    </Form>,
+    document.body,
   );
 }
 

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

@@ -1,8 +1,14 @@
 .form {
+  position: absolute;
   background: var(--base50);
+  width: 300px;
   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);
 }
+
+.input {
+  width: 100%;
+}

package.json

@@ -90,12 +90,12 @@
     "kafkajs": "^2.1.0",
     "maxmind": "^4.3.6",
     "moment-timezone": "^0.5.35",
-    "next": "13.4.6",
-    "next-basics": "^0.30.0",
+    "next": "13.3.1",
+    "next-basics": "^0.31.0",
     "node-fetch": "^3.2.8",
     "npm-run-all": "^4.1.5",
     "react": "^18.2.0",
-    "react-basics": "^0.85.0",
+    "react-basics": "^0.89.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.4",