chore: customize adhoc filter icon and fix creatable label (#14896)
* chore: customize adhoc filter icon and fix creatable label
* use common icon component
* simplify code
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.jsx
index be9b402..23f6cf9 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.jsx
@@ -39,6 +39,7 @@
CLAUSES,
} from 'src/explore/components/controls/FilterControl/AdhocFilter';
import columnType from 'src/explore/components/controls/FilterControl/columnType';
+import Icons from 'src/components/Icons';
const SelectWithLabel = styled(Select)`
.ant-select-selector {
@@ -368,6 +369,8 @@
labelText: comparator?.length > 0 && this.createSuggestionsPlaceholder(),
autoFocus: focusComparator,
};
+ const Icon =
+ operator === 'NOT IN' ? Icons.StopOutlined : Icons.CheckOutlined;
return (
<>
@@ -417,6 +420,7 @@
onSearch={val => this.setState({ currentSuggestionSearch: val })}
onSelect={this.clearSuggestionSearch}
onBlur={this.clearSuggestionSearch}
+ menuItemSelectedIcon={<Icon iconSize="m" />}
>
{this.state.suggestions.map(suggestion => (
<Select.Option value={suggestion} key={suggestion}>
@@ -430,7 +434,7 @@
suggestion => suggestion === currentSuggestionSearch,
) && (
<Select.Option value={currentSuggestionSearch}>
- {currentSuggestionSearch}
+ {`${t('Create "%s"', currentSuggestionSearch)}`}
</Select.Option>
)}
</SelectWithLabel>
diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
index d2896b9..16e0df9 100644
--- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
@@ -38,7 +38,7 @@
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 Icons from 'src/components/Icons';
import { PluginFilterSelectProps, SelectValue } from './types';
import { StyledSelect, Styles } from '../common';
import { getDataRecordFormatter, getSelectExtraFormData } from '../../utils';
@@ -244,6 +244,8 @@
data.length === 0
? t('No data')
: tn('%s option', '%s options', data.length, data.length);
+ const Icon = inverseSelection ? Icons.StopOutlined : Icons.CheckOutlined;
+
return (
<Styles height={height} width={width}>
<StyledSelect
@@ -264,9 +266,7 @@
ref={inputRef}
loading={isRefreshing}
maxTagCount={5}
- menuItemSelectedIcon={
- inverseSelection ? <StopOutlined /> : <CheckOutlined />
- }
+ menuItemSelectedIcon={<Icon iconSize="m" />}
>
{sortedData.map(row => {
const [value] = groupby.map(col => row[col]);
@@ -282,7 +282,7 @@
suggestion => suggestion === currentSuggestionSearch,
) && (
<Option value={currentSuggestionSearch}>
- {currentSuggestionSearch}
+ {`${t('Create "%s"', currentSuggestionSearch)}`}
</Option>
)}
</StyledSelect>
