diff --git a/superset-frontend/src/explore/components/OptionControls.tsx b/superset-frontend/src/explore/components/OptionControls.tsx index 0a1d5633f6..5817e15669 100644 --- a/superset-frontend/src/explore/components/OptionControls.tsx +++ b/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(null); @@ -236,6 +245,17 @@ export const OptionControlLabel = ({ {isFunction && } {getLabelContent()} + {isExtra && ( + + )} {isAdhoc && ( diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent.jsx index 26f5766378..05946588f6 100644 --- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent.jsx +++ b/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 ; } + 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 => ( {suggestion} ))} + + {/* enable selecting an option not included in suggestions */} + {currentSuggestionSearch && + !this.state.suggestions.some( + suggestion => suggestion === currentSuggestionSearch, + ) && ( + + {currentSuggestionSearch} + + )} ) : ( ); diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger.tsx index ceab93b9c4..4cd8dbd210 100644 --- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger.tsx +++ b/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 && ( - - )} - - {this.props.children} - - + + {this.props.children} + ); } }