refactor(self-trigger): Split native filters state (#13137)

* feat: add cross filters

* refactor: fix CR notes

* lint: fix lint

* lint: fix lint

* feat: POC adding filters set feature

* chore: pre-commit

* refactor: under chage

* lint: fix TS

* fix: fix FF name

* refactor: move to behaviors

* lint: fix lint

* refactor: update state of native filters

* refactor: finish refactor nativeFilter state

* feat: split native filters state

* refactor: refactor Time filter to use new API

* refactor: refactor Time filter to use new API

* refactor: fix CR notes

* fix: fix update values in filter bar

* refactor: save filter sets in meta

* feat(filter-sets): save filters sets in metadata

* refactor: partially fix ts

* refactor: merge conflicts

* refactor: add behaviors property

* refactor: add behaviors property

* fix: undo py changes

* fix: under some changes

* refactor: synx with master

* fix: undo FF

* fix: undo FF

* lint: ts-ignore

* chore: update lock file

* refactor: update enum

* refactor: naming of enum

* test: fix test

* test: update mocks

Co-authored-by: amitmiran137 <amit.miran@nielsen.com>

superset-frontend/package.json

@@ -65,34 +65,34 @@
     "@babel/runtime-corejs3": "^7.12.5",
     "@data-ui/sparkline": "^0.0.84",
     "@emotion/core": "^10.0.35",
-    "@superset-ui/chart-controls": "^0.17.12",
-    "@superset-ui/core": "^0.17.11",
-    "@superset-ui/legacy-plugin-chart-calendar": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-chord": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-country-map": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-event-flow": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-force-directed": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-heatmap": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-histogram": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-horizon": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-map-box": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-paired-t-test": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-partition": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-pivot-table": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-rose": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-sankey": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-sankey-loop": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-sunburst": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-treemap": "^0.17.12",
-    "@superset-ui/legacy-plugin-chart-world-map": "^0.17.12",
-    "@superset-ui/legacy-preset-chart-big-number": "^0.17.12",
+    "@superset-ui/chart-controls": "^0.17.13",
+    "@superset-ui/core": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-calendar": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-chord": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-country-map": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-event-flow": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-force-directed": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-heatmap": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-histogram": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-horizon": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-map-box": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-paired-t-test": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-parallel-coordinates": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-partition": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-pivot-table": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-rose": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-sankey": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-sankey-loop": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-sunburst": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-treemap": "^0.17.13",
+    "@superset-ui/legacy-plugin-chart-world-map": "^0.17.13",
+    "@superset-ui/legacy-preset-chart-big-number": "^0.17.13",
     "@superset-ui/legacy-preset-chart-deckgl": "^0.4.6",
-    "@superset-ui/legacy-preset-chart-nvd3": "^0.17.12",
-    "@superset-ui/plugin-chart-echarts": "^0.17.12",
-    "@superset-ui/plugin-chart-table": "^0.17.12",
-    "@superset-ui/plugin-chart-word-cloud": "^0.17.12",
-    "@superset-ui/preset-chart-xy": "^0.17.12",
+    "@superset-ui/legacy-preset-chart-nvd3": "^0.17.13",
+    "@superset-ui/plugin-chart-echarts": "^0.17.13",
+    "@superset-ui/plugin-chart-table": "^0.17.13",
+    "@superset-ui/plugin-chart-word-cloud": "^0.17.13",
+    "@superset-ui/preset-chart-xy": "^0.17.13",
     "@vx/responsive": "^0.0.195",
     "abortcontroller-polyfill": "^1.1.9",
     "antd": "^4.9.4",

superset-frontend/spec/fixtures/mockNativeFilters.ts

@@ -73,27 +73,31 @@ export const nativeFilters: NativeFiltersState = {
     },
   },
   filtersState: {
-    'NATIVE_FILTER-e7Q8zKixx': {
-      id: 'NATIVE_FILTER-e7Q8zKixx',
-      currentState: {
-        value: ['East Asia & Pacific'],
-      },
-      extraFormData: {
-        append_form_data: {
-          filters: [
-            {
-              col: 'region',
-              op: 'IN',
-              val: ['East Asia & Pacific'],
-            },
-          ],
+    crossFilters: {},
+    ownFilters: {},
+    nativeFilters: {
+      'NATIVE_FILTER-e7Q8zKixx': {
+        id: 'NATIVE_FILTER-e7Q8zKixx',
+        extraFormData: {
+          append_form_data: {
+            filters: [
+              {
+                col: 'region',
+                op: 'IN',
+                val: ['East Asia & Pacific'],
+              },
+            ],
+          },
+        },
+        currentState: {
+          value: ['East Asia & Pacific'],
         },
       },
-    },
-    'NATIVE_FILTER-x9QPw0so1': {
-      id: 'NATIVE_FILTER-x9QPw0so1',
-      extraFormData: {},
-      currentState: {},
+      'NATIVE_FILTER-x9QPw0so1': {
+        id: 'NATIVE_FILTER-x9QPw0so1',
+        extraFormData: {},
+        currentState: {},
+      },
     },
   },
 };
@@ -129,11 +133,13 @@ export const singleNativeFiltersState = {
     },
   },
   filtersState: {
-    [NATIVE_FILTER_ID]: {
-      id: NATIVE_FILTER_ID,
-      extraFormData,
-      currentState: {
-        value: ['No, not an ethnic minority'],
+    nativeFilters: {
+      [NATIVE_FILTER_ID]: {
+        id: NATIVE_FILTER_ID,
+        extraFormData,
+        currentState: {
+          value: ['No, not an ethnic minority'],
+        },
       },
     },
   },

superset-frontend/spec/javascripts/dashboard/components/Dashboard_spec.jsx

@@ -53,6 +53,7 @@ describe('Dashboard', () => {
     dashboardInfo,
     charts: chartQueries,
     activeFilters: {},
+    ownDataCharts: {},
     slices: sliceEntities.slices,
     datasources,
     layout: dashboardLayout.present,

superset-frontend/spec/javascripts/dashboard/fixtures/mockNativeFilters.js

@@ -42,9 +42,13 @@ export const nativeFiltersInfo = {
     },
   },
   filtersState: {
-    DefaultsID: {
-      id: 'DefaultId',
-      selectedValues: [],
+    nativeFilters: {
+      DefaultsID: {
+        id: 'DefaultId',
+        currentState: {
+          value: [],
+        },
+      },
     },
   },
 };

superset-frontend/spec/javascripts/dashboard/util/getFormDataWithExtraFilters_spec.ts

@@ -62,10 +62,14 @@ describe('getFormDataWithExtraFilters', () => {
         } as unknown) as Filter,
       },
       filtersState: {
-        [filterId]: {
-          id: filterId,
-          extraFormData: {},
-          currentState: {},
+        crossFilters: {},
+        ownFilters: {},
+        nativeFilters: {
+          [filterId]: {
+            id: filterId,
+            extraFormData: {},
+            currentState: {},
+          },
         },
       },
     },

superset-frontend/src/chart/ChartContainer.jsx

@@ -22,14 +22,14 @@ import { bindActionCreators } from 'redux';
 import * as actions from './chartAction';
 import { logEvent } from '../logger/actions';
 import Chart from './Chart';
-import { setExtraFormData } from '../dashboard/actions/nativeFilters';
+import { updateExtraFormData } from '../dashboard/actions/nativeFilters';
 
 function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(
       {
         ...actions,
-        setExtraFormData,
+        updateExtraFormData,
         logEvent,
       },
       dispatch,

superset-frontend/src/chart/ChartRenderer.jsx

@@ -19,7 +19,7 @@
 import { snakeCase } from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { SuperChart, logging } from '@superset-ui/core';
+import { SuperChart, logging, Behavior } from '@superset-ui/core';
 import { Logger, LOG_ACTIONS_RENDER_CHART } from '../logger/LogUtils';
 
 const propTypes = {
@@ -42,9 +42,10 @@ const propTypes = {
   refreshOverlayVisible: PropTypes.bool,
   // dashboard callbacks
   addFilter: PropTypes.func,
-  setExtraFormData: PropTypes.func,
+  setDataMask: PropTypes.func,
   onFilterMenuOpen: PropTypes.func,
   onFilterMenuClose: PropTypes.func,
+  ownCurrentState: PropTypes.object,
 };
 
 const BLANK = {};
@@ -74,12 +75,12 @@ class ChartRenderer extends React.Component {
       setControlValue: this.handleSetControlValue,
       onFilterMenuOpen: this.props.onFilterMenuOpen,
       onFilterMenuClose: this.props.onFilterMenuClose,
-      setExtraFormData: ({ extraFormData, currentState }) =>
-        this.props.actions?.setExtraFormData(
+      setDataMask: filtersState => {
+        this.props.actions?.updateExtraFormData(
           this.props.chartId,
-          extraFormData,
-          currentState,
-        ),
+          filtersState,
+        );
+      },
     };
   }
 
@@ -185,6 +186,7 @@ class ChartRenderer extends React.Component {
       annotationData,
       datasource,
       initialValues,
+      ownCurrentState,
       formData,
       queriesResponse,
     } = this.props;
@@ -224,7 +226,9 @@ class ChartRenderer extends React.Component {
         datasource={datasource}
         initialValues={initialValues}
         formData={formData}
+        ownCurrentState={ownCurrentState}
         hooks={this.hooks}
+        behaviors={[Behavior.CROSS_FILTER]}
         queriesData={queriesResponse}
         onRenderSuccess={this.handleRenderSuccess}
         onRenderFailure={this.handleRenderFailure}

superset-frontend/src/dashboard/actions/nativeFilters.ts

@@ -17,14 +17,15 @@
  * under the License.
  */
 
-import { ExtraFormData, makeApi } from '@superset-ui/core';
+import { makeApi, DataMask } from '@superset-ui/core';
 import { Dispatch } from 'redux';
 import { FilterConfiguration } from 'src/dashboard/components/nativeFilters/types';
 import { dashboardInfoChanged } from './dashboardInfo';
 import {
-  CurrentFilterState,
+  FiltersState,
+  FilterState,
   FiltersSet,
-  NativeFilterState,
+  FilterStateType,
 } from '../reducers/types';
 
 export const SET_FILTER_CONFIG_BEGIN = 'SET_FILTER_CONFIG_BEGIN';
@@ -142,51 +143,49 @@ export const setFilterSetsConfiguration = (
   }
 };
 
-export const SET_EXTRA_FORM_DATA = 'SET_EXTRA_FORM_DATA';
-export interface SetExtraFormData {
-  type: typeof SET_EXTRA_FORM_DATA;
+export const UPDATE_EXTRA_FORM_DATA = 'UPDATE_EXTRA_FORM_DATA';
+export interface UpdateExtraFormData {
+  type: typeof UPDATE_EXTRA_FORM_DATA;
   filterId: string;
-  extraFormData: ExtraFormData;
-  currentState: CurrentFilterState;
+  nativeFilters?: Omit<FilterState, 'id'>;
+  crossFilters?: Omit<FilterState, 'id'>;
+  ownFilters?: Omit<FilterState, 'id'>;
 }
 
 export const SAVE_FILTER_SETS = 'SAVE_FILTER_SETS';
 export interface SaveFilterSets {
   type: typeof SAVE_FILTER_SETS;
   name: string;
-  filtersState: NativeFilterState;
+  filtersState: Pick<FiltersState, FilterStateType.NativeFilters>;
   filtersSetId: string;
 }
 
 export const SET_FILTERS_STATE = 'SET_FILTERS_STATE';
 export interface SetFiltersState {
   type: typeof SET_FILTERS_STATE;
-  filtersState: NativeFilterState;
+  filtersState: FiltersState;
 }
 
 /**
  * Sets the selected option(s) for a given filter
- * @param filterId the id of the native filter
- * @param extraFormData the selection translated into extra form data
- * @param currentState
+ * @param filterId the id of the nativeFilters filter
+ * @param filterState
  */
-export function setExtraFormData(
+export function updateExtraFormData(
   filterId: string,
-  extraFormData: ExtraFormData,
-  currentState: CurrentFilterState,
-): SetExtraFormData {
+  filterState: DataMask,
+): UpdateExtraFormData {
   return {
-    type: SET_EXTRA_FORM_DATA,
+    type: UPDATE_EXTRA_FORM_DATA,
     filterId,
-    extraFormData,
-    currentState,
+    ...filterState,
   };
 }
 
 export function saveFilterSets(
   name: string,
   filtersSetId: string,
-  filtersState: NativeFilterState,
+  filtersState: Pick<FiltersState, FilterStateType.NativeFilters>,
 ): SaveFilterSets {
   return {
     type: SAVE_FILTER_SETS,
@@ -196,9 +195,7 @@ export function saveFilterSets(
   };
 }
 
-export function setFiltersState(
-  filtersState: NativeFilterState,
-): SetFiltersState {
+export function setFiltersState(filtersState: FiltersState): SetFiltersState {
   return {
     type: SET_FILTERS_STATE,
     filtersState,
@@ -213,5 +210,5 @@ export type AnyFilterAction =
   | SetFilterSetsConfigComplete
   | SetFilterSetsConfigFail
   | SetFiltersState
-  | SetExtraFormData
-  | SaveFilterSets;
+  | SaveFilterSets
+  | UpdateExtraFormData;