From 7ff35dfdfbe51b0f3acd7aa4f730578a5f4ad8d3 Mon Sep 17 00:00:00 2001
From: simcha90 <56388545+simcha90@users.noreply.github.com>
Date: Mon, 26 Apr 2021 13:22:11 +0300
Subject: [PATCH] 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
---
 .../components/FiltersBadge_spec.tsx          |   9 ++
 .../components/FiltersBadge/selectors.ts      | 106 +++++++++---------
 2 files changed, 65 insertions(+), 50 deletions(-)

diff --git a/superset-frontend/spec/javascripts/dashboard/components/FiltersBadge_spec.tsx b/superset-frontend/spec/javascripts/dashboard/components/FiltersBadge_spec.tsx
index f0fae7d25..9609c00e6 100644
--- a/superset-frontend/spec/javascripts/dashboard/components/FiltersBadge_spec.tsx
+++ b/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({
diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts b/superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts
index 8b6bed2e5..7560f858f 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts
+++ b/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(
-    nativeFilter => {
-      const isAffectedByScope = getTreeCheckedItems(
-        nativeFilter.scope,
-        dashboardLayout,
-      ).some(
-        layoutItem => dashboardLayout[layoutItem]?.meta?.chartId === chartId,
-      );
-      const column = nativeFilter.targets[0]?.column?.name;
-      let value = dataMask[nativeFilter.id]?.filterState?.value ?? null;
-      if (!Array.isArray(value) && value !== null) {
-        value = [value];
-      }
-      return {
-        column,
-        name: nativeFilter.name,
-        path: [nativeFilter.id],
-        status: getStatus({ value, isAffectedByScope, column }),
-        value,
-      };
-    },
-  );
-
-  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({
+  let nativeFilterIndicators: any = [];
+  if (isFeatureEnabled(FeatureFlag.DASHBOARD_NATIVE_FILTERS)) {
+    nativeFilterIndicators = Object.values(nativeFilters.filters).map(
+      nativeFilter => {
+        const isAffectedByScope = getTreeCheckedItems(
+          nativeFilter.scope,
+          dashboardLayout,
+        ).some(
+          layoutItem => dashboardLayout[layoutItem]?.meta?.chartId === chartId,
+        );
+        const column = nativeFilter.targets[0]?.column?.name;
+        let value = dataMask[nativeFilter.id]?.filterState?.value ?? null;
+        if (!Array.isArray(value) && value !== null) {
+          value = [value];
+        }
+        return {
+          column,
+          name: nativeFilter.name,
+          path: [nativeFilter.id],
+          status: getStatus({ value, isAffectedByScope, column }),
           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);
 };