From 53024c220a50a0f2e50027ce8d8c72334dae84d3 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Fri, 24 Sep 2021 14:07:20 -0300
Subject: [PATCH] fix: Updates the selected values when changing the native
 filter type, column or default value (#16833)

---
 .../nativeFilters/FilterBar/index.tsx         | 54 +++++++++++--------
 superset-frontend/src/dataMask/actions.ts     |  9 +---
 superset-frontend/src/dataMask/reducer.ts     |  4 +-
 3 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
index 9a96331dd0889..bcb326df463fd 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
@@ -31,6 +31,7 @@ import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
 import { updateDataMask, clearDataMask } from 'src/dataMask/actions';
 import { DataMaskStateWithId, DataMaskWithId } from 'src/dataMask/types';
 import { useImmer } from 'use-immer';
+import { isEmpty, isEqual } from 'lodash';
 import { testWithId } from 'src/utils/testUtils';
 import { Filter } from 'src/dashboard/components/nativeFilters/types';
 import Loading from 'src/components/Loading';
@@ -162,28 +163,6 @@ const FilterBar: React.FC<FiltersBarProps> = ({
   const filterValues = Object.values<Filter>(filters);
   const [isFilterSetChanged, setIsFilterSetChanged] = useState(false);
 
-  useEffect(() => {
-    setDataMaskSelected(() => dataMaskApplied);
-  }, [JSON.stringify(dataMaskApplied), setDataMaskSelected]);
-
-  // reset filter state if filter type changes
-  useEffect(() => {
-    setDataMaskSelected(draft => {
-      Object.values(filters).forEach(filter => {
-        if (
-          filter.filterType !== previousFilters?.[filter.id]?.filterType &&
-          previousFilters?.[filter.id]?.filterType !== undefined
-        ) {
-          draft[filter.id] = getInitialDataMask(filter.id) as DataMaskWithId;
-        }
-      });
-    });
-  }, [
-    JSON.stringify(filters),
-    JSON.stringify(previousFilters),
-    setDataMaskSelected,
-  ]);
-
   const handleFilterSelectionChange = (
     filter: Pick<Filter, 'id'> & Partial<Filter>,
     dataMask: Partial<DataMask>,
@@ -232,6 +211,37 @@ const FilterBar: React.FC<FiltersBarProps> = ({
     [history],
   );
 
+  useEffect(() => {
+    if (previousFilters) {
+      const updates = {};
+      Object.values(filters).forEach(currentFilter => {
+        const currentType = currentFilter.filterType;
+        const currentTargets = currentFilter.targets;
+        const currentDataMask = currentFilter.defaultDataMask;
+        const previousFilter = previousFilters?.[currentFilter.id];
+        const previousType = previousFilter?.filterType;
+        const previousTargets = previousFilter?.targets;
+        const previousDataMask = previousFilter?.defaultDataMask;
+        const typeChanged = currentType !== previousType;
+        const targetsChanged = !isEqual(currentTargets, previousTargets);
+        const dataMaskChanged = !isEqual(currentDataMask, previousDataMask);
+
+        if (typeChanged || targetsChanged || dataMaskChanged) {
+          updates[currentFilter.id] = getInitialDataMask(currentFilter.id);
+        }
+      });
+
+      if (!isEmpty(updates)) {
+        setDataMaskSelected(draft => ({ ...draft, ...updates }));
+        Object.keys(updates).forEach(key => dispatch(clearDataMask(key)));
+      }
+    }
+  }, [JSON.stringify(filters), JSON.stringify(previousFilters)]);
+
+  useEffect(() => {
+    setDataMaskSelected(() => dataMaskApplied);
+  }, [JSON.stringify(dataMaskApplied), setDataMaskSelected]);
+
   const dataMaskAppliedText = JSON.stringify(dataMaskApplied);
   useEffect(() => {
     publishDataMask(dataMaskApplied);
diff --git a/superset-frontend/src/dataMask/actions.ts b/superset-frontend/src/dataMask/actions.ts
index 1b7428ff7eaf6..aabaa5b7d515e 100644
--- a/superset-frontend/src/dataMask/actions.ts
+++ b/superset-frontend/src/dataMask/actions.ts
@@ -71,14 +71,7 @@ export function updateDataMask(
 }
 
 export function clearDataMask(filterId: string | number) {
-  return updateDataMask(
-    filterId,
-    getInitialDataMask(filterId, {
-      filterState: {
-        value: null,
-      },
-    }),
-  );
+  return updateDataMask(filterId, getInitialDataMask(filterId));
 }
 
 export type AnyDataMaskAction =
diff --git a/superset-frontend/src/dataMask/reducer.ts b/superset-frontend/src/dataMask/reducer.ts
index f5fd883393a9a..6c2248dd9fd2c 100644
--- a/superset-frontend/src/dataMask/reducer.ts
+++ b/superset-frontend/src/dataMask/reducer.ts
@@ -56,9 +56,7 @@ export function getInitialDataMask(
   return {
     ...otherProps,
     extraFormData: {},
-    filterState: {
-      value: undefined,
-    },
+    filterState: {},
     ownState: {},
     ...moreProps,
   } as DataMaskWithId;