From 8f002b87212936996b7dc1cd04f16e06a7b0c967 Mon Sep 17 00:00:00 2001
From: Alexander Polyankin <alexander.polyankin@metabase.com>
Date: Wed, 11 Sep 2024 13:59:52 -0400
Subject: [PATCH] Unify FilterPickerForm
---
.../BooleanFilterPicker.tsx | 10 ++++----
.../CoordinateFilterPicker.tsx | 19 +++++++--------
.../DefaultFilterPicker.tsx | 10 ++++----
.../FilterPickerForm/FilterPickerForm.tsx | 24 +++++++++++++++++++
.../FilterPicker/FilterPickerForm/index.ts | 1 +
.../NumberFilterPicker/NumberFilterPicker.tsx | 19 +++++++--------
.../StringFilterPicker/StringFilterPicker.tsx | 19 +++++++--------
.../TimeFilterPicker/TimeFilterPicker.tsx | 12 +++-------
8 files changed, 60 insertions(+), 54 deletions(-)
create mode 100644 frontend/src/metabase/querying/filters/components/FilterPicker/FilterPickerForm/FilterPickerForm.tsx
create mode 100644 frontend/src/metabase/querying/filters/components/FilterPicker/FilterPickerForm/index.ts
diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/BooleanFilterPicker/BooleanFilterPicker.tsx b/frontend/src/metabase/querying/filters/components/FilterPicker/BooleanFilterPicker/BooleanFilterPicker.tsx
index 8cd44f8e9c9..366d6e314fb 100644
--- a/frontend/src/metabase/querying/filters/components/FilterPicker/BooleanFilterPicker/BooleanFilterPicker.tsx
+++ b/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>
);
}
diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/CoordinateFilterPicker/CoordinateFilterPicker.tsx b/frontend/src/metabase/querying/filters/components/FilterPicker/CoordinateFilterPicker/CoordinateFilterPicker.tsx
index ce44f49fcc1..fd0d7b1a300 100644
--- a/frontend/src/metabase/querying/filters/components/FilterPicker/CoordinateFilterPicker/CoordinateFilterPicker.tsx
+++ b/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>
);
}
diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/DefaultFilterPicker/DefaultFilterPicker.tsx b/frontend/src/metabase/querying/filters/components/FilterPicker/DefaultFilterPicker/DefaultFilterPicker.tsx
index cf156ef668f..a256e16c318 100644
--- a/frontend/src/metabase/querying/filters/components/FilterPicker/DefaultFilterPicker/DefaultFilterPicker.tsx
+++ b/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>
);
}
diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/FilterPickerForm/FilterPickerForm.tsx b/frontend/src/metabase/querying/filters/components/FilterPicker/FilterPickerForm/FilterPickerForm.tsx
new file mode 100644
index 00000000000..3df2064ba99
--- /dev/null
+++ b/frontend/src/metabase/querying/filters/components/FilterPicker/FilterPickerForm/FilterPickerForm.tsx
@@ -0,0 +1,24 @@
+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" }}
+ />
+ );
+});
diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/FilterPickerForm/index.ts b/frontend/src/metabase/querying/filters/components/FilterPicker/FilterPickerForm/index.ts
new file mode 100644
index 00000000000..f564b2f7b4c
--- /dev/null
+++ b/frontend/src/metabase/querying/filters/components/FilterPicker/FilterPickerForm/index.ts
@@ -0,0 +1 @@
+export * from "./FilterPickerForm";
diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/NumberFilterPicker/NumberFilterPicker.tsx b/frontend/src/metabase/querying/filters/components/FilterPicker/NumberFilterPicker/NumberFilterPicker.tsx
index 56d0b2ba3a6..5363dfacd8f 100644
--- a/frontend/src/metabase/querying/filters/components/FilterPicker/NumberFilterPicker/NumberFilterPicker.tsx
+++ b/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>
);
}
diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/StringFilterPicker/StringFilterPicker.tsx b/frontend/src/metabase/querying/filters/components/FilterPicker/StringFilterPicker/StringFilterPicker.tsx
index 72f1278df52..1ce42fd6924 100644
--- a/frontend/src/metabase/querying/filters/components/FilterPicker/StringFilterPicker/StringFilterPicker.tsx
+++ b/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>
);
}
diff --git a/frontend/src/metabase/querying/filters/components/FilterPicker/TimeFilterPicker/TimeFilterPicker.tsx b/frontend/src/metabase/querying/filters/components/FilterPicker/TimeFilterPicker/TimeFilterPicker.tsx
index 4aabd3e30a2..2a4450a978c 100644
--- a/frontend/src/metabase/querying/filters/components/FilterPicker/TimeFilterPicker/TimeFilterPicker.tsx
+++ b/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>
);
}
--
GitLab