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 ? :
+ }
>
{sortedData.map(row => {
const [value] = groupby.map(col => row[col]);