fix(native-filters): Show incompatible native filters indicator

superset-frontend/spec/fixtures/mockNativeFilters.ts

@@ -0,0 +1,90 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { NativeFiltersState } from 'src/dashboard/components/nativeFilters/types';
+
+export const nativeFilters: NativeFiltersState = {
+  filters: {
+    'NATIVE_FILTER-e7Q8zKixx': {
+      id: 'NATIVE_FILTER-e7Q8zKixx',
+      name: 'region',
+      type: 'text',
+      targets: [
+        {
+          datasetId: 2,
+          column: {
+            name: 'region',
+          },
+        },
+      ],
+      defaultValue: null,
+      cascadeParentIds: [],
+      scope: {
+        rootPath: ['ROOT_ID'],
+        excluded: [],
+      },
+      inverseSelection: false,
+      isInstant: true,
+      allowsMultipleValues: false,
+      isRequired: false,
+    },
+    'NATIVE_FILTER-x9QPw0so1': {
+      id: 'NATIVE_FILTER-x9QPw0so1',
+      name: 'country_code',
+      type: 'text',
+      targets: [
+        {
+          datasetId: 2,
+          column: {
+            name: 'country_code',
+          },
+        },
+      ],
+      defaultValue: null,
+      cascadeParentIds: [],
+      scope: {
+        rootPath: ['ROOT_ID'],
+        excluded: [],
+      },
+      inverseSelection: false,
+      isInstant: true,
+      allowsMultipleValues: false,
+      isRequired: false,
+    },
+  },
+  filtersState: {
+    'NATIVE_FILTER-e7Q8zKixx': {
+      id: 'NATIVE_FILTER-e7Q8zKixx',
+      extraFormData: {
+        append_form_data: {
+          filters: [
+            {
+              col: 'region',
+              op: 'IN',
+              val: ['East Asia & Pacific'],
+            },
+          ],
+        },
+      },
+    },
+    'NATIVE_FILTER-x9QPw0so1': {
+      id: 'NATIVE_FILTER-x9QPw0so1',
+      extraFormData: {},
+    },
+  },
+};

superset-frontend/spec/fixtures/mockStore.js

@@ -25,6 +25,7 @@ import mockState from './mockState';
 import { dashboardLayoutWithTabs } from './mockDashboardLayout';
 import { sliceId } from './mockChartQueries';
 import { dashboardFilters } from './mockDashboardFilters';
+import { nativeFilters } from './mockNativeFilters';
 
 export const getMockStore = () =>
   createStore(rootReducer, mockState, compose(applyMiddleware(thunk)));
@@ -74,3 +75,28 @@ export const getMockStoreWithFilters = () =>
       },
     },
   });
+
+export const getMockStoreWithNativeFilters = () =>
+  createStore(rootReducer, {
+    ...mockState,
+    nativeFilters,
+    charts: {
+      ...mockState.charts,
+      [sliceIdWithAppliedFilter]: {
+        ...mockState.charts[sliceId],
+        queryResponse: {
+          status: 'success',
+          applied_filters: [{ column: 'region' }],
+          rejected_filters: [],
+        },
+      },
+      [sliceIdWithRejectedFilter]: {
+        ...mockState.charts[sliceId],
+        queryResponse: {
+          status: 'success',
+          applied_filters: [],
+          rejected_filters: [{ column: 'region', reason: 'not_in_datasource' }],
+        },
+      },
+    },
+  });

superset-frontend/spec/javascripts/dashboard/components/FiltersBadge_spec.tsx

@@ -24,7 +24,10 @@ import * as SupersetUI from '@superset-ui/core';
 import { CHART_UPDATE_SUCCEEDED } from 'src/chart/chartAction';
 import { buildActiveFilters } from 'src/dashboard/util/activeDashboardFilters';
 import FiltersBadge from 'src/dashboard/containers/FiltersBadge';
-import { getMockStoreWithFilters } from 'spec/fixtures/mockStore';
+import {
+  getMockStoreWithFilters,
+  getMockStoreWithNativeFilters,
+} from 'spec/fixtures/mockStore';
 import { sliceId } from 'spec/fixtures/mockChartQueries';
 import { dashboardFilters } from 'spec/fixtures/mockDashboardFilters';
 import { dashboardWithFilter } from 'spec/fixtures/mockDashboardLayout';
@@ -45,83 +48,166 @@ describe('FiltersBadge', () => {
     jest.spyOn(SupersetUI, 'useTheme').mockImplementation(() => supersetTheme);
   });
 
-  it("doesn't show number when there are no active filters", () => {
-    const store = getMockStoreWithFilters();
-    // start with basic dashboard state, dispatch an event to simulate query completion
-    store.dispatch({
-      type: CHART_UPDATE_SUCCEEDED,
-      key: sliceId,
-      queriesResponse: [
-        {
-          status: 'success',
-          applied_filters: [],
-          rejected_filters: [],
-        },
-      ],
-      dashboardFilters,
+  describe('for dashboard filters', () => {
+    it("doesn't show number when there are no active filters", () => {
+      const store = getMockStoreWithFilters();
+      // start with basic dashboard state, dispatch an event to simulate query completion
+      store.dispatch({
+        type: CHART_UPDATE_SUCCEEDED,
+        key: sliceId,
+        queriesResponse: [
+          {
+            status: 'success',
+            applied_filters: [],
+            rejected_filters: [],
+          },
+        ],
+        dashboardFilters,
+      });
+      const wrapper = shallow(
+        <Provider store={store}>
+          <FiltersBadge chartId={sliceId} />,
+        </Provider>,
+      );
+      expect(
+        wrapper.dive().find('[data-test="applied-filter-count"]'),
+      ).not.toExist();
+    });
+
+    it('shows the indicator when filters have been applied', () => {
+      const store = getMockStoreWithFilters();
+      // start with basic dashboard state, dispatch an event to simulate query completion
+      store.dispatch({
+        type: CHART_UPDATE_SUCCEEDED,
+        key: sliceId,
+        queriesResponse: [
+          {
+            status: 'success',
+            applied_filters: [{ column: 'region' }],
+            rejected_filters: [],
+          },
+        ],
+        dashboardFilters,
+      });
+      const wrapper = shallow(
+        <FiltersBadge {...{ store }} chartId={sliceId} />,
+      ).dive();
+      expect(wrapper.dive().find('DetailsPanelPopover')).toExist();
+      expect(
+        wrapper.dive().find('[data-test="applied-filter-count"]'),
+      ).toHaveText('1');
+      expect(wrapper.dive().find('WarningFilled')).not.toExist();
     });
-    const wrapper = shallow(
-      <Provider store={store}>
-        <FiltersBadge chartId={sliceId} />,
-      </Provider>,
-    );
-    expect(
-      wrapper.dive().find('[data-test="applied-filter-count"]'),
-    ).not.toExist();
-  });
 
-  it('shows the indicator when filters have been applied', () => {
-    const store = getMockStoreWithFilters();
-    // start with basic dashboard state, dispatch an event to simulate query completion
-    store.dispatch({
-      type: CHART_UPDATE_SUCCEEDED,
-      key: sliceId,
-      queriesResponse: [
-        {
-          status: 'success',
-          applied_filters: [{ column: 'region' }],
-          rejected_filters: [],
-        },
-      ],
-      dashboardFilters,
+    it("shows a warning when there's a rejected filter", () => {
+      const store = getMockStoreWithFilters();
+      // start with basic dashboard state, dispatch an event to simulate query completion
+      store.dispatch({
+        type: CHART_UPDATE_SUCCEEDED,
+        key: sliceId,
+        queriesResponse: [
+          {
+            status: 'success',
+            applied_filters: [],
+            rejected_filters: [
+              { column: 'region', reason: 'not_in_datasource' },
+            ],
+          },
+        ],
+        dashboardFilters,
+      });
+      const wrapper = shallow(
+        <FiltersBadge {...{ store }} chartId={sliceId} />,
+      ).dive();
+      expect(wrapper.dive().find('DetailsPanelPopover')).toExist();
+      expect(
+        wrapper.dive().find('[data-test="applied-filter-count"]'),
+      ).toHaveText('0');
+      expect(
+        wrapper.dive().find('[data-test="incompatible-filter-count"]'),
+      ).toHaveText('1');
+      // to look at the shape of the wrapper use:
+      // console.log(wrapper.dive().debug())
+      expect(wrapper.dive().find('Icon[name="alert-solid"]')).toExist();
     });
-    const wrapper = shallow(
-      <FiltersBadge {...{ store }} chartId={sliceId} />,
-    ).dive();
-    expect(wrapper.dive().find('DetailsPanelPopover')).toExist();
-    expect(
-      wrapper.dive().find('[data-test="applied-filter-count"]'),
-    ).toHaveText('1');
-    expect(wrapper.dive().find('WarningFilled')).not.toExist();
   });
 
-  it("shows a warning when there's a rejected filter", () => {
-    const store = getMockStoreWithFilters();
-    // start with basic dashboard state, dispatch an event to simulate query completion
-    store.dispatch({
-      type: CHART_UPDATE_SUCCEEDED,
-      key: sliceId,
-      queriesResponse: [
-        {
-          status: 'success',
-          applied_filters: [],
-          rejected_filters: [{ column: 'region', reason: 'not_in_datasource' }],
-        },
-      ],
-      dashboardFilters,
+  describe('for native filters', () => {
+    it("doesn't show number when there are no active filters", () => {
+      const store = getMockStoreWithNativeFilters();
+      // start with basic dashboard state, dispatch an event to simulate query completion
+      store.dispatch({
+        type: CHART_UPDATE_SUCCEEDED,
+        key: sliceId,
+        queriesResponse: [
+          {
+            status: 'success',
+            applied_filters: [],
+            rejected_filters: [],
+          },
+        ],
+      });
+      const wrapper = shallow(
+        <Provider store={store}>
+          <FiltersBadge chartId={sliceId} />,
+        </Provider>,
+      );
+      expect(
+        wrapper.dive().find('[data-test="applied-filter-count"]'),
+      ).not.toExist();
+    });
+
+    it('shows the indicator when filters have been applied', () => {
+      const store = getMockStoreWithNativeFilters();
+      // start with basic dashboard state, dispatch an event to simulate query completion
+      store.dispatch({
+        type: CHART_UPDATE_SUCCEEDED,
+        key: sliceId,
+        queriesResponse: [
+          {
+            status: 'success',
+            applied_filters: [{ column: 'region' }],
+            rejected_filters: [],
+          },
+        ],
+      });
+      const wrapper = shallow(
+        <FiltersBadge {...{ store }} chartId={sliceId} />,
+      ).dive();
+      expect(wrapper.dive().find('DetailsPanelPopover')).toExist();
+      expect(
+        wrapper.dive().find('[data-test="applied-filter-count"]'),
+      ).toHaveText('1');
+      expect(wrapper.dive().find('WarningFilled')).not.toExist();
+    });
+
+    it("shows a warning when there's a rejected filter", () => {
+      const store = getMockStoreWithNativeFilters();
+      // start with basic dashboard state, dispatch an event to simulate query completion
+      store.dispatch({
+        type: CHART_UPDATE_SUCCEEDED,
+        key: sliceId,
+        queriesResponse: [
+          {
+            status: 'success',
+            applied_filters: [],
+            rejected_filters: [
+              { column: 'region', reason: 'not_in_datasource' },
+            ],
+          },
+        ],
+      });
+      const wrapper = shallow(
+        <FiltersBadge {...{ store }} chartId={sliceId} />,
+      ).dive();
+      expect(wrapper.dive().find('DetailsPanelPopover')).toExist();
+      expect(
+        wrapper.dive().find('[data-test="applied-filter-count"]'),
+      ).toHaveText('0');
+      expect(
+        wrapper.dive().find('[data-test="incompatible-filter-count"]'),
+      ).toHaveText('1');
+      expect(wrapper.dive().find('Icon[name="alert-solid"]')).toExist();
     });
-    const wrapper = shallow(
-      <FiltersBadge {...{ store }} chartId={sliceId} />,
-    ).dive();
-    expect(wrapper.dive().find('DetailsPanelPopover')).toExist();
-    expect(
-      wrapper.dive().find('[data-test="applied-filter-count"]'),
-    ).toHaveText('0');
-    expect(
-      wrapper.dive().find('[data-test="incompatible-filter-count"]'),
-    ).toHaveText('1');
-    // to look at the shape of the wrapper use:
-    // console.log(wrapper.dive().debug())
-    expect(wrapper.dive().find('Icon[name="alert-solid"]')).toExist();
   });
 });