mirror of
https://github.com/apache/superset.git
synced 2024-09-16 02:29:39 -04:00
chore: Select component refactoring - DateFilterControl - Iteration 5 (#15571)
* Transition to Antd for DateFilterLabel * Enhance styles * Fix test * Update superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.test.tsx Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com> Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
This commit is contained in:
parent
4e79ffd471
commit
5cc4f3c4b9
@ -40,13 +40,13 @@ import Label 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';
|
||||||
import { Select } from 'src/components/Select';
|
import { Select } from 'src/components';
|
||||||
import { Tooltip } from 'src/components/Tooltip';
|
import { Tooltip } from 'src/components/Tooltip';
|
||||||
import { DEFAULT_TIME_RANGE } from 'src/explore/constants';
|
import { DEFAULT_TIME_RANGE } from 'src/explore/constants';
|
||||||
import { useDebouncedEffect } from 'src/explore/exploreUtils';
|
import { useDebouncedEffect } from 'src/explore/exploreUtils';
|
||||||
import { SLOW_DEBOUNCE } from 'src/constants';
|
import { SLOW_DEBOUNCE } from 'src/constants';
|
||||||
import { testWithId } from 'src/utils/testUtils';
|
import { testWithId } from 'src/utils/testUtils';
|
||||||
import { SelectOptionType, FrameType } from './types';
|
import { FrameType } from './types';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
CommonFrame,
|
CommonFrame,
|
||||||
@ -95,6 +95,9 @@ const fetchTimeRange = async (
|
|||||||
};
|
};
|
||||||
|
|
||||||
const StyledPopover = styled(Popover)``;
|
const StyledPopover = styled(Popover)``;
|
||||||
|
const StyledRangeType = styled(Select)`
|
||||||
|
width: 272px;
|
||||||
|
`;
|
||||||
|
|
||||||
const ContentStyleWrapper = styled.div`
|
const ContentStyleWrapper = styled.div`
|
||||||
.ant-row {
|
.ant-row {
|
||||||
@ -105,10 +108,6 @@ const ContentStyleWrapper = styled.div`
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.frame-dropdown {
|
|
||||||
width: 272px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-picker {
|
.ant-picker {
|
||||||
padding: 4px 17px 4px;
|
padding: 4px 17px 4px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
@ -274,23 +273,23 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
function onChangeFrame(option: SelectOptionType) {
|
function onChangeFrame(value: string) {
|
||||||
if (option.value === 'No filter') {
|
if (value === 'No filter') {
|
||||||
setTimeRangeValue('No filter');
|
setTimeRangeValue('No filter');
|
||||||
}
|
}
|
||||||
setFrame(option.value as FrameType);
|
setFrame(value as FrameType);
|
||||||
}
|
}
|
||||||
|
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
|
||||||
const overlayConetent = (
|
const overlayContent = (
|
||||||
<ContentStyleWrapper>
|
<ContentStyleWrapper>
|
||||||
<div className="control-label">{t('RANGE TYPE')}</div>
|
<div className="control-label">{t('RANGE TYPE')}</div>
|
||||||
<Select
|
<StyledRangeType
|
||||||
|
ariaLabel={t('RANGE TYPE')}
|
||||||
options={FRAME_OPTIONS}
|
options={FRAME_OPTIONS}
|
||||||
value={FRAME_OPTIONS.filter(({ value }) => value === frame)}
|
value={frame}
|
||||||
onChange={onChangeFrame}
|
onChange={onChangeFrame}
|
||||||
className="frame-dropdown"
|
|
||||||
/>
|
/>
|
||||||
{frame !== 'No filter' && <Divider />}
|
{frame !== 'No filter' && <Divider />}
|
||||||
{frame === 'Common' && (
|
{frame === 'Common' && (
|
||||||
@ -359,7 +358,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
|
|||||||
<StyledPopover
|
<StyledPopover
|
||||||
placement="right"
|
placement="right"
|
||||||
trigger="click"
|
trigger="click"
|
||||||
content={overlayConetent}
|
content={overlayContent}
|
||||||
title={title}
|
title={title}
|
||||||
defaultVisible={show}
|
defaultVisible={show}
|
||||||
visible={show}
|
visible={show}
|
||||||
|
@ -96,10 +96,10 @@ test('triggers onChange when the value changes', () => {
|
|||||||
test('triggers onChange when the mode changes', () => {
|
test('triggers onChange when the mode changes', () => {
|
||||||
const onChange = jest.fn();
|
const onChange = jest.fn();
|
||||||
render(<CustomFrame onChange={onChange} value={todayNowValue} />);
|
render(<CustomFrame onChange={onChange} value={todayNowValue} />);
|
||||||
userEvent.click(screen.getByText('Midnight'));
|
userEvent.click(screen.getByTitle('Midnight'));
|
||||||
userEvent.click(screen.getByText('Relative Date/Time'));
|
userEvent.click(screen.getByTitle('Relative Date/Time'));
|
||||||
userEvent.click(screen.getByText('Now'));
|
userEvent.click(screen.getAllByTitle('Now')[1]);
|
||||||
userEvent.click(screen.getByText('Specific Date/Time'));
|
userEvent.click(screen.getAllByTitle('Specific Date/Time')[1]);
|
||||||
expect(onChange).toHaveBeenCalledTimes(2);
|
expect(onChange).toHaveBeenCalledTimes(2);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -23,7 +23,7 @@ import { isInteger } from 'lodash';
|
|||||||
import { Col, InputNumber, Row } from 'src/common/components';
|
import { Col, InputNumber, Row } from 'src/common/components';
|
||||||
import { DatePicker } from 'src/components/DatePicker';
|
import { DatePicker } from 'src/components/DatePicker';
|
||||||
import { Radio } from 'src/components/Radio';
|
import { Radio } from 'src/components/Radio';
|
||||||
import { Select } from 'src/components/Select';
|
import { Select } from 'src/components';
|
||||||
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
|
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
|
||||||
import {
|
import {
|
||||||
SINCE_GRAIN_OPTIONS,
|
SINCE_GRAIN_OPTIONS,
|
||||||
@ -38,7 +38,6 @@ import {
|
|||||||
} from 'src/explore/components/controls/DateFilterControl/utils';
|
} from 'src/explore/components/controls/DateFilterControl/utils';
|
||||||
import {
|
import {
|
||||||
CustomRangeKey,
|
CustomRangeKey,
|
||||||
SelectOptionType,
|
|
||||||
FrameComponentProps,
|
FrameComponentProps,
|
||||||
} from 'src/explore/components/controls/DateFilterControl/types';
|
} from 'src/explore/components/controls/DateFilterControl/types';
|
||||||
|
|
||||||
@ -118,13 +117,10 @@ export function CustomFrame(props: FrameComponentProps) {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Select
|
<Select
|
||||||
|
ariaLabel={t('START (INCLUSIVE)')}
|
||||||
options={SINCE_MODE_OPTIONS}
|
options={SINCE_MODE_OPTIONS}
|
||||||
value={SINCE_MODE_OPTIONS.filter(
|
value={sinceMode}
|
||||||
option => option.value === sinceMode,
|
onChange={(value: string) => onChange('sinceMode', value)}
|
||||||
)}
|
|
||||||
onChange={(option: SelectOptionType) =>
|
|
||||||
onChange('sinceMode', option.value)
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
{sinceMode === 'specific' && (
|
{sinceMode === 'specific' && (
|
||||||
<Row>
|
<Row>
|
||||||
@ -155,13 +151,10 @@ export function CustomFrame(props: FrameComponentProps) {
|
|||||||
</Col>
|
</Col>
|
||||||
<Col span={13}>
|
<Col span={13}>
|
||||||
<Select
|
<Select
|
||||||
|
ariaLabel={t('Relative period')}
|
||||||
options={SINCE_GRAIN_OPTIONS}
|
options={SINCE_GRAIN_OPTIONS}
|
||||||
value={SINCE_GRAIN_OPTIONS.filter(
|
value={sinceGrain}
|
||||||
option => option.value === sinceGrain,
|
onChange={(value: string) => onChange('sinceGrain', value)}
|
||||||
)}
|
|
||||||
onChange={(option: SelectOptionType) =>
|
|
||||||
onChange('sinceGrain', option.value)
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
@ -176,13 +169,10 @@ export function CustomFrame(props: FrameComponentProps) {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Select
|
<Select
|
||||||
|
ariaLabel={t('END (EXCLUSIVE)')}
|
||||||
options={UNTIL_MODE_OPTIONS}
|
options={UNTIL_MODE_OPTIONS}
|
||||||
value={UNTIL_MODE_OPTIONS.filter(
|
value={untilMode}
|
||||||
option => option.value === untilMode,
|
onChange={(value: string) => onChange('untilMode', value)}
|
||||||
)}
|
|
||||||
onChange={(option: SelectOptionType) =>
|
|
||||||
onChange('untilMode', option.value)
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
{untilMode === 'specific' && (
|
{untilMode === 'specific' && (
|
||||||
<Row>
|
<Row>
|
||||||
@ -212,13 +202,10 @@ export function CustomFrame(props: FrameComponentProps) {
|
|||||||
</Col>
|
</Col>
|
||||||
<Col span={13}>
|
<Col span={13}>
|
||||||
<Select
|
<Select
|
||||||
|
ariaLabel={t('Relative period')}
|
||||||
options={UNTIL_GRAIN_OPTIONS}
|
options={UNTIL_GRAIN_OPTIONS}
|
||||||
value={UNTIL_GRAIN_OPTIONS.filter(
|
value={untilGrain}
|
||||||
option => option.value === untilGrain,
|
onChange={(value: string) => onChange('untilGrain', value)}
|
||||||
)}
|
|
||||||
onChange={(option: SelectOptionType) =>
|
|
||||||
onChange('untilGrain', option.value)
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
Loading…
Reference in New Issue
Block a user