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 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 || '');
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue