fix(code/frontend): fix style issues (#38748) (#38959)

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

@@ -5,7 +5,7 @@
  */
 
 import { EuiFlexItem } from '@elastic/eui';
-import { editor as editorInterfaces } from 'monaco-editor';
+import { editor as editorInterfaces, IDisposable } from 'monaco-editor';
 import React from 'react';
 import { connect } from 'react-redux';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
@@ -50,20 +50,47 @@ export class EditorComponent extends React.Component<IProps> {
   private monaco: MonacoHelper | undefined;
   private editor: editorInterfaces.IStandaloneCodeEditor | undefined;
   private lineDecorations: string[] | null = null;
+  private gutterClickHandler: IDisposable | undefined;
 
   constructor(props: IProps, context: any) {
     super(props, context);
   }
 
+  updateGutterClickHandler = (
+    repoUri: string,
+    revision: string,
+    path: string,
+    queryString: string
+  ) => {
+    if (this.monaco && this.editor) {
+      if (this.gutterClickHandler) {
+        this.gutterClickHandler.dispose();
+      }
+      this.gutterClickHandler = this.editor!.onMouseDown(
+        (e: editorInterfaces.IEditorMouseEvent) => {
+          if (e.target.type === monaco.editor.MouseTargetType.GUTTER_LINE_NUMBERS) {
+            const url = `${repoUri}/blob/${encodeRevisionString(revision)}/${path}`;
+            const position = e.target.position || { lineNumber: 0, column: 0 };
+            history.push(`/${url}!L${position.lineNumber}:0${queryString}`);
+          }
+          this.monaco!.container.focus();
+        }
+      );
+    }
+  };
+
   public componentDidMount(): void {
     this.container = document.getElementById('mainEditor') as HTMLElement;
     this.monaco = new MonacoHelper(this.container, this.props, this.props.location.search);
-
+    if (!this.props.revealPosition) {
+      this.monaco.clearLineSelection();
+    }
     const { file } = this.props;
     if (file && file.content) {
       const { uri, path, revision } = file.payload;
       const qs = this.props.location.search;
-      this.loadText(file.content, uri, path, file.lang!, revision, qs).then(() => {
+      this.loadText(file.content, uri, path, file.lang!, revision).then(() => {
+        this.updateGutterClickHandler(uri, revision, path, qs);
         if (this.props.revealPosition) {
           this.revealPosition(this.props.revealPosition);
         }
@@ -86,8 +113,17 @@ export class EditorComponent extends React.Component<IProps> {
     } = this.props.match.params;
     const prevContent = prevProps.file && prevProps.file.content;
     const qs = this.props.location.search;
-    if (prevContent !== file.content || qs !== prevProps.location.search) {
-      this.loadText(file.content!, uri, path, file.lang!, revision, qs).then(() => {
+    if (this.editor && qs !== prevProps.location.search) {
+      this.updateGutterClickHandler(uri, revision, path, qs);
+    }
+    if (!this.props.revealPosition && this.monaco) {
+      this.monaco.clearLineSelection();
+    }
+    if (prevContent !== file.content) {
+      this.loadText(file.content!, uri, path, file.lang!, revision).then(() => {
+        if (this.editor && qs !== prevProps.location.search) {
+          this.updateGutterClickHandler(uri, revision, path, qs);
+        }
         if (this.props.revealPosition) {
           this.revealPosition(this.props.revealPosition);
         }
@@ -119,6 +155,9 @@ export class EditorComponent extends React.Component<IProps> {
   }
 
   public componentWillUnmount() {
+    if (this.gutterClickHandler) {
+      this.gutterClickHandler.dispose();
+    }
     this.monaco!.destroy();
   }
   public render() {
@@ -168,24 +207,9 @@ export class EditorComponent extends React.Component<IProps> {
     this.blameWidgets = null;
   }
 
-  private async loadText(
-    text: string,
-    repo: string,
-    file: string,
-    lang: string,
-    revision: string,
-    qs: string
-  ) {
+  private async loadText(text: string, repo: string, file: string, lang: string, revision: string) {
     if (this.monaco) {
       this.editor = await this.monaco.loadFile(repo, file, text, lang, revision);
-      this.editor.onMouseDown((e: editorInterfaces.IEditorMouseEvent) => {
-        if (e.target.type === monaco.editor.MouseTargetType.GUTTER_LINE_NUMBERS) {
-          const uri = `${repo}/blob/${encodeRevisionString(revision)}/${file}`;
-          const position = e.target.position || { lineNumber: 0, column: 0 };
-          history.push(`/${uri}!L${position.lineNumber}:0${qs}`);
-        }
-        this.monaco!.container.focus();
-      });
     }
   }
 

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

@@ -104,5 +104,9 @@ export const Directory = withRouter((props: Props) => {
       {folders.length > 0 && folderList}
     </React.Fragment>
   );
-  return <EuiFlexGroup direction="column">{children}</EuiFlexGroup>;
+  return (
+    <EuiFlexGroup direction="column" gutterSize="none">
+      {children}
+    </EuiFlexGroup>
+  );
 });

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

@@ -122,6 +122,7 @@
 .code-top-bar__container {
   box-sizing: content-box;
   display: flex;
+  flex-shrink: 0;
   flex-direction: column;
   justify-content: space-between;
   min-height: 80px;

x-pack/plugins/code/public/components/query_bar/components/__snapshots__/query_bar.test.tsx.snap

@@ -519,7 +519,7 @@ exports[`render correctly with empty query string 1`] = `
                       aria-label="Search input"
                       autoComplete="off"
                       autoFocus={true}
-                      className="kuiLocalSearchAssistedInput__input"
+                      className="kuiLocalSearchAssistedInput__input codeSearchBar__input"
                       compressed={false}
                       data-test-subj="queryInput"
                       fullWidth={true}
@@ -554,7 +554,7 @@ exports[`render correctly with empty query string 1`] = `
                                 aria-label="Search input"
                                 autoComplete="off"
                                 autoFocus={true}
-                                className="euiFieldText kuiLocalSearchAssistedInput__input euiFieldText--fullWidth"
+                                className="euiFieldText kuiLocalSearchAssistedInput__input codeSearchBar__input euiFieldText--fullWidth"
                                 data-test-subj="queryInput"
                                 onChange={[Function]}
                                 onClick={[Function]}
@@ -1230,7 +1230,7 @@ exports[`render correctly with input query string changed 1`] = `
                           aria-label="Search input"
                           autoComplete="off"
                           autoFocus={true}
-                          className="kuiLocalSearchAssistedInput__input"
+                          className="kuiLocalSearchAssistedInput__input codeSearchBar__input"
                           compressed={false}
                           data-test-subj="queryInput"
                           fullWidth={true}
@@ -1265,7 +1265,7 @@ exports[`render correctly with input query string changed 1`] = `
                                     aria-label="Search input"
                                     autoComplete="off"
                                     autoFocus={true}
-                                    className="euiFieldText kuiLocalSearchAssistedInput__input euiFieldText--fullWidth"
+                                    className="euiFieldText kuiLocalSearchAssistedInput__input codeSearchBar__input euiFieldText--fullWidth"
                                     data-test-subj="queryInput"
                                     onChange={[Function]}
                                     onClick={[Function]}

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

@@ -445,7 +445,7 @@ export class CodeQueryBar extends Component<Props, State> {
                 <div className="kuiLocalSearch" role="search">
                   <div className="kuiLocalSearchAssistedInput">
                     <EuiFieldText
-                      className="kuiLocalSearchAssistedInput__input"
+                      className="kuiLocalSearchAssistedInput__input codeSearchBar__input"
                       placeholder={SearchScopePlaceholderText[this.props.searchScope]}
                       value={this.state.query}
                       onKeyDown={this.onKeyDown}

x-pack/plugins/code/public/components/search_page/empty_placeholder.tsx

@@ -4,30 +4,35 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiButton, EuiSpacer, EuiText } from '@elastic/eui';
 import React from 'react';
 
 export const EmptyPlaceholder = (props: any) => {
   return (
-    <EuiFlexGroup direction="column" alignItems="center">
+    <div>
       <EuiSpacer size="xxl" />
       <EuiSpacer size="xxl" />
-      <EuiFlexItem grow={false}>
-        <EuiText style={{ fontSize: '24px', color: '#98A2B3' }}>"{props.query}"</EuiText>
-      </EuiFlexItem>
+      <EuiText
+        textAlign="center"
+        className="eui-textTruncate"
+        style={{ fontSize: '24px', color: '#98A2B3' }}
+      >
+        "
+        <span className="eui-textTruncate eui-displayInlineBlock" style={{ maxWidth: '90%' }}>
+          {props.query}
+        </span>
+        "
+      </EuiText>
+      <EuiSpacer size="xl" />
+      <EuiText textAlign="center" style={{ fontSize: '28px', color: '#1A1A1A' }}>
+        Hmmm... we looked for that, but couldn’t find anything.
+      </EuiText>
+      <EuiSpacer size="xl" />
+      <EuiText textAlign="center" color="subdued">
+        You can search for something else or modify your search settings.
+      </EuiText>
       <EuiSpacer size="l" />
-      <EuiFlexItem grow={false}>
-        <EuiText style={{ fontSize: '28px', color: '#1A1A1A' }}>
-          Hmmm... we looked for that, but couldn’t find anything.
-        </EuiText>
-      </EuiFlexItem>
-      <EuiSpacer size="l" />
-      <EuiFlexItem grow={false}>
-        <EuiText style={{ fontSize: '16px', color: '#69707D' }}>
-          You can search for something else or modify your search settings.
-        </EuiText>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
+      <EuiText textAlign="center">
         <EuiButton
           fill={true}
           onClick={() => {
@@ -38,7 +43,7 @@ export const EmptyPlaceholder = (props: any) => {
         >
           Modify your search settings
         </EuiButton>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+      </EuiText>
+    </div>
   );
 };

x-pack/plugins/code/public/monaco/monaco_helper.ts

@@ -158,7 +158,9 @@ export class MonacoHelper {
   }
 
   public clearLineSelection() {
-    this.decorations = this.editor!.deltaDecorations(this.decorations, []);
+    if (this.editor) {
+      this.decorations = this.editor.deltaDecorations(this.decorations, []);
+    }
   }
 
   private handleCopy(e: any) {

x-pack/plugins/code/public/style/_layout.scss

@@ -92,6 +92,7 @@
 }
 
 .codeContainer__search--main {
+  overflow: hidden;
   width: 100%;
   flex-grow: 1;
   display: flex;

x-pack/plugins/code/public/style/_query_bar.scss

@@ -4,3 +4,7 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
+.codeSearchBar__input {
+  padding-right: 10rem;
+}