You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ms...@apache.org on 2025/09/26 13:44:13 UTC
(superset) branch revert-35292-msyavuz/fix/remove-datepicker-modal created (now 07af6c7880)
This is an automated email from the ASF dual-hosted git repository.
msyavuz pushed a change to branch revert-35292-msyavuz/fix/remove-datepicker-modal
in repository https://gitbox.apache.org/repos/asf/superset.git
at 07af6c7880 Revert "fix(DateFilterControl): remove modal overlay style to fix z-index iss…"
This branch includes the following new commits:
new 07af6c7880 Revert "fix(DateFilterControl): remove modal overlay style to fix z-index iss…"
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
(superset) 01/01: Revert "fix(DateFilterControl): remove modal overlay style to fix z-index iss…"
Posted by ms...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
msyavuz pushed a commit to branch revert-35292-msyavuz/fix/remove-datepicker-modal
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 07af6c7880b1cc1a84b43f5eadffeff20f47c472
Author: Mehmet Salih Yavuz <sa...@proton.me>
AuthorDate: Fri Sep 26 16:44:04 2025 +0300
Revert "fix(DateFilterControl): remove modal overlay style to fix z-index iss…"
This reverts commit 027b25e6b807378c9d6167d11f2190029bbb80d4.
---
.../controls/DateFilterControl/DateFilterLabel.tsx | 41 +++++++++++++++++++++-
.../tests/DateFilterLabel.test.tsx | 9 +++++
.../components/controls/DateFilterControl/types.ts | 1 +
.../utils/useDatePickerInAdhocFilter.tsx | 1 +
4 files changed, 51 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 9229c42453..e152df43f0 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
@@ -31,6 +31,7 @@ import {
Button,
Constants,
Divider,
+ Modal,
Tooltip,
Select,
} from '@superset-ui/core/components';
@@ -38,6 +39,7 @@ import ControlHeader from 'src/explore/components/ControlHeader';
import { Icons } from '@superset-ui/core/components/Icons';
import { useDebouncedEffect } from 'src/explore/exploreUtils';
import { noOp } from 'src/utils/common';
+import { ModalTitleWithIcon } from 'src/components/ModalTitleWithIcon';
import ControlPopover from '../ControlPopover/ControlPopover';
import { DateFilterControlProps, FrameType } from './types';
@@ -144,6 +146,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
onChange,
onOpenPopover = noOp,
onClosePopover = noOp,
+ overlayStyle = 'Popover',
isOverflowingFilterBar = false,
} = props;
const defaultTimeFilter = useDefaultTimeFilter();
@@ -381,10 +384,46 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
</ControlPopover>
);
+ const modalContent = (
+ <>
+ <Tooltip placement="top" title={tooltipTitle}>
+ <DateLabel
+ name={name}
+ aria-labelledby={`filter-name-${props.name}`}
+ aria-describedby={`date-label-${props.name}`}
+ onClick={toggleOverlay}
+ label={actualTimeRange}
+ isActive={show}
+ isPlaceholder={actualTimeRange === NO_TIME_RANGE}
+ data-test={DateFilterTestKey.ModalOverlay}
+ ref={labelRef}
+ />
+ </Tooltip>
+ {/* the zIndex value is from trying so that the Modal doesn't overlay the AdhocFilter */}
+ <Modal
+ title={
+ <ModalTitleWithIcon
+ className="text"
+ isEditMode
+ title={t('Edit time range')}
+ />
+ }
+ name={t('Edit time range')}
+ show={show}
+ onHide={toggleOverlay}
+ width="600px"
+ hideFooter
+ zIndex={1030}
+ >
+ {overlayContent}
+ </Modal>
+ </>
+ );
+
return (
<>
<ControlHeader {...props} />
- {popoverContent}
+ {overlayStyle === 'Modal' ? modalContent : popoverContent}
</>
);
}
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/tests/DateFilterLabel.test.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/tests/DateFilterLabel.test.tsx
index f4c36bfa17..bfb276b7de 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/tests/DateFilterLabel.test.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/tests/DateFilterLabel.test.tsx
@@ -58,6 +58,15 @@ test('DateFilter with default props', () => {
).toBeInTheDocument();
});
+test('DateFilter should be applied the overlayStyle props', () => {
+ render(setup({ onChange: () => {}, overlayStyle: 'Modal' }));
+ // should be Modal as overlay
+ userEvent.click(screen.getByText(NO_TIME_RANGE));
+ expect(
+ screen.getByTestId(DateFilterTestKey.ModalOverlay),
+ ).toBeInTheDocument();
+});
+
test('DateFilter should be applied the global config time_filter from the store', () => {
render(
setup(
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/types.ts b/superset-frontend/src/explore/components/controls/DateFilterControl/types.ts
index e06c5409cc..c1aa843448 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/types.ts
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/types.ts
@@ -112,5 +112,6 @@ export interface DateFilterControlProps {
value?: string;
onOpenPopover?: () => void;
onClosePopover?: () => void;
+ overlayStyle?: 'Modal' | 'Popover';
isOverflowingFilterBar?: boolean;
}
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/utils/useDatePickerInAdhocFilter.tsx b/superset-frontend/src/explore/components/controls/FilterControl/utils/useDatePickerInAdhocFilter.tsx
index af148bb92d..f42ddf4883 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/utils/useDatePickerInAdhocFilter.tsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/utils/useDatePickerInAdhocFilter.tsx
@@ -52,6 +52,7 @@ export const useDatePickerInAdhocFilter = ({
value={timeRange}
name="time_range"
onChange={onTimeRangeChange}
+ overlayStyle="Modal"
/>
</>
) : undefined;