fix(dashboard): Focusing charts and native filters from filters badge (…

…#23190)

(cherry picked from commit 7d4aee9)

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx

@@ -442,8 +442,6 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
   const dashboardIsSaving = useSelector<RootState, boolean>(
     ({ dashboardState }) => dashboardState.dashboardIsSaving,
   );
-  const nativeFilters = useSelector((state: RootState) => state.nativeFilters);
-  const focusedFilterId = nativeFilters?.focusedFilterId;
   const fullSizeChartId = useSelector<RootState, number | null>(
     state => state.dashboardState.fullSizeChartId,
   );
@@ -580,10 +578,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
         {!hideDashboardHeader && <DashboardHeader />}
         {showFilterBar &&
           filterBarOrientation === FilterBarOrientation.HORIZONTAL && (
-            <FilterBar
-              focusedFilterId={focusedFilterId}
-              orientation={FilterBarOrientation.HORIZONTAL}
-            />
+            <FilterBar orientation={FilterBarOrientation.HORIZONTAL} />
           )}
         {dropIndicatorProps && <div {...dropIndicatorProps} />}
         {!isReport && topLevelTabs && !uiConfig.hideNav && (
@@ -613,7 +608,6 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
       </div>
     ),
     [
-      focusedFilterId,
       nativeFiltersEnabled,
       filterBarOrientation,
       editMode,
@@ -658,7 +652,6 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
                     <ErrorBoundary>
                       {!isReport && (
                         <FilterBar
-                          focusedFilterId={focusedFilterId}
                           orientation={FilterBarOrientation.VERTICAL}
                           verticalConfig={{
                             filtersOpen: dashboardFiltersOpen,

superset-frontend/src/dashboard/components/FiltersBadge/index.tsx

@@ -23,7 +23,13 @@ import cx from 'classnames';
 import { DataMaskStateWithId, Filters } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import { usePrevious } from 'src/hooks/usePrevious';
-import { setFocusedNativeFilter } from 'src/dashboard/actions/nativeFilters';
+import { setDirectPathToChild } from 'src/dashboard/actions/dashboardState';
+import {
+  ChartsState,
+  DashboardInfo,
+  DashboardLayout,
+  RootState,
+} from 'src/dashboard/types';
 import DetailsPanelPopover from './DetailsPanel';
 import { Pill } from './Styles';
 import {
@@ -32,12 +38,6 @@ import {
   selectIndicatorsForChart,
   selectNativeIndicatorsForChart,
 } from './selectors';
-import {
-  ChartsState,
-  DashboardInfo,
-  DashboardLayout,
-  RootState,
-} from '../../types';
 
 export interface FiltersBadgeProps {
   chartId: number;
@@ -87,7 +87,7 @@ export const FiltersBadge = ({ chartId }: FiltersBadgeProps) => {
 
   const onHighlightFilterSource = useCallback(
     (path: string[]) => {
-      dispatch(setFocusedNativeFilter(path[0]));
+      dispatch(setDirectPathToChild(path));
     },
     [dispatch],
   );

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

@@ -222,7 +222,6 @@ const FilterControl = ({
   filter,
   icon,
   onFilterSelectionChange,
-  focusedFilterId,
   inView,
   showOverflow,
   parentRef,
@@ -288,7 +287,6 @@ const FilterControl = ({
           dataMaskSelected={dataMaskSelected}
           filter={filter}
           showOverflow={showOverflow}
-          focusedFilterId={focusedFilterId}
           onFilterSelectionChange={onFilterSelectionChange}
           inView={inView}
           parentRef={parentRef}

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

@@ -54,15 +54,14 @@ import Icons from 'src/components/Icons';
 import { FiltersOutOfScopeCollapsible } from '../FiltersOutOfScopeCollapsible';
 import { useFilterControlFactory } from '../useFilterControlFactory';
 import { FiltersDropdownContent } from '../FiltersDropdownContent';
+import { useFilterOutlined } from '../useFilterOutlined';
 
 type FilterControlsProps = {
-  focusedFilterId?: string;
   dataMaskSelected: DataMaskStateWithId;
   onFilterSelectionChange: (filter: Filter, dataMask: DataMask) => void;
 };
 
 const FilterControls: FC<FilterControlsProps> = ({
-  focusedFilterId,
   dataMaskSelected,
   onFilterSelectionChange,
 }) => {
@@ -73,12 +72,13 @@ const FilterControls: FC<FilterControlsProps> = ({
         : FilterBarOrientation.VERTICAL,
   );
 
+  const { outlinedFilterId, lastUpdated } = useFilterOutlined();
+
   const [overflowedIds, setOverflowedIds] = useState<string[]>([]);
   const popoverRef = useRef<DropdownContainerRef>(null);
 
   const { filterControlFactory, filtersWithValues } = useFilterControlFactory(
     dataMaskSelected,
-    focusedFilterId,
     onFilterSelectionChange,
   );
   const portalNodes = useMemo(() => {
@@ -234,10 +234,10 @@ const FilterControls: FC<FilterControlsProps> = ({
   }, [filtersOutOfScope, filtersWithValues, overflowedFiltersInScope]);
 
   useEffect(() => {
-    if (focusedFilterId && overflowedIds.includes(focusedFilterId)) {
+    if (outlinedFilterId && overflowedIds.includes(outlinedFilterId)) {
       popoverRef?.current?.open();
     }
-  }, [focusedFilterId, popoverRef, overflowedIds]);
+  }, [outlinedFilterId, lastUpdated, popoverRef, overflowedIds]);
 
   return (
     <>

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

@@ -43,13 +43,17 @@ import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
 import { waitForAsyncData } from 'src/middleware/asyncEvent';
 import { ClientErrorObject } from 'src/utils/getClientErrorObject';
 import { FilterBarOrientation, RootState } from 'src/dashboard/types';
-import { onFiltersRefreshSuccess } from 'src/dashboard/actions/dashboardState';
+import {
+  onFiltersRefreshSuccess,
+  setDirectPathToChild,
+} from 'src/dashboard/actions/dashboardState';
 import { FAST_DEBOUNCE } from 'src/constants';
 import { dispatchHoverAction, dispatchFocusAction } from './utils';
 import { FilterControlProps } from './types';
 import { getFormData } from '../../utils';
 import { useFilterDependencies } from './state';
 import { checkIsMissingRequiredValue } from '../utils';
+import { useFilterOutlined } from '../useFilterOutlined';
 
 const HEIGHT = 32;
 
@@ -79,7 +83,6 @@ const useShouldFilterRefresh = () => {
 const FilterValue: React.FC<FilterControlProps> = ({
   dataMaskSelected,
   filter,
-  focusedFilterId,
   onFilterSelectionChange,
   inView = true,
   showOverflow,
@@ -111,6 +114,8 @@ const FilterValue: React.FC<FilterControlProps> = ({
   const [isRefreshing, setIsRefreshing] = useState(false);
   const dispatch = useDispatch();
 
+  const { outlinedFilterId, lastUpdated } = useFilterOutlined();
+
   const handleFilterLoadFinish = useCallback(() => {
     setIsRefreshing(false);
     setIsLoading(false);
@@ -212,26 +217,34 @@ const FilterValue: React.FC<FilterControlProps> = ({
   ]);
 
   useEffect(() => {
-    if (focusedFilterId && focusedFilterId === filter.id) {
-      setTimeout(() => {
-        inputRef?.current?.focus();
-      }, FAST_DEBOUNCE);
+    if (outlinedFilterId && outlinedFilterId === filter.id) {
+      setTimeout(
+        () => {
+          inputRef?.current?.focus();
+        },
+        overflow ? FAST_DEBOUNCE : 0,
+      );
     }
-  }, [inputRef, focusedFilterId, filter.id]);
+  }, [inputRef, outlinedFilterId, lastUpdated, filter.id, overflow]);
 
   const setDataMask = useCallback(
     (dataMask: DataMask) => onFilterSelectionChange(filter, dataMask),
     [filter, onFilterSelectionChange],
   );
 
-  const setFocusedFilter = useCallback(
-    () => dispatchFocusAction(dispatch, id),
-    [dispatch, id],
-  );
-  const unsetFocusedFilter = useCallback(
-    () => dispatchFocusAction(dispatch),
-    [dispatch],
-  );
+  const setFocusedFilter = useCallback(() => {
+    // don't highlight charts in scope if filter was focused programmatically
+    if (outlinedFilterId !== id) {
+      dispatchFocusAction(dispatch, id);
+    }
+  }, [dispatch, id, outlinedFilterId]);
+
+  const unsetFocusedFilter = useCallback(() => {
+    dispatchFocusAction(dispatch);
+    if (outlinedFilterId === id) {
+      dispatch(setDirectPathToChild([]));
+    }
+  }, [dispatch, id, outlinedFilterId]);
 
   const setHoveredFilter = useCallback(
     () => dispatchHoverAction(dispatch, id),

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx

@@ -93,7 +93,6 @@ const HorizontalFilterBar: React.FC<HorizontalBarProps> = ({
   dataMaskSelected,
   filterValues,
   isInitialized,
-  focusedFilterId,
   onSelectionChange,
 }) => {
   const hasFilters = filterValues.length > 0;
@@ -124,7 +123,6 @@ const HorizontalFilterBar: React.FC<HorizontalBarProps> = ({
             {hasFilters && (
               <FilterControls
                 dataMaskSelected={dataMaskSelected}
-                focusedFilterId={focusedFilterId}
                 onFilterSelectionChange={onSelectionChange}
               />
             )}

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx

@@ -141,7 +141,6 @@ const VerticalFilterBar: React.FC<VerticalBarProps> = ({
   actions,
   canEdit,
   dataMaskSelected,
-  focusedFilterId,
   filtersOpen,
   filterValues,
   height,
@@ -258,7 +257,6 @@ const VerticalFilterBar: React.FC<VerticalBarProps> = ({
                   <FilterControlsWrapper>
                     <FilterControls
                       dataMaskSelected={dataMaskSelected}
-                      focusedFilterId={focusedFilterId}
                       onFilterSelectionChange={onSelectionChange}
                     />
                   </FilterControlsWrapper>
@@ -300,7 +298,6 @@ const VerticalFilterBar: React.FC<VerticalBarProps> = ({
                 <FilterControlsWrapper>
                   <FilterControls
                     dataMaskSelected={dataMaskSelected}
-                    focusedFilterId={focusedFilterId}
                     onFilterSelectionChange={onSelectionChange}
                   />
                 </FilterControlsWrapper>

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx

@@ -111,7 +111,6 @@ const publishDataMask = debounce(
 
 export const FilterBarScrollContext = createContext(false);
 const FilterBar: React.FC<FiltersBarProps> = ({
-  focusedFilterId,
   orientation = FilterBarOrientation.VERTICAL,
   verticalConfig,
 }) => {
@@ -254,7 +253,6 @@ const FilterBar: React.FC<FiltersBarProps> = ({
       canEdit={canEdit}
       dashboardId={dashboardId}
       dataMaskSelected={dataMaskSelected}
-      focusedFilterId={focusedFilterId}
       filterValues={filterValues}
       isInitialized={isInitialized}
       onSelectionChange={handleFilterSelectionChange}
@@ -264,7 +262,6 @@ const FilterBar: React.FC<FiltersBarProps> = ({
       actions={actions}
       canEdit={canEdit}
       dataMaskSelected={dataMaskSelected}
-      focusedFilterId={focusedFilterId}
       filtersOpen={verticalConfig.filtersOpen}
       filterValues={filterValues}
       isInitialized={isInitialized}

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/types.ts

@@ -16,6 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+import { ReactNode } from 'react';
 import {
   DataMask,
   DataMaskStateWithId,
@@ -25,10 +27,9 @@ import {
 import { FilterBarOrientation } from 'src/dashboard/types';
 
 interface CommonFiltersBarProps {
-  actions: React.ReactNode;
+  actions: ReactNode;
   canEdit: boolean;
   dataMaskSelected: DataMaskStateWithId;
-  focusedFilterId?: string;
   filterValues: (Filter | Divider)[];
   isInitialized: boolean;
   onSelectionChange: (
@@ -45,8 +46,7 @@ interface VerticalBarConfig {
   width: number;
 }
 
-export interface FiltersBarProps
-  extends Pick<CommonFiltersBarProps, 'focusedFilterId'> {
+export interface FiltersBarProps {
   orientation: FilterBarOrientation;
   verticalConfig?: VerticalBarConfig;
 }

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/useFilterControlFactory.tsx

@@ -32,7 +32,6 @@ import FilterDivider from './FilterControls/FilterDivider';
 
 export const useFilterControlFactory = (
   dataMaskSelected: DataMaskStateWithId,
-  focusedFilterId: string | undefined,
   onFilterSelectionChange: (filter: Filter, dataMask: DataMask) => void,
 ) => {
   const filters = useFilters();
@@ -67,20 +66,14 @@ export const useFilterControlFactory = (
         <FilterControl
           dataMaskSelected={dataMaskSelected}
           filter={filter}
-          focusedFilterId={focusedFilterId}
           onFilterSelectionChange={onFilterSelectionChange}
           inView={false}
           orientation={filterBarOrientation}
           overflow={overflow}
         />
       );
     },
-    [
-      filtersWithValues,
-      dataMaskSelected,
-      focusedFilterId,
-      onFilterSelectionChange,
-    ],
+    [filtersWithValues, dataMaskSelected, onFilterSelectionChange],
   );
 
   return { filterControlFactory, filtersWithValues };

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/useFilterOutlined.ts

@@ -0,0 +1,34 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useSelector } from 'react-redux';
+import { RootState } from 'src/dashboard/types';
+import getChartAndLabelComponentIdFromPath from 'src/dashboard/util/getChartAndLabelComponentIdFromPath';
+
+export const useFilterOutlined = () =>
+  useSelector<RootState, { outlinedFilterId: string; lastUpdated: number }>(
+    state => ({
+      outlinedFilterId: (
+        getChartAndLabelComponentIdFromPath(
+          state.dashboardState.directPathToChild || [],
+        ) as Record<string, string>
+      )?.native_filter,
+      lastUpdated: state.dashboardState.directPathLastUpdated,
+    }),
+  );

superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx

@@ -21,7 +21,7 @@ import { useDispatch } from 'react-redux';
 import { css, t, useTheme } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import { useTruncation } from 'src/hooks/useTruncation';
-import { setFocusedNativeFilter } from 'src/dashboard/actions/nativeFilters';
+import { setDirectPathToChild } from 'src/dashboard/actions/dashboardState';
 import {
   DependencyItem,
   Row,
@@ -40,7 +40,7 @@ const DependencyValue = ({
 }: DependencyValueProps) => {
   const dispatch = useDispatch();
   const handleClick = useCallback(() => {
-    dispatch(setFocusedNativeFilter(dependency.id));
+    dispatch(setDirectPathToChild([dependency.id]));
   }, [dependency.id, dispatch]);
   return (
     <span>