[Discover] Fix height of JSON tab in Document flyout when using Docum…

…ent explorer in Safari (#129348)
elastic · Apr 4, 2022 · feab5eb · feab5eb
1 parent 513c81b
commit feab5eb
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 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
@@ -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
@@ -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)}
     />