mirror of
https://github.com/apache/superset.git
synced 2024-09-06 13:57:40 -04:00
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>
This commit is contained in:
parent
2cdd88aa4f
commit
24412e282d
@ -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({
|
||||
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user