Unify FilterPickerForm

frontend/src/metabase/querying/filters/components/FilterPicker/BooleanFilterPicker/BooleanFilterPicker.tsx

@@ -3,12 +3,12 @@ import { useMemo } from "react";
 import { t } from "ttag";
 
 import { useBooleanOptionFilter } from "metabase/querying/filters/hooks/use-boolean-option-filter";
-import { Box, Button, Icon, Radio, Stack } from "metabase/ui";
+import { Button, Icon, Radio, Stack } from "metabase/ui";
 import * as Lib from "metabase-lib";
 
 import { FilterPickerFooter } from "../FilterPickerFooter";
+import { FilterPickerForm } from "../FilterPickerForm";
 import { FilterPickerHeader } from "../FilterPickerHeader";
-import { MIN_WIDTH } from "../constants";
 import type { FilterPickerWidgetProps } from "../types";
 
 export function BooleanFilterPicker({
@@ -52,9 +52,7 @@ export function BooleanFilterPicker({
   };
 
   return (
-    <Box
-      component="form"
-      miw={MIN_WIDTH}
+    <FilterPickerForm
       data-testid="boolean-filter-picker"
       onSubmit={handleSubmit}
     >
@@ -89,6 +87,6 @@ export function BooleanFilterPicker({
         )}
         <FilterPickerFooter isNew={isNew} canSubmit />
       </div>
-    </Box>
+    </FilterPickerForm>
   );
 }

frontend/src/metabase/querying/filters/components/FilterPicker/CoordinateFilterPicker/CoordinateFilterPicker.tsx

@@ -13,8 +13,8 @@ import * as Lib from "metabase-lib";
 import { NumberFilterValuePicker } from "../../FilterValuePicker";
 import { FilterOperatorPicker } from "../FilterOperatorPicker";
 import { FilterPickerFooter } from "../FilterPickerFooter";
+import { FilterPickerForm } from "../FilterPickerForm";
 import { FilterPickerHeader } from "../FilterPickerHeader";
-import { MAX_WIDTH, MIN_WIDTH } from "../constants";
 import type { FilterPickerWidgetProps } from "../types";
 
 import { CoordinateColumnPicker } from "./CoordinateColumnPicker";
@@ -72,10 +72,7 @@ export function CoordinateFilterPicker({
   };
 
   return (
-    <Box
-      component="form"
-      miw={MIN_WIDTH}
-      maw={MAX_WIDTH}
+    <FilterPickerForm
       data-testid="coordinate-filter-picker"
       onSubmit={handleSubmit}
     >
@@ -89,7 +86,7 @@ export function CoordinateFilterPicker({
           onChange={handleOperatorChange}
         />
       </FilterPickerHeader>
-      <Box>
+      <Flex direction="column" mih={0}>
         {canPickColumns && (
           <CoordinateColumnPicker
             query={query}
@@ -110,8 +107,8 @@ export function CoordinateFilterPicker({
           onChange={setValues}
         />
         <FilterPickerFooter isNew={isNew} canSubmit={isValid} />
-      </Box>
-    </Box>
+      </Flex>
+    </FilterPickerForm>
   );
 }
 
@@ -136,7 +133,7 @@ function CoordinateValueInput({
 }: CoordinateValueInputProps) {
   if (hasMultipleValues) {
     return (
-      <Box p="md" mah="25vh" style={{ overflow: "auto" }}>
+      <Box p="md" style={{ overflow: "auto" }}>
         <NumberFilterValuePicker
           query={query}
           stageIndex={stageIndex}
@@ -151,7 +148,7 @@ function CoordinateValueInput({
 
   if (valueCount === 1) {
     return (
-      <Flex p="md">
+      <Box p="md">
         <NumberInput
           value={values[0]}
           placeholder={t`Enter a number`}
@@ -160,7 +157,7 @@ function CoordinateValueInput({
           aria-label={t`Filter value`}
           onChange={(newValue: number) => onChange([newValue])}
         />
-      </Flex>
+      </Box>
     );
   }
 

frontend/src/metabase/querying/filters/components/FilterPicker/DefaultFilterPicker/DefaultFilterPicker.tsx

@@ -2,12 +2,12 @@ import type { FormEvent } from "react";
 import { useMemo } from "react";
 
 import { useDefaultFilter } from "metabase/querying/filters/hooks/use-default-filter";
-import { Box, Radio, Stack } from "metabase/ui";
+import { Radio, Stack } from "metabase/ui";
 import * as Lib from "metabase-lib";
 
 import { FilterPickerFooter } from "../FilterPickerFooter";
+import { FilterPickerForm } from "../FilterPickerForm";
 import { FilterPickerHeader } from "../FilterPickerHeader";
-import { MIN_WIDTH } from "../constants";
 import type { FilterPickerWidgetProps } from "../types";
 
 export function DefaultFilterPicker({
@@ -52,9 +52,7 @@ export function DefaultFilterPicker({
   };
 
   return (
-    <Box
-      component="form"
-      miw={MIN_WIDTH}
+    <FilterPickerForm
       data-testid="default-filter-picker"
       onSubmit={handleSubmit}
     >
@@ -78,6 +76,6 @@ export function DefaultFilterPicker({
         </Radio.Group>
         <FilterPickerFooter isNew={isNew} canSubmit />
       </div>
-    </Box>
+    </FilterPickerForm>
   );
 }

frontend/src/metabase/querying/filters/components/FilterPicker/FilterPickerForm/FilterPickerForm.tsx

+import { type HTMLAttributes, type Ref, forwardRef } from "react";
+
+import { Box } from "metabase/ui";
+
+import { MAX_WIDTH, MIN_WIDTH } from "../constants";
+
+export const FilterPickerForm = forwardRef(function FilterPickerForm(
+  props: HTMLAttributes<HTMLFormElement>,
+  ref: Ref<HTMLFormElement>,
+) {
+  return (
+    <Box
+      ref={ref}
+      {...props}
+      component="form"
+      display="flex"
+      miw={MIN_WIDTH}
+      maw={MAX_WIDTH}
+      mih={0}
+      mah="inherit"
+      style={{ flexDirection: "column" }}
+    />
+  );
+});

frontend/src/metabase/querying/filters/components/FilterPicker/FilterPickerForm/index.ts

+export * from "./FilterPickerForm";

frontend/src/metabase/querying/filters/components/FilterPicker/NumberFilterPicker/NumberFilterPicker.tsx

@@ -13,8 +13,8 @@ import * as Lib from "metabase-lib";
 import { NumberFilterValuePicker } from "../../FilterValuePicker";
 import { FilterOperatorPicker } from "../FilterOperatorPicker";
 import { FilterPickerFooter } from "../FilterPickerFooter";
+import { FilterPickerForm } from "../FilterPickerForm";
 import { FilterPickerHeader } from "../FilterPickerHeader";
-import { MAX_WIDTH, MIN_WIDTH } from "../constants";
 import type { FilterPickerWidgetProps } from "../types";
 
 export function NumberFilterPicker({
@@ -64,10 +64,7 @@ export function NumberFilterPicker({
   };
 
   return (
-    <Box
-      component="form"
-      miw={MIN_WIDTH}
-      maw={MAX_WIDTH}
+    <FilterPickerForm
       data-testid="number-filter-picker"
       onSubmit={handleSubmit}
     >
@@ -81,7 +78,7 @@ export function NumberFilterPicker({
           onChange={handleOperatorChange}
         />
       </FilterPickerHeader>
-      <div>
+      <Flex direction="column" mih={0}>
         <NumberValueInput
           query={query}
           stageIndex={stageIndex}
@@ -92,8 +89,8 @@ export function NumberFilterPicker({
           onChange={setValues}
         />
         <FilterPickerFooter isNew={isNew} canSubmit={isValid} />
-      </div>
-    </Box>
+      </Flex>
+    </FilterPickerForm>
   );
 }
 
@@ -118,7 +115,7 @@ function NumberValueInput({
 }: NumberValueInputProps) {
   if (hasMultipleValues) {
     return (
-      <Box p="md" mah="25vh" style={{ overflow: "auto" }}>
+      <Box p="md" style={{ overflow: "auto" }}>
         <NumberFilterValuePicker
           query={query}
           stageIndex={stageIndex}
@@ -133,7 +130,7 @@ function NumberValueInput({
 
   if (valueCount === 1) {
     return (
-      <Flex p="md">
+      <Box p="md">
         <NumberInput
           value={values[0]}
           placeholder={t`Enter a number`}
@@ -142,7 +139,7 @@ function NumberValueInput({
           aria-label={t`Filter value`}
           onChange={newValue => onChange([newValue])}
         />
-      </Flex>
+      </Box>
     );
   }
 

frontend/src/metabase/querying/filters/components/FilterPicker/StringFilterPicker/StringFilterPicker.tsx

@@ -12,8 +12,8 @@ import * as Lib from "metabase-lib";
 import { StringFilterValuePicker } from "../../FilterValuePicker";
 import { FilterOperatorPicker } from "../FilterOperatorPicker";
 import { FilterPickerFooter } from "../FilterPickerFooter";
+import { FilterPickerForm } from "../FilterPickerForm";
 import { FilterPickerHeader } from "../FilterPickerHeader";
-import { MAX_WIDTH, MIN_WIDTH } from "../constants";
 import type { FilterPickerWidgetProps } from "../types";
 
 export function StringFilterPicker({
@@ -64,10 +64,7 @@ export function StringFilterPicker({
   };
 
   return (
-    <Box
-      component="form"
-      miw={MIN_WIDTH}
-      maw={MAX_WIDTH}
+    <FilterPickerForm
       data-testid="string-filter-picker"
       onSubmit={handleSubmit}
     >
@@ -81,7 +78,7 @@ export function StringFilterPicker({
           onChange={handleOperatorChange}
         />
       </FilterPickerHeader>
-      <div>
+      <Flex direction="column" mih={0}>
         <StringValueInput
           query={query}
           stageIndex={stageIndex}
@@ -98,8 +95,8 @@ export function StringFilterPicker({
             />
           )}
         </FilterPickerFooter>
-      </div>
-    </Box>
+      </Flex>
+    </FilterPickerForm>
   );
 }
 
@@ -122,7 +119,7 @@ function StringValueInput({
 }: StringValueInputProps) {
   if (type === "exact") {
     return (
-      <Box p="md" mah="25vh" style={{ overflow: "auto" }}>
+      <Box p="md" style={{ overflow: "auto" }}>
         <StringFilterValuePicker
           query={query}
           stageIndex={stageIndex}
@@ -137,7 +134,7 @@ function StringValueInput({
 
   if (type === "partial") {
     return (
-      <Flex p="md">
+      <Box p="md">
         <MultiAutocomplete
           value={values}
           data={[]}
@@ -147,7 +144,7 @@ function StringValueInput({
           aria-label={t`Filter value`}
           onChange={onChange}
         />
-      </Flex>
+      </Box>
     );
   }
 

frontend/src/metabase/querying/filters/components/FilterPicker/TimeFilterPicker/TimeFilterPicker.tsx

@@ -11,8 +11,8 @@ import * as Lib from "metabase-lib";
 
 import { FilterOperatorPicker } from "../FilterOperatorPicker";
 import { FilterPickerFooter } from "../FilterPickerFooter";
+import { FilterPickerForm } from "../FilterPickerForm";
 import { FilterPickerHeader } from "../FilterPickerHeader";
-import { MAX_WIDTH, MIN_WIDTH } from "../constants";
 import type { FilterPickerWidgetProps } from "../types";
 
 export function TimeFilterPicker({
@@ -60,13 +60,7 @@ export function TimeFilterPicker({
   };
 
   return (
-    <Box
-      component="form"
-      miw={MIN_WIDTH}
-      maw={MAX_WIDTH}
-      data-testid="time-filter-picker"
-      onSubmit={handleSubmit}
-    >
+    <FilterPickerForm data-testid="time-filter-picker" onSubmit={handleSubmit}>
       <FilterPickerHeader
         columnName={columnInfo.longDisplayName}
         onBack={onBack}
@@ -89,7 +83,7 @@ export function TimeFilterPicker({
         )}
         <FilterPickerFooter isNew={isNew} canSubmit />
       </Box>
-    </Box>
+    </FilterPickerForm>
   );
 }