From 0ff3253afd7dfe54421ea598dffe5101969b5e38 Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Thu, 1 Jul 2021 14:47:14 +0200
Subject: [PATCH] fix(native-filters): chartsInScope were not recalculated in
 some cases (#15498)

* fix(native-filters): chartsInScope were not recalculated in some cases

* Small refactor
---
 .../DashboardBuilder/DashboardContainer.tsx   | 22 ++++++++++---------
 .../components/gridComponents/ChartHolder.jsx |  2 +-
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
index 6273d09550..933843337a 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
@@ -68,22 +68,24 @@ const DashboardContainer: FC<DashboardContainerProps> = ({ topLevelTabs }) => {
   }, [getLeafComponentIdFromPath(directPathToChild)]);
 
   // recalculate charts and tabs in scopes of native filters only when a scope or dashboard layout changes
-  const nativeFiltersValues = Object.values(nativeFilters);
-  const scopes = nativeFiltersValues.map(filter => filter.scope);
+  const filterScopes = Object.values(nativeFilters).map(filter => ({
+    id: filter.id,
+    scope: filter.scope,
+  }));
   useEffect(() => {
     if (
       !isFeatureEnabled(FeatureFlag.DASHBOARD_NATIVE_FILTERS) ||
-      nativeFiltersValues.length === 0
+      filterScopes.length === 0
     ) {
       return;
     }
-    const filterScopes = nativeFiltersValues.map(filter => {
-      const filterScope = filter.scope;
+    const scopes = filterScopes.map(filterScope => {
+      const { scope } = filterScope;
       const chartsInScope: number[] = getChartIdsInFilterScope({
         filterScope: {
-          scope: filterScope.rootPath,
+          scope: scope.rootPath,
           // @ts-ignore
-          immune: filterScope.excluded,
+          immune: scope.excluded,
         },
       });
       const tabsInScope = findTabsWithChartsInScope(
@@ -91,13 +93,13 @@ const DashboardContainer: FC<DashboardContainerProps> = ({ topLevelTabs }) => {
         chartsInScope,
       );
       return {
-        filterId: filter.id,
+        filterId: filterScope.id,
         tabsInScope: Array.from(tabsInScope),
         chartsInScope,
       };
     });
-    dispatch(setInScopeStatusOfFilters(filterScopes));
-  }, [JSON.stringify(scopes), JSON.stringify(dashboardLayout)]);
+    dispatch(setInScopeStatusOfFilters(scopes));
+  }, [JSON.stringify(filterScopes), dashboardLayout, dispatch]);
 
   const childIds: string[] = topLevelTabs
     ? topLevelTabs.children
diff --git a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx
index 32b07953e1..84d121cddf 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx
@@ -130,7 +130,7 @@ const FilterFocusHighlight = React.forwardRef(
 
     if (focusedNativeFilterId) {
       if (
-        nativeFilters.filters[focusedNativeFilterId].chartsInScope.includes(
+        nativeFilters.filters[focusedNativeFilterId].chartsInScope?.includes(
           chartId,
         )
       ) {