From 880eb76ca15df579b224f29043ccd809737e9acd Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Mon, 4 Apr 2022 14:15:42 -0400
Subject: [PATCH] [Discover] Fix height of JSON tab in Document flyout when
 using Document explorer in Safari (#129348) (#129382)

(cherry picked from commit feab5ebde1ff1e8c7f0eccf504da72e463b8a9d1)

Co-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>
---
 .../json_code_editor/json_code_editor_common.tsx    |  3 +++
 .../components/doc_viewer_source/source.tsx         | 13 ++++++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/plugins/discover/public/components/json_code_editor/json_code_editor_common.tsx b/src/plugins/discover/public/components/json_code_editor/json_code_editor_common.tsx
index 07d3ec2e759a3..5c247d0fe7381 100644
--- a/src/plugins/discover/public/components/json_code_editor/json_code_editor_common.tsx
+++ b/src/plugins/discover/public/components/json_code_editor/json_code_editor_common.tsx
@@ -25,12 +25,14 @@ interface JsonCodeEditorCommonProps {
   jsonValue: string;
   onEditorDidMount: (editor: monaco.editor.IStandaloneCodeEditor) => void;
   width?: string | number;
+  height?: string | number;
   hasLineNumbers?: boolean;
 }
 
 export const JsonCodeEditorCommon = ({
   jsonValue,
   width,
+  height,
   hasLineNumbers,
   onEditorDidMount,
 }: JsonCodeEditorCommonProps) => {
@@ -55,6 +57,7 @@ export const JsonCodeEditorCommon = ({
         <CodeEditor
           languageId={XJsonLang.ID}
           width={width}
+          height={height}
           value={jsonValue || ''}
           editorDidMount={onEditorDidMount}
           aria-label={codeEditorAriaLabel}
diff --git a/src/plugins/discover/public/services/doc_views/components/doc_viewer_source/source.tsx b/src/plugins/discover/public/services/doc_views/components/doc_viewer_source/source.tsx
index 327547f232265..845f078c59fac 100644
--- a/src/plugins/discover/public/services/doc_views/components/doc_viewer_source/source.tsx
+++ b/src/plugins/discover/public/services/doc_views/components/doc_viewer_source/source.tsx
@@ -42,6 +42,7 @@ export const DocViewerSource = ({
   hasLineNumbers,
 }: SourceViewerProps) => {
   const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor>();
+  const [editorHeight, setEditorHeight] = useState<number>();
   const [jsonValue, setJsonValue] = useState<string>('');
   const { uiSettings } = useDiscoverServices();
   const useNewFieldsApi = !uiSettings.get(SEARCH_FIELDS_FROM_SOURCE);
@@ -59,7 +60,9 @@ export const DocViewerSource = ({
     }
   }, [reqState, hit]);
 
-  // setting editor height based on lines height and count to stretch and fit its content
+  // setting editor height
+  // - classic view: based on lines height and count to stretch and fit its content
+  // - explorer: to fill the available space of the document flyout
   useEffect(() => {
     if (!editor) {
       return;
@@ -76,12 +79,11 @@ export const DocViewerSource = ({
     }
 
     if (!jsonValue || jsonValue === '') {
-      editorElement.style.height = '0px';
+      setEditorHeight(0);
     } else {
-      editorElement.style.height = `${height}px`;
+      setEditorHeight(height);
     }
-    editor.layout();
-  }, [editor, jsonValue, useDocExplorer]);
+  }, [editor, jsonValue, useDocExplorer, setEditorHeight]);
 
   const loadingState = (
     <div className="sourceViewer__loading">
@@ -128,6 +130,7 @@ export const DocViewerSource = ({
     <JSONCodeEditorCommonMemoized
       jsonValue={jsonValue}
       width={width}
+      height={editorHeight}
       hasLineNumbers={hasLineNumbers}
       onEditorDidMount={(editorNode: monaco.editor.IStandaloneCodeEditor) => setEditor(editorNode)}
     />