fix(dashboard): dashboard doesn't load properly if it has tabs (#21576)

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
apache · Sep 27, 2022 · 24412e2 · 24412e2
1 parent 2cdd88a
commit 24412e2
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 16 deletions.
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
@@ -114,22 +114,7 @@ const StyledTabsContainer = styled.div`
 export class Tabs extends React.PureComponent {
   constructor(props) {
     super(props);
-    let tabIndex = Math.max(
-      0,
-      findTabIndexByComponentId({
-        currentComponent: props.component,
-        directPathToChild: props.directPathToChild,
-      }),
-    );
-    if (tabIndex === 0 && props.activeTabs?.length) {
-      props.component.children.forEach((tabId, index) => {
-        if (tabIndex === 0 && props.activeTabs.includes(tabId)) {
-          tabIndex = index;
-        }
-      });
-    }
-    const { children: tabIds } = props.component;
-    const activeKey = tabIds[tabIndex];
+    const { tabIndex, activeKey } = this.getTabInfo(props);
 
     this.state = {
       tabIndex,
@@ -164,6 +149,15 @@ export class Tabs extends React.PureComponent {
       this.setState(() => ({ tabIndex: maxIndex }));
     }
 
+    // reset tab index if dashboard was changed
+    if (nextProps.dashboardId !== this.props.dashboardId) {
+      const { tabIndex, activeKey } = this.getTabInfo(nextProps);
+      this.setState(() => ({
+        tabIndex,
+        activeKey,
+      }));
+    }
+
     if (nextProps.isComponentVisible) {
       const nextFocusComponent = getLeafComponentIdFromPath(
         nextProps.directPathToChild,
@@ -196,6 +190,30 @@ export class Tabs extends React.PureComponent {
     }
   }
 
+  getTabInfo = props => {
+    let tabIndex = Math.max(
+      0,
+      findTabIndexByComponentId({
+        currentComponent: props.component,
+        directPathToChild: props.directPathToChild,
+      }),
+    );
+    if (tabIndex === 0 && props.activeTabs?.length) {
+      props.component.children.forEach((tabId, index) => {
+        if (tabIndex === 0 && props.activeTabs.includes(tabId)) {
+          tabIndex = index;
+        }
+      });
+    }
+    const { children: tabIds } = props.component;
+    const activeKey = tabIds[tabIndex];
+
+    return {
+      tabIndex,
+      activeKey,
+    };
+  };
+
   showDeleteConfirmModal = key => {
     const { component, deleteComponent } = this.props;
     AntdModal.confirm({

diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tabs.test.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tabs.test.jsx
@@ -53,6 +53,7 @@ describe('Tabs', () => {
     editMode: false,
     availableColumnCount: 12,
     columnWidth: 50,
+    dashboardId: 1,
     onResizeStart() {},
     onResize() {},
     onResizeStop() {},
@@ -202,4 +203,15 @@ describe('Tabs', () => {
     expect(modalMock.mock.calls).toHaveLength(1);
     expect(deleteComponent.callCount).toBe(0);
   });
+
+  it('should set new tab key if dashboardId was changed', () => {
+    const wrapper = shallow(<Tabs {...props} />);
+    expect(wrapper.state('activeKey')).toBe('TAB_ID');
+    wrapper.setProps({
+      ...props,
+      dashboardId: 2,
+      component: dashboardLayoutWithTabs.present.TAB_ID,
+    });
+    expect(wrapper.state('activeKey')).toBe('ROW_ID');
+  });
 });