[Console Monaco] Add theme for yaml and text mode in output

packages/kbn-monaco/index.ts

@@ -36,5 +36,7 @@ export {
   CONSOLE_LANG_ID,
   CONSOLE_OUTPUT_LANG_ID,
   CONSOLE_THEME_ID,
-  CONSOLE_OUTPUT_THEME_ID,
+  CONSOLE_OUTPUT_JSON_THEME_ID,
+  CONSOLE_OUTPUT_YAML_THEME_ID,
+  CONSOLE_OUTPUT_TEXT_THEME_ID,
 } from './src/console';

packages/kbn-monaco/src/console/constants.ts

@@ -9,5 +9,7 @@
 export const CONSOLE_LANG_ID = 'console';
 export const CONSOLE_THEME_ID = 'consoleTheme';
 export const CONSOLE_OUTPUT_LANG_ID = 'consoleOutput';
-export const CONSOLE_OUTPUT_THEME_ID = 'consoleOutputTheme';
+export const CONSOLE_OUTPUT_JSON_THEME_ID = 'consoleOutputJsonTheme';
+export const CONSOLE_OUTPUT_YAML_THEME_ID = 'consoleOutputYamlTheme';
+export const CONSOLE_OUTPUT_TEXT_THEME_ID = 'consoleOutputTextTheme';
 export const CONSOLE_POSTFIX = '.console';

packages/kbn-monaco/src/console/index.ts

@@ -24,10 +24,17 @@ export {
   CONSOLE_LANG_ID,
   CONSOLE_OUTPUT_LANG_ID,
   CONSOLE_THEME_ID,
-  CONSOLE_OUTPUT_THEME_ID,
+  CONSOLE_OUTPUT_JSON_THEME_ID,
+  CONSOLE_OUTPUT_YAML_THEME_ID,
+  CONSOLE_OUTPUT_TEXT_THEME_ID,
 } from './constants';
 
-export { buildConsoleTheme, buildConsoleOutputTheme } from './theme';
+export {
+  buildConsoleTheme,
+  buildConsoleOutputJsonTheme,
+  buildConsoleOutputYamlTheme,
+  buildConsoleOutputTextTheme,
+} from './theme';
 
 export const ConsoleLang: LangModuleType = {
   ID: CONSOLE_LANG_ID,

packages/kbn-monaco/src/console/theme/basic_theme.ts

@@ -0,0 +1,33 @@
+/*
+ * 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 { darkMode, euiThemeVars } from '@kbn/ui-theme';
+import { monaco } from '../../monaco_imports';
+
+const background = euiThemeVars.euiColorLightestShade;
+
+/**
+ * A utility function that returns a theme with the basic theme features that are used
+ * in both the Console editor and the Console output panel in all modes.
+ */
+export const buildConsoleBasicTheme = (): monaco.editor.IStandaloneThemeData => {
+  return {
+    base: darkMode ? 'vs-dark' : 'vs',
+    inherit: true,
+    rules: [],
+    colors: {
+      'editor.background': background,
+      // color of the line numbers
+      'editorLineNumber.foreground': euiThemeVars.euiColorDarkShade,
+      // color of the active line number
+      'editorLineNumber.activeForeground': euiThemeVars.euiColorDarkShade,
+      // background of the line numbers side panel
+      'editorGutter.background': euiThemeVars.euiColorEmptyShade,
+    },
+  };
+};

packages/kbn-monaco/src/console/theme/editor_theme.ts

@@ -11,19 +11,21 @@ import { euiThemeVars } from '@kbn/ui-theme';
 
 import { themeRuleGroupBuilderFactory } from '../../common/theme';
 import { monaco } from '../../monaco_imports';
-import { buildConsoleSharedTheme } from './shared';
+import { buildConsoleBasicTheme } from './basic_theme';
+import { buildConsoleSharedJsonRules } from './shared_json_rules';
 
 const buildRuleGroup = themeRuleGroupBuilderFactory();
 
 const background = euiThemeVars.euiColorLightestShade;
 const methodTextColor = '#DD0A73';
 const urlTextColor = '#00A69B';
 export const buildConsoleTheme = (): monaco.editor.IStandaloneThemeData => {
-  const sharedTheme = buildConsoleSharedTheme();
+  const basicTheme = buildConsoleBasicTheme();
+  const sharedJsonRules = buildConsoleSharedJsonRules();
   return {
-    ...sharedTheme,
+    ...basicTheme,
     rules: [
-      ...sharedTheme.rules,
+      ...sharedJsonRules,
       ...buildRuleGroup(['method'], makeHighContrastColor(methodTextColor)(background)),
       ...buildRuleGroup(['url'], makeHighContrastColor(urlTextColor)(background)),
     ],

packages/kbn-monaco/src/console/theme/index.ts

@@ -7,4 +7,8 @@
  */
 
 export { buildConsoleTheme } from './editor_theme';
-export { buildConsoleOutputTheme } from './output_theme';
+export {
+  buildConsoleOutputJsonTheme,
+  buildConsoleOutputYamlTheme,
+  buildConsoleOutputTextTheme,
+} from './output_theme';

packages/kbn-monaco/src/console/theme/output_theme.ts

@@ -7,11 +7,27 @@
  */
 
 import { monaco } from '../../monaco_imports';
-import { buildConsoleSharedTheme } from './shared';
+import { buildConsoleBasicTheme } from './basic_theme';
+import { buildConsoleSharedJsonRules } from './shared_json_rules';
 
-export const buildConsoleOutputTheme = (): monaco.editor.IStandaloneThemeData => {
-  const sharedTheme = buildConsoleSharedTheme();
+const basicTheme = buildConsoleBasicTheme();
+
+export const buildConsoleOutputJsonTheme = (): monaco.editor.IStandaloneThemeData => {
+  const sharedJsonRules = buildConsoleSharedJsonRules();
+  return {
+    ...basicTheme,
+    rules: sharedJsonRules,
+  };
+};
+
+export const buildConsoleOutputYamlTheme = (): monaco.editor.IStandaloneThemeData => {
+  return {
+    ...basicTheme,
+  };
+};
+
+export const buildConsoleOutputTextTheme = (): monaco.editor.IStandaloneThemeData => {
   return {
-    ...sharedTheme,
+    ...basicTheme,
   };
 };

packages/kbn-monaco/src/console/theme/shared_json_rules.ts

@@ -0,0 +1,41 @@
+/*
+ * 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 { makeHighContrastColor } from '@elastic/eui';
+import { euiThemeVars } from '@kbn/ui-theme';
+
+import { themeRuleGroupBuilderFactory } from '../../common/theme';
+
+const buildRuleGroup = themeRuleGroupBuilderFactory();
+
+const background = euiThemeVars.euiColorLightestShade;
+const stringTextColor = '#009926';
+const commentTextColor = '#4C886B';
+const variableTextColor = '#0079A5';
+const booleanTextColor = '#585CF6';
+const numericTextColor = variableTextColor;
+
+/**
+ * A utility function that returns theme rules that are shared between Console editor and
+ * the Console output panel when it is in JSON mode.
+ */
+export const buildConsoleSharedJsonRules = () => {
+  return [
+    ...buildRuleGroup(
+      ['string', 'string-literal', 'multi-string', 'punctuation.end-triple-quote'],
+      makeHighContrastColor(stringTextColor)(background)
+    ),
+    ...buildRuleGroup(['comment'], makeHighContrastColor(commentTextColor)(background)),
+    ...buildRuleGroup(['variable'], makeHighContrastColor(variableTextColor)(background)),
+    ...buildRuleGroup(
+      ['constant.language.boolean'],
+      makeHighContrastColor(booleanTextColor)(background)
+    ),
+    ...buildRuleGroup(['constant.numeric'], makeHighContrastColor(numericTextColor)(background)),
+  ];
+};

packages/kbn-monaco/src/register_globals.ts

@@ -17,9 +17,13 @@ import {
   ConsoleLang,
   ConsoleOutputLang,
   CONSOLE_THEME_ID,
-  CONSOLE_OUTPUT_THEME_ID,
+  CONSOLE_OUTPUT_JSON_THEME_ID,
+  CONSOLE_OUTPUT_YAML_THEME_ID,
+  CONSOLE_OUTPUT_TEXT_THEME_ID,
   buildConsoleTheme,
-  buildConsoleOutputTheme,
+  buildConsoleOutputJsonTheme,
+  buildConsoleOutputYamlTheme,
+  buildConsoleOutputTextTheme,
 } from './console';
 
 export const DEFAULT_WORKER_ID = 'default';
@@ -48,7 +52,9 @@ registerLanguage(ConsoleOutputLang);
  */
 registerTheme(ESQL_THEME_ID, buildESQlTheme());
 registerTheme(CONSOLE_THEME_ID, buildConsoleTheme());
-registerTheme(CONSOLE_OUTPUT_THEME_ID, buildConsoleOutputTheme());
+registerTheme(CONSOLE_OUTPUT_JSON_THEME_ID, buildConsoleOutputJsonTheme());
+registerTheme(CONSOLE_OUTPUT_YAML_THEME_ID, buildConsoleOutputYamlTheme());
+registerTheme(CONSOLE_OUTPUT_TEXT_THEME_ID, buildConsoleOutputTextTheme());
 
 const monacoBundleDir = (window as any).__kbnPublicPath__?.['kbn-monaco'];
 

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

@@ -13,14 +13,15 @@ import { VectorTile } from '@mapbox/vector-tile';
 import Protobuf from 'pbf';
 import { i18n } from '@kbn/i18n';
 import { EuiScreenReaderOnly } from '@elastic/eui';
-import { CONSOLE_OUTPUT_THEME_ID, CONSOLE_OUTPUT_LANG_ID } from '@kbn/monaco';
+import { CONSOLE_OUTPUT_LANG_ID } from '@kbn/monaco';
 import { useEditorReadContext, useRequestReadContext } from '../../../contexts';
 import { convertMapboxVectorTileToJson } from '../legacy/console_editor/mapbox_vector_tile';
 import {
   isJSONContentType,
   isMapboxVectorTile,
   safeExpandLiteralStrings,
   languageForContentType,
+  getThemeForLanguage,
 } from '../utilities';
 
 export const MonacoEditorOutput: FunctionComponent = () => {
@@ -84,7 +85,7 @@ export const MonacoEditorOutput: FunctionComponent = () => {
         options={{
           fontSize: readOnlySettings.fontSize,
           wordWrap: readOnlySettings.wrapMode === true ? 'on' : 'off',
-          theme: mode === CONSOLE_OUTPUT_LANG_ID ? CONSOLE_OUTPUT_THEME_ID : undefined,
+          theme: getThemeForLanguage(mode),
         }}
       />
     </div>

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

@@ -6,7 +6,13 @@
  * Side Public License, v 1.
  */
 
-import { YAML_LANG_ID, CONSOLE_OUTPUT_LANG_ID } from '@kbn/monaco';
+import {
+  YAML_LANG_ID,
+  CONSOLE_OUTPUT_LANG_ID,
+  CONSOLE_OUTPUT_JSON_THEME_ID,
+  CONSOLE_OUTPUT_YAML_THEME_ID,
+  CONSOLE_OUTPUT_TEXT_THEME_ID,
+} from '@kbn/monaco';
 import { expandLiteralStrings } from '../../../../shared_imports';
 
 export const isJSONContentType = (contentType?: string) =>
@@ -40,3 +46,20 @@ export const languageForContentType = (contentType?: string) => {
   }
   return TEXT_LANGUAGE_ID;
 };
+
+export const getThemeForLanguage = (language: string) => {
+  switch (language) {
+    case CONSOLE_OUTPUT_LANG_ID: {
+      return CONSOLE_OUTPUT_JSON_THEME_ID;
+    }
+    case YAML_LANG_ID: {
+      return CONSOLE_OUTPUT_YAML_THEME_ID;
+    }
+    case TEXT_LANGUAGE_ID: {
+      return CONSOLE_OUTPUT_TEXT_THEME_ID;
+    }
+    default: {
+      return undefined;
+    }
+  }
+};