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:
Geido 2021-07-30 09:44:33 +02:00 committed by GitHub
parent 3b9b2c97aa
commit c2e4290392
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 4 deletions

View File

@ -36,7 +36,7 @@ import {
import { getClientErrorObject } from 'src/utils/getClientErrorObject';
import Button from 'src/components/Button';
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 { Divider } from 'src/common/components';
import Icons from 'src/components/Icons';
@ -172,6 +172,7 @@ interface DateFilterControlProps {
onChange: (timeRange: string) => void;
value?: string;
endpoints?: TimeRangeEndpoints;
type?: Type;
}
export const DATE_FILTER_CONTROL_TEST_ID = 'date-filter-control';
@ -180,7 +181,7 @@ export const getDateFilterControlTestId = testWithId(
);
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 [show, setShow] = useState<boolean>(false);
@ -216,7 +217,11 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
guessedFrame === 'No filter'
) {
setActualTimeRange(value);
setTooltipTitle(actualRange || '');
setTooltipTitle(
type === ('error' as Type)
? t('Default value is required')
: actualRange || '',
);
} else {
setActualTimeRange(actualRange || '');
setTooltipTitle(value || '');

View File

@ -31,7 +31,8 @@ const ControlContainer = styled.div<{
validateStatus?: 'error' | 'warning' | 'info';
}>`
padding: 2px;
& > span {
& > span,
& > span:hover {
border: 2px solid transparent;
display: inline-block;
border: ${({ theme, validateStatus }) =>
@ -99,6 +100,7 @@ export default function TimeFilterPlugin(props: PluginFilterTimeProps) {
value={filterState.value || NO_TIME_RANGE}
name="time_range"
onChange={handleTimeRangeChange}
type={filterState.validateStatus}
/>
</ControlContainer>
</TimeFilterStyles>