fix(explore): Enable selecting an option not included in suggestions (#13029)

superset-frontend/src/explore/components/OptionControls.tsx

@@ -18,8 +18,11 @@
  */
 import React, { useRef } from 'react';
 import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
-import { styled, useTheme } from '@superset-ui/core';
-import { ColumnOption } from '@superset-ui/chart-controls';
+import { styled, t, useTheme } from '@superset-ui/core';
+import {
+  ColumnOption,
+  InfoTooltipWithTrigger,
+} from '@superset-ui/chart-controls';
 import { Tooltip } from 'src/common/components/Tooltip';
 import Icon from 'src/components/Icon';
 import { savedMetricType } from 'src/explore/components/controls/MetricControl/types';
@@ -73,6 +76,10 @@ const CloseContainer = styled.div`
   cursor: pointer;
 `;
 
+const StyledInfoTooltipWithTrigger = styled(InfoTooltipWithTrigger)`
+  margin: 0 ${({ theme }) => theme.gridUnit}px;
+`;
+
 export const HeaderContainer = styled.div`
   display: flex;
   align-items: center;
@@ -138,6 +145,7 @@ export const OptionControlLabel = ({
   isFunction,
   type,
   index,
+  isExtra,
   ...props
 }: {
   label: string | React.ReactNode;
@@ -150,6 +158,7 @@ export const OptionControlLabel = ({
   isDraggable?: boolean;
   type: string;
   index: number;
+  isExtra?: boolean;
 }) => {
   const theme = useTheme();
   const ref = useRef<HTMLDivElement>(null);
@@ -236,6 +245,17 @@ export const OptionControlLabel = ({
         {isFunction && <Icon name="function" viewBox="0 0 16 11" />}
         {getLabelContent()}
       </Label>
+      {isExtra && (
+        <StyledInfoTooltipWithTrigger
+          icon="exclamation-triangle"
+          placement="top"
+          bsStyle="warning"
+          tooltip={t(`
+                This filter was inherited from the dashboard's context.
+                It won't be saved when saving the chart.
+              `)}
+        />
+      )}
       {isAdhoc && (
         <CaretContainer>
           <Icon name="caret-right" color={theme.colors.grayscale.light1} />

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent.jsx

@@ -95,10 +95,12 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
     this.refreshComparatorSuggestions = this.refreshComparatorSuggestions.bind(
       this,
     );
+    this.clearSuggestionSearch = this.clearSuggestionSearch.bind(this);
 
     this.state = {
       suggestions: [],
       abortActiveRequest: null,
+      currentSuggestionSearch: '',
     };
 
     this.selectProps = {
@@ -272,8 +274,13 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
     return <FilterDefinitionOption option={option} />;
   }
 
+  clearSuggestionSearch() {
+    this.setState({ currentSuggestionSearch: '' });
+  }
+
   render() {
     const { adhocFilter, options, datasource } = this.props;
+    const { currentSuggestionSearch } = this.state;
     let columns = options;
     const { subject, operator, comparator } = adhocFilter;
     const subjectSelectProps = {
@@ -379,12 +386,25 @@ export default class AdhocFilterEditPopoverSimpleTabContent extends React.Compon
               name="filter-value"
               {...comparatorSelectProps}
               getPopupContainer={triggerNode => triggerNode.parentNode}
+              onSearch={val => this.setState({ currentSuggestionSearch: val })}
+              onSelect={this.clearSuggestionSearch}
+              onBlur={this.clearSuggestionSearch}
             >
               {this.state.suggestions.map(suggestion => (
                 <Select.Option value={suggestion} key={suggestion}>
                   {suggestion}
                 </Select.Option>
               ))}
+
+              {/* enable selecting an option not included in suggestions */}
+              {currentSuggestionSearch &&
+                !this.state.suggestions.some(
+                  suggestion => suggestion === currentSuggestionSearch,
+                ) && (
+                  <Select.Option value={currentSuggestionSearch}>
+                    {currentSuggestionSearch}
+                  </Select.Option>
+                )}
             </SelectWithLabel>
           ) : (
             <Input

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption.jsx

@@ -69,6 +69,7 @@ const AdhocFilterOption = ({
       index={index}
       type={OPTION_TYPES.filter}
       isAdhoc
+      isExtra={adhocFilter.isExtra}
     />
   </AdhocFilterPopoverTrigger>
 );

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger.tsx

@@ -17,9 +17,6 @@
  * under the License.
  */
 import React from 'react';
-import { t } from '@superset-ui/core';
-import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
-
 import Popover from 'src/common/components/Popover';
 import columnType from 'src/explore/propTypes/columnType';
 import adhocMetricType from 'src/explore/components/controls/MetricControl/adhocMetricType';
@@ -85,30 +82,17 @@ class AdhocFilterPopoverTrigger extends React.PureComponent<
     );
 
     return (
-      <>
-        {adhocFilter.isExtra && (
-          <InfoTooltipWithTrigger
-            icon="exclamation-triangle"
-            placement="top"
-            className="m-r-5 text-muted"
-            tooltip={t(`
-                This filter was inherited from the dashboard's context.
-                It won't be saved when saving the chart.
-              `)}
-          />
-        )}
-        <Popover
-          placement="right"
-          trigger="click"
-          content={overlayContent}
-          defaultVisible={this.state.popoverVisible}
-          visible={this.state.popoverVisible}
-          onVisibleChange={this.togglePopover}
-          destroyTooltipOnHide={this.props.createNew}
-        >
-          {this.props.children}
-        </Popover>
-      </>
+      <Popover
+        placement="right"
+        trigger="click"
+        content={overlayContent}
+        defaultVisible={this.state.popoverVisible}
+        visible={this.state.popoverVisible}
+        onVisibleChange={this.togglePopover}
+        destroyTooltipOnHide={this.props.createNew}
+      >
+        {this.props.children}
+      </Popover>
     );
   }
 }