[7.x] test(code/frontend): more history functional test cases (#35216) (

#35819) * test(code/frontend): more history functional test cases (#35216) * fix(code/frontend): should not collapse folder after click a breadcrumb (#35458) * [Code] fix typeahead highlight file (#35585) * fix(code/frontend): should not collapse folder after click a breadcrumb * fix(code/frontend): should highlight file when jump from typeahead * separate to a independent test case * fix(code/frontend): show loading in directory view (#35720) * fix(code/frontend): fix highlight symbol (#35531) * feature(code/frontend): retry loading symbols if language server is initializing (#35715)
elastic · Apr 30, 2019 · 6c6930c · 6c6930c
1 parent b0a339e
commit 6c6930c
Show file tree

Hide file tree

Showing 21 changed files with 698 additions and 512 deletions.
diff --git a/x-pack/plugins/code/public/actions/language_server.ts b/x-pack/plugins/code/public/actions/language_server.ts
@@ -19,3 +19,5 @@ export const requestInstallLanguageServerFailed = createAction<Error>(
 );
 
 export const installLanguageServerSuccess = createAction<any>('INSTALL LANGUAGE SERVERS SUCCESS');
+
+export const languageServerInitializing = createAction('LANGUAGE SERVER INITIALIZING');
diff --git a/x-pack/plugins/code/public/components/file_tree/file_tree.tsx b/x-pack/plugins/code/public/components/file_tree/file_tree.tsx
@@ -253,7 +253,7 @@ export class CodeFileTree extends React.Component<Props> {
 const mapStateToProps = (state: RootState) => ({
   node: state.file.tree,
   openedPaths: state.file.openedPaths,
-  treeLoading: state.file.loading,
+  treeLoading: state.file.rootFileTreeLoading,
 });
 
 const mapDispatchToProps = {

diff --git a/x-pack/plugins/code/public/components/main/breadcrumb.tsx b/x-pack/plugins/code/public/components/main/breadcrumb.tsx
@@ -18,7 +18,12 @@ export class Breadcrumb extends React.PureComponent<Props> {
     const { resource, org, repo, revision, path } = this.props.routeParams;
     const repoUri = `${resource}/${org}/${repo}`;
 
-    const breadcrumbs: Array<{ text: string; href: string; className?: string }> = [];
+    const breadcrumbs: Array<{
+      text: string;
+      href: string;
+      className?: string;
+      ['data-test-subj']: string;
+    }> = [];
     const pathSegments = path ? path.split('/') : [];
 
     pathSegments.forEach((p, index) => {
@@ -28,6 +33,7 @@ export class Breadcrumb extends React.PureComponent<Props> {
         text: p,
         href,
         className: 'codeNoMinWidth',
+        ['data-test-subj']: `codeFileBreadcrumb-${p}`,
       });
     });
     return <EuiBreadcrumbs max={Number.MAX_VALUE} breadcrumbs={breadcrumbs} />;

diff --git a/x-pack/plugins/code/public/components/main/content.tsx b/x-pack/plugins/code/public/components/main/content.tsx
@@ -54,6 +54,7 @@ interface Props extends RouteComponentProps<MainRouteParams> {
   repoScope: string[];
   searchOptions: SearchOptions;
   currentRepository?: Repository;
+  fileTreeLoading: boolean;
 }
 const LANG_MD = 'markdown';
 
@@ -271,15 +272,15 @@ class CodeContent extends React.PureComponent<Props> {
       return this.renderProgress();
     }
 
-    const { file, match, tree } = this.props;
+    const { file, match, tree, fileTreeLoading } = this.props;
     const { path, pathType, resource, org, repo, revision } = match.params;
     const repoUri = `${resource}/${org}/${repo}`;
     switch (pathType) {
       case PathTypes.tree:
         const node = this.findNode(path ? path.split('/') : [], tree);
         return (
           <div className="codeContainer__directoryView">
-            <Directory node={node} />
+            <Directory node={node} loading={fileTreeLoading} />
             <CommitHistory
               repoUri={repoUri}
               header={
@@ -342,13 +343,13 @@ class CodeContent extends React.PureComponent<Props> {
           );
         }
         return (
-          <EuiFlexGroup direction="row" className="codeContainer__blame">
+          <EuiFlexGroup direction="row" className="codeContainer__blame" gutterSize="none">
             <Editor showBlame={false} />
           </EuiFlexGroup>
         );
       case PathTypes.blame:
         return (
-          <EuiFlexGroup direction="row" className="codeContainer__blame">
+          <EuiFlexGroup direction="row" className="codeContainer__blame" gutterSize="none">
             <Editor showBlame={true} />
           </EuiFlexGroup>
         );
@@ -374,6 +375,7 @@ const mapStateToProps = (state: RootState) => ({
   isNotFound: state.file.isNotFound,
   file: state.file.file,
   tree: state.file.tree,
+  fileTreeLoading: state.file.fileTreeLoading,
   currentTree: currentTreeSelector(state),
   branches: state.file.branches,
   hasMoreCommits: hasMoreCommitsSelector(state),

diff --git a/x-pack/plugins/code/public/components/main/directory.tsx b/x-pack/plugins/code/public/components/main/directory.tsx
@@ -4,7 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiTitle, IconType } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiText,
+  EuiTitle,
+  IconType,
+  EuiLoadingSpinner,
+  EuiSpacer,
+} from '@elastic/eui';
 import React from 'react';
 import { Link, RouteComponentProps, withRouter } from 'react-router-dom';
 import { FileTree, FileTreeItemType } from '../../../model';
@@ -58,6 +67,7 @@ const DirectoryNodes = (props: DirectoryNodesProps) => {
 
 interface Props extends RouteComponentProps<MainRouteParams> {
   node?: FileTree;
+  loading: boolean;
 }
 
 export const Directory = withRouter((props: Props) => {
@@ -78,10 +88,21 @@ export const Directory = withRouter((props: Props) => {
   const folderList = (
     <DirectoryNodes nodes={folders} title="Directories" getUrl={getUrl(PathTypes.tree)} />
   );
-  return (
-    <EuiFlexGroup direction="column">
+  const children = props.loading ? (
+    <div>
+      <EuiSpacer size="xl" />
+      <EuiSpacer size="xl" />
+      <EuiText textAlign="center">Loading...</EuiText>
+      <EuiSpacer size="m" />
+      <EuiText textAlign="center">
+        <EuiLoadingSpinner size="xl" />
+      </EuiText>
+    </div>
+  ) : (
+    <React.Fragment>
       {files.length > 0 && fileList}
       {folders.length > 0 && folderList}
-    </EuiFlexGroup>
+    </React.Fragment>
   );
+  return <EuiFlexGroup direction="column">{children}</EuiFlexGroup>;
 });
diff --git a/x-pack/plugins/code/public/components/main/main.scss b/x-pack/plugins/code/public/components/main/main.scss
@@ -29,11 +29,11 @@
   flex-grow: 0;
   flex-direction: column;
   height: 100%;
-  div[role="tablist"] {
+  div[role='tablist'] {
     flex-grow: 0;
     flex-shrink: 0;
   }
-  div[role="tabpanel"] {
+  div[role='tabpanel'] {
     @include euiScrollBar;
     width: 100%;
     flex-grow: 1;
@@ -59,7 +59,7 @@
 
 .code-directory__node {
   width: calc(200rem / 14);
-  padding: .25rem $euiSizeS;
+  padding: 0.25rem $euiSizeS;
   border-radius: $euiBorderRadius;
   white-space: nowrap;
   color: $euiColorFullShade;
@@ -92,7 +92,8 @@
 
 .code-timeline__commit-container {
   margin: 0 0 $euiSizeXS $euiSizeM;
-  .euiPanel:not(:first-of-type), .euiPanel:not(:last-of-type) {
+  .euiPanel:not(:first-of-type),
+  .euiPanel:not(:last-of-type) {
     border-radius: 0;
   }
 }
@@ -113,8 +114,8 @@
   &:last-child {
     border-radius: 0 0 $euiSizeXS $euiSizeXS;
   }
-  &:only-child{
-    border-radius: $euiSizeXS
+  &:only-child {
+    border-radius: $euiSizeXS;
   }
 }
 
@@ -254,12 +255,11 @@
 .codeBlame__item {
   padding: $euiSizeXS $euiSizeS;
   border-top: $euiBorderThin;
-  &.codeBlame__item--first{
+  &.codeBlame__item--first {
     border-top: none;
   }
 }
 
-
 .codeIcon__language {
   fill: $euiColorDarkestShade;
 }

diff --git a/x-pack/plugins/code/public/components/main/main.tsx b/x-pack/plugins/code/public/components/main/main.tsx
@@ -20,6 +20,7 @@ interface Props extends RouteComponentProps<MainRouteParams> {
   loadingFileTree: boolean;
   loadingStructureTree: boolean;
   hasStructure: boolean;
+  languageServerInitializing: boolean;
 }
 
 class CodeMain extends React.Component<Props> {
@@ -42,7 +43,12 @@ class CodeMain extends React.Component<Props> {
   }
 
   public render() {
-    const { loadingFileTree, loadingStructureTree, hasStructure } = this.props;
+    const {
+      loadingFileTree,
+      loadingStructureTree,
+      hasStructure,
+      languageServerInitializing,
+    } = this.props;
     return (
       <div className="codeContainer__root">
         <div className="codeContainer__rootInner">
@@ -51,6 +57,7 @@ class CodeMain extends React.Component<Props> {
               loadingFileTree={loadingFileTree}
               loadingStructureTree={loadingStructureTree}
               hasStructure={hasStructure}
+              languageServerInitializing={languageServerInitializing}
             />
             <Content />
           </React.Fragment>
@@ -62,9 +69,10 @@ class CodeMain extends React.Component<Props> {
 }
 
 const mapStateToProps = (state: RootState) => ({
-  loadingFileTree: state.file.loading,
+  loadingFileTree: state.file.rootFileTreeLoading,
   loadingStructureTree: state.symbol.loading,
   hasStructure: structureSelector(state).length > 0 && !state.symbol.error,
+  languageServerInitializing: state.symbol.languageServerInitializing,
 });
 
 export const Main = connect(mapStateToProps)(CodeMain);
diff --git a/x-pack/plugins/code/public/components/main/side_tabs.tsx b/x-pack/plugins/code/public/components/main/side_tabs.tsx
@@ -23,6 +23,7 @@ interface Props extends RouteComponentProps<MainRouteParams> {
   loadingFileTree: boolean;
   loadingStructureTree: boolean;
   hasStructure: boolean;
+  languageServerInitializing: boolean;
 }
 
 class CodeSideTabs extends React.PureComponent<Props> {
@@ -41,7 +42,7 @@ class CodeSideTabs extends React.PureComponent<Props> {
       <div>
         <EuiSpacer size="xl" />
         <EuiSpacer size="xl" />
-        <EuiText textAlign="center">Loading {text} tree</EuiText>
+        <EuiText textAlign="center">{text}</EuiText>
         <EuiSpacer size="m" />
         <EuiText textAlign="center">
           <EuiLoadingSpinner size="xl" />
@@ -51,29 +52,31 @@ class CodeSideTabs extends React.PureComponent<Props> {
   }
 
   public get tabs() {
-    const fileTabContent = this.props.loadingFileTree ? (
-      this.renderLoadingSpinner('file')
+    const { languageServerInitializing, loadingFileTree, loadingStructureTree } = this.props;
+    const fileTabContent = loadingFileTree ? (
+      this.renderLoadingSpinner('Loading file tree')
     ) : (
       <div className="codeFileTree__container">{<FileTree />}</div>
     );
-    const structureTabContent = this.props.loadingStructureTree ? (
-      this.renderLoadingSpinner('structure')
-    ) : (
-      <SymbolTree />
-    );
+    let structureTabContent: React.ReactNode;
+    if (languageServerInitializing) {
+      structureTabContent = this.renderLoadingSpinner('Language server is initializing');
+    } else if (loadingStructureTree) {
+      structureTabContent = this.renderLoadingSpinner('Loading structure tree');
+    } else {
+      structureTabContent = <SymbolTree />;
+    }
     return [
       {
         id: Tabs.file,
         name: 'File',
         content: fileTabContent,
-        isSelected: Tabs.file === this.sideTab,
         'data-test-subj': 'codeFileTreeTab',
       },
       {
         id: Tabs.structure,
         name: 'Structure',
         content: structureTabContent,
-        isSelected: Tabs.structure === this.sideTab,
         disabled: this.props.match.params.pathType === PathTypes.tree || !this.props.hasStructure,
         'data-test-subj': 'codeStructureTreeTab',
       },
@@ -88,15 +91,16 @@ class CodeSideTabs extends React.PureComponent<Props> {
   };
 
   public render() {
+    const tabs = this.tabs;
+    const selectedTab = tabs.find(t => t.id === this.sideTab);
     return (
       <div>
         <EuiTabbedContent
           className="code-navigation__sidebar"
-          tabs={this.tabs}
-          initialSelectedTab={this.tabs.find(t => t.id === this.sideTab)}
+          tabs={tabs}
           onTabClick={tab => this.switchTab(tab.id as Tabs)}
           expand={true}
-          selectedTab={this.tabs.find(t => t.id === this.sideTab)}
+          selectedTab={selectedTab}
         />
         <Shortcut
           keyCode="t"