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

This commit is contained in:
Kamil Gabryjelski 2023-12-22 13:13:35 +01:00 committed by GitHub
parent 5bd7fd7990
commit 39ac45351b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 18 deletions

View File

@ -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(() => {

View File

@ -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,
}),
);