diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx index 6621134d9ebe..edb922a39726 100644 --- 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 index 0ceb2f47bac8..c1464ae4e38b 100644 --- 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(); + expect(wrapper.state('activeKey')).toBe('TAB_ID'); + wrapper.setProps({ + ...props, + dashboardId: 2, + component: dashboardLayoutWithTabs.present.TAB_ID, + }); + expect(wrapper.state('activeKey')).toBe('ROW_ID'); + }); });