This is an automated email from the ASF dual-hosted git repository.
diegopucci pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 19f840cde7 fix(Dashboard): DatePicker to not autoclose modal (#30702)
19f840cde7 is described below
commit 19f840cde7b4d529c9d9618034cb0bfcfc93a2eb
Author: Geido <[email protected]>
AuthorDate: Thu Oct 24 19:26:42 2024 +0300
fix(Dashboard): DatePicker to not autoclose modal (#30702)
---
.../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 {
