feat: Adds support to multiple dependencies to the native filters (#18793)

* chore(native-filters): Remove cascading popovers from filter bar

Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>

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

@@ -40,6 +40,7 @@ import { DEFAULT_TIME_RANGE } from 'src/explore/constants';
 import { useDebouncedEffect } from 'src/explore/exploreUtils';
 import { SLOW_DEBOUNCE } from 'src/constants';
 import { testWithId } from 'src/utils/testUtils';
+import { noOp } from 'src/utils/common';
 import { FrameType } from './types';
 
 import {
@@ -163,6 +164,8 @@ interface DateFilterControlProps {
   onChange: (timeRange: string) => void;
   value?: string;
   type?: Type;
+  onOpenPopover?: () => void;
+  onClosePopover?: () => void;
 }
 
 export const DATE_FILTER_CONTROL_TEST_ID = 'date-filter-control';
@@ -171,7 +174,13 @@ export const getDateFilterControlTestId = testWithId(
 );
 
 export default function DateFilterLabel(props: DateFilterControlProps) {
-  const { value = DEFAULT_TIME_RANGE, onChange, type } = props;
+  const {
+    value = DEFAULT_TIME_RANGE,
+    onChange,
+    type,
+    onOpenPopover = noOp,
+    onClosePopover = noOp,
+  } = props;
   const [actualTimeRange, setActualTimeRange] = useState<string>(value);
 
   const [show, setShow] = useState<boolean>(false);
@@ -261,8 +270,10 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
   const togglePopover = () => {
     if (show) {
       onHide();
+      onClosePopover();
     } else {
-      setShow(true);
+      onOpen();
+      onOpenPopover();
     }
   };
 
@@ -360,11 +371,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
         overlayStyle={overlayStyle}
       >
         <Tooltip placement="top" title={tooltipTitle}>
-          <Label
-            className="pointer"
-            data-test="time-range-trigger"
-            onClick={onOpen}
-          >
+          <Label className="pointer" data-test="time-range-trigger">
             {actualTimeRange}
           </Label>
         </Tooltip>

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx

@@ -18,7 +18,7 @@
  */
 import React, { useEffect, useState } from 'react';
 import { Select } from 'src/components';
-import { t, SupersetClient, styled } from '@superset-ui/core';
+import { t, SupersetClient, SupersetTheme, styled } from '@superset-ui/core';
 import {
   Operators,
   OPERATORS_OPTIONS,
@@ -373,7 +373,7 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
   return (
     <>
       <Select
-        css={theme => ({
+        css={(theme: SupersetTheme) => ({
           marginTop: theme.gridUnit * 4,
           marginBottom: theme.gridUnit * 4,
         })}
@@ -395,7 +395,7 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
         {...subjectSelectProps}
       />
       <Select
-        css={theme => ({ marginBottom: theme.gridUnit * 4 })}
+        css={(theme: SupersetTheme) => ({ marginBottom: theme.gridUnit * 4 })}
         options={(props.operators ?? OPERATORS_OPTIONS)
           .filter(op => isOperatorRelevant(op, subject))
           .map((option, index) => ({