Replace EuiCodeBlock with Monaco editor in Discover (#90781) (#91753)

* Update version of react-monaco-editor and monaco-editor libraries

* Fix yarn lock file

* Fix CI

* Fix unit tests

* Fix CI

* Fix comment

* move monaco instance in window.MonacoEnvironment

* Replace EuiCodeBlock with Monaco editor in Discover expanded document

* Replace EuiCodeBlock with EuiErrorBoundary

* Revert changes done by mistake

* Remove unused translations

* Fix doc_viewer test and snapshots

* Add comment and rename the function related to editor height calculation

* Remove "value" from JSON tree and fix resizing

* Update json_code_editor.test.tsx.snap

* Fix JsonCodeEditor props

* Fix json_code_editor test

* Delete JsonCodeBlock and remove inline style in JsonCodeEditor

* Rename jsonCodeEditor CSS class name to dscJsonCodeEditor

Co-authored-by: Uladzislau Lasitsa <[email protected]>
Co-authored-by: Kibana Machine <[email protected]>

Co-authored-by: Uladzislau Lasitsa <[email protected]>
Co-authored-by: Kibana Machine <[email protected]>

src/plugins/discover/public/application/components/doc_viewer/doc_viewer.test.tsx

@@ -16,6 +16,11 @@ import { DocViewRenderProps } from '../../doc_views/doc_views_types';
 jest.mock('../../../kibana_services', () => {
   let registry: any[] = [];
   return {
+    getServices: () => ({
+      uiSettings: {
+        get: jest.fn(),
+      },
+    }),
     getDocViewsRegistry: () => ({
       addDocView(view: any) {
         registry.push(view);

src/plugins/discover/public/application/components/doc_viewer/doc_viewer_render_error.tsx

@@ -7,20 +7,18 @@
  */
 
 import React from 'react';
-import { EuiCallOut, EuiCodeBlock } from '@elastic/eui';
-import { formatMsg, formatStack } from '../../../../../kibana_legacy/public';
+import { EuiErrorBoundary } from '@elastic/eui';
 
 interface Props {
   error: Error | string;
 }
 
-export function DocViewerError({ error }: Props) {
-  const errMsg = formatMsg(error);
-  const errStack = typeof error === 'object' ? formatStack(error) : '';
+const DocViewerErrorWrapper = ({ error }: Props) => {
+  throw error;
+};
 
-  return (
-    <EuiCallOut title={errMsg} color="danger" iconType="cross" data-test-subj="docViewerError">
-      {errStack && <EuiCodeBlock>{errStack}</EuiCodeBlock>}
-    </EuiCallOut>
-  );
-}
+export const DocViewerError = ({ error }: Props) => (
+  <EuiErrorBoundary data-test-subj="docViewerError">
+    <DocViewerErrorWrapper error={error} />
+  </EuiErrorBoundary>
+);

src/plugins/discover/public/application/components/doc_viewer/doc_viewer_tab.tsx

@@ -11,6 +11,8 @@ import { I18nProvider } from '@kbn/i18n/react';
 import { DocViewRenderTab } from './doc_viewer_render_tab';
 import { DocViewerError } from './doc_viewer_render_error';
 import { DocViewRenderFn, DocViewRenderProps } from '../../doc_views/doc_views_types';
+import { getServices } from '../../../kibana_services';
+import { KibanaContextProvider } from '../../../../../kibana_react/public';
 
 interface Props {
   component?: React.ComponentType<DocViewRenderProps>;
@@ -72,7 +74,9 @@ export class DocViewerTab extends React.Component<Props, State> {
     const Component = component as any;
     return (
       <I18nProvider>
-        <Component {...renderProps} />
+        <KibanaContextProvider services={{ uiSettings: getServices().uiSettings }}>
+          <Component {...renderProps} />
+        </KibanaContextProvider>
       </I18nProvider>
     );
   }

src/plugins/discover/public/application/components/json_code_editor/json_code_editor.scss

@@ -0,0 +1,3 @@
+.dscJsonCodeEditor {
+  width: 100%
+}

src/plugins/discover/public/application/components/json_code_block/json_code_block.test.tsx → src/plugins/discover/public/application/components/json_code_editor/json_code_editor.test.tsx

@@ -8,17 +8,15 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
-import { JsonCodeBlock } from './json_code_block';
-import { IndexPattern } from '../../../../../data/public';
+import { JsonCodeEditor } from './json_code_editor';
 
 it('returns the `JsonCodeEditor` component', () => {
-  const props = {
-    hit: { _index: 'test', _type: 'doc', _id: 'foo', _score: 1, _source: { test: 123 } },
-    columns: [],
-    indexPattern: {} as IndexPattern,
-    filter: jest.fn(),
-    onAddColumn: jest.fn(),
-    onRemoveColumn: jest.fn(),
+  const value = {
+    _index: 'test',
+    _type: 'doc',
+    _id: 'foo',
+    _score: 1,
+    _source: { test: 123 },
   };
-  expect(shallow(<JsonCodeBlock {...props} />)).toMatchSnapshot();
+  expect(shallow(<JsonCodeEditor hit={value} />)).toMatchSnapshot();
 });

src/plugins/discover/public/application/components/json_code_editor/json_code_editor.tsx

@@ -0,0 +1,84 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import './json_code_editor.scss';
+
+import React, { useCallback } from 'react';
+import { i18n } from '@kbn/i18n';
+import { monaco, XJsonLang } from '@kbn/monaco';
+import { EuiButtonEmpty, EuiCopy, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { CodeEditor } from '../../../../../kibana_react/public';
+import { DocViewRenderProps } from '../../../application/doc_views/doc_views_types';
+
+const codeEditorAriaLabel = i18n.translate('discover.json.codeEditorAriaLabel', {
+  defaultMessage: 'Read only JSON view of an elasticsearch document',
+});
+const copyToClipboardLabel = i18n.translate('discover.json.copyToClipboardLabel', {
+  defaultMessage: 'Copy to clipboard',
+});
+
+export const JsonCodeEditor = ({ hit }: DocViewRenderProps) => {
+  const jsonValue = JSON.stringify(hit, null, 2);
+
+  // setting editor height based on lines height and count to stretch and fit its content
+  const setEditorCalculatedHeight = useCallback((editor) => {
+    const editorElement = editor.getDomNode();
+
+    if (!editorElement) {
+      return;
+    }
+
+    const lineHeight = editor.getOption(monaco.editor.EditorOption.lineHeight);
+    const lineCount = editor.getModel()?.getLineCount() || 1;
+    const height = editor.getTopForLineNumber(lineCount + 1) + lineHeight;
+
+    editorElement.style.height = `${height}px`;
+    editor.layout();
+  }, []);
+
+  return (
+    <EuiFlexGroup className="dscJsonCodeEditor" direction="column" gutterSize="s">
+      <EuiFlexItem grow={true}>
+        <EuiSpacer size="s" />
+        <div className="eui-textRight">
+          <EuiCopy textToCopy={jsonValue}>
+            {(copy) => (
+              <EuiButtonEmpty size="xs" flush="right" iconType="copyClipboard" onClick={copy}>
+                {copyToClipboardLabel}
+              </EuiButtonEmpty>
+            )}
+          </EuiCopy>
+        </div>
+      </EuiFlexItem>
+      <EuiFlexItem grow={true}>
+        <CodeEditor
+          languageId={XJsonLang.ID}
+          value={jsonValue}
+          onChange={() => {}}
+          editorDidMount={setEditorCalculatedHeight}
+          aria-label={codeEditorAriaLabel}
+          options={{
+            automaticLayout: true,
+            fontSize: 12,
+            minimap: {
+              enabled: false,
+            },
+            overviewRulerBorder: false,
+            readOnly: true,
+            scrollbar: {
+              alwaysConsumeMouseWheel: false,
+            },
+            scrollBeyondLastLine: false,
+            wordWrap: 'on',
+            wrappingIndent: 'indent',
+          }}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

src/plugins/discover/public/plugin.ts

@@ -36,7 +36,7 @@ import { UrlGeneratorState } from '../../share/public';
 import { DocViewInput, DocViewInputFn } from './application/doc_views/doc_views_types';
 import { DocViewsRegistry } from './application/doc_views/doc_views_registry';
 import { DocViewTable } from './application/components/table/table';
-import { JsonCodeBlock } from './application/components/json_code_block/json_code_block';
+import { JsonCodeEditor } from './application/components/json_code_editor/json_code_editor';
 import {
   setDocViewsRegistry,
   setUrlTracker,
@@ -187,7 +187,7 @@ export class DiscoverPlugin
         defaultMessage: 'JSON',
       }),
       order: 20,
-      component: JsonCodeBlock,
+      component: JsonCodeEditor,
     });
 
     const {

x-pack/plugins/translations/translations/ja-JP.json

@@ -1483,7 +1483,6 @@
     "discover.docTable.tableRow.viewSingleDocumentLinkText": "単一のドキュメントを表示",
     "discover.docTable.tableRow.viewSurroundingDocumentsLinkText": "周りのドキュメントを表示",
     "discover.documentsAriaLabel": "ドキュメント",
-    "discover.docViews.json.codeEditorAriaLabel": "Elasticsearch ドキュメントの JSON ビューのみを読み込む",
     "discover.docViews.json.jsonTitle": "JSON",
     "discover.docViews.table.fieldNamesBeginningWithUnderscoreUnsupportedAriaLabel": "警告",
     "discover.docViews.table.fieldNamesBeginningWithUnderscoreUnsupportedTooltip": "{underscoreSign} で始まるフィールド名はサポートされません",

x-pack/plugins/translations/translations/zh-CN.json

@@ -1483,7 +1483,6 @@
     "discover.docTable.tableRow.viewSingleDocumentLinkText": "查看单个文档",
     "discover.docTable.tableRow.viewSurroundingDocumentsLinkText": "查看周围文档",
     "discover.documentsAriaLabel": "文档",
-    "discover.docViews.json.codeEditorAriaLabel": "Elasticsearch 文档的只读 JSON 视图",
     "discover.docViews.json.jsonTitle": "JSON",
     "discover.docViews.table.fieldNamesBeginningWithUnderscoreUnsupportedAriaLabel": "警告",
     "discover.docViews.table.fieldNamesBeginningWithUnderscoreUnsupportedTooltip": "不支持以 {underscoreSign} 开头的字段名称",