From b72e5e0aae99788c2f840d33289d7b0c04409f3a Mon Sep 17 00:00:00 2001
From: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
Date: Fri, 28 May 2021 07:45:37 +0300
Subject: [PATCH] feat(native-filters): improve inverse selection indicators
 (#14873)

---
 .../src/dashboard/components/FiltersBadge/selectors.ts | 10 ++++++++--
 .../filters/components/Select/SelectFilterPlugin.tsx   |  9 ++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts b/superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts
index e20cecc0de..9d7b84799b 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/selectors.ts
@@ -226,7 +226,10 @@ export const selectNativeIndicatorsForChart = (
       )
       .map(nativeFilter => {
         const column = nativeFilter.targets[0]?.column?.name;
-        let value = dataMask[nativeFilter.id]?.filterState?.value ?? null;
+        let value =
+          dataMask[nativeFilter.id]?.filterState?.label ??
+          dataMask[nativeFilter.id]?.filterState?.value ??
+          null;
         if (!Array.isArray(value) && value !== null) {
           value = [value];
         }
@@ -252,7 +255,10 @@ export const selectNativeIndicatorsForChart = (
         ),
       )
       .map(chartConfig => {
-        let value = dataMask[chartConfig.id]?.filterState?.value ?? null;
+        let value =
+          dataMask[chartConfig.id]?.filterState?.label ??
+          dataMask[chartConfig.id]?.filterState?.value ??
+          null;
         if (!Array.isArray(value) && value !== null) {
           value = [value];
         }
diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
index 9c0f1f1dd3..d2896b997c 100644
--- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
@@ -38,6 +38,7 @@ import React, {
 import { Select } from 'src/common/components';
 import debounce from 'lodash/debounce';
 import { SLOW_DEBOUNCE } from 'src/constants';
+import { CheckOutlined, StopOutlined } from '@ant-design/icons';
 import { PluginFilterSelectProps, SelectValue } from './types';
 import { StyledSelect, Styles } from '../common';
 import { getDataRecordFormatter, getSelectExtraFormData } from '../../utils';
@@ -49,7 +50,7 @@ type DataMaskAction =
   | {
       type: 'filterState';
       extraFormData: ExtraFormData;
-      filterState: { value: SelectValue };
+      filterState: { value: SelectValue; label?: string };
     };
 
 function reducer(state: DataMask, action: DataMaskAction): DataMask {
@@ -135,6 +136,8 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
   const updateDataMask = (values: SelectValue) => {
     const emptyFilter =
       enableEmptyFilter && !inverseSelection && !values?.length;
+    const suffix =
+      inverseSelection && values?.length ? ` (${t('excluded')})` : '';
 
     dispatchDataMask({
       type: 'filterState',
@@ -146,6 +149,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
       ),
       filterState: {
         value: values,
+        label: `${(values || []).join(', ')}${suffix}`,
       },
     });
   };
@@ -260,6 +264,9 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
         ref={inputRef}
         loading={isRefreshing}
         maxTagCount={5}
+        menuItemSelectedIcon={
+          inverseSelection ? <StopOutlined /> : <CheckOutlined />
+        }
       >
         {sortedData.map(row => {
           const [value] = groupby.map(col => row[col]);