New filter bar and filter edit form.

src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx

@@ -7,7 +7,6 @@ import {
   Column,
   Row,
   Select,
-  Flexbox,
   Icon,
   Icons,
   Loading,
@@ -130,15 +129,17 @@ export function FieldFilterEditForm({
     window.setTimeout(() => setShowMenu(false), 500);
   };
 
+  const items = filterDropdownItems(name);
+
   return (
     <Column>
       <Row className={styles.filter}>
         <Label>{label}</Label>
-        <Flexbox gap="3">
+        <Row gap="3">
           {allowFilterSelect && (
             <Select
               className={styles.dropdown}
-              items={filterDropdownItems(name)}
+              items={items}
               value={operator}
               onChange={handleOperatorChange}
             >
@@ -183,7 +184,7 @@ export function FieldFilterEditForm({
               onChange={e => setValue(e.target.value)}
             />
           )}
-        </Flexbox>
+        </Row>
         <Button variant="primary" onPress={handleAdd} isDisabled={isDisabled}>
           {formatMessage(isNew ? labels.add : labels.update)}
         </Button>

src/app/(main)/reports/[reportId]/FieldSelectForm.tsx

@@ -11,11 +11,11 @@ export function FieldSelectForm({ fields = [], onSelect, showType = true }: Fiel
   const { formatMessage, labels } = useMessages();
 
   return (
-    <Menu>
-      <MenuSection title={formatMessage(labels.fields)}>
+    <Menu onAction={value => onSelect?.(value)}>
+      <MenuSection title={formatMessage(labels.fields)} selectionMode="multiple">
         {fields.map(({ name, label, type }) => {
           return (
-            <MenuItem key={name} id={name} onAction={() => onSelect(name)}>
+            <MenuItem key={name} id={name}>
               <Row alignItems="center" justifyContent="space-between">
                 <Text>{label || name}</Text>
                 {showType && type && <Text color="muted">{type}</Text>}

src/app/(main)/reports/[reportId]/FilterSelectForm.tsx

@@ -30,7 +30,7 @@ export function FilterSelectForm({
   return (
     <FieldFilterEditForm
       websiteId={websiteId}
-      name={name}
+      name={name || 'url'}
       label={label}
       type={type}
       startDate={startDate}