refactor(native-filters): update dataMask and ExtraFormData schema (#13983)

* refactor: updates usage of `ownFilters` to `ownState`

* refactor: update dataMask (final)

* lint: fix lint

* refactor: revert feat

* fix: fix missed chart configuration

* add filter set migration

* apply new changes

* fix migration revision

* update migration

* fix jest mock

* js lint

* fix test types

* update tests and types

* remove append_form_data from tests

* fix findExistingFilterSet tests

* add migration test

Co-authored-by: Ville Brofeldt <ville.v.brofeldt@gmail.com>

superset-frontend/src/chart/Chart.jsx

@@ -62,6 +62,7 @@ const propTypes = {
   onQuery: PropTypes.func,
   onFilterMenuOpen: PropTypes.func,
   onFilterMenuClose: PropTypes.func,
+  ownState: PropTypes.object,
 };
 
 const BLANK = {};
@@ -127,6 +128,7 @@ class Chart extends React.PureComponent {
         this.props.timeout,
         this.props.chartId,
         this.props.dashboardId,
+        this.props.ownState,
       );
     } else {
       // Create chart with POST request
@@ -136,6 +138,7 @@ class Chart extends React.PureComponent {
         this.props.timeout,
         this.props.chartId,
         this.props.dashboardId,
+        this.props.ownState,
       );
     }
   }

superset-frontend/src/chart/ChartRenderer.jsx

@@ -45,7 +45,7 @@ const propTypes = {
   setDataMask: PropTypes.func,
   onFilterMenuOpen: PropTypes.func,
   onFilterMenuClose: PropTypes.func,
-  ownCurrentState: PropTypes.object,
+  ownState: PropTypes.object,
 };
 
 const BLANK = {};
@@ -94,7 +94,8 @@ class ChartRenderer extends React.Component {
       return (
         this.hasQueryResponseChange ||
         nextProps.annotationData !== this.props.annotationData ||
-        nextProps.ownCurrentState !== this.props.ownCurrentState ||
+        nextProps.ownState !== this.props.ownState ||
+        nextProps.filterState !== this.props.filterState ||
         nextProps.height !== this.props.height ||
         nextProps.width !== this.props.width ||
         nextProps.triggerRender ||
@@ -184,7 +185,8 @@ class ChartRenderer extends React.Component {
       annotationData,
       datasource,
       initialValues,
-      ownCurrentState,
+      ownState,
+      filterState,
       formData,
       queriesResponse,
     } = this.props;
@@ -224,9 +226,10 @@ class ChartRenderer extends React.Component {
         datasource={datasource}
         initialValues={initialValues}
         formData={formData}
-        ownCurrentState={ownCurrentState}
+        ownState={ownState}
+        filterState={filterState}
         hooks={this.hooks}
-        behaviors={[Behavior.CROSS_FILTER]}
+        behaviors={[Behavior.INTERACTIVE_CHART]}
         queriesData={queriesResponse}
         onRenderSuccess={this.handleRenderSuccess}
         onRenderFailure={this.handleRenderFailure}

superset-frontend/src/chart/chartAction.js

@@ -161,6 +161,7 @@ const v1ChartDataRequest = async (
   force,
   requestParams,
   setDataMask,
+  ownState,
 ) => {
   const payload = buildV1ChartDataPayload({
     formData,
@@ -168,6 +169,7 @@ const v1ChartDataRequest = async (
     resultFormat,
     force,
     setDataMask,
+    ownState,
   });
 
   // The dashboard id is added to query params for tracking purposes
@@ -205,6 +207,7 @@ export async function getChartDataRequest({
   force = false,
   method = 'POST',
   requestParams = {},
+  ownState = {},
 }) {
   let querySettings = {
     ...requestParams,
@@ -235,6 +238,7 @@ export async function getChartDataRequest({
     force,
     querySettings,
     setDataMask,
+    ownState,
   );
 }
 
@@ -351,6 +355,7 @@ export function exploreJSON(
   key,
   method,
   dashboardId,
+  ownState,
 ) {
   return async dispatch => {
     const logStart = Logger.getTimestamp();
@@ -373,6 +378,7 @@ export function exploreJSON(
       force,
       method,
       requestParams,
+      ownState,
     });
 
     dispatch(chartUpdateStarted(controller, formData, key));
@@ -470,6 +476,7 @@ export function getSavedChart(
   timeout = 60,
   key,
   dashboardId,
+  ownState,
 ) {
   /*
    * Perform a GET request to `/explore_json`.
@@ -481,7 +488,15 @@ export function getSavedChart(
    *  GET  /explore_json?{"chart_id":1,"extra_filters":"..."}
    *
    */
-  return exploreJSON(formData, force, timeout, key, 'GET', dashboardId);
+  return exploreJSON(
+    formData,
+    force,
+    timeout,
+    key,
+    'GET',
+    dashboardId,
+    ownState,
+  );
 }
 
 export const POST_CHART_FORM_DATA = 'POST_CHART_FORM_DATA';
@@ -491,6 +506,7 @@ export function postChartFormData(
   timeout = 60,
   key,
   dashboardId,
+  ownState,
 ) {
   /*
    * Perform a POST request to `/explore_json`.
@@ -498,7 +514,15 @@ export function postChartFormData(
    * This will post the form data to the endpoint, returning a new chart.
    *
    */
-  return exploreJSON(formData, force, timeout, key, 'POST', dashboardId);
+  return exploreJSON(
+    formData,
+    force,
+    timeout,
+    key,
+    'POST',
+    dashboardId,
+    ownState,
+  );
 }
 
 export function redirectSQLLab(formData) {
@@ -537,6 +561,7 @@ export function refreshChart(chartKey, force, dashboardId) {
         timeout,
         chart.id,
         dashboardId,
+        getState().dataMask[chart.id]?.ownState,
       ),
     );
   };