fix(native-filters): Fix indicators (#14334)

* fix:fix get permission function

* fix: hide featured filters

* test: fix FF in tests

* test: fix FF in tests

* fix: fix unset cross filters

superset-frontend/spec/javascripts/dashboard/components/FiltersBadge_spec.tsx

@@ -31,6 +31,7 @@ import {
 import { sliceId } from 'spec/fixtures/mockChartQueries';
 import { dashboardFilters } from 'spec/fixtures/mockDashboardFilters';
 import { dashboardWithFilter } from 'spec/fixtures/mockDashboardLayout';
+import { FeatureFlag } from 'src/featureFlags';
 
 describe('FiltersBadge', () => {
   // there's this bizarre "active filters" thing
@@ -158,6 +159,10 @@ describe('FiltersBadge', () => {
     });
 
     it('shows the indicator when filters have been applied', () => {
+      // @ts-ignore
+      global.featureFlags = {
+        [FeatureFlag.DASHBOARD_NATIVE_FILTERS]: true,
+      };
       const store = getMockStoreWithNativeFilters();
       // start with basic dashboard state, dispatch an event to simulate query completion
       store.dispatch({
@@ -182,6 +187,10 @@ describe('FiltersBadge', () => {
     });
 
     it("shows a warning when there's a rejected filter", () => {
+      // @ts-ignore
+      global.featureFlags = {
+        [FeatureFlag.DASHBOARD_NATIVE_FILTERS]: true,
+      };
       const store = getMockStoreWithNativeFilters();
       // start with basic dashboard state, dispatch an event to simulate query completion
       store.dispatch({

superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts

@@ -23,6 +23,7 @@ import {
   NativeFiltersState,
 } from 'src/dashboard/reducers/types';
 import { DataMaskStateWithId, DataMaskType } from 'src/dataMask/types';
+import { FeatureFlag, isFeatureEnabled } from '@superset-ui/core';
 import { Layout } from '../../types';
 import { getTreeCheckedItems } from '../nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/utils';
 
@@ -220,57 +221,62 @@ export const selectNativeIndicatorsForChart = (
     return IndicatorStatus.Unset;
   };
 
-  const nativeFilterIndicators = Object.values(nativeFilters.filters).map(
+  let nativeFilterIndicators: any = [];
-    nativeFilter => {
+  if (isFeatureEnabled(FeatureFlag.DASHBOARD_NATIVE_FILTERS)) {
-      const isAffectedByScope = getTreeCheckedItems(
+    nativeFilterIndicators = Object.values(nativeFilters.filters).map(
-        nativeFilter.scope,
+      nativeFilter => {
-        dashboardLayout,
+        const isAffectedByScope = getTreeCheckedItems(
-      ).some(
+          nativeFilter.scope,
-        layoutItem => dashboardLayout[layoutItem]?.meta?.chartId === chartId,
+          dashboardLayout,
-      );
+        ).some(
-      const column = nativeFilter.targets[0]?.column?.name;
+          layoutItem => dashboardLayout[layoutItem]?.meta?.chartId === chartId,
-      let value = dataMask[nativeFilter.id]?.filterState?.value ?? null;
+        );
-      if (!Array.isArray(value) && value !== null) {
+        const column = nativeFilter.targets[0]?.column?.name;
-        value = [value];
+        let value = dataMask[nativeFilter.id]?.filterState?.value ?? null;
-      }
+        if (!Array.isArray(value) && value !== null) {
-      return {
+          value = [value];
-        column,
+        }
-        name: nativeFilter.name,
+        return {
-        path: [nativeFilter.id],
+          column,
-        status: getStatus({ value, isAffectedByScope, column }),
+          name: nativeFilter.name,
-        value,
+          path: [nativeFilter.id],
-      };
+          status: getStatus({ value, isAffectedByScope, column }),
-    },
-  );
-
-  const crossFilterIndicators = Object.values(chartConfiguration).map(
-    chartConfig => {
-      const scope = chartConfig?.crossFilters?.scope;
-      const isAffectedByScope = getTreeCheckedItems(
-        scope,
-        dashboardLayout,
-      ).some(
-        layoutItem => dashboardLayout[layoutItem]?.meta?.chartId === chartId,
-      );
-
-      let value = dataMask[chartConfig.id]?.filterState?.value ?? null;
-      if (!Array.isArray(value) && value !== null) {
-        value = [value];
-      }
-      return {
-        name: Object.values(dashboardLayout).find(
-          layoutItem => layoutItem?.meta?.chartId === chartConfig.id,
-        )?.meta?.sliceName as string,
-        path: [`${chartConfig.id}`],
-        status: getStatus({
           value,
-          isAffectedByScope,
+        };
-          type: DataMaskType.CrossFilters,
+      },
-        }),
+    );
-        value,
+  }
-      };
-    },
-  );
 
+  let crossFilterIndicators: any = [];
+  if (isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS)) {
+    crossFilterIndicators = Object.values(chartConfiguration)
+      .map(chartConfig => {
+        const scope = chartConfig?.crossFilters?.scope;
+        const isAffectedByScope = getTreeCheckedItems(
+          scope,
+          dashboardLayout,
+        ).some(
+          layoutItem => dashboardLayout[layoutItem]?.meta?.chartId === chartId,
+        );
+
+        let value = dataMask[chartConfig.id]?.filterState?.value ?? null;
+        if (!Array.isArray(value) && value !== null) {
+          value = [value];
+        }
+        return {
+          name: Object.values(dashboardLayout).find(
+            layoutItem => layoutItem?.meta?.chartId === chartConfig.id,
+          )?.meta?.sliceName as string,
+          path: [`${chartConfig.id}`],
+          status: getStatus({
+            value,
+            isAffectedByScope,
+            type: DataMaskType.CrossFilters,
+          }),
+          value,
+        };
+      })
+      .filter(filter => filter.status === IndicatorStatus.CrossFilterApplied);
+  }
   return crossFilterIndicators.concat(nativeFilterIndicators);
 };