[Feature] Dashboard filter indicators (#7908)

* dashboard filter indicators

* add/fix unit tests

superset/assets/spec/javascripts/dashboard/components/Dashboard_spec.jsx

@@ -46,6 +46,7 @@ describe('Dashboard', () => {
     dashboardState,
     dashboardInfo,
     charts: chartQueries,
+    filters: {},
     slices: sliceEntities.slices,
     datasources,
     layout: dashboardLayout.present,
@@ -60,27 +61,23 @@ describe('Dashboard', () => {
     return wrapper;
   }
 
+  const OVERRIDE_FILTERS = {
+    1: { region: [] },
+    2: { country_name: ['USA'] },
+    3: { region: [], country_name: ['USA'] },
+  };
+
   it('should render a DashboardBuilder', () => {
     const wrapper = setup();
     expect(wrapper.find(DashboardBuilder)).toHaveLength(1);
   });
 
   describe('refreshExcept', () => {
-    const overrideDashboardState = {
-      ...dashboardState,
-      filters: {
-        1: { region: [] },
-        2: { country_name: ['USA'] },
-        3: { region: [], country_name: ['USA'] },
-      },
-      refresh: true,
-    };
-
     const overrideDashboardInfo = {
       ...dashboardInfo,
       metadata: {
         ...dashboardInfo.metadata,
-        filter_immune_slice_fields: { [chartQueries[chartId].id]: ['region'] },
+        filterImmuneSliceFields: { [chartQueries[chartId].id]: ['region'] },
       },
     };
 
@@ -108,14 +105,14 @@ describe('Dashboard', () => {
       expect(spy.callCount).toBe(Object.keys(overrideCharts).length - 1);
     });
 
-    it('should not call triggerQuery for filter_immune_slices', () => {
+    it('should not call triggerQuery for filterImmuneSlices', () => {
       const wrapper = setup({
         charts: overrideCharts,
         dashboardInfo: {
           ...dashboardInfo,
           metadata: {
             ...dashboardInfo.metadata,
-            filter_immune_slices: Object.keys(overrideCharts).map(id =>
+            filterImmuneSlices: Object.keys(overrideCharts).map(id =>
               Number(id),
             ),
           },
@@ -127,9 +124,9 @@ describe('Dashboard', () => {
       expect(spy.callCount).toBe(0);
     });
 
-    it('should not call triggerQuery for filter_immune_slice_fields', () => {
+    it('should not call triggerQuery for filterImmuneSliceFields', () => {
       const wrapper = setup({
-        dashboardState: overrideDashboardState,
+        filters: OVERRIDE_FILTERS,
         dashboardInfo: overrideDashboardInfo,
       });
       const spy = sinon.spy(props.actions, 'triggerQuery');
@@ -140,7 +137,7 @@ describe('Dashboard', () => {
 
     it('should call triggerQuery if filter has more filter-able fields', () => {
       const wrapper = setup({
-        dashboardState: overrideDashboardState,
+        filters: OVERRIDE_FILTERS,
         dashboardInfo: overrideDashboardInfo,
       });
       const spy = sinon.spy(props.actions, 'triggerQuery');
@@ -187,117 +184,78 @@ describe('Dashboard', () => {
   });
 
   describe('componentDidUpdate', () => {
-    const overrideDashboardState = {
-      ...dashboardState,
-      filters: {
-        1: { region: [] },
-        2: { country_name: ['USA'] },
-      },
-      refresh: true,
-    };
+    let wrapper;
+    let prevProps;
+    let refreshExceptSpy;
 
-    it('should not call refresh when there is no change', () => {
-      const wrapper = setup({ dashboardState: overrideDashboardState });
-      const refreshExceptSpy = sinon.spy(wrapper.instance(), 'refreshExcept');
-      const prevProps = wrapper.instance().props;
+    beforeEach(() => {
+      wrapper = setup({ filters: OVERRIDE_FILTERS });
+      wrapper.instance().appliedFilters = OVERRIDE_FILTERS;
+      prevProps = wrapper.instance().props;
+      refreshExceptSpy = sinon.spy(wrapper.instance(), 'refreshExcept');
+    });
+
+    afterEach(() => {
+      refreshExceptSpy.restore();
+    });
+
+    it('should not call refresh when is editMode', () => {
       wrapper.setProps({
         dashboardState: {
-          ...overrideDashboardState,
+          ...dashboardState,
+          editMode: true,
         },
       });
       wrapper.instance().componentDidUpdate(prevProps);
-      refreshExceptSpy.restore();
       expect(refreshExceptSpy.callCount).toBe(0);
     });
 
+    it('should not call refresh when there is no change', () => {
+      wrapper.setProps({
+        filters: OVERRIDE_FILTERS,
+      });
+      wrapper.instance().componentDidUpdate(prevProps);
+      expect(refreshExceptSpy.callCount).toBe(0);
+      expect(wrapper.instance().appliedFilters).toBe(OVERRIDE_FILTERS);
+    });
+
     it('should call refresh if a filter is added', () => {
-      const wrapper = setup({ dashboardState: overrideDashboardState });
-      const refreshExceptSpy = sinon.spy(wrapper.instance(), 'refreshExcept');
+      const newFilter = {
+        gender: ['boy', 'girl'],
+      };
       wrapper.setProps({
-        dashboardState: {
-          ...overrideDashboardState,
-          filters: {
-            ...overrideDashboardState.filters,
-            3: { another_filter: ['please'] },
-          },
+        filters: {
+          ...OVERRIDE_FILTERS,
+          ...newFilter,
         },
       });
-      refreshExceptSpy.restore();
       expect(refreshExceptSpy.callCount).toBe(1);
+      expect(wrapper.instance().appliedFilters).toEqual({
+        ...OVERRIDE_FILTERS,
+        ...newFilter,
+      });
     });
 
     it('should call refresh if a filter is removed', () => {
-      const wrapper = setup({ dashboardState: overrideDashboardState });
-      const refreshExceptSpy = sinon.spy(wrapper.instance(), 'refreshExcept');
       wrapper.setProps({
-        dashboardState: {
-          ...overrideDashboardState,
-          filters: {},
-        },
+        filters: {},
       });
-      refreshExceptSpy.restore();
       expect(refreshExceptSpy.callCount).toBe(1);
+      expect(wrapper.instance().appliedFilters).toEqual({});
     });
 
     it('should call refresh if a filter is changed', () => {
-      const wrapper = setup({ dashboardState: overrideDashboardState });
-      const refreshExceptSpy = sinon.spy(wrapper.instance(), 'refreshExcept');
       wrapper.setProps({
-        dashboardState: {
-          ...overrideDashboardState,
-          filters: {
-            ...overrideDashboardState.filters,
-            2: { country_name: ['Canada'] },
-          },
+        filters: {
+          ...OVERRIDE_FILTERS,
+          region: ['Canada'],
         },
       });
-      refreshExceptSpy.restore();
       expect(refreshExceptSpy.callCount).toBe(1);
-    });
-
-    it('should not call refresh if filters change and refresh is false', () => {
-      const wrapper = setup({ dashboardState: overrideDashboardState });
-      const refreshExceptSpy = sinon.spy(wrapper.instance(), 'refreshExcept');
-      wrapper.setProps({
-        dashboardState: {
-          ...overrideDashboardState,
-          filters: {
-            ...overrideDashboardState.filters,
-            2: { country_name: ['Canada'] },
-          },
-          refresh: false,
-        },
+      expect(wrapper.instance().appliedFilters).toEqual({
+        ...OVERRIDE_FILTERS,
+        region: ['Canada'],
       });
-      refreshExceptSpy.restore();
-      expect(refreshExceptSpy.callCount).toBe(0);
-    });
-
-    it('should not refresh filter_immune_slices', () => {
-      const wrapper = setup({
-        dashboardState: overrideDashboardState,
-        dashboardInfo: {
-          ...dashboardInfo,
-          metadata: {
-            ...dashboardInfo.metadata,
-            filter_immune_slices: [chartId],
-          },
-        },
-      });
-      const refreshExceptSpy = sinon.spy(wrapper.instance(), 'refreshExcept');
-      const prevProps = wrapper.instance().props;
-      wrapper.setProps({
-        dashboardState: {
-          ...overrideDashboardState,
-          filters: {
-            ...overrideDashboardState.filters,
-            2: { country_name: ['Canada'] },
-          },
-          refresh: false,
-        },
-      });
-      wrapper.instance().componentDidUpdate(prevProps);
-      refreshExceptSpy.restore();
-      expect(refreshExceptSpy.callCount).toBe(0);
     });
   });
 });