diff --git a/packages/kbn-monaco/index.ts b/packages/kbn-monaco/index.ts index fad82d4d4a143..e02ae6dbdfe16 100644 --- a/packages/kbn-monaco/index.ts +++ b/packages/kbn-monaco/index.ts @@ -36,7 +36,6 @@ export { CONSOLE_LANG_ID, CONSOLE_OUTPUT_LANG_ID, CONSOLE_THEME_ID, - CONSOLE_OUTPUT_THEME_ID, getParsedRequestsProvider, ConsoleParsedRequestsProvider, } from './src/console'; diff --git a/packages/kbn-monaco/src/console/constants.ts b/packages/kbn-monaco/src/console/constants.ts index c6563efba93ac..ed29ebd93f10a 100644 --- a/packages/kbn-monaco/src/console/constants.ts +++ b/packages/kbn-monaco/src/console/constants.ts @@ -9,5 +9,4 @@ 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_POSTFIX = '.console'; diff --git a/packages/kbn-monaco/src/console/index.ts b/packages/kbn-monaco/src/console/index.ts index 00f6cb68de64a..5b4127191802d 100644 --- a/packages/kbn-monaco/src/console/index.ts +++ b/packages/kbn-monaco/src/console/index.ts @@ -20,14 +20,9 @@ import { consoleOutputLanguageConfiguration, } from './lexer_rules'; -export { - CONSOLE_LANG_ID, - CONSOLE_OUTPUT_LANG_ID, - CONSOLE_THEME_ID, - CONSOLE_OUTPUT_THEME_ID, -} from './constants'; +export { CONSOLE_LANG_ID, CONSOLE_OUTPUT_LANG_ID, CONSOLE_THEME_ID } from './constants'; -export { buildConsoleTheme, buildConsoleOutputTheme } from './theme'; +export { buildConsoleTheme } from './theme'; export const ConsoleLang: LangModuleType = { ID: CONSOLE_LANG_ID, diff --git a/packages/kbn-monaco/src/console/theme.ts b/packages/kbn-monaco/src/console/theme.ts new file mode 100644 index 0000000000000..66e2bfab812bd --- /dev/null +++ b/packages/kbn-monaco/src/console/theme.ts @@ -0,0 +1,44 @@ +/* + * 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 { darkMode } from '@kbn/ui-theme'; +import { buildLightTheme, buildDarkTheme } from '../code_editor'; +import { themeRuleGroupBuilderFactory } from '../common/theme'; +import { monaco } from '../monaco_imports'; + +const buildRuleGroup = themeRuleGroupBuilderFactory(); + +const background = euiThemeVars.euiFormBackgroundColor; +const booleanTextColor = '#585CF6'; +const methodTextColor = '#DD0A73'; +const urlTextColor = '#00A69B'; +export const buildConsoleTheme = (): monaco.editor.IStandaloneThemeData => { + const euiTheme = darkMode ? buildDarkTheme() : buildLightTheme(); + return { + ...euiTheme, + rules: [ + ...euiTheme.rules, + ...buildRuleGroup( + ['string-literal', 'multi-string', 'punctuation.end-triple-quote'], + makeHighContrastColor(euiThemeVars.euiColorDangerText)(background) + ), + ...buildRuleGroup( + ['constant.language.boolean'], + makeHighContrastColor(booleanTextColor)(background) + ), + ...buildRuleGroup( + ['constant.numeric'], + makeHighContrastColor(euiThemeVars.euiColorAccentText)(background) + ), + ...buildRuleGroup(['method'], makeHighContrastColor(methodTextColor)(background)), + ...buildRuleGroup(['url'], makeHighContrastColor(urlTextColor)(background)), + ], + }; +}; diff --git a/packages/kbn-monaco/src/console/theme/editor_theme.ts b/packages/kbn-monaco/src/console/theme/editor_theme.ts deleted file mode 100644 index f01c34919bb09..0000000000000 --- a/packages/kbn-monaco/src/console/theme/editor_theme.ts +++ /dev/null @@ -1,31 +0,0 @@ -/* - * 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'; -import { monaco } from '../../monaco_imports'; -import { buildConsoleSharedTheme } from './shared'; - -const buildRuleGroup = themeRuleGroupBuilderFactory(); - -const background = euiThemeVars.euiColorLightestShade; -const methodTextColor = '#DD0A73'; -const urlTextColor = '#00A69B'; -export const buildConsoleTheme = (): monaco.editor.IStandaloneThemeData => { - const sharedTheme = buildConsoleSharedTheme(); - return { - ...sharedTheme, - rules: [ - ...sharedTheme.rules, - ...buildRuleGroup(['method'], makeHighContrastColor(methodTextColor)(background)), - ...buildRuleGroup(['url'], makeHighContrastColor(urlTextColor)(background)), - ], - }; -}; diff --git a/packages/kbn-monaco/src/console/theme/index.ts b/packages/kbn-monaco/src/console/theme/index.ts deleted file mode 100644 index b9e03585f6297..0000000000000 --- a/packages/kbn-monaco/src/console/theme/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -/* - * 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 { buildConsoleTheme } from './editor_theme'; -export { buildConsoleOutputTheme } from './output_theme'; diff --git a/packages/kbn-monaco/src/console/theme/output_theme.ts b/packages/kbn-monaco/src/console/theme/output_theme.ts deleted file mode 100644 index ad6ffae757128..0000000000000 --- a/packages/kbn-monaco/src/console/theme/output_theme.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* - * 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 { monaco } from '../../monaco_imports'; -import { buildConsoleSharedTheme } from './shared'; - -export const buildConsoleOutputTheme = (): monaco.editor.IStandaloneThemeData => { - const sharedTheme = buildConsoleSharedTheme(); - return { - ...sharedTheme, - }; -}; diff --git a/packages/kbn-monaco/src/console/theme/shared.ts b/packages/kbn-monaco/src/console/theme/shared.ts deleted file mode 100644 index 3bdb543f6ef9d..0000000000000 --- a/packages/kbn-monaco/src/console/theme/shared.ts +++ /dev/null @@ -1,50 +0,0 @@ -/* - * 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 { darkMode, euiThemeVars } from '@kbn/ui-theme'; - -import { themeRuleGroupBuilderFactory } from '../../common/theme'; -import { monaco } from '../../monaco_imports'; - -const buildRuleGroup = themeRuleGroupBuilderFactory(); - -const background = euiThemeVars.euiColorLightestShade; -const stringTextColor = '#009926'; -const commentTextColor = '#4C886B'; -const variableTextColor = '#0079A5'; -const booleanTextColor = '#585CF6'; -const numericTextColor = variableTextColor; -export const buildConsoleSharedTheme = (): monaco.editor.IStandaloneThemeData => { - return { - base: darkMode ? 'vs-dark' : 'vs', - inherit: true, - rules: [ - ...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)), - ], - 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, - }, - }; -}; diff --git a/packages/kbn-monaco/src/register_globals.ts b/packages/kbn-monaco/src/register_globals.ts index 7e12ee24b386a..0b1bcd44f2554 100644 --- a/packages/kbn-monaco/src/register_globals.ts +++ b/packages/kbn-monaco/src/register_globals.ts @@ -13,14 +13,7 @@ import { monaco } from './monaco_imports'; import { ESQL_THEME_ID, ESQLLang, buildESQlTheme } from './esql'; import { YAML_LANG_ID } from './yaml'; import { registerLanguage, registerTheme } from './helpers'; -import { - ConsoleLang, - ConsoleOutputLang, - CONSOLE_THEME_ID, - CONSOLE_OUTPUT_THEME_ID, - buildConsoleTheme, - buildConsoleOutputTheme, -} from './console'; +import { ConsoleLang, ConsoleOutputLang, CONSOLE_THEME_ID, buildConsoleTheme } from './console'; import { CODE_EDITOR_LIGHT_THEME_ID, CODE_EDITOR_DARK_THEME_ID, @@ -58,7 +51,6 @@ registerLanguage(ConsoleOutputLang); */ registerTheme(ESQL_THEME_ID, buildESQlTheme()); registerTheme(CONSOLE_THEME_ID, buildConsoleTheme()); -registerTheme(CONSOLE_OUTPUT_THEME_ID, buildConsoleOutputTheme()); registerTheme(CODE_EDITOR_LIGHT_THEME_ID, buildLightTheme()); registerTheme(CODE_EDITOR_DARK_THEME_ID, buildDarkTheme()); registerTheme(CODE_EDITOR_LIGHT_THEME_TRANSPARENT_ID, buildLightTransparentTheme()); diff --git a/packages/kbn-monaco/tsconfig.json b/packages/kbn-monaco/tsconfig.json index 4df3aa9b486b3..d39ed146027a9 100644 --- a/packages/kbn-monaco/tsconfig.json +++ b/packages/kbn-monaco/tsconfig.json @@ -26,7 +26,7 @@ "@kbn/repo-info", "@kbn/ui-theme", "@kbn/esql-ast", - "@kbn/esql-validation-autocomplete" + "@kbn/esql-validation-autocomplete", ], "exclude": [ "target/**/*", diff --git a/src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx b/src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx index a5647cb1c49f1..f11ea7479d461 100644 --- a/src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx +++ b/src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx @@ -13,7 +13,7 @@ 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, monaco } from '@kbn/monaco'; +import { CONSOLE_THEME_ID, CONSOLE_OUTPUT_LANG_ID, monaco } from '@kbn/monaco'; import { useEditorReadContext, useRequestReadContext } from '../../../contexts'; import { convertMapboxVectorTileToJson } from '../legacy/console_editor/mapbox_vector_tile'; import { @@ -99,9 +99,10 @@ export const MonacoEditorOutput: FunctionComponent = () => { editorDidMount={editorDidMountCallback} editorWillUnmount={editorWillUnmountCallback} options={{ + readOnly: true, fontSize: readOnlySettings.fontSize, wordWrap: readOnlySettings.wrapMode === true ? 'on' : 'off', - theme: mode === CONSOLE_OUTPUT_LANG_ID ? CONSOLE_OUTPUT_THEME_ID : undefined, + theme: CONSOLE_THEME_ID, automaticLayout: true, }} /> diff --git a/src/plugins/console/public/styles/_app.scss b/src/plugins/console/public/styles/_app.scss index 37f2753b1a99b..a4a7469a69bfe 100644 --- a/src/plugins/console/public/styles/_app.scss +++ b/src/plugins/console/public/styles/_app.scss @@ -100,6 +100,7 @@ @include kbnResizer; // Give the aria selection border priority when the divider is selected on IE11 and Chrome z-index: $euiZLevel1; + background-color: $euiColorLightestShade; } // SASSTODO: This component seems to not be used anymore?