chore(fix): adds dependent filters fixes

* adds a fix for correctly selecting first value of a dependent filter
* adds a fix for automatically selecting the correct dependent filter value on changing parent filter value
* adds dependent filters fix support for time range filter

Author: Muhammad Musfir

superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.test.ts

@@ -45,6 +45,7 @@ import {
   SAMPLE_CHART,
   visitDashboard,
 } from './shared_dashboard_functions';
+import { waitForChartLoad } from 'cypress/utils';
 
 function selectFilter(index: number) {
   cy.get("[data-test='filter-title-container'] [draggable='true']")
@@ -160,6 +161,66 @@ describe('Native filters', () => {
       );
     });
 
+    it('Dependent filter selects first item based on parent filter selection', () => {
+      prepareDashboardFilters([
+        { name: 'region', column: 'region', datasetId: 2 },
+        { name: 'country_name', column: 'country_name', datasetId: 2 },
+      ]);
+
+      enterNativeFilterEditModal();
+
+      selectFilter(0);
+      cy.get(nativeFilters.filterConfigurationSections.displayedSection).within(() => {
+        cy.contains('Select first filter value by default')
+          .should('be.visible')
+          .click();
+      });
+      cy.get(nativeFilters.filterConfigurationSections.displayedSection).within(() => {
+        cy.contains('Can select multiple values ')
+          .should('be.visible')
+          .click();
+      });
+
+      selectFilter(1);
+      cy.get(nativeFilters.filterConfigurationSections.displayedSection).within(() => {
+        cy.contains('Values are dependent on other filters')
+          .should('be.visible')
+          .click();
+      });
+      cy.get(nativeFilters.filterConfigurationSections.displayedSection).within(() => {
+        cy.contains('Can select multiple values ')
+          .should('be.visible')
+          .click();
+      });
+      addParentFilterWithValue(0, testItems.topTenChart.filterColumnRegion);
+      cy.get(nativeFilters.filterConfigurationSections.displayedSection).within(() => {
+        cy.contains('Select first filter value by default')
+          .should('be.visible')
+          .click();
+      });
+
+      // cannot use saveNativeFilterSettings because there is a bug which
+      // sometimes does not allow charts to load when enabling the 'Select first filter value by default'
+      // to be saved when using dependent filters so,
+      // you reload the window.
+      cy.get('.ant-modal-footer')
+          .contains('Save')
+          .should('be.visible')
+          .click();
+
+      cy.get('.ant-modal-content').should('not.exist');
+      cy.reload();
+      [SAMPLE_CHART].forEach(waitForChartLoad);
+      // saveNativeFilterSettings([SAMPLE_CHART]);
+
+      applyNativeFilterValueWithIndex(0, 'North America');
+
+      // Check that dependent filter auto-selects the first item
+      cy.get(nativeFilters.filterFromDashboardView.filterContent)
+        .eq(1)
+        .should('contain.text', 'Bermuda');
+    });
+
     it('User can create filter depend on 2 other filters', () => {
       prepareDashboardFilters([
         { name: 'region', column: 'region', datasetId: 2 },

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx

@@ -58,6 +58,7 @@ import { FilterControlProps } from './types';
 import { getFormData } from '../../utils';
 import { useFilterDependencies } from './state';
 import { useFilterOutlined } from '../useFilterOutlined';
+import { useFilters } from '../state';
 
 const HEIGHT = 32;
 
@@ -107,6 +108,7 @@ const FilterValue: FC<FilterControlProps> = ({
     state => state.dashboardInfo.id,
   );
 
+  const allFilters = useFilters();
   const [error, setError] = useState<ClientErrorObject>();
   const [formData, setFormData] = useState<Partial<QueryFormData>>({
     inView: false,
@@ -155,6 +157,37 @@ const FilterValue: FC<FilterControlProps> = ({
       dashboardId,
     });
     const filterOwnState = filter.dataMask?.ownState || {};
+    if (filter?.cascadeParentIds?.length) {
+      // check if it is a child filter
+
+      let selectedParentFilterValueCounts = 0;
+
+      filter?.cascadeParentIds?.forEach(pId => {
+        if (
+          allFilters[pId]?.controlValues?.defaultToFirstItem ||
+          allFilters[pId]?.defaultDataMask?.extraFormData?.filters ||
+          allFilters[pId]?.defaultDataMask?.extraFormData?.time_range
+        ) {
+          selectedParentFilterValueCounts +=
+            allFilters[pId]?.defaultDataMask?.extraFormData?.filters?.length ?? 1;
+        }
+      });
+
+      // check if all parent filters with defaults have a value selected
+
+      let depsCount = dependencies.filters?.length ?? 0;
+
+      if (dependencies?.time_range) {
+        depsCount += 1;
+      }
+
+      if (selectedParentFilterValueCounts !== depsCount) {
+        // child filter should not request backend until it
+        // has all the required information from parent filters
+        return;
+      }
+    }
+
     // TODO: We should try to improve our useEffect hooks to depend more on
     // granular information instead of big objects that require deep comparison.
     const customizer = (
@@ -226,6 +259,7 @@ const FilterValue: FC<FilterControlProps> = ({
     hasDataSource,
     isRefreshing,
     shouldRefresh,
+    allFilters,
   ]);
 
   useEffect(() => {

superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx

@@ -151,6 +151,8 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
   const [col] = groupby;
   const [initialColtypeMap] = useState(coltypeMap);
   const [search, setSearch] = useState('');
+  const isChangedByUser = useRef(false);
+  const prevDataRef = useRef(data);
   const [dataMask, dispatchDataMask] = useImmerReducer(reducer, {
     extraFormData: {},
     filterState,
@@ -271,6 +273,8 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
       } else {
         updateDataMask(values);
       }
+
+      isChangedByUser.current = true;
     },
     [updateDataMask, formData.nativeFilterId, clearAllTrigger],
   );
@@ -368,6 +372,47 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
     inverseSelection,
   ]);
 
+   useEffect(() => {
+    const prev = prevDataRef.current;
+    const curr = data;
+
+    const prevFirst = prev?.[0]?.[col];
+    const currFirst = curr?.[0]?.[col];
+
+    // If data actually changed (e.g., due to parent filter), reset flag
+    if (prevFirst !== currFirst) {
+      isChangedByUser.current = false;
+      prevDataRef.current = data;
+    }
+  }, [data, col]);
+
+  useEffect(() => {
+    if (isChangedByUser.current) return;
+
+    const firstItem: SelectValue = data[0]
+      ? (groupby.map(col => data[0][col]) as string[])
+      : null;
+
+    if (
+      defaultToFirstItem &&
+      Object.keys(formData?.extraFormData || {}).length &&
+      filterState.value !== undefined &&
+      firstItem !== null &&
+      filterState.value !== firstItem
+    ) {
+      if (firstItem?.[0] !== undefined) {
+        updateDataMask(firstItem);
+      }
+    }
+  }, [
+    defaultToFirstItem,
+    updateDataMask,
+    formData,
+    data,
+    JSON.stringify(filterState.value),
+    isChangedByUser.current,
+  ]);
+
   useEffect(() => {
     setDataMask(dataMask);
   }, [JSON.stringify(dataMask)]);