mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
fix(native-filters): Ensure that time range filter loses focus after closing modal (#22937)
This commit is contained in:
parent
02cd75be8d
commit
eaf53dbb27
@ -248,27 +248,28 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
|
|||||||
function onSave() {
|
function onSave() {
|
||||||
onChange(timeRangeValue);
|
onChange(timeRangeValue);
|
||||||
setShow(false);
|
setShow(false);
|
||||||
|
onClosePopover();
|
||||||
}
|
}
|
||||||
|
|
||||||
function onOpen() {
|
function onOpen() {
|
||||||
setTimeRangeValue(value);
|
setTimeRangeValue(value);
|
||||||
setFrame(guessedFrame);
|
setFrame(guessedFrame);
|
||||||
setShow(true);
|
setShow(true);
|
||||||
|
onOpenPopover();
|
||||||
}
|
}
|
||||||
|
|
||||||
function onHide() {
|
function onHide() {
|
||||||
setTimeRangeValue(value);
|
setTimeRangeValue(value);
|
||||||
setFrame(guessedFrame);
|
setFrame(guessedFrame);
|
||||||
setShow(false);
|
setShow(false);
|
||||||
|
onClosePopover();
|
||||||
}
|
}
|
||||||
|
|
||||||
const toggleOverlay = () => {
|
const toggleOverlay = () => {
|
||||||
if (show) {
|
if (show) {
|
||||||
onHide();
|
onHide();
|
||||||
onClosePopover();
|
|
||||||
} else {
|
} else {
|
||||||
onOpen();
|
onOpen();
|
||||||
onOpenPopover();
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -31,23 +31,25 @@ import { DATE_FILTER_TEST_KEY } from '../utils';
|
|||||||
|
|
||||||
const mockStore = configureStore([thunk]);
|
const mockStore = configureStore([thunk]);
|
||||||
|
|
||||||
|
const defaultProps = {
|
||||||
|
onChange: jest.fn(),
|
||||||
|
onClosePopover: jest.fn(),
|
||||||
|
onOpenPopover: jest.fn(),
|
||||||
|
};
|
||||||
|
|
||||||
function setup(
|
function setup(
|
||||||
props: Omit<DateFilterControlProps, 'name'>,
|
props: Omit<DateFilterControlProps, 'name'> = defaultProps,
|
||||||
store: any = mockStore({}),
|
store: any = mockStore({}),
|
||||||
) {
|
) {
|
||||||
return (
|
return (
|
||||||
<Provider store={store}>
|
<Provider store={store}>
|
||||||
<DateFilterLabel
|
<DateFilterLabel name="time_range" {...props} />
|
||||||
name="time_range"
|
|
||||||
onChange={props.onChange}
|
|
||||||
overlayStyle={props.overlayStyle}
|
|
||||||
/>
|
|
||||||
</Provider>
|
</Provider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
test('DateFilter with default props', () => {
|
test('DateFilter with default props', () => {
|
||||||
render(setup({ onChange: () => {} }));
|
render(setup());
|
||||||
// label
|
// label
|
||||||
expect(screen.getByText(NO_TIME_RANGE)).toBeInTheDocument();
|
expect(screen.getByText(NO_TIME_RANGE)).toBeInTheDocument();
|
||||||
|
|
||||||
@ -58,7 +60,7 @@ test('DateFilter with default props', () => {
|
|||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('DateFilter shoule be applied the overlayStyle props', () => {
|
test('DateFilter should be applied the overlayStyle props', () => {
|
||||||
render(setup({ onChange: () => {}, overlayStyle: 'Modal' }));
|
render(setup({ onChange: () => {}, overlayStyle: 'Modal' }));
|
||||||
// should be Modal as overlay
|
// should be Modal as overlay
|
||||||
userEvent.click(screen.getByText(NO_TIME_RANGE));
|
userEvent.click(screen.getByText(NO_TIME_RANGE));
|
||||||
@ -67,10 +69,10 @@ test('DateFilter shoule be applied the overlayStyle props', () => {
|
|||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('DateFilter shoule be applied the global config time_filter from the store', () => {
|
test('DateFilter should be applied the global config time_filter from the store', () => {
|
||||||
render(
|
render(
|
||||||
setup(
|
setup(
|
||||||
{ onChange: () => {} },
|
defaultProps,
|
||||||
mockStore({
|
mockStore({
|
||||||
common: { conf: { DEFAULT_TIME_FILTER: 'Last week' } },
|
common: { conf: { DEFAULT_TIME_FILTER: 'Last week' } },
|
||||||
}),
|
}),
|
||||||
@ -84,3 +86,23 @@ test('DateFilter shoule be applied the global config time_filter from the store'
|
|||||||
screen.getByTestId(DATE_FILTER_TEST_KEY.commonFrame),
|
screen.getByTestId(DATE_FILTER_TEST_KEY.commonFrame),
|
||||||
).toBeInTheDocument();
|
).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('Open and close popover', () => {
|
||||||
|
render(setup());
|
||||||
|
|
||||||
|
// click "Cancel"
|
||||||
|
userEvent.click(screen.getByText(NO_TIME_RANGE));
|
||||||
|
expect(defaultProps.onOpenPopover).toHaveBeenCalled();
|
||||||
|
expect(screen.getByText('Edit time range')).toBeInTheDocument();
|
||||||
|
userEvent.click(screen.getByText('CANCEL'));
|
||||||
|
expect(defaultProps.onClosePopover).toHaveBeenCalled();
|
||||||
|
expect(screen.queryByText('Edit time range')).not.toBeInTheDocument();
|
||||||
|
|
||||||
|
// click "Apply"
|
||||||
|
userEvent.click(screen.getByText(NO_TIME_RANGE));
|
||||||
|
expect(defaultProps.onOpenPopover).toHaveBeenCalled();
|
||||||
|
expect(screen.getByText('Edit time range')).toBeInTheDocument();
|
||||||
|
userEvent.click(screen.getByText('APPLY'));
|
||||||
|
expect(defaultProps.onClosePopover).toHaveBeenCalled();
|
||||||
|
expect(screen.queryByText('Edit time range')).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
@ -97,7 +97,11 @@ export default function TimeFilterPlugin(props: PluginFilterTimeProps) {
|
|||||||
name="time_range"
|
name="time_range"
|
||||||
onChange={handleTimeRangeChange}
|
onChange={handleTimeRangeChange}
|
||||||
onOpenPopover={() => setFilterActive(true)}
|
onOpenPopover={() => setFilterActive(true)}
|
||||||
onClosePopover={() => setFilterActive(false)}
|
onClosePopover={() => {
|
||||||
|
setFilterActive(false);
|
||||||
|
unsetHoveredFilter();
|
||||||
|
unsetFocusedFilter();
|
||||||
|
}}
|
||||||
isOverflowingFilterBar={isOverflowingFilterBar}
|
isOverflowingFilterBar={isOverflowingFilterBar}
|
||||||
/>
|
/>
|
||||||
</ControlContainer>
|
</ControlContainer>
|
||||||
|
Loading…
Reference in New Issue
Block a user