fix(dashboard): Cross filters badge for cols with verbose names (#23576)

superset-frontend/src/dashboard/components/FiltersBadge/index.tsx

@@ -23,6 +23,7 @@ import cx from 'classnames';
 import {
   DataMaskStateWithId,
   Filters,
+  JsonObject,
   styled,
   usePrevious,
 } from '@superset-ui/core';
@@ -36,12 +37,7 @@ import {
   selectIndicatorsForChart,
   selectNativeIndicatorsForChart,
 } from '../nativeFilters/selectors';
-import {
-  ChartsState,
-  DashboardInfo,
-  DashboardLayout,
-  RootState,
-} from '../../types';
+import { Chart, DashboardLayout, RootState } from '../../types';
 
 export interface FiltersBadgeProps {
   chartId: number;
@@ -113,10 +109,10 @@ export const FiltersBadge = ({ chartId }: FiltersBadgeProps) => {
   const nativeFilters = useSelector<RootState, Filters>(
     state => state.nativeFilters?.filters,
   );
-  const dashboardInfo = useSelector<RootState, DashboardInfo>(
-    state => state.dashboardInfo,
+  const chartConfiguration = useSelector<RootState, JsonObject>(
+    state => state.dashboardInfo.metadata?.chart_configuration,
   );
-  const charts = useSelector<RootState, ChartsState>(state => state.charts);
+  const chart = useSelector<RootState, Chart>(state => state.charts[chartId]);
   const present = useSelector<RootState, DashboardLayout>(
     state => state.dashboardLayout.present,
   );
@@ -138,7 +134,6 @@ export const FiltersBadge = ({ chartId }: FiltersBadgeProps) => {
     [dispatch],
   );
 
-  const chart = charts[chartId];
   const prevChart = usePrevious(chart);
   const prevChartStatus = prevChart?.chartStatus;
   const prevDashboardFilters = usePrevious(dashboardFilters);
@@ -184,9 +179,7 @@ export const FiltersBadge = ({ chartId }: FiltersBadgeProps) => {
   const prevNativeFilters = usePrevious(nativeFilters);
   const prevDashboardLayout = usePrevious(present);
   const prevDataMask = usePrevious(dataMask);
-  const prevChartConfig = usePrevious(
-    dashboardInfo.metadata?.chart_configuration,
-  );
+  const prevChartConfig = usePrevious(chartConfiguration);
   useEffect(() => {
     if (!showIndicators && nativeIndicators.length > 0) {
       setNativeIndicators(indicatorsInitialState);
@@ -199,7 +192,7 @@ export const FiltersBadge = ({ chartId }: FiltersBadgeProps) => {
         nativeFilters !== prevNativeFilters ||
         present !== prevDashboardLayout ||
         dataMask !== prevDataMask ||
-        prevChartConfig !== dashboardInfo.metadata?.chart_configuration
+        prevChartConfig !== chartConfiguration
       ) {
         setNativeIndicators(
           selectNativeIndicatorsForChart(
@@ -208,8 +201,7 @@ export const FiltersBadge = ({ chartId }: FiltersBadgeProps) => {
             chartId,
             chart,
             present,
-            dashboardInfo.metadata?.chart_configuration,
-            datasources[chart.form_data.datasource] ?? {},
+            chartConfiguration,
           ),
         );
       }
@@ -217,10 +209,9 @@ export const FiltersBadge = ({ chartId }: FiltersBadgeProps) => {
   }, [
     chart,
     chartId,
-    dashboardInfo.metadata?.chart_configuration,
+    chartConfiguration,
     dataMask,
     nativeFilters,
-    datasources,
     nativeIndicators.length,
     present,
     prevChart?.queriesResponse,

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/selectors.ts

@@ -17,7 +17,12 @@
  * under the License.
  */
 
-import { DataMaskStateWithId, isDefined, JsonObject } from '@superset-ui/core';
+import {
+  DataMaskStateWithId,
+  getColumnLabel,
+  isDefined,
+  JsonObject,
+} from '@superset-ui/core';
 import { DashboardLayout } from 'src/dashboard/types';
 import { CrossFilterIndicator, getCrossFilterIndicator } from '../../selectors';
 
@@ -37,13 +42,15 @@ export const crossFiltersSelector = (props: {
         id,
         dataMask[id],
         dashboardLayout,
-        verboseMaps[id],
       );
       if (
         isDefined(filterIndicator.column) &&
         isDefined(filterIndicator.value)
       ) {
-        return { ...filterIndicator, emitterId: id };
+        const verboseColName =
+          verboseMaps[id]?.[getColumnLabel(filterIndicator.column)] ||
+          filterIndicator.column;
+        return { ...filterIndicator, column: verboseColName, emitterId: id };
       }
       return null;
     })

superset-frontend/src/dashboard/components/nativeFilters/selectors.ts

@@ -168,7 +168,6 @@ export const getCrossFilterIndicator = (
   chartId: number,
   dataMask: DataMask,
   dashboardLayout: DashboardLayout,
-  verboseMap: Record<string, string> = {},
 ) => {
   const filterState = dataMask?.filterState;
   const filters = dataMask?.extraFormData?.filters;
@@ -181,7 +180,7 @@ export const getCrossFilterIndicator = (
     layoutItem => layoutItem?.meta?.chartId === chartId,
   );
   const filterObject: Indicator = {
-    column: verboseMap[column] || column,
+    column,
     name:
       dashboardLayoutItem?.meta?.sliceNameOverride ||
       dashboardLayoutItem?.meta?.sliceName ||
@@ -290,7 +289,6 @@ export const selectChartCrossFilters = (
   chartConfiguration: ChartConfiguration = defaultChartConfig,
   appliedColumns: Set<string>,
   rejectedColumns: Set<string>,
-  verboseMap?: Record<string, string>,
   filterEmitter = false,
 ): Indicator[] | CrossFilterIndicator[] => {
   let crossFilterIndicators: any = [];
@@ -312,7 +310,6 @@ export const selectChartCrossFilters = (
           chartConfig.id,
           dataMask[chartConfig.id],
           dashboardLayout,
-          verboseMap,
         );
         const filterStatus = getStatus({
           label: filterIndicator.value,
@@ -341,7 +338,6 @@ export const selectNativeIndicatorsForChart = (
   chart: any,
   dashboardLayout: Layout,
   chartConfiguration: ChartConfiguration = defaultChartConfig,
-  datasource: Datasource,
 ): Indicator[] => {
   const appliedColumns = getAppliedColumns(chart);
   const rejectedColumns = getRejectedColumns(chart);
@@ -397,7 +393,6 @@ export const selectNativeIndicatorsForChart = (
       chartConfiguration,
       appliedColumns,
       rejectedColumns,
-      datasource.verbose_map,
     );
   }
   const indicators = crossFilterIndicators.concat(nativeFilterIndicators);