mirror of https://github.com/apache/superset.git
fix(dashboard): Add required message in the tooltip for the time range filter (#15941)
* Add required msg in tooltip * Fix lint * Keep red border on hover
This commit is contained in:
parent
3b9b2c97aa
commit
c2e4290392
|
@ -36,7 +36,7 @@ import {
|
||||||
import { getClientErrorObject } from 'src/utils/getClientErrorObject';
|
import { getClientErrorObject } from 'src/utils/getClientErrorObject';
|
||||||
import Button from 'src/components/Button';
|
import Button from 'src/components/Button';
|
||||||
import ControlHeader from 'src/explore/components/ControlHeader';
|
import ControlHeader from 'src/explore/components/ControlHeader';
|
||||||
import Label from 'src/components/Label';
|
import Label, { Type } from 'src/components/Label';
|
||||||
import Popover from 'src/components/Popover';
|
import Popover from 'src/components/Popover';
|
||||||
import { Divider } from 'src/common/components';
|
import { Divider } from 'src/common/components';
|
||||||
import Icons from 'src/components/Icons';
|
import Icons from 'src/components/Icons';
|
||||||
|
@ -172,6 +172,7 @@ interface DateFilterControlProps {
|
||||||
onChange: (timeRange: string) => void;
|
onChange: (timeRange: string) => void;
|
||||||
value?: string;
|
value?: string;
|
||||||
endpoints?: TimeRangeEndpoints;
|
endpoints?: TimeRangeEndpoints;
|
||||||
|
type?: Type;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const DATE_FILTER_CONTROL_TEST_ID = 'date-filter-control';
|
export const DATE_FILTER_CONTROL_TEST_ID = 'date-filter-control';
|
||||||
|
@ -180,7 +181,7 @@ export const getDateFilterControlTestId = testWithId(
|
||||||
);
|
);
|
||||||
|
|
||||||
export default function DateFilterLabel(props: DateFilterControlProps) {
|
export default function DateFilterLabel(props: DateFilterControlProps) {
|
||||||
const { value = DEFAULT_TIME_RANGE, endpoints, onChange } = props;
|
const { value = DEFAULT_TIME_RANGE, endpoints, onChange, type } = props;
|
||||||
const [actualTimeRange, setActualTimeRange] = useState<string>(value);
|
const [actualTimeRange, setActualTimeRange] = useState<string>(value);
|
||||||
|
|
||||||
const [show, setShow] = useState<boolean>(false);
|
const [show, setShow] = useState<boolean>(false);
|
||||||
|
@ -216,7 +217,11 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
|
||||||
guessedFrame === 'No filter'
|
guessedFrame === 'No filter'
|
||||||
) {
|
) {
|
||||||
setActualTimeRange(value);
|
setActualTimeRange(value);
|
||||||
setTooltipTitle(actualRange || '');
|
setTooltipTitle(
|
||||||
|
type === ('error' as Type)
|
||||||
|
? t('Default value is required')
|
||||||
|
: actualRange || '',
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
setActualTimeRange(actualRange || '');
|
setActualTimeRange(actualRange || '');
|
||||||
setTooltipTitle(value || '');
|
setTooltipTitle(value || '');
|
||||||
|
|
|
@ -31,7 +31,8 @@ const ControlContainer = styled.div<{
|
||||||
validateStatus?: 'error' | 'warning' | 'info';
|
validateStatus?: 'error' | 'warning' | 'info';
|
||||||
}>`
|
}>`
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
& > span {
|
& > span,
|
||||||
|
& > span:hover {
|
||||||
border: 2px solid transparent;
|
border: 2px solid transparent;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: ${({ theme, validateStatus }) =>
|
border: ${({ theme, validateStatus }) =>
|
||||||
|
@ -99,6 +100,7 @@ export default function TimeFilterPlugin(props: PluginFilterTimeProps) {
|
||||||
value={filterState.value || NO_TIME_RANGE}
|
value={filterState.value || NO_TIME_RANGE}
|
||||||
name="time_range"
|
name="time_range"
|
||||||
onChange={handleTimeRangeChange}
|
onChange={handleTimeRangeChange}
|
||||||
|
type={filterState.validateStatus}
|
||||||
/>
|
/>
|
||||||
</ControlContainer>
|
</ControlContainer>
|
||||||
</TimeFilterStyles>
|
</TimeFilterStyles>
|
||||||
|
|
Loading…
Reference in New Issue