diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx index 5bf3d8f6898b..fc440a25bde0 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx @@ -37,6 +37,7 @@ import Popover from 'src/common/components/Popover'; import { Divider } from 'src/common/components'; import Icon from 'src/components/Icon'; import { Select } from 'src/components/Select'; +import { Tooltip } from 'src/common/components/Tooltip'; import { SelectOptionType, FrameType } from './types'; import { COMMON_RANGE_VALUES_SET, @@ -181,27 +182,41 @@ export default function DateFilterControl(props: DateFilterLabelProps) { const [timeRangeValue, setTimeRangeValue] = useState(value); const [validTimeRange, setValidTimeRange] = useState(false); const [evalResponse, setEvalResponse] = useState(value); + const [tooltipTitle, setTooltipTitle] = useState(value); useEffect(() => { - const valueToLower = value.toLowerCase(); - if ( - valueToLower.startsWith('last') || - valueToLower.startsWith('next') || - valueToLower.startsWith('previous') - ) { - setActualTimeRange(value); - setValidTimeRange(true); - } else { - fetchTimeRange(value, endpoints).then(({ value, error }) => { - if (error) { - setEvalResponse(error || ''); - setValidTimeRange(false); + fetchTimeRange(value, endpoints).then(({ value: actualRange, error }) => { + if (error) { + setEvalResponse(error || ''); + setValidTimeRange(false); + setTooltipTitle(value || ''); + } else { + /* + HRT == human readable text + ADR == actual datetime range + +--------------+------+----------+--------+----------+-----------+ + | | Last | Previous | Custom | Advanced | No Filter | + +--------------+------+----------+--------+----------+-----------+ + | control pill | HRT | HRT | ADR | ADR | ADR | + +--------------+------+----------+--------+----------+-----------+ + | tooltip | ADR | ADR | HRT | HRT | HRT | + +--------------+------+----------+--------+----------+-----------+ + */ + const valueToLower = value.toLowerCase(); + if ( + valueToLower.startsWith('last') || + valueToLower.startsWith('next') || + valueToLower.startsWith('previous') + ) { + setActualTimeRange(value); + setTooltipTitle(actualRange || ''); } else { - setActualTimeRange(value || ''); - setValidTimeRange(true); + setActualTimeRange(actualRange || ''); + setTooltipTitle(value || ''); } - }); - } + setValidTimeRange(true); + } + }); }, [value]); useEffect(() => { @@ -327,13 +342,15 @@ export default function DateFilterControl(props: DateFilterLabelProps) { onVisibleChange={togglePopover} overlayStyle={overlayStyle} > - + + + );