[DO NOT MERGE] [Concept] Updating all callers of Code Editor to provide 'theme' service

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: this.props.theme,
           }}
         >
           <Form

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

@@ -8,7 +8,9 @@
 
 import React, { useCallback } from 'react';
 import { monaco, XJsonLang } from '@kbn/monaco';
-import { CodeEditor, MarkdownLang } from '@kbn/kibana-react-plugin/public';
+import { CodeEditor, MarkdownLang, useKibana } from '@kbn/kibana-react-plugin/public';
+import useObservable from 'react-use/lib/useObservable';
+import { of } from 'rxjs';
 
 interface FieldCodeEditorProps {
   value: string;
@@ -80,8 +82,13 @@ export const FieldCodeEditor = ({
     [setEditorCalculatedHeight, trimEditorBlankLines]
   );
 
+  const { services } = useKibana();
+  const defaultTheme = { darkMode: false };
+  const darkMode = useObservable(services.theme?.theme$ ?? of(defaultTheme), defaultTheme).darkMode;
+
   return (
     <CodeEditor
+      useDarkTheme={darkMode}
       {...a11yProps}
       languageId={type === 'json' ? XJsonLang.ID : MarkdownLang}
       value={value}

src/plugins/advanced_settings/public/plugin.ts

@@ -7,7 +7,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { CoreSetup, Plugin } from '@kbn/core/public';
+import { CoreSetup, CoreStart, Plugin } from '@kbn/core/public';
 import { ComponentRegistry } from './component_registry';
 import { AdvancedSettingsSetup, AdvancedSettingsStart, AdvancedSettingsPluginSetup } from './types';
 
@@ -63,7 +63,7 @@ export class AdvancedSettingsPlugin
     };
   }
 
-  public start() {
+  public start(core: CoreStart) {
     return {
       component: component.start,
     };

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

@@ -15,6 +15,8 @@ import {
   createKibanaReactContext,
   toMountPoint,
 } from '@kbn/kibana-react-plugin/public';
+import { of } from 'rxjs';
+import useObservable from 'react-use/lib/useObservable';
 import { UISession } from '../../types';
 import { IClickActionDescriptor } from '..';
 import './inspect_button.scss';
@@ -23,17 +25,22 @@ import { SearchSessionsMgmtAPI } from '../../lib/api';
 interface InspectFlyoutProps {
   searchSession: UISession;
   uiSettings: CoreStart['uiSettings'];
+  theme?: CoreStart['theme'];
 }
 
-const InspectFlyout = ({ uiSettings, searchSession }: InspectFlyoutProps) => {
+const InspectFlyout = ({ uiSettings, searchSession, theme }: InspectFlyoutProps) => {
   const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
     uiSettings,
   });
 
+  const defaultTheme = { darkMode: false };
+  const darkMode = useObservable(theme?.theme$ ?? of(defaultTheme), defaultTheme).darkMode;
+
   const renderInfo = () => {
     return (
       <Fragment>
         <CodeEditor
+          useDarkTheme={darkMode}
           languageId="json"
           value={JSON.stringify(searchSession, null, 2)}
           options={{
@@ -97,7 +104,9 @@ export const createInspectActionDescriptor = (
     />
   ),
   onClick: async () => {
-    const flyout = <InspectFlyout uiSettings={core.uiSettings} searchSession={uiSession} />;
+    const flyout = (
+      <InspectFlyout theme={core.theme} uiSettings={core.uiSettings} searchSession={uiSession} />
+    );
     const overlay = core.overlays.openFlyout(toMountPoint(flyout, { theme$: core.theme.theme$ }));
     await overlay.onClose;
   },

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

@@ -592,6 +592,12 @@ export class FieldEditor extends PureComponent<FieldEdiorProps, FieldEditorState
         defaultMessage="Script is required"
       />
     );
+    const { theme } = this.context.services;
+
+    let darkModeTheme = { darkMode: false };
+    theme.theme$.subscribe((nextTheme) => {
+      darkModeTheme = nextTheme;
+    });
 
     return spec.scripted ? (
       <Fragment>
@@ -602,6 +608,7 @@ export class FieldEditor extends PureComponent<FieldEdiorProps, FieldEditorState
           error={isInvalid ? errorMsg : null}
         >
           <CodeEditor
+            useDarkTheme={darkModeTheme.darkMode}
             languageId={PainlessLang.ID}
             width="100%"
             height="300px"

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

@@ -13,6 +13,9 @@ import { i18n } from '@kbn/i18n';
 import { monaco, XJsonLang } from '@kbn/monaco';
 import { EuiButtonEmpty, EuiCopy, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { CodeEditor } from '@kbn/kibana-react-plugin/public';
+import useObservable from 'react-use/lib/useObservable';
+import { of } from 'rxjs';
+import { useDiscoverServices } from '../../hooks/use_discover_services';
 
 const codeEditorAriaLabel = i18n.translate('discover.json.codeEditorAriaLabel', {
   defaultMessage: 'Read only JSON view of an elasticsearch document',
@@ -38,11 +41,17 @@ export const JsonCodeEditorCommon = ({
   onEditorDidMount,
   hideCopyButton,
 }: JsonCodeEditorCommonProps) => {
+  const { theme } = useDiscoverServices();
+  const defaultTheme = { darkMode: false };
+  const darkMode = useObservable(theme.theme$ ?? of(defaultTheme), defaultTheme).darkMode;
+
   if (jsonValue === '') {
     return null;
   }
+
   const codeEditor = (
     <CodeEditor
+      useDarkTheme={darkMode}
       languageId={XJsonLang.ID}
       width={width}
       height={height}

src/plugins/inspector/public/views/requests/components/details/req_code_viewer.tsx

@@ -17,6 +17,8 @@ import { XJsonLang } from '@kbn/monaco';
 import { compressToEncodedURIComponent } from 'lz-string';
 import React, { useCallback } from 'react';
 import { CodeEditor, useKibana } from '@kbn/kibana-react-plugin/public';
+import useObservable from 'react-use/lib/useObservable';
+import { of } from 'rxjs';
 import { InspectorPluginStartDeps } from '../../../../plugin';
 
 interface RequestCodeViewerProps {
@@ -41,6 +43,8 @@ const openInSearchProfilerLabel = i18n.translate('inspector.requests.openInSearc
  */
 export const RequestCodeViewer = ({ indexPattern, json }: RequestCodeViewerProps) => {
   const { services } = useKibana<InspectorPluginStartDeps>();
+  const defaultTheme = { darkMode: false };
+  const darkMode = useObservable(services.theme?.theme$ ?? of(defaultTheme), defaultTheme).darkMode;
 
   const navigateToUrl = services.application?.navigateToUrl;
 
@@ -134,6 +138,7 @@ export const RequestCodeViewer = ({ indexPattern, json }: RequestCodeViewerProps
       </EuiFlexItem>
       <EuiFlexItem grow={true} data-test-subj="inspectorRequestCodeViewerContainer">
         <CodeEditor
+          useDarkTheme={darkMode}
           languageId={XJsonLang.ID}
           value={json}
           options={{

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

@@ -108,7 +108,7 @@ export interface Props {
   /**
    * Should the editor use the dark theme
    */
-  useDarkTheme?: boolean;
+  useDarkTheme: boolean;
 
   /**
    * Should the editor use a transparent background

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

@@ -9,7 +9,6 @@
 import React from 'react';
 import { EuiDelayRender, EuiErrorBoundary, EuiSkeletonText } from '@elastic/eui';
 
-import { useUiSetting } from '../ui_settings';
 import type { Props } from './code_editor';
 
 export * from './languages/constants';
@@ -40,11 +39,13 @@ 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 { services } = useKibana();
+  // console.log(services);
+
   return (
     <EuiErrorBoundary>
       <React.Suspense fallback={<Fallback height={props.height} />}>
-        <LazyBaseEditor {...props} useDarkTheme={darkMode} />
+        <LazyBaseEditor {...props} />
       </React.Suspense>
     </EuiErrorBoundary>
   );
@@ -54,11 +55,12 @@ 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 { services } = useKibana<CoreAppsServiceStartDeps>();
+  // console.log(services);
   return (
     <EuiErrorBoundary>
       <React.Suspense fallback={<Fallback height={props.height} />}>
-        <LazyCodeEditorField {...props} useDarkTheme={darkMode} />
+        <LazyCodeEditorField {...props} />
       </React.Suspense>
     </EuiErrorBoundary>
   );

src/plugins/presentation_util/public/components/types.ts

@@ -13,6 +13,7 @@ import type { CSSProperties, HTMLAttributes } from 'react';
 import type { ExpressionFunction } from '@kbn/expressions-plugin/common';
 
 import { OnSaveProps, SaveModalState } from '@kbn/saved-objects-plugin/public';
+import { CoreStart } from '@kbn/core-lifecycle-browser';
 
 interface SaveModalDocumentInfo {
   id?: string;
@@ -70,4 +71,6 @@ export interface ExpressionInputProps
   editorRef?: ExpressionInputEditorRef;
 
   onEditorDidMount?: OnExpressionInputEditorDidMount;
+
+  theme?: CoreStart['theme'];
 }

src/plugins/presentation_util/tsconfig.json

@@ -29,6 +29,7 @@
     "@kbn/config-schema",
     "@kbn/storybook",
     "@kbn/ui-actions-plugin",
+    "@kbn/core-lifecycle-browser",
   ],
   "exclude": [
     "target/**/*",

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

@@ -10,7 +10,9 @@ import { i18n } from '@kbn/i18n';
 import { XJsonLang } from '@kbn/monaco';
 import { omit } from 'lodash';
 import { EuiButtonEmpty, EuiCopy, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
-import { CodeEditor } from '@kbn/kibana-react-plugin/public';
+import { CodeEditor, useKibana } from '@kbn/kibana-react-plugin/public';
+import useObservable from 'react-use/lib/useObservable';
+import { of } from 'rxjs';
 import { SavedObjectWithMetadata } from '../../../../common';
 
 export interface InspectProps {
@@ -28,6 +30,10 @@ const copyToClipboardLabel = i18n.translate('savedObjectsManagement.view.copyToC
 });
 
 export const Inspect: FC<InspectProps> = ({ object }) => {
+  const { services } = useKibana();
+  const defaultTheme = { darkMode: false };
+  const darkMode = useObservable(services.theme?.theme$ ?? of(defaultTheme), defaultTheme).darkMode;
+
   const title = object.meta.title || 'saved object';
 
   const objectAsJsonString = useMemo(() => JSON.stringify(omit(object, 'meta'), null, 2), [object]);
@@ -52,6 +58,7 @@ export const Inspect: FC<InspectProps> = ({ object }) => {
           <EuiSpacer size="s" />
         </div>
         <CodeEditor
+          useDarkTheme={darkMode}
           languageId={XJsonLang.ID}
           value={objectAsJsonString}
           aria-label={codeEditorAriaLabel(title)}

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

@@ -19,6 +19,7 @@ import {
   HttpSetup,
   IUiSettingsClient,
   DocLinksStart,
+  CoreStart,
 } from '@kbn/core/public';
 import type { SettingsStart } from '@kbn/core-ui-settings-browser';
 import { Header, Inspect, NotFoundErrors } from './components';
@@ -38,6 +39,7 @@ export interface SavedObjectEditionProps {
   uiSettings: IUiSettingsClient;
   docLinks: DocLinksStart['links'];
   settings: SettingsStart;
+  theme: CoreStart['theme'];
 }
 export interface SavedObjectEditionState {
   type: string;
@@ -94,12 +96,12 @@ export class SavedObjectEdition extends Component<
   }
 
   render() {
-    const { capabilities, notFoundType, http, uiSettings, docLinks, settings } = this.props;
+    const { capabilities, notFoundType, http, uiSettings, docLinks, settings, theme } = this.props;
     const { object } = this.state;
     const { delete: canDelete } = capabilities.savedObjectsManagement as Record<string, boolean>;
     const canView = this.canViewInApp(capabilities, object);
     return (
-      <KibanaContextProvider services={{ uiSettings, settings }}>
+      <KibanaContextProvider services={{ uiSettings, settings, theme }}>
         <EuiFlexGroup
           direction="column"
           data-test-subject="savedObjectsEdit"

src/plugins/saved_objects_management/public/management_section/saved_objects_edition_page.tsx

@@ -65,6 +65,7 @@ const SavedObjectsEditionPage = ({
         history={history}
         docLinks={docLinks}
         settings={coreStart.settings}
+        theme={coreStart.theme}
       />
     </RedirectAppLinks>
   );

src/plugins/vis_default_editor/public/components/controls/raw_json.tsx

@@ -14,6 +14,9 @@ import { XJsonLang } from '@kbn/monaco';
 import { CodeEditor } from '@kbn/kibana-react-plugin/public';
 import { XJson } from '@kbn/es-ui-shared-plugin/public';
 
+import useObservable from 'react-use/lib/useObservable';
+import { of } from 'rxjs';
+import { getTheme } from '../../services';
 import { AggParamEditorProps } from '../agg_param_props';
 
 function RawJsonParamEditor({
@@ -25,6 +28,10 @@ function RawJsonParamEditor({
 }: AggParamEditorProps<string>) {
   const [isFieldValid, setFieldValidity] = useState(true);
 
+  const theme = getTheme();
+  const defaultTheme = { darkMode: false };
+  const darkMode = useObservable(theme?.theme$ ?? of(defaultTheme), defaultTheme).darkMode;
+
   const editorTooltipText = useMemo(
     () =>
       i18n.translate('visDefaultEditor.controls.jsonInputTooltip', {
@@ -80,6 +87,7 @@ function RawJsonParamEditor({
     >
       <>
         <CodeEditor
+          useDarkTheme={darkMode}
           aria-label={jsonEditorLabelText}
           aria-describedby="jsonEditorDescription"
           languageId={XJsonLang.ID}

src/plugins/vis_types/timelion/public/components/timelion_expression_input.tsx

@@ -12,6 +12,8 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { monaco } from '@kbn/monaco';
 
 import { CodeEditor, useKibana } from '@kbn/kibana-react-plugin/public';
+import useObservable from 'react-use/lib/useObservable';
+import { of } from 'rxjs';
 import { suggest, getSuggestion } from './timelion_expression_input_helpers';
 import { getArgValueSuggestions } from '../helpers/arg_value_suggestions';
 import { ITimelionFunction, TimelionFunctionArgs } from '../../common/types';
@@ -29,6 +31,12 @@ function TimelionExpressionInput({ value, setValue }: TimelionExpressionInputPro
   const kibana = useKibana();
   const argValueSuggestions = useMemo(getArgValueSuggestions, []);
 
+  const defaultTheme = { darkMode: false };
+  const darkMode = useObservable(
+    kibana.services.theme?.theme$ ?? of(defaultTheme),
+    defaultTheme
+  ).darkMode;
+
   const provideCompletionItems = useCallback(
     async (model: monaco.editor.ITextModel, position: monaco.Position) => {
       const text = model.getValue();
@@ -104,6 +112,7 @@ function TimelionExpressionInput({ value, setValue }: TimelionExpressionInputPro
       <div className="timExpressionInput__editor">
         <div className="timExpressionInput__absolute" data-test-subj="timelionCodeEditor">
           <CodeEditor
+            useDarkTheme={darkMode}
             languageId={LANGUAGE_ID}
             value={value}
             onChange={setValue}