iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(CustomFrame): Resolves issue #21731 where date range in explore throws runtime error (#21776)

This commit is contained in:
Eric Briscoe 2022-10-13 09:52:35 -07:00 committed by GitHub
parent e6c44e02cb
commit 2258fbf878
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 66 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.test.tsx
View File

@ -39,6 +39,12 @@ const store = mockStore({
common: { locale: 'en' },
});
// case when common.locale is not populated
const emptyStore = mockStore({});
// case when common.locale is populated with invalid locale
const invalidStore = mockStore({ common: { locale: 'invalid_locale' } });
test('renders with default props', () => {
render(
<Provider store={store}>
@ -53,6 +59,54 @@ test('renders with default props', () => {
expect(screen.getByRole('img', { name: 'calendar' })).toBeInTheDocument();
});
test('renders with empty store', () => {
render(
<Provider store={emptyStore}>
<CustomFrame onChange={jest.fn()} value={emptyValue} />
</Provider>,
);
expect(screen.getByText('Configure custom time range')).toBeInTheDocument();
expect(screen.getByText('Relative Date/Time')).toBeInTheDocument();
expect(screen.getByRole('spinbutton')).toBeInTheDocument();
expect(screen.getByText('Days Before')).toBeInTheDocument();
expect(screen.getByText('Specific Date/Time')).toBeInTheDocument();
expect(screen.getByRole('img', { name: 'calendar' })).toBeInTheDocument();
});
test('renders since and until with specific date/time with default locale', () => {
render(
<Provider store={emptyStore}>
<CustomFrame onChange={jest.fn()} value={specificValue} />
</Provider>,
);
expect(screen.getAllByText('Specific Date/Time').length).toBe(2);
expect(screen.getAllByRole('img', { name: 'calendar' }).length).toBe(2);
});
test('renders with invalid locale', () => {
render(
<Provider store={invalidStore}>
<CustomFrame onChange={jest.fn()} value={emptyValue} />
</Provider>,
);
expect(screen.getByText('Configure custom time range')).toBeInTheDocument();
expect(screen.getByText('Relative Date/Time')).toBeInTheDocument();
expect(screen.getByRole('spinbutton')).toBeInTheDocument();
expect(screen.getByText('Days Before')).toBeInTheDocument();
expect(screen.getByText('Specific Date/Time')).toBeInTheDocument();
expect(screen.getByRole('img', { name: 'calendar' })).toBeInTheDocument();
});
test('renders since and until with specific date/time with invalid locale', () => {
render(
<Provider store={invalidStore}>
<CustomFrame onChange={jest.fn()} value={specificValue} />
</Provider>,
);
expect(screen.getAllByText('Specific Date/Time').length).toBe(2);
expect(screen.getAllByRole('img', { name: 'calendar' }).length).toBe(2);
});
test('renders since and until with specific date/time', () => {
render(
<Provider store={store}>

18
superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx
View File

@ -110,9 +110,15 @@ export function CustomFrame(props: FrameComponentProps) {
}
}
const localFromFlaskBabel =
useSelector((state: ExplorePageState) => state.common.locale) || 'en';
const currentLocale = locales[LOCALE_MAPPING[localFromFlaskBabel]].DatePicker;
// check if there is a locale defined for explore
const localFromFlaskBabel = useSelector(
(state: ExplorePageState) => state?.common?.locale,
);
// An undefined datePickerLocale is acceptable if no match is found in the LOCALE_MAPPING[localFromFlaskBabel] lookup
// and will fall back to antd's default locale when the antd DataPicker's prop locale === undefined
// This also protects us from the case where state is populated with a locale that antd locales does not recognize
const datePickerLocale =
locales[LOCALE_MAPPING[localFromFlaskBabel]]?.DatePicker;
return (
<div data-test="custom-frame">
@ -141,7 +147,7 @@ export function CustomFrame(props: FrameComponentProps) {
onChange('sinceDatetime', datetime.format(MOMENT_FORMAT))
}
allowClear={false}
locale={currentLocale}
locale={datePickerLocale}
/>
</Row>
)}
@ -194,7 +200,7 @@ export function CustomFrame(props: FrameComponentProps) {
onChange('untilDatetime', datetime.format(MOMENT_FORMAT))
}
allowClear={false}
locale={currentLocale}
locale={datePickerLocale}
/>
</Row>
)}
@ -252,7 +258,7 @@ export function CustomFrame(props: FrameComponentProps) {
}
allowClear={false}
className="control-anchor-to-datetime"
locale={currentLocale}
locale={datePickerLocale}
/>
</Col>
)}