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
apache · May 31, 2021 · 66282c3 · 66282c3
1 parent e43112c
commit 66282c3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/...xplore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.jsx b/...xplore/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
@@ -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>