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:
Stephen Liu 2022-09-27 09:25:01 +08:00 committed by GitHub
parent 2cdd88aa4f
commit 24412e282d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 46 additions and 16 deletions

View File

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

View File

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