fix(code/frontend): should disable structure tab if no structure or load failed (#34908)

Author: WangQianliang

x-pack/plugins/code/public/components/main/main.tsx

@@ -11,10 +11,11 @@ import styled from 'styled-components';
 
 import chrome from 'ui/chrome';
 import { MainRouteParams } from '../../common/types';
-import { RootState } from '../../reducers';
 import { ShortcutsProvider } from '../shortcuts';
 import { Content } from './content';
 import { SideTabs } from './side_tabs';
+import { structureSelector } from '../../selectors';
+import { RootState } from '../../reducers';
 
 const Root = styled.div`
   position: absolute;
@@ -34,6 +35,7 @@ const Container = styled.div`
 interface Props extends RouteComponentProps<MainRouteParams> {
   loadingFileTree: boolean;
   loadingStructureTree: boolean;
+  hasStructure: boolean;
 }
 
 class CodeMain extends React.Component<Props> {
@@ -56,14 +58,15 @@ class CodeMain extends React.Component<Props> {
   }
 
   public render() {
-    const { loadingFileTree, loadingStructureTree } = this.props;
+    const { loadingFileTree, loadingStructureTree, hasStructure } = this.props;
     return (
       <Root>
         <Container>
           <React.Fragment>
             <SideTabs
               loadingFileTree={loadingFileTree}
               loadingStructureTree={loadingStructureTree}
+              hasStructure={hasStructure}
             />
             <Content />
           </React.Fragment>
@@ -77,9 +80,7 @@ class CodeMain extends React.Component<Props> {
 const mapStateToProps = (state: RootState) => ({
   loadingFileTree: state.file.loading,
   loadingStructureTree: state.symbol.loading,
+  hasStructure: structureSelector(state).length > 0 && !state.symbol.error,
 });
 
-export const Main = connect(
-  mapStateToProps
-  // @ts-ignore
-)(CodeMain);
+export const Main = connect(mapStateToProps)(CodeMain);

x-pack/plugins/code/public/components/main/side_tabs.tsx

@@ -22,6 +22,7 @@ enum Tabs {
 interface Props extends RouteComponentProps<MainRouteParams> {
   loadingFileTree: boolean;
   loadingStructureTree: boolean;
+  hasStructure: boolean;
 }
 
 class CodeSideTabs extends React.PureComponent<Props> {
@@ -73,7 +74,7 @@ class CodeSideTabs extends React.PureComponent<Props> {
         name: 'Structure',
         content: structureTabContent,
         isSelected: Tabs.structure === this.sideTab,
-        disabled: this.props.match.params.pathType === PathTypes.tree,
+        disabled: this.props.match.params.pathType === PathTypes.tree || !this.props.hasStructure,
         'data-test-subj': 'codeStructureTreeTab',
       },
     ];
@@ -95,6 +96,7 @@ class CodeSideTabs extends React.PureComponent<Props> {
           initialSelectedTab={this.tabs.find(t => t.id === this.sideTab)}
           onTabClick={tab => this.switchTab(tab.id as Tabs)}
           expand={true}
+          selectedTab={this.tabs.find(t => t.id === this.sideTab)}
         />
         <Shortcut
           keyCode="t"

x-pack/plugins/code/public/reducers/symbol.ts

@@ -131,6 +131,7 @@ export const symbol = handleActions(
           ...state.symbols,
           [path]: data,
         };
+        draft.error = undefined;
       }),
     [String(loadStructureFailed)]: (state: SymbolState, action: Action<any>) => {
       if (action.payload) {