From 87c6fefed0b7e0105e629f17ff266f57d9482ac9 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Tue, 9 Feb 2021 12:12:08 +0100 Subject: [PATCH 1/3] Fix warning tooltip in filters --- .../src/explore/components/OptionControls.tsx | 21 +++++++++- .../FilterControl/AdhocFilterOption.jsx | 1 + .../AdhocFilterPopoverTrigger.tsx | 38 ++++++------------- 3 files changed, 31 insertions(+), 29 deletions(-) diff --git a/superset-frontend/src/explore/components/OptionControls.tsx b/superset-frontend/src/explore/components/OptionControls.tsx index 0a1d5633f69da..25e87f8627593 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'; @@ -138,6 +141,7 @@ export const OptionControlLabel = ({ isFunction, type, index, + isExtra, ...props }: { label: string | React.ReactNode; @@ -150,6 +154,7 @@ export const OptionControlLabel = ({ isDraggable?: boolean; type: string; index: number; + isExtra?: boolean; }) => { const theme = useTheme(); const ref = useRef(null); @@ -236,6 +241,18 @@ export const OptionControlLabel = ({ {isFunction && } {getLabelContent()} + {isExtra && ( + + )} {isAdhoc && ( diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption.jsx index bdf300e8016f4..310c893f90bfc 100644 --- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption.jsx +++ b/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} /> ); diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger.tsx index ceab93b9c4da0..4cd8dbd210361 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} + ); } } From 02db645d301fe11e80c8403d5c24c95f70d15e8e Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Tue, 9 Feb 2021 12:49:32 +0100 Subject: [PATCH 2/3] Enable selecting an option not included in suggestions --- ...AdhocFilterEditPopoverSimpleTabContent.jsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent.jsx index 26f57663784a0..05946588f662f 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} + + )} ) : ( Date: Tue, 9 Feb 2021 15:28:43 +0100 Subject: [PATCH 3/3] Replace bootstrap class with styled component and theme variable --- .../src/explore/components/OptionControls.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/superset-frontend/src/explore/components/OptionControls.tsx b/superset-frontend/src/explore/components/OptionControls.tsx index 25e87f8627593..5817e1566946b 100644 --- a/superset-frontend/src/explore/components/OptionControls.tsx +++ b/superset-frontend/src/explore/components/OptionControls.tsx @@ -76,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; @@ -242,10 +246,9 @@ export const OptionControlLabel = ({ {getLabelContent()} {isExtra && ( -