Revert "fix(DateFilterControl): remove modal overlay style to fix z-index iss…"

This reverts commit 027b25e6b8.

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}
     </>
   );
 }

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(

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;
 }

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;