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