From 5f96e63bbb7ffa82da618b8a815d25de86966039 Mon Sep 17 00:00:00 2001
From: simcha90 <56388545+simcha90@users.noreply.github.com>
Date: Wed, 30 Jun 2021 14:59:04 +0300
Subject: [PATCH] fix(native-filters): Fix clear all button (#15438)

* fix:fix get permission function

* fix: "clear all" async flow

* lint: fix lint

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

Co-authored-by: Ville Brofeldt <33317356+villebro@users.noreply.github.com>

* lint: fix lint

Co-authored-by: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
---
 .../FilterBar/Header/Header.test.tsx          |  1 -
 .../nativeFilters/FilterBar/Header/index.tsx  | 28 +++++++++++--------
 .../nativeFilters/FilterBar/index.tsx         |  5 ++--
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/Header.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/Header.test.tsx
index 4b6418e21d..1591780237 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/Header.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/Header.test.tsx
@@ -24,7 +24,6 @@ import Header from './index';
 const createProps = () => ({
   toggleFiltersBar: jest.fn(),
   onApply: jest.fn(),
-  setDataMaskSelected: jest.fn(),
   dataMaskSelected: {
     DefaultsID: {
       filterState: {
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx
index 0ff53bf5c8..cc10572060 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx
@@ -21,7 +21,8 @@ import { styled, t, useTheme } from '@superset-ui/core';
 import React, { FC } from 'react';
 import Icons from 'src/components/Icons';
 import Button from 'src/components/Button';
-import { useSelector } from 'react-redux';
+import { updateDataMask } from 'src/dataMask/actions';
+import { useDispatch, useSelector } from 'react-redux';
 import { getInitialDataMask } from 'src/dataMask/reducer';
 import { DataMaskState, DataMaskStateWithId } from 'src/dataMask/types';
 import FilterConfigurationLink from 'src/dashboard/components/nativeFilters/FilterBar/FilterConfigurationLink';
@@ -68,7 +69,6 @@ const Wrapper = styled.div`
 type HeaderProps = {
   toggleFiltersBar: (arg0: boolean) => void;
   onApply: () => void;
-  setDataMaskSelected: (arg0: (draft: DataMaskState) => void) => void;
   dataMaskSelected: DataMaskState;
   dataMaskApplied: DataMaskStateWithId;
   isApplyDisabled: boolean;
@@ -79,25 +79,31 @@ const Header: FC<HeaderProps> = ({
   isApplyDisabled,
   dataMaskSelected,
   dataMaskApplied,
-  setDataMaskSelected,
   toggleFiltersBar,
 }) => {
   const theme = useTheme();
   const filters = useFilters();
+  const dispatch = useDispatch();
   const filterValues = Object.values<Filter>(filters);
   const canEdit = useSelector<RootState, boolean>(
     ({ dashboardInfo }) => dashboardInfo.dash_edit_perm,
   );
 
   const handleClearAll = () => {
-    filterValues.forEach(filter => {
-      setDataMaskSelected(draft => {
-        draft[filter.id] = getInitialDataMask(filter.id, {
-          filterState: {
-            value: null,
-          },
-        });
-      });
+    const filterIds = Object.keys(dataMaskSelected);
+    filterIds.forEach(filterId => {
+      if (dataMaskSelected[filterId]) {
+        dispatch(
+          updateDataMask(
+            filterId,
+            getInitialDataMask(filterId, {
+              filterState: {
+                value: null,
+              },
+            }),
+          ),
+        );
+      }
     });
   };
 
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
index f7d528c4c4..84d4b5657e 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
@@ -145,9 +145,10 @@ const FilterBar: React.FC<FiltersBarProps> = ({
   height,
   offset,
 }) => {
+  const dataMaskApplied: DataMaskStateWithId = useNativeFiltersDataMask();
   const [editFilterSetId, setEditFilterSetId] = useState<string | null>(null);
   const [dataMaskSelected, setDataMaskSelected] = useImmer<DataMaskStateWithId>(
-    {},
+    dataMaskApplied,
   );
   const dispatch = useDispatch();
   const filterSets = useFilterSets();
@@ -156,7 +157,6 @@ const FilterBar: React.FC<FiltersBarProps> = ({
   const filters = useFilters();
   const previousFilters = usePrevious(filters);
   const filterValues = Object.values<Filter>(filters);
-  const dataMaskApplied: DataMaskStateWithId = useNativeFiltersDataMask();
   const [isFilterSetChanged, setIsFilterSetChanged] = useState(false);
   const preselectNativeFilters = usePreselectNativeFilters();
   const [initializedFilters, setInitializedFilters] = useState<any[]>([]);
@@ -271,7 +271,6 @@ const FilterBar: React.FC<FiltersBarProps> = ({
         <Header
           toggleFiltersBar={toggleFiltersBar}
           onApply={handleApply}
-          setDataMaskSelected={setDataMaskSelected}
           isApplyDisabled={isApplyDisabled}
           dataMaskSelected={dataMaskSelected}
           dataMaskApplied={dataMaskApplied}