diff --git a/frontend/src/metabase/query_builder/components/filters/modals/InlineCategoryPicker/InlineCategoryPicker.styled.tsx b/frontend/src/metabase/query_builder/components/filters/modals/InlineCategoryPicker/InlineCategoryPicker.styled.tsx index ed4242330182ebb35b4f0e9459a89f5516caa347..7392122702703794b421ce08214c0df8aeb642f7 100644 --- a/frontend/src/metabase/query_builder/components/filters/modals/InlineCategoryPicker/InlineCategoryPicker.styled.tsx +++ b/frontend/src/metabase/query_builder/components/filters/modals/InlineCategoryPicker/InlineCategoryPicker.styled.tsx @@ -10,18 +10,11 @@ export const Loading = styled(LoadingSpinner)` `; export const PickerContainer = styled.div` - grid-column: span 2; - margin: ${space(2)} 0; - padding-bottom: ${space(2)}; font-weight: bold; - border-bottom: 1px solid ${color("border")}; `; export const PickerGrid = styled.div` - width: 100%; display: grid; - columns: 2; align-items: center; - grid-template-columns: repeat(3, 1fr); gap: ${space(2)}; `; diff --git a/frontend/src/metabase/query_builder/components/filters/modals/InlineCategoryPicker/InlineCategoryPicker.tsx b/frontend/src/metabase/query_builder/components/filters/modals/InlineCategoryPicker/InlineCategoryPicker.tsx index 93abf2b38516a870dcaf270e870515f8041a040a..66aceadc6b653d1da678298ad526dce0bdbbae1e 100644 --- a/frontend/src/metabase/query_builder/components/filters/modals/InlineCategoryPicker/InlineCategoryPicker.tsx +++ b/frontend/src/metabase/query_builder/components/filters/modals/InlineCategoryPicker/InlineCategoryPicker.tsx @@ -17,6 +17,7 @@ import { PickerGrid, Loading, } from "./InlineCategoryPicker.styled"; + import { BulkFilterSelect } from "../BulkFilterSelect"; const mapStateToProps = (state: any, props: any) => { @@ -104,7 +105,7 @@ export function InlineCategoryPickerComponent({ <SimpleCategoryFilterPicker filter={filter ?? newFilter} onChange={onChange} - options={fieldValues.flat()} + options={fieldValues.flat().filter(isValidOption)} /> ); } @@ -131,7 +132,7 @@ export function SimpleCategoryFilterPicker({ options, onChange, }: SimpleCategoryFilterPickerProps) { - const filterValues = filter.arguments().filter(Boolean); + const filterValues = filter.arguments().filter(isValidOption); const handleChange = (option: string | number, checked: boolean) => { const newArgs = checked @@ -157,6 +158,8 @@ export function SimpleCategoryFilterPicker({ ); } +const isValidOption = (option: any) => option !== undefined && option !== null; + export const InlineCategoryPicker = connect( mapStateToProps, mapDispatchToProps,