pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
View File

@ -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 || '');

4
superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx
View File

@ -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>