From 66282c331363887c0da486bc68976a6c350e8645 Mon Sep 17 00:00:00 2001
From: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
Date: Mon, 31 May 2021 09:45:12 +0300
Subject: [PATCH] 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
---
 .../AdhocFilterEditPopoverSimpleTabContent/index.jsx   |  6 +++++-
 .../filters/components/Select/SelectFilterPlugin.tsx   | 10 +++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

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 be9b40258d0..23f6cf9e02c 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 @@ import AdhocFilter, {
   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 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
       labelText: comparator?.length > 0 && this.createSuggestionsPlaceholder(),
       autoFocus: focusComparator,
     };
+    const Icon =
+      operator === 'NOT IN' ? Icons.StopOutlined : Icons.CheckOutlined;
 
     return (
       <>
@@ -417,6 +420,7 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
             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 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
                 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 d2896b997c9..16e0df97207 100644
--- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
@@ -38,7 +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 Icons from 'src/components/Icons';
 import { PluginFilterSelectProps, SelectValue } from './types';
 import { StyledSelect, Styles } from '../common';
 import { getDataRecordFormatter, getSelectExtraFormData } from '../../utils';
@@ -244,6 +244,8 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
     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 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
         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 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
             suggestion => suggestion === currentSuggestionSearch,
           ) && (
             <Option value={currentSuggestionSearch}>
-              {currentSuggestionSearch}
+              {`${t('Create "%s"', currentSuggestionSearch)}`}
             </Option>
           )}
       </StyledSelect>