From ef9621d61a7ed57412910b47b4ec9329637e399f Mon Sep 17 00:00:00 2001 From: Nathan L Smith Date: Mon, 18 Nov 2024 09:49:10 -0600 Subject: [PATCH] Respect system dark mode in ESQL editor (#200233) When `uiSettings.overrides.theme:darkMode: true` is set, the ESQL editor uses dark mode. When `uiSettings.overrides.theme:darkMode: system` is set, the ESQL editor uses light mode, while the rest of the UI uses dark mode. Update the ESQL theme creation to create both light and dark variations of the theme at startup and use the theme in React component to determine which ESQL theme to use at runtime. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Stratoula Kalafateli --- .../kbn-esql-editor/src/esql_editor.test.tsx | 7 +- packages/kbn-esql-editor/src/esql_editor.tsx | 14 +- packages/kbn-monaco/index.ts | 2 +- packages/kbn-monaco/src/esql/index.ts | 4 +- packages/kbn-monaco/src/esql/lib/constants.ts | 3 +- .../src/esql/lib/esql_theme.test.ts | 8 +- .../kbn-monaco/src/esql/lib/esql_theme.ts | 316 +++++++++--------- packages/kbn-monaco/src/register_globals.ts | 5 +- 8 files changed, 187 insertions(+), 172 deletions(-) diff --git a/packages/kbn-esql-editor/src/esql_editor.test.tsx b/packages/kbn-esql-editor/src/esql_editor.test.tsx index ac00604e5508b..c572ff5355585 100644 --- a/packages/kbn-esql-editor/src/esql_editor.test.tsx +++ b/packages/kbn-esql-editor/src/esql_editor.test.tsx @@ -16,23 +16,20 @@ import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; import { ESQLEditor } from './esql_editor'; import type { ESQLEditorProps } from './types'; import { ReactWrapper } from 'enzyme'; -import { of } from 'rxjs'; +import { coreMock } from '@kbn/core/server/mocks'; describe('ESQLEditor', () => { const uiConfig: Record = {}; const uiSettings = { get: (key: string) => uiConfig[key], } as IUiSettingsClient; - const theme = { - theme$: of({ darkMode: false }), - }; const services = { uiSettings, settings: { client: uiSettings, }, - theme, + core: coreMock.createStart(), }; function renderESQLEditorComponent(testProps: ESQLEditorProps) { diff --git a/packages/kbn-esql-editor/src/esql_editor.tsx b/packages/kbn-esql-editor/src/esql_editor.tsx index e8ca582ac5229..636bb0b13ff17 100644 --- a/packages/kbn-esql-editor/src/esql_editor.tsx +++ b/packages/kbn-esql-editor/src/esql_editor.tsx @@ -25,7 +25,14 @@ import type { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public'; import type { AggregateQuery } from '@kbn/es-query'; import type { ExpressionsStart } from '@kbn/expressions-plugin/public'; import { useKibana } from '@kbn/kibana-react-plugin/public'; -import { ESQLLang, ESQL_LANG_ID, ESQL_THEME_ID, monaco, type ESQLCallbacks } from '@kbn/monaco'; +import { + ESQLLang, + ESQL_LANG_ID, + ESQL_DARK_THEME_ID, + ESQL_LIGHT_THEME_ID, + monaco, + type ESQLCallbacks, +} from '@kbn/monaco'; import memoize from 'lodash/memoize'; import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; @@ -91,7 +98,8 @@ export const ESQLEditor = memo(function ESQLEditor({ fieldsMetadata, uiSettings, } = kibana.services; - const timeZone = core?.uiSettings?.get('dateFormat:tz'); + const darkMode = core.theme?.getTheme().darkMode; + const timeZone = uiSettings?.get('dateFormat:tz'); const histogramBarTarget = uiSettings?.get('histogram:barTarget') ?? 50; const [code, setCode] = useState(query.esql ?? ''); // To make server side errors less "sticky", register the state of the code when submitting @@ -597,7 +605,7 @@ export const ESQLEditor = memo(function ESQLEditor({ vertical: 'auto', }, scrollBeyondLastLine: false, - theme: ESQL_THEME_ID, + theme: darkMode ? ESQL_DARK_THEME_ID : ESQL_LIGHT_THEME_ID, wordWrap: 'on', wrappingIndent: 'none', }; diff --git a/packages/kbn-monaco/index.ts b/packages/kbn-monaco/index.ts index ba8b0edb68e1a..283c3150302b7 100644 --- a/packages/kbn-monaco/index.ts +++ b/packages/kbn-monaco/index.ts @@ -20,7 +20,7 @@ export { } from './src/monaco_imports'; export { XJsonLang } from './src/xjson'; export { SQLLang } from './src/sql'; -export { ESQL_LANG_ID, ESQL_THEME_ID, ESQLLang } from './src/esql'; +export { ESQL_LANG_ID, ESQL_DARK_THEME_ID, ESQL_LIGHT_THEME_ID, ESQLLang } from './src/esql'; export type { ESQLCallbacks } from '@kbn/esql-validation-autocomplete'; export * from './src/painless'; diff --git a/packages/kbn-monaco/src/esql/index.ts b/packages/kbn-monaco/src/esql/index.ts index b14a2ab18ba75..64d49b155cc42 100644 --- a/packages/kbn-monaco/src/esql/index.ts +++ b/packages/kbn-monaco/src/esql/index.ts @@ -7,6 +7,6 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -export { ESQL_LANG_ID, ESQL_THEME_ID } from './lib/constants'; +export { ESQL_LANG_ID, ESQL_DARK_THEME_ID, ESQL_LIGHT_THEME_ID } from './lib/constants'; export { ESQLLang } from './language'; -export { buildESQlTheme } from './lib/esql_theme'; +export { buildESQLTheme } from './lib/esql_theme'; diff --git a/packages/kbn-monaco/src/esql/lib/constants.ts b/packages/kbn-monaco/src/esql/lib/constants.ts index b0b0588b3ff4a..56f2f85ab074e 100644 --- a/packages/kbn-monaco/src/esql/lib/constants.ts +++ b/packages/kbn-monaco/src/esql/lib/constants.ts @@ -8,6 +8,7 @@ */ export const ESQL_LANG_ID = 'esql'; -export const ESQL_THEME_ID = 'esqlTheme'; +export const ESQL_LIGHT_THEME_ID = 'esqlThemeLight'; +export const ESQL_DARK_THEME_ID = 'esqlThemeDark'; export const ESQL_TOKEN_POSTFIX = '.esql'; diff --git a/packages/kbn-monaco/src/esql/lib/esql_theme.test.ts b/packages/kbn-monaco/src/esql/lib/esql_theme.test.ts index 237996a7fbcaa..c2a200e650804 100644 --- a/packages/kbn-monaco/src/esql/lib/esql_theme.test.ts +++ b/packages/kbn-monaco/src/esql/lib/esql_theme.test.ts @@ -9,12 +9,12 @@ import { ESQLErrorListener, getLexer as _getLexer } from '@kbn/esql-ast'; import { ESQL_TOKEN_POSTFIX } from './constants'; -import { buildESQlTheme } from './esql_theme'; +import { buildESQLTheme } from './esql_theme'; import { CharStreams } from 'antlr4'; describe('ESQL Theme', () => { it('should not have multiple rules for a single token', () => { - const theme = buildESQlTheme(); + const theme = buildESQLTheme({ darkMode: false }); const seen = new Set(); const duplicates: string[] = []; @@ -40,7 +40,7 @@ describe('ESQL Theme', () => { .map((name) => name!.toLowerCase()); it('every rule should apply to a valid lexical name', () => { - const theme = buildESQlTheme(); + const theme = buildESQLTheme({ darkMode: false }); // These names aren't from the lexer... they are added on our side // see packages/kbn-monaco/src/esql/lib/esql_token_helpers.ts @@ -62,7 +62,7 @@ describe('ESQL Theme', () => { }); it('every valid lexical name should have a corresponding rule', () => { - const theme = buildESQlTheme(); + const theme = buildESQLTheme({ darkMode: false }); const tokenIDs = theme.rules.map((rule) => rule.token.replace(ESQL_TOKEN_POSTFIX, '')); const validExceptions = [ diff --git a/packages/kbn-monaco/src/esql/lib/esql_theme.ts b/packages/kbn-monaco/src/esql/lib/esql_theme.ts index 330e55de86155..07a4d723b63e8 100644 --- a/packages/kbn-monaco/src/esql/lib/esql_theme.ts +++ b/packages/kbn-monaco/src/esql/lib/esql_theme.ts @@ -7,169 +7,177 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { euiThemeVars, darkMode } from '@kbn/ui-theme'; +import { euiDarkVars, euiLightVars } from '@kbn/ui-theme'; import { themeRuleGroupBuilderFactory } from '../../common/theme'; import { ESQL_TOKEN_POSTFIX } from './constants'; import { monaco } from '../../monaco_imports'; const buildRuleGroup = themeRuleGroupBuilderFactory(ESQL_TOKEN_POSTFIX); -export const buildESQlTheme = (): monaco.editor.IStandaloneThemeData => ({ - base: darkMode ? 'vs-dark' : 'vs', - inherit: true, - rules: [ - // base - ...buildRuleGroup( - [ - 'explain', - 'ws', - 'assign', - 'comma', - 'dot', - 'opening_bracket', - 'closing_bracket', - 'quoted_identifier', - 'unquoted_identifier', - 'pipe', - ], - euiThemeVars.euiTextColor - ), +export const buildESQLTheme = ({ + darkMode, +}: { + darkMode: boolean; +}): monaco.editor.IStandaloneThemeData => { + const euiThemeVars = darkMode ? euiDarkVars : euiLightVars; - // source commands - ...buildRuleGroup( - ['from', 'row', 'show'], - euiThemeVars.euiColorPrimaryText, - true // isBold - ), + return { + base: darkMode ? 'vs-dark' : 'vs', + inherit: true, + rules: [ + // base + ...buildRuleGroup( + [ + 'explain', + 'ws', + 'assign', + 'comma', + 'dot', + 'opening_bracket', + 'closing_bracket', + 'quoted_identifier', + 'unquoted_identifier', + 'pipe', + ], + euiThemeVars.euiTextColor + ), - // commands - ...buildRuleGroup( - [ - 'dev_metrics', - 'metadata', - 'mv_expand', - 'stats', - 'dev_inlinestats', - 'dissect', - 'grok', - 'keep', - 'rename', - 'drop', - 'eval', - 'sort', - 'by', - 'where', - 'not', - 'is', - 'like', - 'rlike', - 'in', - 'as', - 'limit', - 'dev_lookup', - 'null', - 'enrich', - 'on', - 'with', - 'asc', - 'desc', - 'nulls_order', - ], - euiThemeVars.euiColorAccentText, - true // isBold - ), + // source commands + ...buildRuleGroup( + ['from', 'row', 'show'], + euiThemeVars.euiColorPrimaryText, + true // isBold + ), - // functions - ...buildRuleGroup(['functions'], euiThemeVars.euiColorPrimaryText), + // commands + ...buildRuleGroup( + [ + 'dev_metrics', + 'metadata', + 'mv_expand', + 'stats', + 'dev_inlinestats', + 'dissect', + 'grok', + 'keep', + 'rename', + 'drop', + 'eval', + 'sort', + 'by', + 'where', + 'not', + 'is', + 'like', + 'rlike', + 'in', + 'as', + 'limit', + 'dev_lookup', + 'null', + 'enrich', + 'on', + 'with', + 'asc', + 'desc', + 'nulls_order', + ], + euiThemeVars.euiColorAccentText, + true // isBold + ), - // operators - ...buildRuleGroup( - [ - 'or', - 'and', - 'rp', // ')' - 'lp', // '(' - 'eq', // '==' - 'cieq', // '=~' - 'neq', // '!=' - 'lt', // '<' - 'lte', // '<=' - 'gt', // '>' - 'gte', // '>=' - 'plus', // '+' - 'minus', // '-' - 'asterisk', // '*' - 'slash', // '/' - 'percent', // '%' - 'cast_op', // '::' - ], - euiThemeVars.euiColorPrimaryText - ), + // functions + ...buildRuleGroup(['functions'], euiThemeVars.euiColorPrimaryText), - // comments - ...buildRuleGroup( - [ - 'line_comment', - 'multiline_comment', - 'expr_line_comment', - 'expr_multiline_comment', - 'explain_line_comment', - 'explain_multiline_comment', - 'project_line_comment', - 'project_multiline_comment', - 'rename_line_comment', - 'rename_multiline_comment', - 'from_line_comment', - 'from_multiline_comment', - 'enrich_line_comment', - 'enrich_multiline_comment', - 'mvexpand_line_comment', - 'mvexpand_multiline_comment', - 'enrich_field_line_comment', - 'enrich_field_multiline_comment', - 'lookup_line_comment', - 'lookup_multiline_comment', - 'lookup_field_line_comment', - 'lookup_field_multiline_comment', - 'show_line_comment', - 'show_multiline_comment', - 'setting', - 'setting_line_comment', - 'settting_multiline_comment', - 'metrics_line_comment', - 'metrics_multiline_comment', - 'closing_metrics_line_comment', - 'closing_metrics_multiline_comment', - ], - euiThemeVars.euiColorDisabledText - ), + // operators + ...buildRuleGroup( + [ + 'or', + 'and', + 'rp', // ')' + 'lp', // '(' + 'eq', // '==' + 'cieq', // '=~' + 'neq', // '!=' + 'lt', // '<' + 'lte', // '<=' + 'gt', // '>' + 'gte', // '>=' + 'plus', // '+' + 'minus', // '-' + 'asterisk', // '*' + 'slash', // '/' + 'percent', // '%' + 'cast_op', // '::' + ], + euiThemeVars.euiColorPrimaryText + ), - // values - ...buildRuleGroup( - [ - 'quoted_string', - 'integer_literal', - 'decimal_literal', - 'named_or_positional_param', - 'param', - 'timespan_literal', - ], - euiThemeVars.euiColorSuccessText - ), - ], - colors: { - 'editor.foreground': euiThemeVars.euiTextColor, - 'editor.background': euiThemeVars.euiColorEmptyShade, - 'editor.lineHighlightBackground': euiThemeVars.euiColorLightestShade, - 'editor.lineHighlightBorder': euiThemeVars.euiColorLightestShade, - 'editor.selectionHighlightBackground': euiThemeVars.euiColorLightestShade, - 'editor.selectionHighlightBorder': euiThemeVars.euiColorLightShade, - 'editorSuggestWidget.background': euiThemeVars.euiColorEmptyShade, - 'editorSuggestWidget.border': euiThemeVars.euiColorEmptyShade, - 'editorSuggestWidget.focusHighlightForeground': euiThemeVars.euiColorEmptyShade, - 'editorSuggestWidget.foreground': euiThemeVars.euiTextColor, - 'editorSuggestWidget.highlightForeground': euiThemeVars.euiColorPrimary, - 'editorSuggestWidget.selectedBackground': euiThemeVars.euiColorPrimary, - 'editorSuggestWidget.selectedForeground': euiThemeVars.euiColorEmptyShade, - }, -}); + // comments + ...buildRuleGroup( + [ + 'line_comment', + 'multiline_comment', + 'expr_line_comment', + 'expr_multiline_comment', + 'explain_line_comment', + 'explain_multiline_comment', + 'project_line_comment', + 'project_multiline_comment', + 'rename_line_comment', + 'rename_multiline_comment', + 'from_line_comment', + 'from_multiline_comment', + 'enrich_line_comment', + 'enrich_multiline_comment', + 'mvexpand_line_comment', + 'mvexpand_multiline_comment', + 'enrich_field_line_comment', + 'enrich_field_multiline_comment', + 'lookup_line_comment', + 'lookup_multiline_comment', + 'lookup_field_line_comment', + 'lookup_field_multiline_comment', + 'show_line_comment', + 'show_multiline_comment', + 'setting', + 'setting_line_comment', + 'settting_multiline_comment', + 'metrics_line_comment', + 'metrics_multiline_comment', + 'closing_metrics_line_comment', + 'closing_metrics_multiline_comment', + ], + euiThemeVars.euiColorDisabledText + ), + + // values + ...buildRuleGroup( + [ + 'quoted_string', + 'integer_literal', + 'decimal_literal', + 'named_or_positional_param', + 'param', + 'timespan_literal', + ], + euiThemeVars.euiColorSuccessText + ), + ], + colors: { + 'editor.foreground': euiThemeVars.euiTextColor, + 'editor.background': euiThemeVars.euiColorEmptyShade, + 'editor.lineHighlightBackground': euiThemeVars.euiColorLightestShade, + 'editor.lineHighlightBorder': euiThemeVars.euiColorLightestShade, + 'editor.selectionHighlightBackground': euiThemeVars.euiColorLightestShade, + 'editor.selectionHighlightBorder': euiThemeVars.euiColorLightShade, + 'editorSuggestWidget.background': euiThemeVars.euiColorEmptyShade, + 'editorSuggestWidget.border': euiThemeVars.euiColorEmptyShade, + 'editorSuggestWidget.focusHighlightForeground': euiThemeVars.euiColorEmptyShade, + 'editorSuggestWidget.foreground': euiThemeVars.euiTextColor, + 'editorSuggestWidget.highlightForeground': euiThemeVars.euiColorPrimary, + 'editorSuggestWidget.selectedBackground': euiThemeVars.euiColorPrimary, + 'editorSuggestWidget.selectedForeground': euiThemeVars.euiColorEmptyShade, + }, + }; +}; diff --git a/packages/kbn-monaco/src/register_globals.ts b/packages/kbn-monaco/src/register_globals.ts index b4d9c07f78c79..32b8fb0ef2ece 100644 --- a/packages/kbn-monaco/src/register_globals.ts +++ b/packages/kbn-monaco/src/register_globals.ts @@ -11,7 +11,7 @@ import { XJsonLang } from './xjson'; import { PainlessLang } from './painless'; import { SQLLang } from './sql'; import { monaco } from './monaco_imports'; -import { ESQL_THEME_ID, ESQLLang, buildESQlTheme } from './esql'; +import { ESQL_DARK_THEME_ID, ESQL_LIGHT_THEME_ID, ESQLLang, buildESQLTheme } from './esql'; import { YAML_LANG_ID } from './yaml'; import { registerLanguage, registerTheme } from './helpers'; import { ConsoleLang, ConsoleOutputLang, CONSOLE_THEME_ID, buildConsoleTheme } from './console'; @@ -50,7 +50,8 @@ registerLanguage(ConsoleOutputLang); /** * Register custom themes */ -registerTheme(ESQL_THEME_ID, buildESQlTheme()); +registerTheme(ESQL_LIGHT_THEME_ID, buildESQLTheme({ darkMode: false })); +registerTheme(ESQL_DARK_THEME_ID, buildESQLTheme({ darkMode: true })); registerTheme(CONSOLE_THEME_ID, buildConsoleTheme()); registerTheme(CODE_EDITOR_LIGHT_THEME_ID, buildLightTheme()); registerTheme(CODE_EDITOR_DARK_THEME_ID, buildDarkTheme());