fix(native-filters): Fix first loading of charts (#14332)

* fix:fix get permission function

* fix: fix unnecessary loading for native filters

* test: fix mocks

superset-frontend/spec/fixtures/mockNativeFilters.ts

@@ -21,6 +21,7 @@ import { NativeFiltersState } from 'src/dashboard/reducers/types';
 import { DataMaskStateWithId } from '../../src/dataMask/types';
 
 export const nativeFilters: NativeFiltersState = {
+  isInitialized: true,
   filterSets: {},
   filters: {
     'NATIVE_FILTER-e7Q8zKixx': {
@@ -114,6 +115,7 @@ export const extraFormData: ExtraFormData = {
 export const NATIVE_FILTER_ID = 'NATIVE_FILTER-p4LImrSgA';
 
 export const singleNativeFiltersState = {
+  isInitialized: true,
   filters: {
     [NATIVE_FILTER_ID]: {
       id: [NATIVE_FILTER_ID],

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

@@ -30,6 +30,7 @@ export const mockDataMaskInfo: DataMaskStateWithId = {
 };
 
 export const nativeFiltersInfo: NativeFiltersState = {
+  isInitialized: true,
   filterSets: {
     'set-id': {
       id: 'DefaultsID',

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

@@ -52,6 +52,7 @@ describe('getFormDataWithExtraFilters', () => {
     },
     sliceId: chartId,
     nativeFilters: {
+      isInitialized: true,
       filterSets: {},
       filters: {
         [filterId]: ({

superset-frontend/src/chart/Chart.jsx

@@ -49,6 +49,7 @@ const propTypes = {
   timeout: PropTypes.number,
   vizType: PropTypes.string.isRequired,
   triggerRender: PropTypes.bool,
+  isFiltersInitialized: PropTypes.bool,
   // state
   chartAlert: PropTypes.string,
   chartStatus: PropTypes.string,
@@ -120,6 +121,13 @@ class Chart extends React.PureComponent {
   }
 
   runQuery() {
+    if (
+      this.props.dashboardId && // we on dashboard screen
+      isFeatureEnabled(FeatureFlag.DASHBOARD_NATIVE_FILTERS) &&
+      !this.props.isFiltersInitialized
+    ) {
+      return;
+    }
     if (this.props.chartId > 0 && isFeatureEnabled(FeatureFlag.CLIENT_CACHE)) {
       // Load saved chart with a GET request
       this.props.actions.getSavedChart(

superset-frontend/src/chart/ChartContainer.jsx

@@ -37,4 +37,9 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(null, mapDispatchToProps)(Chart);
+export default connect(
+  ({ nativeFilters }) => ({
+    isFiltersInitialized: nativeFilters?.isInitialized,
+  }),
+  mapDispatchToProps,
+)(Chart);

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

@@ -65,6 +65,14 @@ export interface SetFilterSetsConfigFail {
   type: typeof SET_FILTER_SETS_CONFIG_FAIL;
   filterSetsConfig: FilterSet[];
 }
+export const SET_FILTERS_INITIALIZED = 'SET_FILTERS_INITIALIZED';
+export interface SetFiltersInitialized {
+  type: typeof SET_FILTERS_INITIALIZED;
+}
+
+export const setFiltersInitialized = (): SetFiltersInitialized => ({
+  type: SET_FILTERS_INITIALIZED,
+});
 
 export const setFilterConfiguration = (
   filterConfig: FilterConfiguration,
@@ -192,5 +200,6 @@ export type AnyFilterAction =
   | SetFilterSetsConfigBegin
   | SetFilterSetsConfigComplete
   | SetFilterSetsConfigFail
+  | SetFiltersInitialized
   | SaveFilterSets
   | SetBooststapData;

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx

@@ -19,7 +19,7 @@
 
 /* eslint-disable no-param-reassign */
 import { HandlerFunction, styled, t } from '@superset-ui/core';
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import cx from 'classnames';
 import Icon from 'src/components/Icon';
@@ -31,6 +31,7 @@ import { useImmer } from 'use-immer';
 import { areObjectsEqual } from 'src/reduxUtils';
 import { testWithId } from 'src/utils/testUtils';
 import { Filter } from 'src/dashboard/components/nativeFilters/types';
+import { setFiltersInitialized } from 'src/dashboard/actions/nativeFilters';
 import { mapParentFiltersToChildren, TabIds } from './utils';
 import FilterSets from './FilterSets';
 import {
@@ -203,6 +204,12 @@ const FilterBar: React.FC<FiltersBarProps> = ({
     handleApply,
   );
 
+  useEffect(() => {
+    if (isInitialized) {
+      dispatch(setFiltersInitialized());
+    }
+  }, [dispatch, isInitialized]);
+
   useFilterUpdates(
     dataMaskSelected,
     setDataMaskSelected,

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

@@ -21,6 +21,7 @@ import {
   SAVE_FILTER_SETS,
   SET_FILTER_CONFIG_COMPLETE,
   SET_FILTER_SETS_CONFIG_COMPLETE,
+  SET_FILTERS_INITIALIZED,
 } from 'src/dashboard/actions/nativeFilters';
 import { FilterSet, NativeFiltersState } from './types';
 import { FilterConfiguration } from '../components/nativeFilters/types';
@@ -35,7 +36,9 @@ export function getInitialState({
   filterConfig?: FilterConfiguration;
   state?: NativeFiltersState;
 }): NativeFiltersState {
-  const state: Partial<NativeFiltersState> = {};
+  const state: Partial<NativeFiltersState> = {
+    isInitialized: prevState?.isInitialized,
+  };
 
   const filters = {};
   if (filterConfig) {
@@ -63,6 +66,7 @@ export function getInitialState({
 
 export default function nativeFilterReducer(
   state: NativeFiltersState = {
+    isInitialized: false,
     filters: {},
     filterSets: {},
   },
@@ -91,6 +95,12 @@ export default function nativeFilterReducer(
     case SET_FILTER_CONFIG_COMPLETE:
       return getInitialState({ filterConfig: action.filterConfig, state });
 
+    case SET_FILTERS_INITIALIZED:
+      return {
+        ...state,
+        isInitialized: true,
+      };
+
     case SET_FILTER_SETS_CONFIG_COMPLETE:
       return getInitialState({
         filterSetsConfig: action.filterSetsConfig,

superset-frontend/src/dashboard/reducers/types.ts

@@ -97,6 +97,7 @@ export type Filters = {
 };
 
 export type NativeFiltersState = {
+  isInitialized: boolean;
   filters: Filters;
   filterSets: FilterSets;
 };