feat(native-filters): apply scoping of native filters to dashboard (#12716)

* feat: scoping native filters in dashboard

* test: add tests / fix reducer

* test: fix tests

* chore: merge with master

* fix: fix undefined cases

* fix: fix code according cypress

* refactor: fix mocks according CRs

* chore: re run pipeline

superset-frontend/spec/javascripts/dashboard/components/Dashboard_spec.jsx

@@ -28,10 +28,17 @@ import newComponentFactory from 'src/dashboard/util/newComponentFactory';
 // mock data
 import chartQueries from 'spec/fixtures/mockChartQueries';
 import datasources from 'spec/fixtures/mockDatasource';
+import {
+  extraFormData,
+  NATIVE_FILTER_ID,
+  layoutForSingleNativeFilter,
+  singleNativeFiltersState,
+} from 'spec/fixtures/mockNativeFilters';
 import dashboardInfo from 'spec/fixtures/mockDashboardInfo';
 import { dashboardLayout } from 'spec/fixtures/mockDashboardLayout';
 import dashboardState from 'spec/fixtures/mockDashboardState';
 import { sliceEntitiesForChart as sliceEntities } from 'spec/fixtures/mockSliceEntities';
+import { getActiveNativeFilters } from 'src/dashboard/util/activeDashboardNativeFilters';
 
 describe('Dashboard', () => {
   const props = {
@@ -141,6 +148,27 @@ describe('Dashboard', () => {
       expect(wrapper.instance().appliedFilters).toBe(OVERRIDE_FILTERS);
     });
 
+    it('should call refresh when native filters changed', () => {
+      wrapper.setProps({
+        activeFilters: {
+          ...OVERRIDE_FILTERS,
+          ...getActiveNativeFilters({
+            nativeFilters: singleNativeFiltersState,
+            layout: layoutForSingleNativeFilter,
+          }),
+        },
+      });
+      wrapper.instance().componentDidUpdate(prevProps);
+      expect(refreshSpy.callCount).toBe(1);
+      expect(wrapper.instance().appliedFilters).toEqual({
+        ...OVERRIDE_FILTERS,
+        [NATIVE_FILTER_ID]: {
+          scope: [230],
+          values: [extraFormData],
+        },
+      });
+    });
+
     it('should call refresh if a filter is added', () => {
       const newFilter = {
         gender: { values: ['boy', 'girl'], scope: [1] },

superset-frontend/spec/javascripts/dashboard/util/getFormDataWithExtraFilters_spec.ts

@@ -16,11 +16,18 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import getFormDataWithExtraFilters from 'src/dashboard/util/charts/getFormDataWithExtraFilters';
+import getFormDataWithExtraFilters, {
+  GetFormDataWithExtraFiltersArguments,
+} from 'src/dashboard/util/charts/getFormDataWithExtraFilters';
+import { DASHBOARD_ROOT_ID } from 'src/dashboard/util/constants';
+import { Filter } from 'src/dashboard/components/nativeFilters/types';
+import { LayoutItem } from 'src/dashboard/types';
+import { dashboardLayout } from '../../../fixtures/mockDashboardLayout';
+import { sliceId as chartId } from '../../../fixtures/mockChartQueries';
 
 describe('getFormDataWithExtraFilters', () => {
-  const chartId = 8675309;
-  const mockArgs = {
+  const filterId = 'native-filter-1';
+  const mockArgs: GetFormDataWithExtraFiltersArguments = {
     chart: {
       id: chartId,
       formData: {
@@ -37,11 +44,27 @@ describe('getFormDataWithExtraFilters', () => {
       region: ['Spain'],
       color: ['pink', 'purple'],
     },
-    nativeFilters: {
-      filters: {},
-      filtersState: {},
-    },
     sliceId: chartId,
+    nativeFilters: {
+      filters: {
+        [filterId]: ({
+          id: filterId,
+          scope: {
+            rootPath: [DASHBOARD_ROOT_ID],
+            excluded: [],
+          },
+        } as unknown) as Filter,
+      },
+      filtersState: {
+        [filterId]: {
+          id: filterId,
+          extraFormData: {},
+        },
+      },
+    },
+    layout: (dashboardLayout.present as unknown) as {
+      [key: string]: LayoutItem;
+    },
   };
 
   it('should include filters from the passed filters', () => {