fix(native-filters): emitted filter label format (#16828)

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) {

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;
-}