(superset) 07/11: fix(dashboard): Don't switch to first tab when directPathToChild changes (#26340)

[mi...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

michaelsmolina pushed a commit to branch 3.0
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 71bf15e87002679eb6e05b0578d720af5fc5198f
Author: Kamil Gabryjelski <ka...@gmail.com>
AuthorDate: Fri Dec 22 13:13:35 2023 +0100

    fix(dashboard): Don't switch to first tab when directPathToChild changes (#26340)
    
    (cherry picked from commit 39ac45351bbac5a6ceef26c6279b16ed14b5119b)
---
 .../components/DashboardBuilder/DashboardContainer.tsx      | 13 ++++++++-----
 .../src/dashboard/components/DashboardBuilder/utils.ts      | 13 -------------
 2 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
index cc4e2db780..f3f214468e 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardContainer.tsx
@@ -18,7 +18,7 @@
  */
 // ParentSize uses resize observer so the dashboard will update size
 // when its container size changes, due to e.g., builder side panel opening
-import React, { FC, useCallback, useEffect, useMemo } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   FeatureFlag,
@@ -51,7 +51,7 @@ import { setColorScheme } from 'src/dashboard/actions/dashboardState';
 import jsonStringify from 'json-stringify-pretty-compact';
 import { NATIVE_FILTER_DIVIDER_PREFIX } from '../nativeFilters/FiltersConfigModal/utils';
 import { findTabsWithChartsInScope } from '../nativeFilters/utils';
-import { getRootLevelTabIndex, getRootLevelTabsComponent } from './utils';
+import { getRootLevelTabsComponent } from './utils';
 
 type DashboardContainerProps = {
   topLevelTabs?: LayoutItem;
@@ -89,15 +89,18 @@ const DashboardContainer: FC<DashboardContainerProps> = ({ topLevelTabs }) => {
     Object.values(state.charts).map(chart => chart.id),
   );
 
+  const prevTabIndexRef = useRef();
   const tabIndex = useMemo(() => {
     const nextTabIndex = findTabIndexByComponentId({
       currentComponent: getRootLevelTabsComponent(dashboardLayout),
       directPathToChild,
     });
 
-    return nextTabIndex > -1
-      ? nextTabIndex
-      : getRootLevelTabIndex(dashboardLayout, directPathToChild);
+    if (nextTabIndex === -1) {
+      return prevTabIndexRef.current ?? 0;
+    }
+    prevTabIndexRef.current = nextTabIndex;
+    return nextTabIndex;
   }, [dashboardLayout, directPathToChild]);
 
   useEffect(() => {
diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/utils.ts b/superset-frontend/src/dashboard/components/DashboardBuilder/utils.ts
index 50aa989c68..8ba5405bf3 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/utils.ts
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/utils.ts
@@ -21,7 +21,6 @@ import {
   DASHBOARD_ROOT_ID,
 } from 'src/dashboard/util/constants';
 import { DashboardLayout } from 'src/dashboard/types';
-import findTabIndexByComponentId from 'src/dashboard/util/findTabIndexByComponentId';
 
 export const getRootLevelTabsComponent = (dashboardLayout: DashboardLayout) => {
   const dashboardRoot = dashboardLayout[DASHBOARD_ROOT_ID];
@@ -38,15 +37,3 @@ export const shouldFocusTabs = (
   // don't focus the tabs when we click on a tab
   event.target.className === 'ant-tabs-nav-wrap' ||
   container.contains(event.target);
-
-export const getRootLevelTabIndex = (
-  dashboardLayout: DashboardLayout,
-  directPathToChild: string[],
-): number =>
-  Math.max(
-    0,
-    findTabIndexByComponentId({
-      currentComponent: getRootLevelTabsComponent(dashboardLayout),
-      directPathToChild,
-    }),
-  );