[Code] fix highlight symbol and unexpected tree loading

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

@@ -79,11 +79,10 @@ export class CodeFileTree extends React.Component<Props> {
     }
   };
 
-  public toggleTree = (path: string, isDir: boolean) => {
+  public toggleTree = (path: string) => {
     if (this.isPathOpen(path)) {
       this.props.closeTreePath(path);
     } else {
-      this.fetchTree(path, isDir);
       this.props.openTreePath(path);
     }
   };
@@ -104,7 +103,7 @@ export class CodeFileTree extends React.Component<Props> {
     }
     const onClick = () => {
       const path = flattenFrom ? flattenFrom.path! : node.path!;
-      this.toggleTree(path, node.type === FileTreeItemType.Directory);
+      this.toggleTree(path);
       this.onClick(node);
     };
     switch (node.type) {

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

@@ -250,6 +250,8 @@
 .code-link {
   &:focus {
     box-shadow: none;
+    outline: none;
+    animation: none;
   }
 }
 

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

@@ -50,26 +50,28 @@ class CodeSideTabs extends React.PureComponent<Props> {
   }
 
   public get tabs() {
+    const fileTabContent = this.props.loadingFileTree ? (
+      this.renderLoadingSpinner('file')
+    ) : (
+      <div className="codeFileTree--container">{<FileTree />}</div>
+    );
+    const structureTabContent = this.props.loadingStructureTree ? (
+      this.renderLoadingSpinner('structure')
+    ) : (
+      <SymbolTree />
+    );
     return [
       {
         id: Tabs.file,
         name: 'File',
-        content: (
-          <div className="codeFileTree--container">
-            {this.props.loadingFileTree ? this.renderLoadingSpinner('file') : <FileTree />}
-          </div>
-        ),
+        content: fileTabContent,
         isSelected: Tabs.file === this.sideTab,
         'data-test-subj': 'codeFileTreeTab',
       },
       {
         id: Tabs.structure,
         name: 'Structure',
-        content: this.props.loadingFileTree ? (
-          this.renderLoadingSpinner('structure')
-        ) : (
-          <SymbolTree />
-        ),
+        content: structureTabContent,
         isSelected: Tabs.structure === this.sideTab,
         disabled: this.props.match.params.pathType === PathTypes.tree,
         'data-test-subj': 'codeStructureTreeTab',

x-pack/plugins/code/public/components/symbol_tree/code_symbol_tree.tsx

@@ -56,6 +56,7 @@ export class CodeSymbolTree extends React.PureComponent<Props, { activePath?: st
   public getClickHandler = (path: string) => () => {
     this.setState({ activePath: path });
   };
+
   public getStructureTreeItemRenderer = (
     location: Location,
     name: string,

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

@@ -56,7 +56,7 @@ const initialState: FileState = {
     type: FileTreeItemType.Directory,
   },
   openedPaths: [],
-  loading: false,
+  loading: true,
   branches: [],
   tags: [],
   commits: [],
@@ -108,9 +108,6 @@ export const file = handleActions(
     [String(fetchRepoTree)]: (state: FileState, action: any) =>
       produce(state, draft => {
         draft.currentPath = action.payload.path;
-        if (action.payload.parents) {
-          draft.loading = true;
-        }
       }),
     [String(fetchRepoTreeSuccess)]: (state: FileState, action: Action<RepoTreePayload>) =>
       produce<FileState>(state, (draft: FileState) => {

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

@@ -105,7 +105,7 @@ const generateStructureTree: (symbols: SymbolInformation[]) => any = symbols =>
           container.members = [{ ...s, path: `${container.path}/${s.name}` }];
         }
       } else {
-        structureTree.push(s);
+        structureTree.push({ ...s, path: s.name });
       }
     });
 

x-pack/plugins/code/public/sagas/editor.ts

@@ -179,12 +179,12 @@ function* handleMainRouteChange(action: Action<Match>) {
       isDir: pathType === PathTypes.tree,
     })
   );
+  const uri = toCanonicalUrl({
+    repoUri,
+    file,
+    revision,
+  });
   if (file && pathType === PathTypes.blob) {
-    const uri = toCanonicalUrl({
-      repoUri,
-      file,
-      revision,
-    });
     if (lastRequestPath !== uri) {
       yield put(loadStructure(uri!));
     }