Changing where CodeEditor fields get useDarkMode value

examples/expressions_explorer/public/app.tsx

@@ -38,6 +38,7 @@ interface Props {
 }
 
 const ExpressionsExplorer = ({ expressions, inspector, actions, uiSettings, settings }: Props) => {
+  // TODO theme needs to be provided here for examples/expressions_explorer/public/editor/expression_editor.tsx, need CodeOwners help
   const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
     uiSettings,
     settings,

examples/expressions_explorer/public/editor/expression_editor.tsx

@@ -16,7 +16,7 @@ interface Props {
 
 export function ExpressionEditor({ value, onChange }: Props) {
   return (
-    <CodeEditor
+    <CodeEditor // TODO theme needs to be provided from examples/expressions_explorer/public/app.tsx, need CodeOwners help
       languageId="javascript"
       width="100%"
       height="250px"

src/plugins/advanced_settings/public/management_app/advanced_settings.tsx

@@ -74,6 +74,7 @@ export class AdvancedSettings extends Component<AdvancedSettingsProps> {
           services={{
             uiSettings: this.props.settingsService.client,
             settings: this.props.settingsService,
+            theme: { theme$: this.props.theme },
           }}
         >
           <Form

src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx

@@ -21,6 +21,12 @@ jest.mock('@kbn/kibana-react-plugin/public/ui_settings/use_ui_setting', () => ({
   useUiSetting: jest.fn(),
 }));
 
+jest.mock('@kbn/kibana-react-plugin/public/theme/use_theme', () => ({
+  useKibanaTheme: jest.fn(() => {
+    return { darkMode: false };
+  }),
+}));
+
 const defaults = {
   requiresPageReload: false,
   readOnly: false,

src/plugins/advanced_settings/public/management_app/components/field/field_code_editor.tsx

@@ -81,7 +81,7 @@ export const FieldCodeEditor = ({
   );
 
   return (
-    <CodeEditor
+    <CodeEditor // TODO updated to provide theme via src/plugins/advanced_settings/public/management_app/advanced_settings.tsx
       {...a11yProps}
       languageId={type === 'json' ? XJsonLang.ID : MarkdownLang}
       value={value}

src/plugins/data/public/search/session/sessions_mgmt/components/actions/inspect_button.tsx

@@ -33,7 +33,7 @@ const InspectFlyout = ({ uiSettings, searchSession }: InspectFlyoutProps) => {
   const renderInfo = () => {
     return (
       <Fragment>
-        <CodeEditor
+        <CodeEditor // TODO theme provided by src/plugins/data/public/search/search_service.ts
           languageId="json"
           value={JSON.stringify(searchSession, null, 2)}
           options={{

src/plugins/data_view_field_editor/public/components/field_editor/form_fields/script_field.tsx

@@ -259,7 +259,7 @@ const ScriptFieldComponent = ({ existingConcreteFields, links, placeholder }: Pr
               }
               fullWidth
             >
-              <CodeEditor
+              <CodeEditor // TODO theme provided in src/plugins/data_view_field_editor/public/open_editor.tsx
                 languageId={PainlessLang.ID}
                 suggestionProvider={suggestionProvider}
                 // 99% width allows the editor to resize horizontally. 100% prevents it from resizing.

src/plugins/data_view_field_editor/public/open_editor.tsx

@@ -72,12 +72,13 @@ export const getFieldEditorOpener =
     apiService,
   }: Dependencies) =>
   (options: OpenFieldEditorOptions): CloseEditor => {
-    const { uiSettings, overlays, docLinks, notifications, settings } = core;
+    const { uiSettings, overlays, docLinks, notifications, settings, theme } = core;
     const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
       uiSettings,
       docLinks,
       http: core.http,
       settings,
+      theme,
     });
 
     let overlayRef: OverlayRef | null = null;

src/plugins/data_view_management/public/components/field_editor/field_editor.tsx

@@ -601,7 +601,7 @@ export class FieldEditor extends PureComponent<FieldEdiorProps, FieldEditorState
           isInvalid={isInvalid}
           error={isInvalid ? errorMsg : null}
         >
-          <CodeEditor
+          <CodeEditor // TODO theme provided in src/plugins/data_view_management/public/management_app/mount_management_section.tsx
             languageId={PainlessLang.ID}
             width="100%"
             height="300px"

src/plugins/discover/public/build_services.ts

@@ -61,7 +61,7 @@ import { DiscoverAppLocator } from '../common';
 export interface HistoryLocationState {
   referrer: string;
 }
-
+// TODO theme needs to be provided with the theme$ observable, let code owners decide
 export interface DiscoverServices {
   application: ApplicationStart;
   addBasePath: (path: string) => string;

src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx

@@ -28,6 +28,7 @@ const mockServices = {
   fieldFormats: {
     getDefaultInstance: jest.fn(() => ({ convert: (value: unknown) => (value ? value : '-') })),
   },
+  // TODO needs theme to provide theme$ observable, the required value here depends on how Discover services are changed
 };
 
 jest.mock('../../hooks/use_discover_services', () => {

src/plugins/discover/public/components/json_code_editor/json_code_editor_common.tsx

@@ -42,7 +42,7 @@ export const JsonCodeEditorCommon = ({
     return null;
   }
   const codeEditor = (
-    <CodeEditor
+    <CodeEditor // TODO theme needs to be provided in the top level context, in src/plugins/discover/public/build_services.ts, theme is not providing a theme$ observable
       languageId={XJsonLang.ID}
       width={width}
       height={height}

src/plugins/inspector/public/plugin.tsx

@@ -106,6 +106,7 @@ export class InspectorPublicPlugin implements Plugin<Setup, Start> {
               uiSettings: core.uiSettings,
               share: startDeps.share,
               settings: core.settings,
+              theme: core.theme,
             }}
           />,
           { theme$: core.theme.theme$ }

src/plugins/inspector/public/ui/inspector_panel.test.tsx

@@ -14,9 +14,10 @@ import { Adapters } from '../../common';
 import type { ApplicationStart, HttpSetup, IUiSettingsClient } from '@kbn/core/public';
 import { SharePluginStart } from '@kbn/share-plugin/public';
 import { sharePluginMock } from '@kbn/share-plugin/public/mocks';
-import { applicationServiceMock } from '@kbn/core/public/mocks';
+import { applicationServiceMock, themeServiceMock } from '@kbn/core/public/mocks';
 import { settingsServiceMock } from '@kbn/core-ui-settings-browser-mocks';
 import type { SettingsStart } from '@kbn/core-ui-settings-browser';
+import { ThemeServiceStart } from '@kbn/core/public';
 
 describe('InspectorPanel', () => {
   let adapters: Adapters;
@@ -27,12 +28,14 @@ describe('InspectorPanel', () => {
     share: sharePluginMock.createStartContract(),
     uiSettings: {},
     settings: settingsServiceMock.createStartContract(),
+    theme: themeServiceMock.createStartContract(),
   } as unknown as {
     application: ApplicationStart;
     http: HttpSetup;
     share: SharePluginStart;
     uiSettings: IUiSettingsClient;
     settings: SettingsStart;
+    theme: ThemeServiceStart;
   };
 
   beforeEach(() => {

src/plugins/inspector/public/ui/inspector_panel.tsx

@@ -18,7 +18,12 @@ import {
   EuiFlyoutBody,
   EuiLoadingSpinner,
 } from '@elastic/eui';
-import { ApplicationStart, HttpStart, IUiSettingsClient } from '@kbn/core/public';
+import {
+  ApplicationStart,
+  HttpStart,
+  IUiSettingsClient,
+  ThemeServiceStart,
+} from '@kbn/core/public';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { SharePluginStart } from '@kbn/share-plugin/public';
 import type { SettingsStart } from '@kbn/core-ui-settings-browser';
@@ -48,6 +53,7 @@ interface InspectorPanelProps {
     uiSettings: IUiSettingsClient;
     share: SharePluginStart;
     settings: SettingsStart;
+    theme: ThemeServiceStart;
   };
 }
 

src/plugins/kibana_react/public/code_editor/code_editor.tsx

@@ -357,6 +357,15 @@ export const CodeEditor: React.FC<Props> = ({
     ]
   );
 
+  useEffect(() => {
+    // Register themes when 'useDarkThem' changes
+    monaco.editor.defineTheme('euiColors', useDarkTheme ? DARK_THEME : LIGHT_THEME);
+    monaco.editor.defineTheme(
+      'euiColorsTransparent',
+      useDarkTheme ? DARK_THEME_TRANSPARENT : LIGHT_THEME_TRANSPARENT
+    );
+  }, [useDarkTheme]);
+
   const _editorDidMount = useCallback(
     (editor: monaco.editor.IStandaloneCodeEditor, __monaco: unknown) => {
       if (__monaco !== monaco) {

src/plugins/kibana_react/public/code_editor/index.tsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import { EuiDelayRender, EuiErrorBoundary, EuiSkeletonText } from '@elastic/eui';
 
-import { useUiSetting } from '../ui_settings';
+import { useKibanaTheme } from '../theme';
 import type { Props } from './code_editor';
 
 export * from './languages/constants';
@@ -40,11 +40,11 @@ export type CodeEditorProps = Props;
  * @see CodeEditorField to render a code editor in the same style as other EUI form fields.
  */
 export const CodeEditor: React.FunctionComponent<Props> = (props) => {
-  const darkMode = useUiSetting<boolean>('theme:darkMode');
+  const coreTheme = useKibanaTheme();
   return (
     <EuiErrorBoundary>
       <React.Suspense fallback={<Fallback height={props.height} />}>
-        <LazyBaseEditor {...props} useDarkTheme={darkMode} />
+        <LazyBaseEditor {...props} useDarkTheme={coreTheme.darkMode} />
       </React.Suspense>
     </EuiErrorBoundary>
   );
@@ -54,11 +54,11 @@ export const CodeEditor: React.FunctionComponent<Props> = (props) => {
  * Renders a Monaco code editor in the same style as other EUI form fields.
  */
 export const CodeEditorField: React.FunctionComponent<Props> = (props) => {
-  const darkMode = useUiSetting<boolean>('theme:darkMode');
+  const coreTheme = useKibanaTheme();
   return (
     <EuiErrorBoundary>
       <React.Suspense fallback={<Fallback height={props.height} />}>
-        <LazyCodeEditorField {...props} useDarkTheme={darkMode} />
+        <LazyCodeEditorField {...props} useDarkTheme={coreTheme.darkMode} />
       </React.Suspense>
     </EuiErrorBoundary>
   );

src/plugins/kibana_react/public/index.ts

@@ -88,7 +88,7 @@ export type { ToMountPointOptions } from './util';
 /** @deprecated Use `RedirectAppLinks` from `@kbn/shared-ux-link-redirect-app` */
 export { RedirectAppLinks } from './app_links';
 
-export { wrapWithTheme, KibanaThemeProvider } from './theme';
+export { wrapWithTheme, KibanaThemeProvider, useKibanaTheme } from './theme';
 
 /** dummy plugin, we just want kibanaReact to have its own bundle */
 export function plugin() {

src/plugins/kibana_react/public/theme/index.ts

@@ -8,4 +8,5 @@
 
 export { wrapWithTheme } from './wrap_with_theme';
 export { KibanaThemeProvider } from './kibana_theme_provider';
+export { useKibanaTheme } from './use_theme';
 export type { EuiTheme } from './types';

src/plugins/kibana_react/public/theme/use_theme.test.tsx

@@ -0,0 +1,56 @@
+/*
+ * 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 React, { FC, useEffect } from 'react';
+import { mountWithIntl } from '@kbn/test-jest-helpers';
+import type { CoreTheme } from '@kbn/core/public';
+import { KibanaContextProvider } from '../context';
+import { themeServiceMock } from '@kbn/core/public/mocks';
+import { useKibanaTheme } from './use_theme';
+
+describe('useKibanaTheme', () => {
+  let resultTheme: CoreTheme | undefined;
+
+  beforeEach(() => {
+    resultTheme = undefined;
+  });
+
+  const InnerComponent: FC = () => {
+    const theme = useKibanaTheme();
+    useEffect(() => {
+      resultTheme = theme;
+    }, [theme]);
+    return <div>foo</div>;
+  };
+
+  it('retrieve CoreTheme when theme service is provided in context', async () => {
+    const expectedCoreTheme: CoreTheme = { darkMode: false };
+
+    const themeServiceStart = themeServiceMock.createStartContract();
+
+    mountWithIntl(
+      <KibanaContextProvider services={{ theme: themeServiceStart }}>
+        <InnerComponent />
+      </KibanaContextProvider>
+    );
+
+    expect(resultTheme).toEqual(expectedCoreTheme);
+  });
+
+  it('throws type error when theme is not provided', async () => {
+    const mount = () => {
+      return mountWithIntl(
+        <KibanaContextProvider>
+          <InnerComponent />
+        </KibanaContextProvider>
+      );
+    };
+
+    expect(mount).toThrow(new TypeError('theme service not available in kibana-react context.'));
+  });
+});

src/plugins/kibana_react/public/theme/use_theme.ts

@@ -0,0 +1,25 @@
+/*
+ * 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 { CoreTheme } from '@kbn/core-theme-browser';
+import useObservable from 'react-use/lib/useObservable';
+import { useKibana } from '../context';
+
+export const useKibanaTheme = (): CoreTheme => {
+  const defaultTheme: CoreTheme = { darkMode: false };
+
+  const {
+    services: { theme },
+  } = useKibana();
+
+  if (!theme) {
+    throw new TypeError('theme service not available in kibana-react context.');
+  }
+
+  return useObservable(theme.theme$, defaultTheme);
+};

src/plugins/kibana_react/tsconfig.json

@@ -12,6 +12,7 @@
     "@kbn/test-jest-helpers",
     "@kbn/i18n",
     "@kbn/i18n-react",
+    "@kbn/core-theme-browser",
   ],
   "exclude": [
     "target/**/*",

src/plugins/presentation_util/public/components/expression_input/expression_input.tsx

@@ -75,7 +75,7 @@ export const ExpressionInput = (props: ExpressionInputProps) => {
 
   return (
     <div style={{ height, ...style }} {...{ rest }}>
-      <CodeEditor
+      <CodeEditor // TODO CodeOwners will need to help with this one
         languageId={EXPRESSIONS_LANGUAGE_ID}
         languageConfiguration={LANGUAGE_CONFIGURATION}
         value={expression}

src/plugins/saved_objects_management/public/management_section/object_view/components/inspect.tsx

@@ -51,7 +51,7 @@ export const Inspect: FC<InspectProps> = ({ object }) => {
           </EuiCopy>
           <EuiSpacer size="s" />
         </div>
-        <CodeEditor
+        <CodeEditor // TODO theme provided in src/plugins/saved_objects_management/public/management_section/object_view/saved_object_view.tsx
           languageId={XJsonLang.ID}
           value={objectAsJsonString}
           aria-label={codeEditorAriaLabel(title)}

src/plugins/saved_objects_management/public/management_section/object_view/saved_object_view.test.tsx

@@ -20,6 +20,7 @@ import {
   uiSettingsServiceMock,
   scopedHistoryMock,
   docLinksServiceMock,
+  themeServiceMock,
 } from '@kbn/core/public/mocks';
 
 import type { SavedObjectWithMetadata } from '../../types';
@@ -42,6 +43,7 @@ describe('SavedObjectEdition', () => {
   let applications: ReturnType<typeof applicationServiceMock.createStartContract>;
   let docLinks: ReturnType<typeof docLinksServiceMock.createStartContract>;
   let settings: ReturnType<typeof settingsServiceMock.createStartContract>;
+  let theme: ReturnType<typeof themeServiceMock.createStartContract>;
 
   const shallowRender = (overrides: Partial<SavedObjectEditionProps> = {}) => {
     return shallowWithI18nProvider(
@@ -62,6 +64,7 @@ describe('SavedObjectEdition', () => {
     history = scopedHistoryMock.create();
     docLinks = docLinksServiceMock.createStartContract();
     applications = applicationServiceMock.createStartContract();
+    theme = themeServiceMock.createStartContract();
     applications.capabilities = {
       navLinks: {},
       management: {},
@@ -86,6 +89,7 @@ describe('SavedObjectEdition', () => {
       uiSettings,
       docLinks: docLinks.links,
       settings,
+      theme,
     };
 
     bulkDeleteObjectsMock.mockResolvedValue([{}]);