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/explore/components/DataTablesPane/DataTablesPane.test.tsx

@@ -53,11 +53,7 @@ const createProps = () => ({
     show_perc: true,
     sort_x_axis: 'alpha_asc',
     sort_y_axis: 'alpha_asc',
-    extra_form_data: {
-      custom_form_data: {},
-      override_form_data: {},
-      append_form_data: {},
-    },
+    extra_form_data: {},
   },
   tableSectionHeight: 156.9,
   chartStatus: 'rendered',

superset-frontend/src/explore/components/DataTablesPane/index.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React, { useCallback, useEffect, useState } from 'react';
-import { styled, t } from '@superset-ui/core';
+import { JsonObject, styled, t } from '@superset-ui/core';
 import Collapse from 'src/common/components/Collapse';
 import Tabs from 'src/common/components/Tabs';
 import Loading from 'src/components/Loading';
@@ -105,10 +105,12 @@ export const DataTablesPane = ({
   tableSectionHeight,
   onCollapseChange,
   chartStatus,
+  ownState,
 }: {
   queryFormData: Record<string, any>;
   tableSectionHeight: number;
   chartStatus: string;
+  ownState?: JsonObject;
   onCollapseChange: (openPanelName: string) => void;
 }) => {
   const [data, setData] = useState<{
@@ -142,6 +144,7 @@ export const DataTablesPane = ({
         formData: queryFormData,
         resultFormat: 'json',
         resultType,
+        ownState,
       })
         .then(response => {
           // Only displaying the first query is currently supported

superset-frontend/src/explore/components/ExploreChartHeader.jsx

@@ -49,6 +49,7 @@ const propTypes = {
   sliceName: PropTypes.string,
   table_name: PropTypes.string,
   form_data: PropTypes.object,
+  ownState: PropTypes.object,
   timeout: PropTypes.number,
   chart: chartPropShape,
 };
@@ -106,6 +107,7 @@ export class ExploreChartHeader extends React.PureComponent {
       true,
       this.props.timeout,
       this.props.chart.id,
+      this.props.ownState,
     );
   }
 

superset-frontend/src/explore/components/ExploreChartPanel.jsx

@@ -47,7 +47,7 @@ const propTypes = {
   table_name: PropTypes.string,
   vizType: PropTypes.string.isRequired,
   form_data: PropTypes.object,
-  ownCurrentState: PropTypes.object,
+  ownState: PropTypes.object,
   standalone: PropTypes.number,
   timeout: PropTypes.number,
   refreshOverlayVisible: PropTypes.bool,
@@ -190,7 +190,7 @@ const ExploreChartPanel = props => {
         <ChartContainer
           width={Math.floor(chartWidth)}
           height={newHeight}
-          ownCurrentState={props.ownCurrentState}
+          ownState={props.ownState}
           annotationData={chart.annotationData}
           chartAlert={chart.chartAlert}
           chartStackTrace={chart.chartStackTrace}
@@ -238,6 +238,7 @@ const ExploreChartPanel = props => {
 
   const header = (
     <ConnectedExploreChartHeader
+      ownState={props.ownState}
       actions={props.actions}
       addHistory={props.addHistory}
       can_overwrite={props.can_overwrite}
@@ -274,6 +275,7 @@ const ExploreChartPanel = props => {
         >
           {panelBody}
           <DataTablesPane
+            ownState={props.ownState}
             queryFormData={props.chart.latestQueryFormData}
             tableSectionHeight={tableSectionHeight}
             onCollapseChange={onCollapseChange}

superset-frontend/src/explore/components/ExploreViewContainer.jsx

@@ -333,7 +333,7 @@ function ExploreViewContainer(props) {
         reRenderChart();
       }
     }
-  }, [props.controls, props.ownCurrentState]);
+  }, [props.controls, props.ownState]);
 
   const chartIsStale = useMemo(() => {
     if (previousControls) {
@@ -356,11 +356,11 @@ function ExploreViewContainer(props) {
   }, [previousControls, props.controls]);
 
   useEffect(() => {
-    if (props.ownCurrentState !== undefined) {
+    if (props.ownState !== undefined) {
       onQuery();
       reRenderChart();
     }
-  }, [props.ownCurrentState]);
+  }, [props.ownState]);
 
   if (chartIsStale) {
     props.actions.logEvent(LOG_ACTIONS_CHANGE_EXPLORE_CONTROLS);
@@ -557,7 +557,7 @@ function mapStateToProps(state) {
   form_data.extra_form_data = mergeExtraFormData(
     { ...form_data.extra_form_data },
     {
-      ...dataMask?.ownFilters?.[form_data.slice_id]?.extraFormData,
+      ...dataMask[form_data.slice_id]?.ownState,
     },
   );
   const chartKey = Object.keys(charts)[0];
@@ -589,7 +589,7 @@ function mapStateToProps(state) {
     forcedHeight: explore.forced_height,
     chart,
     timeout: explore.common.conf.SUPERSET_WEBSERVER_TIMEOUT,
-    ownCurrentState: dataMask?.ownFilters?.[form_data.slice_id]?.currentState,
+    ownState: dataMask[form_data.slice_id]?.ownState,
     impressionId,
   };
 }

superset-frontend/src/explore/components/controls/VizTypeControl.jsx

@@ -110,7 +110,7 @@ function VizSupportValidation({ vizType }) {
 const nativeFilterGate = behaviors =>
   !behaviors.includes(Behavior.NATIVE_FILTER) ||
   (isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS) &&
-    behaviors.includes(Behavior.CROSS_FILTER));
+    behaviors.includes(Behavior.INTERACTIVE_CHART));
 
 const VizTypeControl = props => {
   const [showModal, setShowModal] = useState(false);