This is an automated email from the ASF dual-hosted git repository. diegopucci pushed a commit to branch geido/fix/temp-filters-horizontal-bar in repository https://gitbox.apache.org/repos/asf/superset.git
commit c6bdaddd2d88d0c88f979b32e5015d241556ebf3 Author: Diego Pucci <[email protected]> AuthorDate: Thu Oct 24 18:38:35 2024 +0300 fix(Dashboard): DatePicker to not autoclose modal --- .../controls/DateFilterControl/DateFilterLabel.tsx | 6 +- .../DateFilterControl/components/CustomFrame.tsx | 15 ++++ .../DateFilterControl/tests/CustomFrame.test.tsx | 97 ++++++++++++++++++++++ .../components/controls/DateFilterControl/types.ts | 1 + 4 files changed, 118 insertions(+), 1 deletion(-) diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx index e5113d122c..ebdd716b91 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx @@ -307,7 +307,11 @@ export default function DateFilterLabel(props: DateFilterControlProps) { <AdvancedFrame value={timeRangeValue} onChange={setTimeRangeValue} /> )} {frame === 'Custom' && ( - <CustomFrame value={timeRangeValue} onChange={setTimeRangeValue} /> + <CustomFrame + value={timeRangeValue} + onChange={setTimeRangeValue} + isOverflowingFilterBar={isOverflowingFilterBar} + /> )} {frame === 'No filter' && <div data-test={DateFilterTestKey.NoFilter} />} <Divider /> diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx index f046b7f030..7a880a8295 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CustomFrame.tsx @@ -166,6 +166,11 @@ export function CustomFrame(props: FrameComponentProps) { } allowClear={false} locale={datePickerLocale} + getPopupContainer={triggerNode => + props.isOverflowingFilterBar + ? (triggerNode.parentNode as HTMLElement) + : document.body + } /> </Row> )} @@ -219,6 +224,11 @@ export function CustomFrame(props: FrameComponentProps) { } allowClear={false} locale={datePickerLocale} + getPopupContainer={triggerNode => + props.isOverflowingFilterBar + ? (triggerNode.parentNode as HTMLElement) + : document.body + } /> </Row> )} @@ -277,6 +287,11 @@ export function CustomFrame(props: FrameComponentProps) { allowClear={false} className="control-anchor-to-datetime" locale={datePickerLocale} + getPopupContainer={triggerNode => + props.isOverflowingFilterBar + ? (triggerNode.parentNode as HTMLElement) + : document.body + } /> </Col> )} diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/tests/CustomFrame.test.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/tests/CustomFrame.test.tsx index f566d4f0fe..e5ed701f32 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/tests/CustomFrame.test.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/tests/CustomFrame.test.tsx @@ -28,7 +28,9 @@ import { import userEvent from '@testing-library/user-event'; import { CustomFrame } from '../components'; +const TODAY = '2024-06-03'; jest.useFakeTimers(); +jest.setSystemTime(new Date(TODAY).getTime()); const emptyValue = ''; const nowValue = 'now : now'; @@ -280,3 +282,98 @@ test('should translate Date Picker', async () => { expect(screen.getByText('sa')).toBeInTheDocument(); expect(screen.getByText('di')).toBeInTheDocument(); }); + +test('calls onChange when START Specific Date/Time is selected', async () => { + const onChange = jest.fn(); + render( + <Provider store={store}> + <CustomFrame + onChange={onChange} + value={specificValue} + isOverflowingFilterBar + /> + </Provider>, + ); + + await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading')); + + const specificDateTimeOptions = screen.getAllByText('Specific Date/Time'); + expect(specificDateTimeOptions.length).toBe(2); + + const calendarIcons = screen.getAllByRole('img', { name: 'calendar' }); + userEvent.click(calendarIcons[0]); + + const randomDate = screen.getByTitle('2021-03-11'); + userEvent.click(randomDate); + + const okButton = screen.getByText('Ok'); + userEvent.click(okButton); + + expect(onChange).toHaveBeenCalled(); +}); + +test('calls onChange when END Specific Date/Time is selected', async () => { + const onChange = jest.fn(); + render( + <Provider store={store}> + <CustomFrame + onChange={onChange} + value={specificValue} + isOverflowingFilterBar + /> + </Provider>, + ); + + await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading')); + + const specificDateTimeOptions = screen.getAllByText('Specific Date/Time'); + expect(specificDateTimeOptions.length).toBe(2); + + const calendarIcons = screen.getAllByRole('img', { name: 'calendar' }); + userEvent.click(calendarIcons[1]); + + const randomDate = screen.getByTitle('2021-03-28'); + userEvent.click(randomDate); + + const okButton = screen.getByText('Ok'); + userEvent.click(okButton); + + expect(onChange).toHaveBeenCalled(); +}); + +test('calls onChange when a date is picked from anchor mode date picker', async () => { + const onChange = jest.fn(); + render( + <Provider store={store}> + <CustomFrame + onChange={onChange} + value={relativeTodayValue} + isOverflowingFilterBar + /> + </Provider>, + ); + + await waitForElementToBeRemoved(() => screen.queryByLabelText('Loading')); + + const relativeDateTimeOptions = screen.getAllByText('Relative Date/Time'); + expect(relativeDateTimeOptions.length).toBe(2); + + await waitFor(() => + expect(screen.getByText('Anchor to')).toBeInTheDocument(), + ); + + const dateTimeRadio = screen.getByRole('radio', { name: 'Date/Time' }); + + expect(dateTimeRadio).toBeChecked(); + + const calendarIcon = screen.getByRole('img', { name: 'calendar' }); + userEvent.click(calendarIcon); + + const randomDate = screen.getByTitle('2024-06-05'); + userEvent.click(randomDate); + + const okButton = screen.getByText('Ok'); + userEvent.click(okButton); + + expect(onChange).toHaveBeenCalled(); +}); diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/types.ts b/superset-frontend/src/explore/components/controls/DateFilterControl/types.ts index 7062b48580..0d0fbb9724 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/types.ts +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/types.ts @@ -101,6 +101,7 @@ export type CurrentRangeType = export type FrameComponentProps = { onChange: (timeRange: string) => void; value: string; + isOverflowingFilterBar?: boolean; }; export interface DateFilterControlProps {
