feat: Move cross filters to Dashboard (#22785)

superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx

@@ -222,13 +222,13 @@ export default function TableChart<D extends DataRecord = DataRecord>(
     serverPaginationData,
     setDataMask,
     showCellBars = true,
-    emitFilter = false,
     sortDesc = false,
     filters,
     sticky = true, // whether to use sticky header
     columnColorFormatters,
     allowRearrangeColumns = false,
     onContextMenu,
+    emitCrossFilters,
   } = props;
   const timestampFormatter = useCallback(
     value => getTimeFormatterForGranularity(timeGrain)(value),
@@ -243,7 +243,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
 
   const handleChange = useCallback(
     (filters: { [x: string]: DataRecordValue[] }) => {
-      if (!emitFilter) {
+      if (!emitCrossFilters) {
         return;
       }
 
@@ -289,7 +289,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         },
       });
     },
-    [emitFilter, setDataMask],
+    [emitCrossFilters, setDataMask],
   );
 
   // only take relevant page size options
@@ -322,27 +322,21 @@ export default function TableChart<D extends DataRecord = DataRecord>(
     [filters],
   );
 
-  function getEmitTarget(col: string) {
-    const meta = columnsMeta?.find(x => x.key === col);
-    return meta?.config?.emitTarget || col;
-  }
-
   const toggleFilter = useCallback(
     function toggleFilter(key: string, val: DataRecordValue) {
       let updatedFilters = { ...(filters || {}) };
-      const target = getEmitTarget(key);
-      if (filters && isActiveFilterValue(target, val)) {
+      if (filters && isActiveFilterValue(key, val)) {
         updatedFilters = {};
       } else {
         updatedFilters = {
-          [target]: [val],
+          [key]: [val],
         };
       }
       if (
-        Array.isArray(updatedFilters[target]) &&
-        updatedFilters[target].length === 0
+        Array.isArray(updatedFilters[key]) &&
+        updatedFilters[key].length === 0
       ) {
-        delete updatedFilters[target];
+        delete updatedFilters[key];
       }
       handleChange(updatedFilters);
     },
@@ -396,7 +390,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         getValueRange(key, alignPositiveNegative);
 
       let className = '';
-      if (emitFilter) {
+      if (emitCrossFilters) {
         className += ' dt-is-filter';
       }
 
@@ -459,7 +453,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
             // show raw number in title in case of numeric values
             title: typeof value === 'number' ? String(value) : undefined,
             onClick:
-              emitFilter && !valueRange
+              emitCrossFilters && !valueRange
                 ? () => toggleFilter(key, value)
                 : undefined,
             className: [
@@ -567,7 +561,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
     [
       defaultAlignPN,
       defaultColorPN,
-      emitFilter,
+      emitCrossFilters,
       getValueRange,
       isActiveFilterValue,
       isRawRecords,

superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx

@@ -44,7 +44,6 @@ import {
   sharedControls,
   ControlPanelState,
   ControlState,
-  emitFilterControl,
   Dataset,
   ColumnMeta,
   defineSavedMetrics,
@@ -369,7 +368,6 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        emitFilterControl,
       ],
     },
     {
@@ -488,7 +486,6 @@ const config: ControlPanelConfig = {
                   queryResponse: chart?.queriesResponse?.[0] as
                     | ChartDataResponseResult
                     | undefined,
-                  emitFilter: explore?.controls?.table_filter?.value,
                 };
               },
             },

superset-frontend/plugins/plugin-chart-table/src/transformProps.ts

@@ -209,6 +209,7 @@ const transformProps = (
       setDataMask = () => {},
       onContextMenu,
     },
+    emitCrossFilters,
   } = chartProps;
 
   const {
@@ -217,7 +218,6 @@ const transformProps = (
     show_cell_bars: showCellBars = true,
     include_search: includeSearch = false,
     page_length: pageLength,
-    emit_filter: emitFilter,
     server_pagination: serverPagination = false,
     server_page_length: serverPageLength = 10,
     order_desc: sortDesc = false,
@@ -273,7 +273,7 @@ const transformProps = (
       ? serverPageLength
       : getPageSize(pageLength, data.length, columns.length),
     filters: filterState.filters,
-    emitFilter,
+    emitCrossFilters,
     onChangeFilter,
     columnColorFormatters,
     timeGrain,

superset-frontend/plugins/plugin-chart-table/src/types.ts

@@ -69,7 +69,6 @@ export type TableChartFormData = QueryFormData & {
   order_desc?: boolean;
   show_cell_bars?: boolean;
   table_timestamp_format?: string;
-  emit_filter?: boolean;
   time_grain_sqla?: TimeGranularity;
   column_config?: Record<string, ColumnConfig>;
   allow_rearrange_columns?: boolean;
@@ -108,7 +107,7 @@ export interface TableChartTransformedProps<D extends DataRecord = DataRecord> {
   // These are dashboard filters, don't be confused with in-chart search filter
   // enabled by `includeSearch`
   filters?: DataRecordFilters;
-  emitFilter?: boolean;
+  emitCrossFilters?: boolean;
   onChangeFilter?: ChartProps['hooks']['onAddFilter'];
   columnColorFormatters?: ColorFormatters;
   allowRearrangeColumns?: boolean;