Respect system dark mode in ESQL editor (elastic#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 <[email protected]> Co-authored-by: Stratoula Kalafateli <[email protected]>
jesuswr · Nov 18, 2024 · ef9621d · ef9621d
1 parent 050550c
commit ef9621d
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 = [