diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx index 718193706e..6ae7cbeb22 100644 --- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx +++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx @@ -37,11 +37,7 @@ import { useImmerReducer } from 'use-immer'; import { FormItemProps } from 'antd/lib/form'; import { PluginFilterSelectProps, SelectValue } from './types'; import { StyledFormItem, FilterPluginStyle, StatusMessage } from '../common'; -import { - formatFilterValue, - getDataRecordFormatter, - getSelectExtraFormData, -} from '../../utils'; +import { getDataRecordFormatter, getSelectExtraFormData } from '../../utils'; type DataMaskAction = | { type: 'ownState'; ownState: JsonObject } @@ -104,6 +100,15 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) { extraFormData: {}, filterState, }); + const datatype: GenericDataType = coltypeMap[col]; + const labelFormatter = useMemo( + () => + getDataRecordFormatter({ + timeFormatter: smartDateDetailedFormatter, + }), + [], + ); + const updateDataMask = useCallback( (values: SelectValue) => { const emptyFilter = @@ -124,7 +129,9 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) { filterState: { ...filterState, label: values?.length - ? `${(values || []).map(formatFilterValue).join(', ')}${suffix}` + ? `${(values || []) + .map(value => labelFormatter(value, datatype)) + .join(', ')}${suffix}` : undefined, value: appSection === AppSection.FILTER_CONFIG_MODAL && defaultToFirstItem @@ -133,14 +140,17 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) { }, }); }, + // eslint-disable-next-line react-hooks/exhaustive-deps [ appSection, col, + datatype, defaultToFirstItem, dispatchDataMask, enableEmptyFilter, inverseSelection, JSON.stringify(filterState), + labelFormatter, ], ); @@ -187,15 +197,6 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) { unsetFocusedFilter(); }; - const datatype: GenericDataType = coltypeMap[col]; - const labelFormatter = useMemo( - () => - getDataRecordFormatter({ - timeFormatter: smartDateDetailedFormatter, - }), - [], - ); - const handleChange = (value?: SelectValue | number | string) => { const values = ensureIsArray(value); if (values.length === 0) { diff --git a/superset-frontend/src/filters/utils.ts b/superset-frontend/src/filters/utils.ts index 464dc41c35..1ab401b11d 100644 --- a/superset-frontend/src/filters/utils.ts +++ b/superset-frontend/src/filters/utils.ts @@ -117,18 +117,3 @@ export function getDataRecordFormatter({ return String(value); }; } - -export function formatFilterValue( - value: string | number | boolean | null, -): string { - if (value === null) { - return NULL_STRING; - } - if (typeof value === 'string') { - return value; - } - if (typeof value === 'number') { - return String(value); - } - return value ? TRUE_STRING : FALSE_STRING; -}