[8.x] Respect system dark mode in ESQL editor (#200233) (#200602)

# Backport This will backport the following commits from `main` to `8.x`: - [Respect system dark mode in ESQL editor (#200233)](#200233)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Nathan L Smith <[email protected]>
elastic · Nov 18, 2024 · cdd8d06 · cdd8d06
1 parent 85c830d
commit cdd8d06
Show file tree

Hide file tree

Showing 8 changed files with 187 additions and 172 deletions.
diff --git 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<string, any> = {};
   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
@@ -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<string>(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
@@ -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
@@ -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
@@ -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
@@ -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<string>();
     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 = [