From 8141f4d29b490d86ea43d00a9b1e7b083e984a8a Mon Sep 17 00:00:00 2001
From: spacedragon <yulong.huang@elastic.co>
Date: Wed, 20 Mar 2019 11:48:14 +0800
Subject: [PATCH] [Code] fix reference panel layout problems

---
 .../public/components/codeblock/codeblock.tsx |  1 +
 .../public/components/diff_page/diff.scss     |  6 ++--
 .../code/public/components/diff_page/diff.tsx |  2 +-
 .../components/editor/references_panel.scss   |  7 +++++
 .../components/editor/references_panel.tsx    | 30 +++++++++----------
 .../code/public/components/main/content.tsx   |  4 ++-
 .../code/public/components/main/main.scss     |  4 +--
 .../code/public/components/main/main.tsx      |  1 +
 .../code/public/monaco/monaco_helper.ts       |  1 +
 9 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/x-pack/plugins/code/public/components/codeblock/codeblock.tsx b/x-pack/plugins/code/public/components/codeblock/codeblock.tsx
index 5f3a721d45e592b..4fa4f2b3fe0c33f 100644
--- a/x-pack/plugins/code/public/components/codeblock/codeblock.tsx
+++ b/x-pack/plugins/code/public/components/codeblock/codeblock.tsx
@@ -52,6 +52,7 @@ export class CodeBlock extends React.PureComponent<Props> {
         selectionHighlight: false,
         renderLineHighlight: 'none',
         renderIndentGuides: false,
+        automaticLayout: false,
       });
       this.ed.onMouseDown((e: editor.IEditorMouseEvent) => {
         if (
diff --git a/x-pack/plugins/code/public/components/diff_page/diff.scss b/x-pack/plugins/code/public/components/diff_page/diff.scss
index 66aa5693b39171d..c402660599f5773 100644
--- a/x-pack/plugins/code/public/components/diff_page/diff.scss
+++ b/x-pack/plugins/code/public/components/diff_page/diff.scss
@@ -1,9 +1,11 @@
-button.euiAccordion__button > div:first-child {
+
+
+.diff > button.euiAccordion__button > div:first-child {
   flex-direction: row-reverse;
   padding: $euiSize $euiSizeS;
 }
 
-button.euiAccordion__button {
+.diff > button.euiAccordion__button {
   &:hover {
     text-decoration: none;
   }
diff --git a/x-pack/plugins/code/public/components/diff_page/diff.tsx b/x-pack/plugins/code/public/components/diff_page/diff.tsx
index f766fb65dcceee9..ab8424a739660eb 100644
--- a/x-pack/plugins/code/public/components/diff_page/diff.tsx
+++ b/x-pack/plugins/code/public/components/diff_page/diff.tsx
@@ -191,7 +191,7 @@ export class DiffPage extends React.Component<Props> {
       <Difference repoUri={repoUri} revision={commit.commit.id} fileDiff={file} key={file.path} />
     ));
     return (
-      <div>
+      <div className="diff">
         <SearchBar
           repoScope={this.props.repoScope}
           query={this.props.query}
diff --git a/x-pack/plugins/code/public/components/editor/references_panel.scss b/x-pack/plugins/code/public/components/editor/references_panel.scss
index 4c9d09890ebf209..fbc8e001f50cb43 100644
--- a/x-pack/plugins/code/public/components/editor/references_panel.scss
+++ b/x-pack/plugins/code/public/components/editor/references_panel.scss
@@ -7,6 +7,13 @@
   0px -6px 12px rgba(0, 0, 0, 0.05), 0px -12px 24px rgba(0, 0, 0, 0.05);
 }
 
+.code-editor-references-panel.expanded {
+  position: relative;
+  flex-grow: 10;
+  max-height: 100%;
+  height: 100%;
+}
+
 .code-editor-reference-accordion-button {
   font-size: 13px;
 }
diff --git a/x-pack/plugins/code/public/components/editor/references_panel.tsx b/x-pack/plugins/code/public/components/editor/references_panel.tsx
index 376e1a2613f2062..449ccb7316ff33d 100644
--- a/x-pack/plugins/code/public/components/editor/references_panel.tsx
+++ b/x-pack/plugins/code/public/components/editor/references_panel.tsx
@@ -13,6 +13,7 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
+import classname from 'classnames';
 import { IPosition } from 'monaco-editor';
 import queryString from 'querystring';
 import React from 'react';
@@ -57,20 +58,12 @@ export class ReferencesPanel extends React.Component<Props, State> {
     const body = this.props.isLoading ? <EuiLoadingKibana size="xl" /> : this.renderGroupByRepo();
     const styles: any = {};
     const expanded = this.state.expanded;
-    if (expanded) {
-      styles.position = 'absolute';
-      styles.bottom = 0;
-      styles.right = 0;
-      if (this.node) {
-        const parent = this.node.parentNode as Element;
-        styles.width = parent.clientWidth;
-        styles.height = parent.clientHeight - 75;
-        styles.maxHeight = styles.height;
-        styles.zIndex = 1000;
-      }
-    }
     return (
-      <EuiPanel grow={false} className="code-editor-references-panel" style={styles}>
+      <EuiPanel
+        grow={false}
+        className={classname(['code-editor-references-panel', expanded ? 'expanded' : ''])}
+        style={styles}
+      >
         <EuiButtonIcon
           size="s"
           onClick={this.toggleExpand}
@@ -90,7 +83,7 @@ export class ReferencesPanel extends React.Component<Props, State> {
         <EuiTitle size="s">
           <h3>{this.props.title}</h3>
         </EuiTitle>
-
+        <EuiSpacer size="m" />
         <div className="code-auto-overflow-y">{body}</div>
       </EuiPanel>
     );
@@ -103,12 +96,19 @@ export class ReferencesPanel extends React.Component<Props, State> {
   }
 
   private renderReferenceRepo({ repo, files }: GroupedRepoReferences) {
+    const [_, org, name] = repo.split('/');
+    const buttonContent = (
+      <span>
+        <span>{org}</span>/<b>{name}</b>
+      </span>
+    );
+
     return (
       <EuiAccordion
         id={repo}
         key={repo}
         buttonContentClassName="code-editor-reference-accordion-button"
-        buttonContent={repo}
+        buttonContent={buttonContent}
         paddingSize="s"
         initialIsOpen={true}
       >
diff --git a/x-pack/plugins/code/public/components/main/content.tsx b/x-pack/plugins/code/public/components/main/content.tsx
index 031873a1c4d9216..16facac8ef8add3 100644
--- a/x-pack/plugins/code/public/components/main/content.tsx
+++ b/x-pack/plugins/code/public/components/main/content.tsx
@@ -54,6 +54,7 @@ const EditorBlameContainer = styled.div`
   display: flex;
   flex-direction: row;
   flex-grow: 1;
+  max-height: calc(100% - 97px);
 `;
 
 const DirectoryViewContainer = styled.div`
@@ -69,7 +70,8 @@ const Root = styled.div`
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  height: 100%;
+  width: calc(100% - 256px);
 `;
 
 interface Props extends RouteComponentProps<MainRouteParams> {
diff --git a/x-pack/plugins/code/public/components/main/main.scss b/x-pack/plugins/code/public/components/main/main.scss
index d99a20c0b5298a0..d5a32bb108b0678 100644
--- a/x-pack/plugins/code/public/components/main/main.scss
+++ b/x-pack/plugins/code/public/components/main/main.scss
@@ -1,6 +1,6 @@
 .code-editor-container {
-  height: 100%;
-  overflow: auto;
+  overflow: hidden;
+  flex-grow: 1;
 }
 
 .code-auto-overflow {
diff --git a/x-pack/plugins/code/public/components/main/main.tsx b/x-pack/plugins/code/public/components/main/main.tsx
index 388535ac36ef30c..39db12e441823dd 100644
--- a/x-pack/plugins/code/public/components/main/main.tsx
+++ b/x-pack/plugins/code/public/components/main/main.tsx
@@ -28,6 +28,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: row;
   flex-grow: 1;
+  height: 100%;
 `;
 
 interface Props extends RouteComponentProps<MainRouteParams> {
diff --git a/x-pack/plugins/code/public/monaco/monaco_helper.ts b/x-pack/plugins/code/public/monaco/monaco_helper.ts
index ae1d271218f574b..d5884e98998c670 100644
--- a/x-pack/plugins/code/public/monaco/monaco_helper.ts
+++ b/x-pack/plugins/code/public/monaco/monaco_helper.ts
@@ -62,6 +62,7 @@ export class MonacoHelper {
           folding: true,
           scrollBeyondLastLine: false,
           renderIndentGuides: false,
+          automaticLayout: false,
         },
         {
           textModelService: new TextModelResolverService(monaco),