[Console] Migrate output editor to Monaco

src/plugins/console/public/application/containers/editor/editor.tsx

@@ -16,7 +16,7 @@ import { Editor as EditorUI, EditorOutput } from './legacy/console_editor';
 import { getAutocompleteInfo, StorageKeys } from '../../../services';
 import { useEditorReadContext, useServicesContext, useRequestReadContext } from '../../contexts';
 import type { SenseEditor } from '../../models';
-import { MonacoEditor } from './monaco/monaco_editor';
+import { MonacoEditor, MonacoEditorOutput } from './monaco';
 
 const INITIAL_PANEL_WIDTH = 50;
 const PANEL_MIN_WIDTH = '100px';
@@ -86,7 +86,13 @@ export const Editor = memo(({ loading, setEditorInstance }: Props) => {
           style={{ height: '100%', position: 'relative', minWidth: PANEL_MIN_WIDTH }}
           initialWidth={secondPanelWidth}
         >
-          {loading ? <EditorContentSpinner /> : <EditorOutput />}
+          {loading ? (
+            <EditorContentSpinner />
+          ) : isMonacoEnabled ? (
+            <MonacoEditorOutput />
+          ) : (
+            <EditorOutput />
+          )}
         </Panel>
       </PanelsContainer>
     </>

src/plugins/console/public/application/containers/editor/legacy/console_editor/editor_output.tsx

@@ -18,7 +18,6 @@ import 'brace/mode/text';
 import 'brace/mode/hjson';
 import 'brace/mode/yaml';
 
-import { expandLiteralStrings } from '../../../../../shared_imports';
 import {
   useEditorReadContext,
   useRequestReadContext,
@@ -27,23 +26,7 @@ import {
 import { createReadOnlyAceEditor, CustomAceEditor } from '../../../../models/legacy_core_editor';
 import { subscribeResizeChecker } from '../subscribe_console_resize_checker';
 import { applyCurrentSettings } from './apply_editor_settings';
-
-const isJSONContentType = (contentType?: string) =>
-  Boolean(contentType && contentType.indexOf('application/json') >= 0);
-
-const isMapboxVectorTile = (contentType?: string) =>
-  contentType?.includes('application/vnd.mapbox-vector-tile') ?? false;
-
-/**
- * Best effort expand literal strings
- */
-const safeExpandLiteralStrings = (data: string): string => {
-  try {
-    return expandLiteralStrings(data);
-  } catch (e) {
-    return data;
-  }
-};
+import { isJSONContentType, isMapboxVectorTile, safeExpandLiteralStrings } from '../../utilities';
 
 function modeForContentType(contentType?: string) {
   if (!contentType) {

src/plugins/console/public/application/containers/editor/monaco/index.ts

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+export { MonacoEditor } from './monaco_editor';
+export { MonacoEditorOutput } from './monaco_editor_output';

src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx

@@ -0,0 +1,70 @@
+/*
+ * 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 React, { FunctionComponent, useEffect, useState } from 'react';
+import { CodeEditor } from '@kbn/code-editor';
+import { css } from '@emotion/react';
+import { VectorTile } from '@mapbox/vector-tile';
+import Protobuf from 'pbf';
+import { i18n } from '@kbn/i18n';
+import { EuiScreenReaderOnly } from '@elastic/eui';
+import { useEditorReadContext, useRequestReadContext } from '../../../contexts';
+import { convertMapboxVectorTileToJson } from '../legacy/console_editor/mapbox_vector_tile';
+import { isJSONContentType, isMapboxVectorTile, safeExpandLiteralStrings } from '../utilities';
+
+export const MonacoEditorOutput: FunctionComponent = () => {
+  const { settings: readOnlySettings } = useEditorReadContext();
+  const {
+    lastResult: { data },
+  } = useRequestReadContext();
+  const [value, setValue] = useState('');
+
+  useEffect(() => {
+    if (data) {
+      setValue(
+        data
+          .map((result) => {
+            const { value: newValue, contentType } = result.response;
+
+            let editorOutput;
+            if (readOnlySettings.tripleQuotes && isJSONContentType(contentType)) {
+              editorOutput = safeExpandLiteralStrings(newValue as string);
+            } else if (isMapboxVectorTile(contentType)) {
+              const vectorTile = new VectorTile(new Protobuf(newValue as ArrayBuffer));
+              const vectorTileJson = convertMapboxVectorTileToJson(vectorTile);
+              editorOutput = safeExpandLiteralStrings(vectorTileJson as string);
+            } else {
+              editorOutput = newValue;
+            }
+
+            return editorOutput;
+          })
+          .join('\n')
+      );
+    } else {
+      setValue('');
+    }
+  }, [readOnlySettings, data, value]);
+
+  return (
+    <div
+      css={css`
+        width: 100%;
+      `}
+    >
+      <EuiScreenReaderOnly>
+        <label htmlFor={'ConAppOutputTextarea'}>
+          {i18n.translate('console.outputTextarea', {
+            defaultMessage: 'Dev Tools Console output',
+          })}
+        </label>
+      </EuiScreenReaderOnly>
+      <CodeEditor languageId={'json'} value={value} fullWidth={true} />
+    </div>
+  );
+};

src/plugins/console/public/application/containers/editor/utilities/index.ts

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export * from './output_data';

src/plugins/console/public/application/containers/editor/utilities/output_data.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 { expandLiteralStrings } from '../../../../shared_imports';
+
+export const isJSONContentType = (contentType?: string) =>
+  Boolean(contentType && contentType.indexOf('application/json') >= 0);
+
+export const isMapboxVectorTile = (contentType?: string) =>
+  contentType?.includes('application/vnd.mapbox-vector-tile') ?? false;
+
+/**
+ * Best effort expand literal strings
+ */
+export const safeExpandLiteralStrings = (data: string): string => {
+  try {
+    return expandLiteralStrings(data);
+  } catch (e) {
+    return data;
+  }
+};