fix(DateFilterControl): remove modal overlay style to fix z-index issues (#35292)

Author: msyavuz

superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx

@@ -31,15 +31,13 @@ import {
   Button,
   Constants,
   Divider,
-  Modal,
   Tooltip,
   Select,
 } from '@superset-ui/core/components';
 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';
@@ -146,7 +144,6 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
     onChange,
     onOpenPopover = noOp,
     onClosePopover = noOp,
-    overlayStyle = 'Popover',
     isOverflowingFilterBar = false,
   } = props;
   const defaultTimeFilter = useDefaultTimeFilter();
@@ -384,46 +381,10 @@ 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} />
-      {overlayStyle === 'Modal' ? modalContent : popoverContent}
+      {popoverContent}
     </>
   );
 }

superset-frontend/src/explore/components/controls/DateFilterControl/tests/DateFilterLabel.test.tsx

@@ -58,15 +58,6 @@ 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,6 +112,5 @@ 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,7 +52,6 @@ export const useDatePickerInAdhocFilter = ({
         value={timeRange}
         name="time_range"
         onChange={onTimeRangeChange}
-        overlayStyle="Modal"
       />
     </>
   ) : undefined;