[superset] branch master updated: feat(native-filters): improve inverse selection indicators (#14873)

[villebro]

This is an automated email from the ASF dual-hosted git repository.

villebro pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new b72e5e0  feat(native-filters): improve inverse selection indicators 
(#14873)
b72e5e0 is described below

commit b72e5e0aae99788c2f840d33289d7b0c04409f3a
Author: Ville Brofeldt <33317356+ville...@users.noreply.github.com>
AuthorDate: Fri May 28 07:45:37 2021 +0300

    feat(native-filters): improve inverse selection indicators (#14873)
---
 .../src/dashboard/components/FiltersBadge/selectors.ts         | 10 ++++++++--
 .../src/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 e20cecc..9d7b847 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 9c0f1f1..d2896b9 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]);