From 27a575698b59b7d59d7a90e056e1631f051b877b Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Tue, 13 Jun 2023 22:28:46 -0400
Subject: [PATCH 01/50] new theme hook

---
 .../public/editor/expression_editor.tsx       |  2 +-
 .../src/text_based_languages_editor.tsx       |  2 +-
 .../management_app/advanced_settings.tsx      |  1 +
 .../components/field/field_code_editor.tsx    |  2 +-
 .../components/actions/inspect_button.tsx     |  2 +-
 .../field_editor/form_fields/script_field.tsx |  2 +-
 .../public/open_editor.tsx                    |  3 ++-
 .../components/field_editor/field_editor.tsx  |  2 +-
 src/plugins/discover/public/build_services.ts |  2 +-
 .../json_code_editor_common.tsx               |  2 +-
 .../components/json_editor/json_editor.tsx    |  2 +-
 .../kibana_react/public/code_editor/index.tsx | 10 ++++----
 .../kibana_react/public/theme/use_theme.ts    | 25 +++++++++++++++++++
 .../uis/arguments/editor.tsx                  |  2 +-
 .../uis/datasources/essql.js                  |  2 +-
 .../public/application/index.tsx              |  6 +++--
 .../public/application/index.tsx              |  2 +-
 .../pipelines_preview.tsx                     |  2 +-
 .../api_keys/api_keys_grid/api_key_flyout.tsx |  4 +--
 .../rule_editor_panel/json_rule_editor.tsx    |  2 +-
 .../privileges/es/index_privilege_form.tsx    |  2 +-
 .../components/api_key/metadata_form.tsx      |  2 +-
 .../api_key/security_privileges_form.tsx      |  2 +-
 23 files changed, 56 insertions(+), 27 deletions(-)
 create mode 100644 src/plugins/kibana_react/public/theme/use_theme.ts

diff --git a/examples/expressions_explorer/public/editor/expression_editor.tsx b/examples/expressions_explorer/public/editor/expression_editor.tsx
index c940a21fada27..7da5eca421bf1 100644
--- a/examples/expressions_explorer/public/editor/expression_editor.tsx
+++ b/examples/expressions_explorer/public/editor/expression_editor.tsx
@@ -16,7 +16,7 @@ interface Props {
 
 export function ExpressionEditor({ value, onChange }: Props) {
   return (
-    <CodeEditor
+    <CodeEditor // TODO Cannot determine where theme is provided
       languageId="javascript"
       width="100%"
       height="250px"
diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx
index 5f432c090eb8c..8d7d26c9f141e 100644
--- a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx
+++ b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx
@@ -515,7 +515,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
                         {errors.length}
                       </EuiBadge>
                     )}
-                    <CodeEditor
+                    <CodeEditor // TODO theme does not appear to be provided in the associated unit tests, the parent component looks to be used many places
                       languageId={languageId(language)}
                       value={codeOneLiner || code}
                       options={codeEditorOptions}
diff --git a/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx b/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx
index a61b87ac79c28..ea8c4f9f19dd0 100644
--- a/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx
+++ b/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
diff --git a/src/plugins/advanced_settings/public/management_app/components/field/field_code_editor.tsx b/src/plugins/advanced_settings/public/management_app/components/field/field_code_editor.tsx
index 819a03cdb616b..ad21d1a2ab4f8 100644
--- a/src/plugins/advanced_settings/public/management_app/components/field/field_code_editor.tsx
+++ b/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}
diff --git a/src/plugins/data/public/search/session/sessions_mgmt/components/actions/inspect_button.tsx b/src/plugins/data/public/search/session/sessions_mgmt/components/actions/inspect_button.tsx
index 6776acff20151..62fbc59c7f13b 100644
--- a/src/plugins/data/public/search/session/sessions_mgmt/components/actions/inspect_button.tsx
+++ b/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={{
diff --git a/src/plugins/data_view_field_editor/public/components/field_editor/form_fields/script_field.tsx b/src/plugins/data_view_field_editor/public/components/field_editor/form_fields/script_field.tsx
index 7d57a1828f822..980e5f9f234a2 100644
--- a/src/plugins/data_view_field_editor/public/components/field_editor/form_fields/script_field.tsx
+++ b/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.
diff --git a/src/plugins/data_view_field_editor/public/open_editor.tsx b/src/plugins/data_view_field_editor/public/open_editor.tsx
index a23e281460827..865f5f498d727 100644
--- a/src/plugins/data_view_field_editor/public/open_editor.tsx
+++ b/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;
diff --git a/src/plugins/data_view_management/public/components/field_editor/field_editor.tsx b/src/plugins/data_view_management/public/components/field_editor/field_editor.tsx
index 7b12aeda30609..32d5ed1e0d614 100644
--- a/src/plugins/data_view_management/public/components/field_editor/field_editor.tsx
+++ b/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"
diff --git a/src/plugins/discover/public/build_services.ts b/src/plugins/discover/public/build_services.ts
index f3cda1707d4a9..98fd16d0cb7e8 100644
--- a/src/plugins/discover/public/build_services.ts
+++ b/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;
diff --git a/src/plugins/discover/public/components/json_code_editor/json_code_editor_common.tsx b/src/plugins/discover/public/components/json_code_editor/json_code_editor_common.tsx
index 777240fe2f5bb..8bdef98a8f576 100644
--- a/src/plugins/discover/public/components/json_code_editor/json_code_editor_common.tsx
+++ b/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}
diff --git a/src/plugins/es_ui_shared/public/components/json_editor/json_editor.tsx b/src/plugins/es_ui_shared/public/components/json_editor/json_editor.tsx
index df4c37a081973..981b27e385cd1 100644
--- a/src/plugins/es_ui_shared/public/components/json_editor/json_editor.tsx
+++ b/src/plugins/es_ui_shared/public/components/json_editor/json_editor.tsx
@@ -83,7 +83,7 @@ function JsonEditorComp<T extends object = { [key: string]: any }>({
       error={error}
       fullWidth
     >
-      <CodeEditor
+      <CodeEditor // TODO theme provided in x-pack/plugins/index_management/public/application/index.tsx
         languageId="json"
         height={500}
         options={{
diff --git a/src/plugins/kibana_react/public/code_editor/index.tsx b/src/plugins/kibana_react/public/code_editor/index.tsx
index 7047997db34c7..e17cb088ee382 100644
--- a/src/plugins/kibana_react/public/code_editor/index.tsx
+++ b/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/use_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>
   );
diff --git a/src/plugins/kibana_react/public/theme/use_theme.ts b/src/plugins/kibana_react/public/theme/use_theme.ts
new file mode 100644
index 0000000000000..314f65ad77844
--- /dev/null
+++ b/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 '..';
+
+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);
+};
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/editor.tsx b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/editor.tsx
index 1a09116ba1196..65c120142d009 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/editor.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/editor.tsx
@@ -53,7 +53,7 @@ const EditorArg: FC<EditorArgProps> = ({ argValue, typeInstance, onValueChange,
 
   return (
     <EuiFormRow display="rowCompressed" data-test-subj="canvasCodeEditorField">
-      <CodeEditorField
+      <CodeEditorField // TODO theme appears to be provided in x-pack/plugins/canvas/public/application.tsx
         languageId={language ?? ''}
         value={value}
         onChange={onChange}
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js b/x-pack/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js
index 6258eaec4a754..efedc799c4e44 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js
@@ -77,7 +77,7 @@ class EssqlDatasource extends PureComponent {
           </EuiText>
         }
       >
-        <CodeEditorField
+        <CodeEditorField // TODO theme appears to be provided in x-pack/plugins/canvas/public/application.tsx
           languageId={SQLLang.ID}
           value={this.getQuery()}
           onChange={this.onChange}
diff --git a/x-pack/plugins/index_management/public/application/index.tsx b/x-pack/plugins/index_management/public/application/index.tsx
index b3437cb05fe5b..f795bd05c04ab 100644
--- a/x-pack/plugins/index_management/public/application/index.tsx
+++ b/x-pack/plugins/index_management/public/application/index.tsx
@@ -35,12 +35,12 @@ export const renderApp = (
     return () => undefined;
   }
 
-  const { i18n, docLinks, notifications, application, executionContext, overlays } = core;
+  const { i18n, docLinks, notifications, application, executionContext, overlays, theme } = core;
   const { Context: I18nContext } = i18n;
   const { services, history, setBreadcrumbs, uiSettings, settings, kibanaVersion, theme$ } =
     dependencies;
 
-  // uiSettings is required by the CodeEditor component used to edit runtime field Painless scripts.
+  // theme is required by the CodeEditor component used to edit runtime field Painless scripts.
   const { Provider: KibanaReactContextProvider } =
     createKibanaReactContext<KibanaReactContextServices>({
       application,
@@ -49,6 +49,7 @@ export const renderApp = (
       kibanaVersion: {
         get: () => kibanaVersion,
       },
+      theme,
     });
 
   const componentTemplateProviderValues = {
@@ -96,6 +97,7 @@ interface KibanaReactContextServices {
   kibanaVersion: {
     get: () => SemVer;
   };
+  theme: CoreStart['theme'];
 }
 
 // We override useKibana() from the react plugin to return a typed version for this app
diff --git a/x-pack/plugins/ingest_pipelines/public/application/index.tsx b/x-pack/plugins/ingest_pipelines/public/application/index.tsx
index 46736e0a9cf7d..d4c4e73f6b6c6 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/index.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/index.tsx
@@ -67,7 +67,7 @@ export const renderApp = (
     >
       <I18nContext>
         <KibanaThemeProvider theme$={theme$}>
-          <KibanaContextProvider services={services}>
+          <KibanaContextProvider services={{ ...services, theme: { theme$ } }}>
             <App />
           </KibanaContextProvider>
         </KibanaThemeProvider>
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_create_from_csv/pipelines_preview.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_create_from_csv/pipelines_preview.tsx
index b7efea0bab8cc..88fc79a20f0c6 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_create_from_csv/pipelines_preview.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_create_from_csv/pipelines_preview.tsx
@@ -89,7 +89,7 @@ export const PipelinesPreview: FC<Props> = ({
           data-test-subj="pipelineMappingsJSONEditor"
         >
           <Fragment>
-            <CodeEditorField
+            <CodeEditorField // TODO updated x-pack/plugins/ingest_pipelines/public/application/index.tsx to provide theme in context
               aria-label={''}
               languageId={XJsonLang.ID}
               value={processorsJson}
diff --git a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx
index 959c3690b623c..8a078e404fec8 100644
--- a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx
+++ b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx
@@ -308,7 +308,7 @@ export const ApiKeyFlyout: FunctionComponent<ApiKeyFlyoutProps> = ({
                   error={form.errors.role_descriptors}
                   isInvalid={form.touched.role_descriptors && !!form.errors.role_descriptors}
                 >
-                  <CodeEditorField
+                  <CodeEditorField // TODO theme provided in context by x-pack/plugins/security/public/management/api_keys/api_keys_management_app.tsx
                     value={form.values.role_descriptors!}
                     onChange={(value) => form.setValue('role_descriptors', value)}
                     languageId="xjson"
@@ -406,7 +406,7 @@ export const ApiKeyFlyout: FunctionComponent<ApiKeyFlyoutProps> = ({
                   error={form.errors.metadata}
                   isInvalid={form.touched.metadata && !!form.errors.metadata}
                 >
-                  <CodeEditorField
+                  <CodeEditorField // TODO theme provided in context by x-pack/plugins/security/public/management/api_keys/api_keys_management_app.tsx
                     value={form.values.metadata!}
                     onChange={(value) => form.setValue('metadata', value)}
                     languageId="xjson"
diff --git a/x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/json_rule_editor.tsx b/x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/json_rule_editor.tsx
index b38ab53bc4ef5..b7e6585b96817 100644
--- a/x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/json_rule_editor.tsx
+++ b/x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/json_rule_editor.tsx
@@ -97,7 +97,7 @@ export const JSONRuleEditor = (props: Props) => {
       data-test-subj="roleMappingsJSONEditor"
     >
       <Fragment>
-        <CodeEditorField
+        <CodeEditorField // TODO theme provided in context in x-pack/plugins/security/public/management/role_mappings/role_mappings_management_app.tsx
           aria-label={''}
           languageId={XJsonLang.ID}
           value={rawRules}
diff --git a/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.tsx b/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.tsx
index 2540316caac89..6081c5b58a528 100644
--- a/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.tsx
+++ b/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.tsx
@@ -404,7 +404,7 @@ export class IndexPrivilegeForm extends Component<Props, State> {
                 fullWidth
                 data-test-subj={`queryInput${this.props.formIndex}`}
               >
-                <CodeEditorField
+                <CodeEditorField // TODO theme provided in context by x-pack/plugins/security/public/management/roles/roles_management_app.tsx
                   languageId="xjson"
                   width="100%"
                   fullWidth
diff --git a/x-pack/plugins/serverless_search/public/application/components/api_key/metadata_form.tsx b/x-pack/plugins/serverless_search/public/application/components/api_key/metadata_form.tsx
index 8d05da3d47a8b..86620533660b0 100644
--- a/x-pack/plugins/serverless_search/public/application/components/api_key/metadata_form.tsx
+++ b/x-pack/plugins/serverless_search/public/application/components/api_key/metadata_form.tsx
@@ -35,7 +35,7 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
           <p>{error}</p>
         </EuiText>
       )}
-      <CodeEditorField
+      <CodeEditorField // TODO theme provided in context by x-pack/plugins/serverless_search/public/application/index.tsx
         allowFullScreen
         fullWidth
         height="600px"
diff --git a/x-pack/plugins/serverless_search/public/application/components/api_key/security_privileges_form.tsx b/x-pack/plugins/serverless_search/public/application/components/api_key/security_privileges_form.tsx
index 9ebee2ad3775e..0d872e2ae4784 100644
--- a/x-pack/plugins/serverless_search/public/application/components/api_key/security_privileges_form.tsx
+++ b/x-pack/plugins/serverless_search/public/application/components/api_key/security_privileges_form.tsx
@@ -35,7 +35,7 @@ export const SecurityPrivilegesForm: React.FC<SecurityPrivilegesFormProps> = ({
           <p>{error}</p>
         </EuiText>
       )}
-      <CodeEditorField
+      <CodeEditorField // TODO theme provided in context by x-pack/plugins/serverless_search/public/application/index.tsx
         allowFullScreen
         fullWidth
         height="600px"

From ddf2dba150f1cafc21b81e6d9d57aa99835b44dd Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 14 Jun 2023 02:34:54 +0000
Subject: [PATCH 02/50] [CI] Auto-commit changed files from 'node
 scripts/lint_ts_projects --fix'

---
 src/plugins/kibana_react/tsconfig.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/plugins/kibana_react/tsconfig.json b/src/plugins/kibana_react/tsconfig.json
index 1790c527d39b6..8c3bfa45c58cd 100644
--- a/src/plugins/kibana_react/tsconfig.json
+++ b/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/**/*",

From bab63ee5fb95c3971d51f9b01d377fe25c95d8f7 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Wed, 14 Jun 2023 12:33:20 -0400
Subject: [PATCH 03/50] Adding TODOs to aid testers

---
 examples/expressions_explorer/public/app.tsx              | 1 +
 .../public/editor/expression_editor.tsx                   | 2 +-
 .../src/text_based_languages_editor.tsx                   | 2 +-
 .../public/components/json_editor/json_editor.tsx         | 2 +-
 src/plugins/inspector/public/plugin.tsx                   | 1 +
 src/plugins/inspector/public/ui/inspector_panel.tsx       | 8 +++++++-
 .../views/requests/components/details/req_code_viewer.tsx | 2 +-
 .../components/expression_input/expression_input.tsx      | 2 +-
 .../management_section/object_view/components/inspect.tsx | 2 +-
 .../management_section/object_view/saved_object_view.tsx  | 6 ++++--
 .../management_section/saved_objects_edition_page.tsx     | 1 +
 .../public/filter_bar/filter_editor/filter_editor.tsx     | 2 +-
 .../public/components/timelion_expression_input.tsx       | 2 +-
 .../public/application/components/markdown_editor.js      | 2 +-
 .../application/components/panel_config/markdown.tsx      | 2 +-
 .../vis_types/vega/public/components/vega_vis_editor.tsx  | 2 +-
 .../vega/public/vega_inspector/components/spec_viewer.tsx | 2 +-
 .../vega/public/vega_inspector/vega_inspector.tsx         | 1 +
 x-pack/examples/testing_embedded_lens/public/app.tsx      | 8 ++++++--
 .../public/components/control_yaml_view/index.tsx         | 2 +-
 .../pages/configurations/findings_flyout/json_tab.tsx     | 2 +-
 .../vulnerability_json_tab.tsx                            | 2 +-
 .../connector/sync_rules/advanced_sync_rules.tsx          | 2 +-
 .../search_index/pipelines/ml_inference/test_pipeline.tsx | 2 +-
 .../public/components/import_complete_view.tsx            | 2 +-
 .../steps/components/package_policy_input_var_field.tsx   | 2 +-
 .../fleet/sections/debug/components/code_block.tsx        | 2 +-
 .../yaml_code_editor_with_placeholder.tsx                 | 2 +-
 .../custom_patterns_input/custom_patterns_input.js        | 2 +-
 .../public/components/event_input/event_input.js          | 2 +-
 .../public/components/pattern_input/pattern_input.js      | 2 +-
 .../shared/components/wizard_steps/step_aliases.tsx       | 2 +-
 .../processor_form/field_components/text_editor.tsx       | 8 +++++++-
 .../definitions/formula/editor/formula_editor.tsx         | 2 +-
 .../vector_tile_adapter/components/tile_request_tab.tsx   | 2 +-
 .../create_analytics_advanced_editor.tsx                  | 2 +-
 .../runtime_mappings/runtime_mappings_editor.tsx          | 2 +-
 .../jobs_list/components/ml_job_editor/ml_job_editor.tsx  | 2 +-
 x-pack/plugins/osquery/public/editor/index.tsx            | 2 +-
 .../painless_lab/public/application/components/editor.tsx | 2 +-
 .../application/components/output_pane/context_tab.tsx    | 4 ++--
 .../application/components/output_pane/parameters_tab.tsx | 2 +-
 x-pack/plugins/painless_lab/public/application/index.tsx  | 1 +
 .../components/runtime_field_form/runtime_field_form.tsx  | 2 +-
 x-pack/plugins/runtime_fields/public/load_editor.tsx      | 1 +
 .../repository_form/type_settings/hdfs_settings.tsx       | 2 +-
 .../restore_snapshot_form/steps/step_settings.tsx         | 2 +-
 .../plugins/snapshot_restore/public/application/index.tsx | 1 +
 .../es_query/expression/es_query_expression.tsx           | 2 +-
 .../components/monitor_add_edit/fields/code_editor.tsx    | 2 +-
 .../advanced_pivot_editor/advanced_pivot_editor.tsx       | 2 +-
 .../advanced_runtime_mappings_editor.tsx                  | 2 +-
 .../advanced_source_editor/advanced_source_editor.tsx     | 2 +-
 .../common/filter_agg/components/editor_form.tsx          | 2 +-
 .../triggers_actions_ui/public/application/app.tsx        | 2 +-
 .../components/json_editor_with_message_variables.tsx     | 2 +-
 x-pack/plugins/watcher/public/application/index.tsx       | 6 +++++-
 .../components/json_watch_edit/json_watch_edit_form.tsx   | 2 +-
 .../json_watch_edit/json_watch_edit_simulate.tsx          | 2 +-
 .../action_fields/webhook_action_fields.tsx               | 2 +-
 60 files changed, 85 insertions(+), 56 deletions(-)

diff --git a/examples/expressions_explorer/public/app.tsx b/examples/expressions_explorer/public/app.tsx
index 1723c0cad075d..5e5b76bb7fe0e 100644
--- a/examples/expressions_explorer/public/app.tsx
+++ b/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,
diff --git a/examples/expressions_explorer/public/editor/expression_editor.tsx b/examples/expressions_explorer/public/editor/expression_editor.tsx
index 7da5eca421bf1..873b007ce89ae 100644
--- a/examples/expressions_explorer/public/editor/expression_editor.tsx
+++ b/examples/expressions_explorer/public/editor/expression_editor.tsx
@@ -16,7 +16,7 @@ interface Props {
 
 export function ExpressionEditor({ value, onChange }: Props) {
   return (
-    <CodeEditor // TODO Cannot determine where theme is provided
+    <CodeEditor // TODO theme needs to be provided from examples/expressions_explorer/public/app.tsx, need CodeOwners help
       languageId="javascript"
       width="100%"
       height="250px"
diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx
index 8d7d26c9f141e..1bfd1554a1882 100644
--- a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx
+++ b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx
@@ -515,7 +515,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
                         {errors.length}
                       </EuiBadge>
                     )}
-                    <CodeEditor // TODO theme does not appear to be provided in the associated unit tests, the parent component looks to be used many places
+                    <CodeEditor // TODO Unsure how to proceed, theme would most likely be provided by all callers, need CodeOwners help
                       languageId={languageId(language)}
                       value={codeOneLiner || code}
                       options={codeEditorOptions}
diff --git a/src/plugins/es_ui_shared/public/components/json_editor/json_editor.tsx b/src/plugins/es_ui_shared/public/components/json_editor/json_editor.tsx
index 981b27e385cd1..3850046adb9a0 100644
--- a/src/plugins/es_ui_shared/public/components/json_editor/json_editor.tsx
+++ b/src/plugins/es_ui_shared/public/components/json_editor/json_editor.tsx
@@ -83,7 +83,7 @@ function JsonEditorComp<T extends object = { [key: string]: any }>({
       error={error}
       fullWidth
     >
-      <CodeEditor // TODO theme provided in x-pack/plugins/index_management/public/application/index.tsx
+      <CodeEditor // TODO JsonEditor is used many places. Need CodeOwners help to verify. One Example: theme provided in x-pack/plugins/index_management/public/application/index.tsx
         languageId="json"
         height={500}
         options={{
diff --git a/src/plugins/inspector/public/plugin.tsx b/src/plugins/inspector/public/plugin.tsx
index 8f8353a90c457..94b3a37bfeb0e 100644
--- a/src/plugins/inspector/public/plugin.tsx
+++ b/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$ }
diff --git a/src/plugins/inspector/public/ui/inspector_panel.tsx b/src/plugins/inspector/public/ui/inspector_panel.tsx
index e59da45e41dcc..6e1f6d3634570 100644
--- a/src/plugins/inspector/public/ui/inspector_panel.tsx
+++ b/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;
   };
 }
 
diff --git a/src/plugins/inspector/public/views/requests/components/details/req_code_viewer.tsx b/src/plugins/inspector/public/views/requests/components/details/req_code_viewer.tsx
index 5ab50ba33a514..2e46deda5ad16 100644
--- a/src/plugins/inspector/public/views/requests/components/details/req_code_viewer.tsx
+++ b/src/plugins/inspector/public/views/requests/components/details/req_code_viewer.tsx
@@ -133,7 +133,7 @@ export const RequestCodeViewer = ({ indexPattern, json }: RequestCodeViewerProps
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem grow={true} data-test-subj="inspectorRequestCodeViewerContainer">
-        <CodeEditor
+        <CodeEditor // TODO theme provided in context in src/plugins/inspector/public/ui/inspector_panel.tsx
           languageId={XJsonLang.ID}
           value={json}
           options={{
diff --git a/src/plugins/presentation_util/public/components/expression_input/expression_input.tsx b/src/plugins/presentation_util/public/components/expression_input/expression_input.tsx
index 0343046082504..63c27d99f3805 100644
--- a/src/plugins/presentation_util/public/components/expression_input/expression_input.tsx
+++ b/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}
diff --git a/src/plugins/saved_objects_management/public/management_section/object_view/components/inspect.tsx b/src/plugins/saved_objects_management/public/management_section/object_view/components/inspect.tsx
index b904bd8035627..b11405afa745d 100644
--- a/src/plugins/saved_objects_management/public/management_section/object_view/components/inspect.tsx
+++ b/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)}
diff --git a/src/plugins/saved_objects_management/public/management_section/object_view/saved_object_view.tsx b/src/plugins/saved_objects_management/public/management_section/object_view/saved_object_view.tsx
index f444947e16fde..fc325fa998a6c 100644
--- a/src/plugins/saved_objects_management/public/management_section/object_view/saved_object_view.tsx
+++ b/src/plugins/saved_objects_management/public/management_section/object_view/saved_object_view.tsx
@@ -19,6 +19,7 @@ import {
   HttpSetup,
   IUiSettingsClient,
   DocLinksStart,
+  ThemeServiceStart,
 } 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: ThemeServiceStart;
 }
 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"
diff --git a/src/plugins/saved_objects_management/public/management_section/saved_objects_edition_page.tsx b/src/plugins/saved_objects_management/public/management_section/saved_objects_edition_page.tsx
index 79a119a70742f..8a4540a666a4e 100644
--- a/src/plugins/saved_objects_management/public/management_section/saved_objects_edition_page.tsx
+++ b/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>
   );
diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/filter_editor.tsx b/src/plugins/unified_search/public/filter_bar/filter_editor/filter_editor.tsx
index 278d358aec493..58888d2254f4d 100644
--- a/src/plugins/unified_search/public/filter_bar/filter_editor/filter_editor.tsx
+++ b/src/plugins/unified_search/public/filter_bar/filter_editor/filter_editor.tsx
@@ -401,7 +401,7 @@ class FilterEditorComponent extends Component<FilterEditorProps, State> {
 
     return (
       <EuiFormRow fullWidth label={strings.getQueryDslLabel()} helpText={helpText}>
-        <CodeEditor
+        <CodeEditor // TODO CodeOwners will need to help with this
           languageId={XJsonLang.ID}
           width="100%"
           height={'250px'}
diff --git a/src/plugins/vis_types/timelion/public/components/timelion_expression_input.tsx b/src/plugins/vis_types/timelion/public/components/timelion_expression_input.tsx
index 4dff27a1c061d..1e3c370159ca5 100644
--- a/src/plugins/vis_types/timelion/public/components/timelion_expression_input.tsx
+++ b/src/plugins/vis_types/timelion/public/components/timelion_expression_input.tsx
@@ -105,7 +105,7 @@ function TimelionExpressionInput({ value, setValue }: TimelionExpressionInputPro
       </EuiFormLabel>
       <div className="timExpressionInput__editor">
         <div className="timExpressionInput__absolute" data-test-subj="timelionCodeEditor">
-          <CodeEditor
+          <CodeEditor // TODO theme is provided in context by src/plugins/vis_types/timelion/public/timelion_vis_renderer.tsx
             languageId={LANGUAGE_ID}
             value={value}
             onChange={setValue}
diff --git a/src/plugins/vis_types/timeseries/public/application/components/markdown_editor.js b/src/plugins/vis_types/timeseries/public/application/components/markdown_editor.js
index 79333358d68cd..fe8ef89a7fd9c 100644
--- a/src/plugins/vis_types/timeseries/public/application/components/markdown_editor.js
+++ b/src/plugins/vis_types/timeseries/public/application/components/markdown_editor.js
@@ -122,7 +122,7 @@ export class MarkdownEditor extends Component {
     return (
       <div className="tvbMarkdownEditor">
         <div className="tvbMarkdownEditor__editor">
-          <CodeEditor
+          <CodeEditor // TODO theme is provided in context by src/plugins/vis_types/timeseries/public/application/components/vis_editor.tsx
             editorDidMount={this.handleOnLoad}
             languageId={MarkdownLang}
             options={{
diff --git a/src/plugins/vis_types/timeseries/public/application/components/panel_config/markdown.tsx b/src/plugins/vis_types/timeseries/public/application/components/panel_config/markdown.tsx
index 9555d9854d0ef..dfbe7be66293f 100644
--- a/src/plugins/vis_types/timeseries/public/application/components/panel_config/markdown.tsx
+++ b/src/plugins/vis_types/timeseries/public/application/components/panel_config/markdown.tsx
@@ -257,7 +257,7 @@ export class MarkdownPanelConfig extends Component<
               </span>
             </EuiTitle>
             <EuiSpacer size="s" />
-            <CodeEditor
+            <CodeEditor // TODO theme is provided in context by src/plugins/vis_types/timeseries/public/application/components/vis_editor.tsx
               height="500px"
               languageId={CssLang}
               options={{ fontSize: 14 }}
diff --git a/src/plugins/vis_types/vega/public/components/vega_vis_editor.tsx b/src/plugins/vis_types/vega/public/components/vega_vis_editor.tsx
index 5349436374fc5..2a259361b1d3b 100644
--- a/src/plugins/vis_types/vega/public/components/vega_vis_editor.tsx
+++ b/src/plugins/vis_types/vega/public/components/vega_vis_editor.tsx
@@ -101,7 +101,7 @@ function VegaVisEditor({ stateParams, setValue }: VisEditorOptionsProps<VisParam
         <VegaHelpMenu />
         <VegaActionsMenu formatHJson={formatHJson} formatJson={formatJson} />
       </div>
-      <CodeEditor
+      <CodeEditor // TODO theme needs to be provided, need CodeOwner help
         width="100%"
         height="100%"
         languageId={languageId}
diff --git a/src/plugins/vis_types/vega/public/vega_inspector/components/spec_viewer.tsx b/src/plugins/vis_types/vega/public/vega_inspector/components/spec_viewer.tsx
index 4e028fa3fb3cf..8985a9b756e81 100644
--- a/src/plugins/vis_types/vega/public/vega_inspector/components/spec_viewer.tsx
+++ b/src/plugins/vis_types/vega/public/vega_inspector/components/spec_viewer.tsx
@@ -71,7 +71,7 @@ export const SpecViewer = ({ vegaAdapter, ...rest }: SpecViewerProps) => {
         </div>
       </EuiFlexItem>
       <EuiFlexItem grow={true}>
-        <CodeEditor
+        <CodeEditor // TODO theme needs to be provided from src/plugins/vis_types/vega/public/vega_inspector/vega_inspector.tsx, need Code Owner help
           languageId={XJsonLang.ID}
           value={spec}
           options={{
diff --git a/src/plugins/vis_types/vega/public/vega_inspector/vega_inspector.tsx b/src/plugins/vis_types/vega/public/vega_inspector/vega_inspector.tsx
index 02fe668276c93..aed81f9e6cb93 100644
--- a/src/plugins/vis_types/vega/public/vega_inspector/vega_inspector.tsx
+++ b/src/plugins/vis_types/vega/public/vega_inspector/vega_inspector.tsx
@@ -38,6 +38,7 @@ export const getVegaInspectorView = (dependencies: VegaInspectorViewDependencies
       return Boolean(adapters.vega);
     },
     component: (props) => (
+      // TODO needs to provide theme for src/plugins/vis_types/vega/public/vega_inspector/components/spec_viewer.tsx, need CodeOwner help
       <KibanaContextProvider services={dependencies}>
         <Suspense fallback={<EuiLoadingSpinner />}>
           <VegaDataInspector {...(props as VegaDataInspectorProps)} />
diff --git a/x-pack/examples/testing_embedded_lens/public/app.tsx b/x-pack/examples/testing_embedded_lens/public/app.tsx
index ef80262ef28d3..276b7092a73f6 100644
--- a/x-pack/examples/testing_embedded_lens/public/app.tsx
+++ b/x-pack/examples/testing_embedded_lens/public/app.tsx
@@ -493,7 +493,11 @@ export const App = (props: {
 
   return (
     <KibanaContextProvider
-      services={{ uiSettings: props.core.uiSettings, settings: props.core.settings }}
+      services={{
+        uiSettings: props.core.uiSettings,
+        settings: props.core.settings,
+        theme: props.core.theme,
+      }}
     >
       <EuiPageTemplate fullHeight template="empty">
         <EuiFlexGroup
@@ -715,7 +719,7 @@ export const App = (props: {
                   </EuiFlexGroup>
                   <EuiFlexGroup style={{ height: '75vh' }} direction="column">
                     <EuiFlexItem>
-                      <CodeEditor
+                      <CodeEditor // TODO theme is provided above!
                         languageId={HJsonLang}
                         options={{
                           fontSize: 14,
diff --git a/x-pack/plugins/cloud_defend/public/components/control_yaml_view/index.tsx b/x-pack/plugins/cloud_defend/public/components/control_yaml_view/index.tsx
index b93a281f232f1..68a8bc98095b8 100644
--- a/x-pack/plugins/cloud_defend/public/components/control_yaml_view/index.tsx
+++ b/x-pack/plugins/cloud_defend/public/components/control_yaml_view/index.tsx
@@ -153,7 +153,7 @@ export const ControlYamlView = ({ policy, onChange, show }: ViewDeps) => {
           />
         )}
         <div css={styles.yamlEditor}>
-          <CodeEditor
+          <CodeEditor // TODO theme provided in context by x-pack/plugins/cloud_defend/public/plugin.tsx
             width="100%"
             languageId={YamlLang}
             options={{
diff --git a/x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/json_tab.tsx b/x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/json_tab.tsx
index 18f36810d03f6..120bd7c8f66d9 100644
--- a/x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/json_tab.tsx
+++ b/x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/json_tab.tsx
@@ -14,7 +14,7 @@ const offsetHeight = 120;
 
 export const JsonTab = ({ data }: { data: CspFinding }) => (
   <div style={{ position: 'absolute', inset: 0, top: offsetHeight }}>
-    <CodeEditor
+    <CodeEditor // TODO theme provided in context by x-pack/plugins/cloud_security_posture/public/plugin.tsx
       isCopyable
       allowFullScreen
       languageId={XJsonLang.ID}
diff --git a/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_json_tab.tsx b/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_json_tab.tsx
index 93d83be8b7632..d4ffa95a9e0e7 100644
--- a/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_json_tab.tsx
+++ b/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_json_tab.tsx
@@ -21,7 +21,7 @@ export const VulnerabilityJsonTab = ({ vulnerabilityRecord }: VulnerabilityJsonT
       style={{ position: 'absolute', inset: 0, top: offsetTopHeight, bottom: offsetBottomHeight }}
       data-test-subj={JSON_TAB_VULNERABILITY_FLYOUT}
     >
-      <CodeEditor
+      <CodeEditor // TODO theme provided in context by x-pack/plugins/cloud_security_posture/public/plugin.tsx
         isCopyable
         allowFullScreen
         languageId={XJsonLang.ID}
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/sync_rules/advanced_sync_rules.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/sync_rules/advanced_sync_rules.tsx
index d45f3481807b2..4c85c60cff24e 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/sync_rules/advanced_sync_rules.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/sync_rules/advanced_sync_rules.tsx
@@ -40,7 +40,7 @@ export const AdvancedSyncRules: React.FC = () => {
       }
       fullWidth
     >
-      <CodeEditor
+      <CodeEditor // TODO theme is provided in context by x-pack/plugins/enterprise_search/public/applications/index.tsx
         isCopyable
         languageId="json"
         options={{
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/test_pipeline.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/test_pipeline.tsx
index 5d6332b7c0475..41a636f8c6342 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/test_pipeline.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/test_pipeline.tsx
@@ -211,7 +211,7 @@ export const TestPipeline: React.FC = () => {
               {(EuiResizablePanel, EuiResizableButton) => (
                 <>
                   <EuiResizablePanel grow hasBorder initialSize={50} paddingSize="xs">
-                    <CodeEditor
+                    <CodeEditor // TODO theme is provided in context by x-pack/plugins/enterprise_search/public/applications/index.tsx
                       languageId="json"
                       options={{
                         automaticLayout: true,
diff --git a/x-pack/plugins/file_upload/public/components/import_complete_view.tsx b/x-pack/plugins/file_upload/public/components/import_complete_view.tsx
index 670a052a9b703..fb5c20de69db4 100644
--- a/x-pack/plugins/file_upload/public/components/import_complete_view.tsx
+++ b/x-pack/plugins/file_upload/public/components/import_complete_view.tsx
@@ -76,7 +76,7 @@ export class ImportCompleteView extends Component<Props, {}> {
           </EuiFlexItem>
         </EuiFlexGroup>
         <div style={{ height: '200px' }}>
-          <CodeEditor
+          <CodeEditor // TODO need to provide theme in context above. Need CodeOwners help.
             languageId="json"
             value={jsonAsString}
             options={{
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_var_field.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_var_field.tsx
index 782e35ba71612..cf41cb5020724 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_var_field.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_var_field.tsx
@@ -107,7 +107,7 @@ export const PackagePolicyInputVarField: React.FunctionComponent<{
             </EuiCodeBlock>
           ) : (
             <FixedHeightDiv>
-              <CodeEditor
+              <CodeEditor // TODO theme provided in context by x-pack/plugins/fleet/public/applications/fleet/app.tsx
                 languageId="yaml"
                 width="100%"
                 height="300px"
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/debug/components/code_block.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/debug/components/code_block.tsx
index 3addcaa862c3f..471ec8228f2ae 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/debug/components/code_block.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/debug/components/code_block.tsx
@@ -14,7 +14,7 @@ import { CodeEditor } from '@kbn/kibana-react-plugin/public';
  */
 export const CodeBlock: React.FunctionComponent<{ value: string }> = ({ value }) => {
   return (
-    <CodeEditor
+    <CodeEditor // TODO theme provided in context by x-pack/plugins/fleet/public/applications/fleet/app.tsx
       isCopyable
       languageId=""
       height="600px"
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/yaml_code_editor_with_placeholder.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/yaml_code_editor_with_placeholder.tsx
index 8cec82b11c990..9315cf0e50db7 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/yaml_code_editor_with_placeholder.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/yaml_code_editor_with_placeholder.tsx
@@ -75,7 +75,7 @@ export const YamlCodeEditorWithPlaceholder: React.FunctionComponent<
 
   return (
     <CodeEditorContainer>
-      <CodeEditor
+      <CodeEditor // TODO theme provided in context by x-pack/plugins/fleet/public/applications/fleet/app.tsx
         languageId="yaml"
         width="100%"
         height="116px"
diff --git a/x-pack/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js b/x-pack/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js
index def839c3f9b09..21ecd605f4465 100644
--- a/x-pack/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js
+++ b/x-pack/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js
@@ -43,7 +43,7 @@ MSG message-id=<%{GREEDYDATA}>`;
       <EuiSpacer size="m" />
 
       <EuiFormRow fullWidth data-test-subj="aceCustomPatternsInput">
-        <CodeEditor
+        <CodeEditor // TODO theme provided in context by x-pack/plugins/grokdebugger/public/render_app.js
           languageId="plaintext"
           value={value}
           height={200}
diff --git a/x-pack/plugins/grokdebugger/public/components/event_input/event_input.js b/x-pack/plugins/grokdebugger/public/components/event_input/event_input.js
index 2bfdce4f0a893..52c5f6630497b 100644
--- a/x-pack/plugins/grokdebugger/public/components/event_input/event_input.js
+++ b/x-pack/plugins/grokdebugger/public/components/event_input/event_input.js
@@ -20,7 +20,7 @@ export function EventInput({ value, onChange }) {
       fullWidth
       data-test-subj="eventInput"
     >
-      <CodeEditor
+      <CodeEditor // TODO theme provided in context by x-pack/plugins/grokdebugger/public/render_app.js
         languageId="plaintext"
         value={value}
         height={200}
diff --git a/x-pack/plugins/grokdebugger/public/components/pattern_input/pattern_input.js b/x-pack/plugins/grokdebugger/public/components/pattern_input/pattern_input.js
index 096537bd8a6bf..7ca4dc657369f 100644
--- a/x-pack/plugins/grokdebugger/public/components/pattern_input/pattern_input.js
+++ b/x-pack/plugins/grokdebugger/public/components/pattern_input/pattern_input.js
@@ -20,7 +20,7 @@ export function PatternInput({ value, onChange }) {
       fullWidth
       data-test-subj="patternInput"
     >
-      <CodeEditor
+      <CodeEditor // TODO theme provided in context by x-pack/plugins/grokdebugger/public/render_app.js
         languageId="plaintext"
         value={value}
         height={200}
diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx
index a948b9a999fa8..9627422fae114 100644
--- a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx
+++ b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx
@@ -106,7 +106,7 @@ export const StepAliases: React.FunctionComponent<Props> = React.memo(
           error={error}
           fullWidth
         >
-          <CodeEditor
+          <CodeEditor // TODO theme provided in context by x-pack/plugins/index_management/public/application/index.tsx
             languageId="json"
             value={jsonContent}
             data-test-subj="aliasesEditor"
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/field_components/text_editor.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/field_components/text_editor.tsx
index b45e349c1e2ef..75953ff4f5eec 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/field_components/text_editor.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/field_components/text_editor.tsx
@@ -38,7 +38,13 @@ export const TextEditor: FunctionComponent<Props> = ({ field, editorProps }) =>
         paddingSize="s"
         hasShadow={false}
       >
-        <CodeEditor value={value} onChange={setValue} {...(editorProps as any)} />
+        <CodeEditor
+          /* TODO theme provided in context by x-pack/plugins/ingest_pipelines/public/application/index.tsx */ value={
+            value
+          }
+          onChange={setValue}
+          {...(editorProps as any)}
+        />
       </EuiPanel>
     </EuiFormRow>
   );
diff --git a/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx b/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx
index 2cc1b8475f12f..eefb0c7c7ec37 100644
--- a/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx
+++ b/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx
@@ -779,7 +779,7 @@ export function FormulaEditor({
             </div>
 
             <div className="lnsFormula__editorContent">
-              <CodeEditor
+              <CodeEditor // TODO theme provided in context by x-pack/plugins/lens/public/app_plugin/mounter.tsx
                 {...codeEditorOptions}
                 options={{
                   ...codeEditorOptions.options,
diff --git a/x-pack/plugins/maps/public/inspector/vector_tile_adapter/components/tile_request_tab.tsx b/x-pack/plugins/maps/public/inspector/vector_tile_adapter/components/tile_request_tab.tsx
index e57216a024b29..8823627e4fdc9 100644
--- a/x-pack/plugins/maps/public/inspector/vector_tile_adapter/components/tile_request_tab.tsx
+++ b/x-pack/plugins/maps/public/inspector/vector_tile_adapter/components/tile_request_tab.tsx
@@ -90,7 +90,7 @@ export function TileRequestTab(props: Props) {
           </EuiFlexGroup>
         </EuiFlexItem>
         <EuiFlexItem grow={true}>
-          <CodeEditor
+          <CodeEditor // TODO Unable to find context being provided. Need help from CodeOwners
             languageId={XJsonLang.ID}
             value={consoleRequest}
             options={{
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_analytics_advanced_editor/create_analytics_advanced_editor.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_analytics_advanced_editor/create_analytics_advanced_editor.tsx
index c809597ed1208..c031cecf5a5e2 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_analytics_advanced_editor/create_analytics_advanced_editor.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_analytics_advanced_editor/create_analytics_advanced_editor.tsx
@@ -139,7 +139,7 @@ export const CreateAnalyticsAdvancedEditor: FC<CreateAnalyticsFormProps> = (prop
         )}
         style={{ maxWidth: '100%' }}
       >
-        <CodeEditor
+        <CodeEditor // TODO theme provided in context by x-pack/plugins/ml/public/application/app.tsx
           languageId={'json'}
           height={500}
           languageConfiguration={{
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/runtime_mappings/runtime_mappings_editor.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/runtime_mappings/runtime_mappings_editor.tsx
index eb730ea1e5773..48cfc42d5704d 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/runtime_mappings/runtime_mappings_editor.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/runtime_mappings/runtime_mappings_editor.tsx
@@ -33,7 +33,7 @@ export const RuntimeMappingsEditor: FC<Props> = memo(
   }) => {
     return (
       <div data-test-subj="mlDataFrameAnalyticsAdvancedRuntimeMappingsEditor">
-        <CodeEditor
+        <CodeEditor // TODO theme provided in context by x-pack/plugins/ml/public/application/app.tsx
           height={250}
           languageId={'json'}
           onChange={(d: string) => {
diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx
index 449659b9f5dc5..64211ff7e903a 100644
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx
@@ -48,7 +48,7 @@ export const MLJobEditor: FC<MlJobEditorProps> = ({
   }
 
   return (
-    <CodeEditor
+    <CodeEditor // TODO theme provided in context by x-pack/plugins/ml/public/application/app.tsx
       languageId={mode}
       options={{
         readOnly,
diff --git a/x-pack/plugins/osquery/public/editor/index.tsx b/x-pack/plugins/osquery/public/editor/index.tsx
index 876bdb7614a5c..570a67f458fb6 100644
--- a/x-pack/plugins/osquery/public/editor/index.tsx
+++ b/x-pack/plugins/osquery/public/editor/index.tsx
@@ -77,7 +77,7 @@ const OsqueryEditorComponent: React.FC<OsqueryEditorProps> = ({
   );
 
   return (
-    <CodeEditor
+    <CodeEditor // TODO theme provided in context by x-pack/plugins/osquery/public/application.tsx
       languageId={'sql'}
       value={editorValue}
       onChange={setEditorValue}
diff --git a/x-pack/plugins/painless_lab/public/application/components/editor.tsx b/x-pack/plugins/painless_lab/public/application/components/editor.tsx
index 06cf1a9fb46f9..32a77699407fd 100644
--- a/x-pack/plugins/painless_lab/public/application/components/editor.tsx
+++ b/x-pack/plugins/painless_lab/public/application/components/editor.tsx
@@ -20,7 +20,7 @@ export function Editor({ code, onChange, context }: Props) {
   const suggestionProvider = PainlessLang.getSuggestionProvider(context);
 
   return (
-    <CodeEditor
+    <CodeEditor // TODO theme provided in context by x-pack/plugins/painless_lab/public/application/index.tsx
       languageId={PainlessLang.ID}
       // 99% width allows the editor to resize horizontally. 100% prevents it from resizing.
       width="99%"
diff --git a/x-pack/plugins/painless_lab/public/application/components/output_pane/context_tab.tsx b/x-pack/plugins/painless_lab/public/application/components/output_pane/context_tab.tsx
index 03384b6ae50c4..15894cf8b4cc5 100644
--- a/x-pack/plugins/painless_lab/public/application/components/output_pane/context_tab.tsx
+++ b/x-pack/plugins/painless_lab/public/application/components/output_pane/context_tab.tsx
@@ -140,7 +140,7 @@ export const ContextTab: FunctionComponent = () => {
           }
           fullWidth
         >
-          <CodeEditor
+          <CodeEditor // TODO theme provided in context by x-pack/plugins/painless_lab/public/application/index.tsx
             languageId="json"
             height={150}
             value={query}
@@ -177,7 +177,7 @@ export const ContextTab: FunctionComponent = () => {
           }
           fullWidth
         >
-          <CodeEditor
+          <CodeEditor // TODO theme provided in context by x-pack/plugins/painless_lab/public/application/index.tsx
             languageId="json"
             height={400}
             value={document}
diff --git a/x-pack/plugins/painless_lab/public/application/components/output_pane/parameters_tab.tsx b/x-pack/plugins/painless_lab/public/application/components/output_pane/parameters_tab.tsx
index ba6bc83367956..1cbf9f762b0dd 100644
--- a/x-pack/plugins/painless_lab/public/application/components/output_pane/parameters_tab.tsx
+++ b/x-pack/plugins/painless_lab/public/application/components/output_pane/parameters_tab.tsx
@@ -50,7 +50,7 @@ export const ParametersTab: FunctionComponent = () => {
           </EuiText>
         }
       >
-        <CodeEditor
+        <CodeEditor // TODO theme provided in context by x-pack/plugins/painless_lab/public/application/index.tsx
           languageId="json"
           height={600}
           value={payload.parameters}
diff --git a/x-pack/plugins/painless_lab/public/application/index.tsx b/x-pack/plugins/painless_lab/public/application/index.tsx
index d4ce916c8858b..d0974c3577f52 100644
--- a/x-pack/plugins/painless_lab/public/application/index.tsx
+++ b/x-pack/plugins/painless_lab/public/application/index.tsx
@@ -36,6 +36,7 @@ export function renderApp(
   const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
     uiSettings,
     settings,
+    theme: { theme$ },
   });
   render(
     <I18nContext>
diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx
index ac74cd07df225..d0063a6faf6d3 100644
--- a/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx
+++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx
@@ -286,7 +286,7 @@ const RuntimeFieldFormComp = ({
               }
               fullWidth
             >
-              <CodeEditor
+              <CodeEditor // TODO theme provided in context by x-pack/plugins/runtime_fields/public/load_editor.tsx
                 languageId={PainlessLang.ID}
                 suggestionProvider={suggestionProvider}
                 width="100%"
diff --git a/x-pack/plugins/runtime_fields/public/load_editor.tsx b/x-pack/plugins/runtime_fields/public/load_editor.tsx
index fa0a45c014009..b9c8b8983eb01 100644
--- a/x-pack/plugins/runtime_fields/public/load_editor.tsx
+++ b/x-pack/plugins/runtime_fields/public/load_editor.tsx
@@ -26,6 +26,7 @@ export const getRuntimeFieldEditorLoader =
     const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
       uiSettings,
       settings,
+      theme,
     });
 
     let overlayRef: OverlayRef | null = null;
diff --git a/x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx b/x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx
index 6abb387e87a1a..bb851a836009b 100644
--- a/x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx
+++ b/x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx
@@ -347,7 +347,7 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             />
           }
         >
-          <CodeEditor
+          <CodeEditor // TODO theme provided in context by x-pack/plugins/snapshot_restore/public/application/index.tsx
             languageId="json"
             value={additionalConf}
             data-test-subj="codeEditor"
diff --git a/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx b/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx
index 968098d969c39..dd74b1b76294c 100644
--- a/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx
+++ b/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx
@@ -191,7 +191,7 @@ export const RestoreSnapshotStepSettings: React.FunctionComponent<StepProps> = (
                   }
                   data-test-subj="indexSettingsEditor"
                 >
-                  <CodeEditor
+                  <CodeEditor // TODO theme provided in context by x-pack/plugins/snapshot_restore/public/application/index.tsx
                     languageId="json"
                     value={indexSettings!}
                     height={250}
diff --git a/x-pack/plugins/snapshot_restore/public/application/index.tsx b/x-pack/plugins/snapshot_restore/public/application/index.tsx
index 963f05110ea96..9b07b95828097 100644
--- a/x-pack/plugins/snapshot_restore/public/application/index.tsx
+++ b/x-pack/plugins/snapshot_restore/public/application/index.tsx
@@ -31,6 +31,7 @@ export const renderApp = (elem: Element, dependencies: AppDependencies) => {
       services={{
         uiSettings: dependencies.services.uiSettings,
         settings: dependencies.services.settings,
+        theme: dependencies.core.theme,
       }}
     >
       <AppProviders appDependencies={dependencies}>
diff --git a/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/es_query_expression.tsx b/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/es_query_expression.tsx
index bf0af46912c62..fcd71db6eb60d 100644
--- a/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/es_query_expression.tsx
+++ b/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/es_query_expression.tsx
@@ -244,7 +244,7 @@ export const EsQueryExpression: React.FC<
           </EuiLink>
         }
       >
-        <CodeEditor
+        <CodeEditor // TODO unable to find context. Need CodeOwners to help
           languageId="xjson"
           width="100%"
           height="200px"
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/fields/code_editor.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/fields/code_editor.tsx
index 34a696389717f..edfbb24ab3ef7 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/fields/code_editor.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/fields/code_editor.tsx
@@ -57,7 +57,7 @@ export const CodeEditor = ({
           aria-label={ariaLabel}
           data-test-subj="codeEditorContainer"
         >
-          <MonacoCodeEditor
+          <MonacoCodeEditor // TODO theme provided in context by x-pack/plugins/synthetics/public/apps/synthetics/synthetics_app.tsx
             languageId={languageId}
             width={containerWidthThrottled ?? '100%'}
             height={height}
diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_pivot_editor/advanced_pivot_editor.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_pivot_editor/advanced_pivot_editor.tsx
index 6699edbfd8f96..0babae5bbc3c5 100644
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_pivot_editor/advanced_pivot_editor.tsx
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_pivot_editor/advanced_pivot_editor.tsx
@@ -29,7 +29,7 @@ export const AdvancedPivotEditor: FC<StepDefineFormHook['advancedPivotEditor']>
         })}
         data-test-subj="transformAdvancedPivotEditor"
       >
-        <CodeEditor
+        <CodeEditor // TODO theme is provided in context by x-pack/plugins/transform/public/app/app.tsx
           height={250}
           languageId={'json'}
           onChange={(d: string) => {
diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_runtime_mappings_editor/advanced_runtime_mappings_editor.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_runtime_mappings_editor/advanced_runtime_mappings_editor.tsx
index 1fdea31d74fbf..97bec25fd74a7 100644
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_runtime_mappings_editor/advanced_runtime_mappings_editor.tsx
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_runtime_mappings_editor/advanced_runtime_mappings_editor.tsx
@@ -26,7 +26,7 @@ export const AdvancedRuntimeMappingsEditor: FC<StepDefineFormHook['runtimeMappin
   }) => {
     return (
       <div data-test-subj="transformAdvancedRuntimeMappingsEditor">
-        <CodeEditor
+        <CodeEditor // TODO theme is provided in context by x-pack/plugins/transform/public/app/app.tsx
           height={250}
           languageId={'json'}
           onChange={(d: string) => {
diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_source_editor/advanced_source_editor.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_source_editor/advanced_source_editor.tsx
index 665c9986e6e69..8e77154f1156c 100644
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_source_editor/advanced_source_editor.tsx
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_source_editor/advanced_source_editor.tsx
@@ -24,7 +24,7 @@ export const AdvancedSourceEditor: FC<StepDefineFormHook> = ({
 }) => {
   return (
     <div data-test-subj="transformAdvancedRuntimeMappingsEditor">
-      <CodeEditor
+      <CodeEditor // TODO theme is provided in context by x-pack/plugins/transform/public/app/app.tsx
         height={250}
         languageId={'json'}
         onChange={(d: string) => {
diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/editor_form.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/editor_form.tsx
index 480c1f4a31063..bb05d05b0d746 100644
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/editor_form.tsx
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/editor_form.tsx
@@ -19,7 +19,7 @@ export const FilterEditorForm: FilterAggConfigEditor['aggTypeConfig']['FilterAgg
   return (
     <>
       <EuiSpacer size="m" />
-      <CodeEditor
+      <CodeEditor // TODO theme is provided in context by x-pack/plugins/transform/public/app/app.tsx
         height={300}
         languageId={'json'}
         onChange={(d) => {
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/app.tsx b/x-pack/plugins/triggers_actions_ui/public/application/app.tsx
index 5b04a6bb5d68a..aed8e2a4a8958 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/app.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/app.tsx
@@ -87,7 +87,7 @@ export const App = ({ deps }: { deps: TriggersAndActionsUiServices }) => {
     <I18nProvider>
       <EuiThemeProvider darkMode={isDarkMode}>
         <KibanaThemeProvider theme$={theme$}>
-          <KibanaContextProvider services={{ ...deps }}>
+          <KibanaContextProvider services={{ ...deps, theme: { theme$ } }}>
             <Router history={deps.history}>
               <QueryClientProvider client={queryClient}>
                 <AppWithoutRouter sectionsRegex={sectionsRegex} />
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/json_editor_with_message_variables.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/json_editor_with_message_variables.tsx
index 1acd3e6392450..18d805be16f60 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/json_editor_with_message_variables.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/json_editor_with_message_variables.tsx
@@ -173,7 +173,7 @@ export const JsonEditorWithMessageVariables: React.FunctionComponent<Props> = ({
     >
       <>
         {renderErrorMessage()}
-        <CodeEditor
+        <CodeEditor // TODO theme provided in context by x-pack/plugins/triggers_actions_ui/public/application/app.tsx
           languageId={XJsonLang.ID}
           options={{
             renderValidationDecorations: xJson ? 'on' : 'off', // Disable error underline when empty
diff --git a/x-pack/plugins/watcher/public/application/index.tsx b/x-pack/plugins/watcher/public/application/index.tsx
index 94cef7b8c2acd..73713da2c05d1 100644
--- a/x-pack/plugins/watcher/public/application/index.tsx
+++ b/x-pack/plugins/watcher/public/application/index.tsx
@@ -29,7 +29,11 @@ export const renderApp = (bootDeps: BootDeps) => {
   render(
     <I18nContext>
       <KibanaContextProvider
-        services={{ uiSettings: bootDeps.uiSettings, settings: bootDeps.settings }}
+        services={{
+          uiSettings: bootDeps.uiSettings,
+          settings: bootDeps.settings,
+          theme: bootDeps.theme,
+        }}
       >
         <KibanaThemeProvider theme$={theme$}>
           <App {...appDeps} />
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/json_watch_edit/json_watch_edit_form.tsx b/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/json_watch_edit/json_watch_edit_form.tsx
index ef71362bf22a1..e87a152c22bb5 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/json_watch_edit/json_watch_edit_form.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/json_watch_edit/json_watch_edit_form.tsx
@@ -167,7 +167,7 @@ export const JsonWatchEditForm = () => {
           fullWidth
           errors={jsonErrors}
         >
-          <CodeEditor
+          <CodeEditor // TODO theme provided in context by x-pack/plugins/watcher/public/application/index.tsx
             languageId="json"
             value={xJson}
             data-test-subj="jsonEditor"
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/json_watch_edit/json_watch_edit_simulate.tsx b/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/json_watch_edit/json_watch_edit_simulate.tsx
index bc6ecfcbc16cc..23df17384f695 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/json_watch_edit/json_watch_edit_simulate.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/json_watch_edit/json_watch_edit_simulate.tsx
@@ -367,7 +367,7 @@ export const JsonWatchEditSimulate = ({
             fullWidth
             errors={executeWatchErrors}
           >
-            <CodeEditor
+            <CodeEditor // TODO theme provided in context by x-pack/plugins/watcher/public/application/index.tsx
               languageId="json"
               value={xJson}
               data-test-subj="jsonEditor"
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/action_fields/webhook_action_fields.tsx b/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/action_fields/webhook_action_fields.tsx
index e7da2c3073870..f52b289ef4e30 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/action_fields/webhook_action_fields.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/action_fields/webhook_action_fields.tsx
@@ -243,7 +243,7 @@ export const WebhookActionFields: React.FunctionComponent<Props> = ({
         fullWidth
         errors={errors}
       >
-        <CodeEditor
+        <CodeEditor // TODO theme provided in context by x-pack/plugins/watcher/public/application/index.tsx
           languageId="json"
           value={body || ''}
           data-test-subj="webhookBodyEditor"

From 3470185534d0c28c88dcbc75ae49f4deb5a3835e Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Wed, 14 Jun 2023 13:22:04 -0400
Subject: [PATCH 04/50] Fixing theme in adv settings context and updating notes
 about snapshot_restore

---
 .../public/management_app/advanced_settings.tsx             | 2 +-
 .../snapshot_restore/public/application/app_context.tsx     | 6 ++++++
 .../repository_form/type_settings/hdfs_settings.tsx         | 2 +-
 .../restore_snapshot_form/steps/step_settings.tsx           | 2 +-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx b/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx
index ea8c4f9f19dd0..347a04b2df81a 100644
--- a/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx
+++ b/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx
@@ -74,7 +74,7 @@ export class AdvancedSettings extends Component<AdvancedSettingsProps> {
           services={{
             uiSettings: this.props.settingsService.client,
             settings: this.props.settingsService,
-            theme: this.props.theme,
+            theme: { theme$: this.props.theme },
           }}
         >
           <Form
diff --git a/x-pack/plugins/snapshot_restore/public/application/app_context.tsx b/x-pack/plugins/snapshot_restore/public/application/app_context.tsx
index e8255832c9d55..11bfcf6c64767 100644
--- a/x-pack/plugins/snapshot_restore/public/application/app_context.tsx
+++ b/x-pack/plugins/snapshot_restore/public/application/app_context.tsx
@@ -37,6 +37,12 @@ export const AppContextProvider = ({
   value: AppDependencies;
   children: React.ReactNode;
 }) => {
+  /*
+   * TODO theme needs to be provided here for
+   *  x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx
+   *  and
+   *  x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx
+   */
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
 };
 
diff --git a/x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx b/x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx
index bb851a836009b..93ad435851803 100644
--- a/x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx
+++ b/x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx
@@ -347,7 +347,7 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             />
           }
         >
-          <CodeEditor // TODO theme provided in context by x-pack/plugins/snapshot_restore/public/application/index.tsx
+          <CodeEditor // TODO theme needs to be provided in x-pack/plugins/snapshot_restore/public/application/app_context.tsx
             languageId="json"
             value={additionalConf}
             data-test-subj="codeEditor"
diff --git a/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx b/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx
index dd74b1b76294c..aa7c1a89b9e09 100644
--- a/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx
+++ b/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx
@@ -191,7 +191,7 @@ export const RestoreSnapshotStepSettings: React.FunctionComponent<StepProps> = (
                   }
                   data-test-subj="indexSettingsEditor"
                 >
-                  <CodeEditor // TODO theme provided in context by x-pack/plugins/snapshot_restore/public/application/index.tsx
+                  <CodeEditor // TODO theme needs to be provided in x-pack/plugins/snapshot_restore/public/application/app_context.tsx
                     languageId="json"
                     value={indexSettings!}
                     height={250}

From 993ca17a4255bbd67af24e08a60f9a88a8ffb917 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Wed, 14 Jun 2023 15:02:36 -0400
Subject: [PATCH 05/50] Changing import/exports

---
 src/plugins/kibana_react/public/code_editor/index.tsx | 2 +-
 src/plugins/kibana_react/public/index.ts              | 2 +-
 src/plugins/kibana_react/public/theme/index.ts        | 1 +
 src/plugins/kibana_react/public/theme/use_theme.ts    | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/plugins/kibana_react/public/code_editor/index.tsx b/src/plugins/kibana_react/public/code_editor/index.tsx
index e17cb088ee382..bcec4ed58ca02 100644
--- a/src/plugins/kibana_react/public/code_editor/index.tsx
+++ b/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 { useKibanaTheme } from '../theme/use_theme';
+import { useKibanaTheme } from '../theme';
 import type { Props } from './code_editor';
 
 export * from './languages/constants';
diff --git a/src/plugins/kibana_react/public/index.ts b/src/plugins/kibana_react/public/index.ts
index 172f3227d479a..68b66fcc00845 100644
--- a/src/plugins/kibana_react/public/index.ts
+++ b/src/plugins/kibana_react/public/index.ts
@@ -87,7 +87,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() {
diff --git a/src/plugins/kibana_react/public/theme/index.ts b/src/plugins/kibana_react/public/theme/index.ts
index 56e374946034e..029d9cf4874ff 100644
--- a/src/plugins/kibana_react/public/theme/index.ts
+++ b/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';
diff --git a/src/plugins/kibana_react/public/theme/use_theme.ts b/src/plugins/kibana_react/public/theme/use_theme.ts
index 314f65ad77844..d5ec9479d99be 100644
--- a/src/plugins/kibana_react/public/theme/use_theme.ts
+++ b/src/plugins/kibana_react/public/theme/use_theme.ts
@@ -8,7 +8,7 @@
 
 import { CoreTheme } from '@kbn/core-theme-browser';
 import useObservable from 'react-use/lib/useObservable';
-import { useKibana } from '..';
+import { useKibana } from '../context';
 
 export const useKibanaTheme = (): CoreTheme => {
   const defaultTheme: CoreTheme = { darkMode: false };

From a4104365c4a9bf4f30822235f8d76af24a6b8e0b Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Wed, 14 Jun 2023 21:35:01 -0400
Subject: [PATCH 06/50] Fixing CodeEditor to respond to Observable changes

---
 .../management_app/components/field/field.test.tsx       | 6 ++++++
 .../discover_grid/get_render_cell_value.test.tsx         | 1 +
 src/plugins/inspector/public/ui/inspector_panel.test.tsx | 5 ++++-
 .../kibana_react/public/code_editor/code_editor.tsx      | 9 +++++++++
 .../client_integration/helpers/setup_environment.tsx     | 2 +-
 5 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx b/src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx
index 0e67d787be144..afaa7fc790a0a 100644
--- a/src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx
+++ b/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,
diff --git a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx b/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx
index 387e1474f3034..c044c5109f553 100644
--- a/src/plugins/discover/public/components/discover_grid/get_render_cell_value.test.tsx
+++ b/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', () => {
diff --git a/src/plugins/inspector/public/ui/inspector_panel.test.tsx b/src/plugins/inspector/public/ui/inspector_panel.test.tsx
index 14d884fcca88c..889a7588ad7c1 100644
--- a/src/plugins/inspector/public/ui/inspector_panel.test.tsx
+++ b/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(() => {
diff --git a/src/plugins/kibana_react/public/code_editor/code_editor.tsx b/src/plugins/kibana_react/public/code_editor/code_editor.tsx
index bfae4b052f5d9..7d7a66f1bc91e 100644
--- a/src/plugins/kibana_react/public/code_editor/code_editor.tsx
+++ b/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) {
diff --git a/x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/setup_environment.tsx b/x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/setup_environment.tsx
index 1ae72d7b6df8a..30e4d2d8a549b 100644
--- a/x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/setup_environment.tsx
+++ b/x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/setup_environment.tsx
@@ -61,7 +61,7 @@ const appDependencies = {
   },
   plugins: {},
 };
-
+// TODO need to provide theme in x-pack/plugins/snapshot_restore/public/application/app_context.tsx and mock here
 const kibanaContextDependencies = {
   uiSettings: core.uiSettings,
   settings: core.settings,

From cac52ab085a36bdc1cc6cbc9599abecd328d1b32 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Tue, 20 Jun 2023 16:10:52 -0400
Subject: [PATCH 07/50] Adding tests and final comments

---
 .../public/theme/use_theme.test.tsx           | 56 +++++++++++++++++++
 .../public/components/controls/raw_json.tsx   |  2 +-
 .../cytoscape_example_data.stories.tsx        |  4 +-
 .../settings_form/form_row_setting.tsx        |  2 +-
 .../components/wizard_steps/step_settings.tsx |  2 +-
 5 files changed, 61 insertions(+), 5 deletions(-)
 create mode 100644 src/plugins/kibana_react/public/theme/use_theme.test.tsx

diff --git a/src/plugins/kibana_react/public/theme/use_theme.test.tsx b/src/plugins/kibana_react/public/theme/use_theme.test.tsx
new file mode 100644
index 0000000000000..832439a5e31a4
--- /dev/null
+++ b/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.'));
+  });
+});
diff --git a/src/plugins/vis_default_editor/public/components/controls/raw_json.tsx b/src/plugins/vis_default_editor/public/components/controls/raw_json.tsx
index f794057d3540b..115ec090d1ad0 100644
--- a/src/plugins/vis_default_editor/public/components/controls/raw_json.tsx
+++ b/src/plugins/vis_default_editor/public/components/controls/raw_json.tsx
@@ -79,7 +79,7 @@ function RawJsonParamEditor({
       onBlur={setTouched}
     >
       <>
-        <CodeEditor
+        <CodeEditor // TODO Unsure how to resolve context. Requires CODEOWNER input.
           aria-label={jsonEditorLabelText}
           aria-describedby="jsonEditorDescription"
           languageId={XJsonLang.ID}
diff --git a/x-pack/plugins/apm/public/components/app/service_map/__stories__/cytoscape_example_data.stories.tsx b/x-pack/plugins/apm/public/components/app/service_map/__stories__/cytoscape_example_data.stories.tsx
index 995b82d960e6d..08aae8bb72d94 100644
--- a/x-pack/plugins/apm/public/components/app/service_map/__stories__/cytoscape_example_data.stories.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_map/__stories__/cytoscape_example_data.stories.tsx
@@ -105,7 +105,7 @@ export const GenerateMap: Story<{}> = () => {
       </Cytoscape>
 
       {json && (
-        <CodeEditor
+        <CodeEditor // TODO Unable to find context that provides theme. Need CODEOWNER Input
           languageId="json"
           value={json}
           height="200px"
@@ -152,7 +152,7 @@ export const MapFromJSON: Story<{}> = () => {
       <EuiForm isInvalid={error !== undefined} error={error}>
         <EuiFlexGroup>
           <EuiFlexItem>
-            <CodeEditor
+            <CodeEditor // TODO Unable to find context that provides theme. Need CODEOWNER Input
               languageId="json"
               value={json}
               options={{ fontFamily: 'monospace' }}
diff --git a/x-pack/plugins/apm/public/components/fleet_integration/apm_policy_form/settings_form/form_row_setting.tsx b/x-pack/plugins/apm/public/components/fleet_integration/apm_policy_form/settings_form/form_row_setting.tsx
index 6f2239e66a4a1..33f87ffb7efe8 100644
--- a/x-pack/plugins/apm/public/components/fleet_integration/apm_policy_form/settings_form/form_row_setting.tsx
+++ b/x-pack/plugins/apm/public/components/fleet_integration/apm_policy_form/settings_form/form_row_setting.tsx
@@ -125,7 +125,7 @@ export function FormRowSetting({ row, value, onChange, isDisabled }: Props) {
     case 'yaml': {
       return (
         <FixedHeightDiv>
-          <CodeEditor
+          <CodeEditor // TODO Unable to find context that provides theme. Need CODEOWNER Input
             languageId="yaml"
             width="100%"
             height="300px"
diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings.tsx
index 0fd889de03921..de236669a03e6 100644
--- a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings.tsx
+++ b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings.tsx
@@ -100,7 +100,7 @@ export const StepSettings: React.FunctionComponent<Props> = React.memo(
           error={error}
           fullWidth
         >
-          <CodeEditor
+          <CodeEditor // TODO theme provided in context by x-pack/plugins/index_management/public/application/index.tsx
             languageId="json"
             value={jsonContent}
             data-test-subj="settingsEditor"

From 5ebd0b2843696e903b893d46618f7b08c86a4441 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Wed, 21 Jun 2023 14:18:13 -0400
Subject: [PATCH 08/50] Code Review Feedback from Tina H.

---
 .../__snapshots__/saved_object_view.test.tsx.snap            | 5 +++++
 .../object_view/saved_object_view.test.tsx                   | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/src/plugins/saved_objects_management/public/management_section/object_view/__snapshots__/saved_object_view.test.tsx.snap b/src/plugins/saved_objects_management/public/management_section/object_view/__snapshots__/saved_object_view.test.tsx.snap
index f515f214804f3..a04790ca6af23 100644
--- a/src/plugins/saved_objects_management/public/management_section/object_view/__snapshots__/saved_object_view.test.tsx.snap
+++ b/src/plugins/saved_objects_management/public/management_section/object_view/__snapshots__/saved_object_view.test.tsx.snap
@@ -32,6 +32,11 @@ exports[`SavedObjectEdition should render normally 1`] = `
           "set": [MockFunction],
         },
       },
+      "theme": Object {
+        "theme$": Observable {
+          "_subscribe": [Function],
+        },
+      },
       "uiSettings": Object {
         "get": [MockFunction],
         "get$": [MockFunction],
diff --git a/src/plugins/saved_objects_management/public/management_section/object_view/saved_object_view.test.tsx b/src/plugins/saved_objects_management/public/management_section/object_view/saved_object_view.test.tsx
index c593830d40d91..9190bcc5feb20 100644
--- a/src/plugins/saved_objects_management/public/management_section/object_view/saved_object_view.test.tsx
+++ b/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([{}]);

From 0ff4ad74db0e8711d4640244f453a9b9f9c4b347 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Wed, 21 Jun 2023 15:53:13 -0400
Subject: [PATCH 09/50] CodeReview feed back from Stratoula K.

---
 .../plugins/lens/public/datasources/form_based/form_based.tsx   | 1 +
 .../operations/definitions/formula/editor/formula_editor.tsx    | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/lens/public/datasources/form_based/form_based.tsx b/x-pack/plugins/lens/public/datasources/form_based/form_based.tsx
index d5779ef4ac81a..4a504080028cb 100644
--- a/x-pack/plugins/lens/public/datasources/form_based/form_based.tsx
+++ b/x-pack/plugins/lens/public/datasources/form_based/form_based.tsx
@@ -580,6 +580,7 @@ export function getFormBasedDatasource({
                 docLinks: core.docLinks,
                 http: core.http,
                 unifiedSearch,
+                theme: core.theme,
               }}
             >
               <FormBasedDimensionEditor
diff --git a/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx b/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx
index eefb0c7c7ec37..a83e386b30f3d 100644
--- a/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx
+++ b/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx
@@ -779,7 +779,7 @@ export function FormulaEditor({
             </div>
 
             <div className="lnsFormula__editorContent">
-              <CodeEditor // TODO theme provided in context by x-pack/plugins/lens/public/app_plugin/mounter.tsx
+              <CodeEditor // TODO theme provided in context by x-pack/plugins/lens/public/datasources/form_based/form_based.tsx
                 {...codeEditorOptions}
                 options={{
                   ...codeEditorOptions.options,

From 79b0be071aa40cffb581a3c080aca6e9e714518c Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Thu, 22 Jun 2023 12:24:05 -0400
Subject: [PATCH 10/50] CodeReview feedback for Stratoula K. - removing TODOs

---
 .../kbn-text-based-editor/src/text_based_languages_editor.tsx   | 2 +-
 .../public/filter_bar/filter_editor/filter_editor.tsx           | 2 +-
 .../vis_default_editor/public/components/controls/raw_json.tsx  | 2 +-
 .../timelion/public/components/timelion_expression_input.tsx    | 2 +-
 .../timeseries/public/application/components/markdown_editor.js | 2 +-
 .../public/application/components/panel_config/markdown.tsx     | 2 +-
 .../vis_types/vega/public/components/vega_vis_editor.tsx        | 2 +-
 .../vega/public/vega_inspector/components/spec_viewer.tsx       | 2 +-
 .../operations/definitions/formula/editor/formula_editor.tsx    | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx
index 1bfd1554a1882..5f432c090eb8c 100644
--- a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx
+++ b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx
@@ -515,7 +515,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
                         {errors.length}
                       </EuiBadge>
                     )}
-                    <CodeEditor // TODO Unsure how to proceed, theme would most likely be provided by all callers, need CodeOwners help
+                    <CodeEditor
                       languageId={languageId(language)}
                       value={codeOneLiner || code}
                       options={codeEditorOptions}
diff --git a/src/plugins/unified_search/public/filter_bar/filter_editor/filter_editor.tsx b/src/plugins/unified_search/public/filter_bar/filter_editor/filter_editor.tsx
index 58888d2254f4d..278d358aec493 100644
--- a/src/plugins/unified_search/public/filter_bar/filter_editor/filter_editor.tsx
+++ b/src/plugins/unified_search/public/filter_bar/filter_editor/filter_editor.tsx
@@ -401,7 +401,7 @@ class FilterEditorComponent extends Component<FilterEditorProps, State> {
 
     return (
       <EuiFormRow fullWidth label={strings.getQueryDslLabel()} helpText={helpText}>
-        <CodeEditor // TODO CodeOwners will need to help with this
+        <CodeEditor
           languageId={XJsonLang.ID}
           width="100%"
           height={'250px'}
diff --git a/src/plugins/vis_default_editor/public/components/controls/raw_json.tsx b/src/plugins/vis_default_editor/public/components/controls/raw_json.tsx
index 115ec090d1ad0..f794057d3540b 100644
--- a/src/plugins/vis_default_editor/public/components/controls/raw_json.tsx
+++ b/src/plugins/vis_default_editor/public/components/controls/raw_json.tsx
@@ -79,7 +79,7 @@ function RawJsonParamEditor({
       onBlur={setTouched}
     >
       <>
-        <CodeEditor // TODO Unsure how to resolve context. Requires CODEOWNER input.
+        <CodeEditor
           aria-label={jsonEditorLabelText}
           aria-describedby="jsonEditorDescription"
           languageId={XJsonLang.ID}
diff --git a/src/plugins/vis_types/timelion/public/components/timelion_expression_input.tsx b/src/plugins/vis_types/timelion/public/components/timelion_expression_input.tsx
index 1e3c370159ca5..4dff27a1c061d 100644
--- a/src/plugins/vis_types/timelion/public/components/timelion_expression_input.tsx
+++ b/src/plugins/vis_types/timelion/public/components/timelion_expression_input.tsx
@@ -105,7 +105,7 @@ function TimelionExpressionInput({ value, setValue }: TimelionExpressionInputPro
       </EuiFormLabel>
       <div className="timExpressionInput__editor">
         <div className="timExpressionInput__absolute" data-test-subj="timelionCodeEditor">
-          <CodeEditor // TODO theme is provided in context by src/plugins/vis_types/timelion/public/timelion_vis_renderer.tsx
+          <CodeEditor
             languageId={LANGUAGE_ID}
             value={value}
             onChange={setValue}
diff --git a/src/plugins/vis_types/timeseries/public/application/components/markdown_editor.js b/src/plugins/vis_types/timeseries/public/application/components/markdown_editor.js
index fe8ef89a7fd9c..79333358d68cd 100644
--- a/src/plugins/vis_types/timeseries/public/application/components/markdown_editor.js
+++ b/src/plugins/vis_types/timeseries/public/application/components/markdown_editor.js
@@ -122,7 +122,7 @@ export class MarkdownEditor extends Component {
     return (
       <div className="tvbMarkdownEditor">
         <div className="tvbMarkdownEditor__editor">
-          <CodeEditor // TODO theme is provided in context by src/plugins/vis_types/timeseries/public/application/components/vis_editor.tsx
+          <CodeEditor
             editorDidMount={this.handleOnLoad}
             languageId={MarkdownLang}
             options={{
diff --git a/src/plugins/vis_types/timeseries/public/application/components/panel_config/markdown.tsx b/src/plugins/vis_types/timeseries/public/application/components/panel_config/markdown.tsx
index dfbe7be66293f..9555d9854d0ef 100644
--- a/src/plugins/vis_types/timeseries/public/application/components/panel_config/markdown.tsx
+++ b/src/plugins/vis_types/timeseries/public/application/components/panel_config/markdown.tsx
@@ -257,7 +257,7 @@ export class MarkdownPanelConfig extends Component<
               </span>
             </EuiTitle>
             <EuiSpacer size="s" />
-            <CodeEditor // TODO theme is provided in context by src/plugins/vis_types/timeseries/public/application/components/vis_editor.tsx
+            <CodeEditor
               height="500px"
               languageId={CssLang}
               options={{ fontSize: 14 }}
diff --git a/src/plugins/vis_types/vega/public/components/vega_vis_editor.tsx b/src/plugins/vis_types/vega/public/components/vega_vis_editor.tsx
index 2a259361b1d3b..5349436374fc5 100644
--- a/src/plugins/vis_types/vega/public/components/vega_vis_editor.tsx
+++ b/src/plugins/vis_types/vega/public/components/vega_vis_editor.tsx
@@ -101,7 +101,7 @@ function VegaVisEditor({ stateParams, setValue }: VisEditorOptionsProps<VisParam
         <VegaHelpMenu />
         <VegaActionsMenu formatHJson={formatHJson} formatJson={formatJson} />
       </div>
-      <CodeEditor // TODO theme needs to be provided, need CodeOwner help
+      <CodeEditor
         width="100%"
         height="100%"
         languageId={languageId}
diff --git a/src/plugins/vis_types/vega/public/vega_inspector/components/spec_viewer.tsx b/src/plugins/vis_types/vega/public/vega_inspector/components/spec_viewer.tsx
index 8985a9b756e81..4e028fa3fb3cf 100644
--- a/src/plugins/vis_types/vega/public/vega_inspector/components/spec_viewer.tsx
+++ b/src/plugins/vis_types/vega/public/vega_inspector/components/spec_viewer.tsx
@@ -71,7 +71,7 @@ export const SpecViewer = ({ vegaAdapter, ...rest }: SpecViewerProps) => {
         </div>
       </EuiFlexItem>
       <EuiFlexItem grow={true}>
-        <CodeEditor // TODO theme needs to be provided from src/plugins/vis_types/vega/public/vega_inspector/vega_inspector.tsx, need Code Owner help
+        <CodeEditor
           languageId={XJsonLang.ID}
           value={spec}
           options={{
diff --git a/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx b/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx
index a83e386b30f3d..2cc1b8475f12f 100644
--- a/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx
+++ b/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/formula/editor/formula_editor.tsx
@@ -779,7 +779,7 @@ export function FormulaEditor({
             </div>
 
             <div className="lnsFormula__editorContent">
-              <CodeEditor // TODO theme provided in context by x-pack/plugins/lens/public/datasources/form_based/form_based.tsx
+              <CodeEditor
                 {...codeEditorOptions}
                 options={{
                   ...codeEditorOptions.options,

From 0bf6102aeb9f34c1e76b50302b5471f0e4a34054 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Thu, 22 Jun 2023 14:20:08 -0400
Subject: [PATCH 11/50] Update
 x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/setup_environment.tsx

Co-authored-by: Alison Goryachev <alisonmllr20@gmail.com>
---
 .../__jest__/client_integration/helpers/setup_environment.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/setup_environment.tsx b/x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/setup_environment.tsx
index 30e4d2d8a549b..54ec98137e620 100644
--- a/x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/setup_environment.tsx
+++ b/x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/setup_environment.tsx
@@ -65,6 +65,10 @@ const appDependencies = {
 const kibanaContextDependencies = {
   uiSettings: core.uiSettings,
   settings: core.settings,
+  theme: core.theme,
+};
+  uiSettings: core.uiSettings,
+  settings: core.settings,
 };
 
 export const setupEnvironment = () => {

From d3d6458055151bac60070ca678d36c7a4d28ed1a Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Thu, 22 Jun 2023 14:28:29 -0400
Subject: [PATCH 12/50] CodeReview feedback from Alison G. - removing TODOs and
 fixing test env data

---
 .../public/components/json_editor/json_editor.tsx           | 2 +-
 .../client_integration/helpers/setup_environment.tsx        | 5 +----
 .../snapshot_restore/public/application/app_context.tsx     | 6 ------
 3 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/src/plugins/es_ui_shared/public/components/json_editor/json_editor.tsx b/src/plugins/es_ui_shared/public/components/json_editor/json_editor.tsx
index 3850046adb9a0..df4c37a081973 100644
--- a/src/plugins/es_ui_shared/public/components/json_editor/json_editor.tsx
+++ b/src/plugins/es_ui_shared/public/components/json_editor/json_editor.tsx
@@ -83,7 +83,7 @@ function JsonEditorComp<T extends object = { [key: string]: any }>({
       error={error}
       fullWidth
     >
-      <CodeEditor // TODO JsonEditor is used many places. Need CodeOwners help to verify. One Example: theme provided in x-pack/plugins/index_management/public/application/index.tsx
+      <CodeEditor
         languageId="json"
         height={500}
         options={{
diff --git a/x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/setup_environment.tsx b/x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/setup_environment.tsx
index 54ec98137e620..a9a690e1a0d3a 100644
--- a/x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/setup_environment.tsx
+++ b/x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/setup_environment.tsx
@@ -61,15 +61,12 @@ const appDependencies = {
   },
   plugins: {},
 };
-// TODO need to provide theme in x-pack/plugins/snapshot_restore/public/application/app_context.tsx and mock here
+
 const kibanaContextDependencies = {
   uiSettings: core.uiSettings,
   settings: core.settings,
   theme: core.theme,
 };
-  uiSettings: core.uiSettings,
-  settings: core.settings,
-};
 
 export const setupEnvironment = () => {
   breadcrumbService.setup(() => undefined);
diff --git a/x-pack/plugins/snapshot_restore/public/application/app_context.tsx b/x-pack/plugins/snapshot_restore/public/application/app_context.tsx
index 11bfcf6c64767..e8255832c9d55 100644
--- a/x-pack/plugins/snapshot_restore/public/application/app_context.tsx
+++ b/x-pack/plugins/snapshot_restore/public/application/app_context.tsx
@@ -37,12 +37,6 @@ export const AppContextProvider = ({
   value: AppDependencies;
   children: React.ReactNode;
 }) => {
-  /*
-   * TODO theme needs to be provided here for
-   *  x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx
-   *  and
-   *  x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx
-   */
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
 };
 

From e29211bfe59ca1b2de4071c4dd360048dc76ae79 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Thu, 22 Jun 2023 16:24:58 -0400
Subject: [PATCH 13/50] CodeReview feedback from Paulo H.

---
 .../public/pages/configurations/findings_flyout/json_tab.tsx    | 2 +-
 .../vulnerabilities_finding_flyout/vulnerability_json_tab.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/json_tab.tsx b/x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/json_tab.tsx
index 120bd7c8f66d9..18f36810d03f6 100644
--- a/x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/json_tab.tsx
+++ b/x-pack/plugins/cloud_security_posture/public/pages/configurations/findings_flyout/json_tab.tsx
@@ -14,7 +14,7 @@ const offsetHeight = 120;
 
 export const JsonTab = ({ data }: { data: CspFinding }) => (
   <div style={{ position: 'absolute', inset: 0, top: offsetHeight }}>
-    <CodeEditor // TODO theme provided in context by x-pack/plugins/cloud_security_posture/public/plugin.tsx
+    <CodeEditor
       isCopyable
       allowFullScreen
       languageId={XJsonLang.ID}
diff --git a/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_json_tab.tsx b/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_json_tab.tsx
index d4ffa95a9e0e7..93d83be8b7632 100644
--- a/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_json_tab.tsx
+++ b/x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_finding_flyout/vulnerability_json_tab.tsx
@@ -21,7 +21,7 @@ export const VulnerabilityJsonTab = ({ vulnerabilityRecord }: VulnerabilityJsonT
       style={{ position: 'absolute', inset: 0, top: offsetTopHeight, bottom: offsetBottomHeight }}
       data-test-subj={JSON_TAB_VULNERABILITY_FLYOUT}
     >
-      <CodeEditor // TODO theme provided in context by x-pack/plugins/cloud_security_posture/public/plugin.tsx
+      <CodeEditor
         isCopyable
         allowFullScreen
         languageId={XJsonLang.ID}

From 9f48c1016ff3408616553dd2a4c80845161e8296 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Fri, 23 Jun 2023 09:52:46 -0400
Subject: [PATCH 14/50] Code Review feedback from Devon T. - removing TODOs

---
 .../views/requests/components/details/req_code_viewer.tsx       | 2 +-
 .../plugins/canvas/canvas_plugin_src/uis/arguments/editor.tsx   | 2 +-
 .../plugins/canvas/canvas_plugin_src/uis/datasources/essql.js   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/plugins/inspector/public/views/requests/components/details/req_code_viewer.tsx b/src/plugins/inspector/public/views/requests/components/details/req_code_viewer.tsx
index 2e46deda5ad16..5ab50ba33a514 100644
--- a/src/plugins/inspector/public/views/requests/components/details/req_code_viewer.tsx
+++ b/src/plugins/inspector/public/views/requests/components/details/req_code_viewer.tsx
@@ -133,7 +133,7 @@ export const RequestCodeViewer = ({ indexPattern, json }: RequestCodeViewerProps
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem grow={true} data-test-subj="inspectorRequestCodeViewerContainer">
-        <CodeEditor // TODO theme provided in context in src/plugins/inspector/public/ui/inspector_panel.tsx
+        <CodeEditor
           languageId={XJsonLang.ID}
           value={json}
           options={{
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/editor.tsx b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/editor.tsx
index 65c120142d009..1a09116ba1196 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/editor.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/editor.tsx
@@ -53,7 +53,7 @@ const EditorArg: FC<EditorArgProps> = ({ argValue, typeInstance, onValueChange,
 
   return (
     <EuiFormRow display="rowCompressed" data-test-subj="canvasCodeEditorField">
-      <CodeEditorField // TODO theme appears to be provided in x-pack/plugins/canvas/public/application.tsx
+      <CodeEditorField
         languageId={language ?? ''}
         value={value}
         onChange={onChange}
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js b/x-pack/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js
index efedc799c4e44..6258eaec4a754 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js
@@ -77,7 +77,7 @@ class EssqlDatasource extends PureComponent {
           </EuiText>
         }
       >
-        <CodeEditorField // TODO theme appears to be provided in x-pack/plugins/canvas/public/application.tsx
+        <CodeEditorField
           languageId={SQLLang.ID}
           value={this.getQuery()}
           onChange={this.onChange}

From 4aa4657a4e99d89267d2a6ba5193afdcc0f46396 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Mon, 26 Jun 2023 14:45:30 -0400
Subject: [PATCH 15/50] Code Review feedback from Sander P. - removing TODO

---
 .../search_index/connector/sync_rules/advanced_sync_rules.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/sync_rules/advanced_sync_rules.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/sync_rules/advanced_sync_rules.tsx
index 4c85c60cff24e..d45f3481807b2 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/sync_rules/advanced_sync_rules.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/sync_rules/advanced_sync_rules.tsx
@@ -40,7 +40,7 @@ export const AdvancedSyncRules: React.FC = () => {
       }
       fullWidth
     >
-      <CodeEditor // TODO theme is provided in context by x-pack/plugins/enterprise_search/public/applications/index.tsx
+      <CodeEditor
         isCopyable
         languageId="json"
         options={{

From 88fa75781951d72f81a69868b29a2a4cced2a9c7 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Wed, 28 Jun 2023 09:25:42 -0400
Subject: [PATCH 16/50] CodeReview feedback from Julia R. - Removing TODOs

---
 .../session/sessions_mgmt/components/actions/inspect_button.tsx | 2 +-
 .../public/components/field_editor/form_fields/script_field.tsx | 2 +-
 .../public/components/field_editor/field_editor.tsx             | 2 +-
 src/plugins/discover/public/build_services.ts                   | 2 +-
 .../components/json_code_editor/json_code_editor_common.tsx     | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/plugins/data/public/search/session/sessions_mgmt/components/actions/inspect_button.tsx b/src/plugins/data/public/search/session/sessions_mgmt/components/actions/inspect_button.tsx
index 252eabbfc4f97..a918982368b7e 100644
--- a/src/plugins/data/public/search/session/sessions_mgmt/components/actions/inspect_button.tsx
+++ b/src/plugins/data/public/search/session/sessions_mgmt/components/actions/inspect_button.tsx
@@ -28,7 +28,7 @@ const InspectFlyout: React.FC<InspectFlyoutProps> = ({ searchSession }) => {
   const renderInfo = () => {
     return (
       <Fragment>
-        <CodeEditor // TODO theme provided by src/plugins/data/public/search/search_service.ts
+        <CodeEditor
           languageId="json"
           value={JSON.stringify(searchSession, null, 2)}
           options={{
diff --git a/src/plugins/data_view_field_editor/public/components/field_editor/form_fields/script_field.tsx b/src/plugins/data_view_field_editor/public/components/field_editor/form_fields/script_field.tsx
index 980e5f9f234a2..7d57a1828f822 100644
--- a/src/plugins/data_view_field_editor/public/components/field_editor/form_fields/script_field.tsx
+++ b/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 // TODO theme provided in src/plugins/data_view_field_editor/public/open_editor.tsx
+              <CodeEditor
                 languageId={PainlessLang.ID}
                 suggestionProvider={suggestionProvider}
                 // 99% width allows the editor to resize horizontally. 100% prevents it from resizing.
diff --git a/src/plugins/data_view_management/public/components/field_editor/field_editor.tsx b/src/plugins/data_view_management/public/components/field_editor/field_editor.tsx
index 32d5ed1e0d614..7b12aeda30609 100644
--- a/src/plugins/data_view_management/public/components/field_editor/field_editor.tsx
+++ b/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 // TODO theme provided in src/plugins/data_view_management/public/management_app/mount_management_section.tsx
+          <CodeEditor
             languageId={PainlessLang.ID}
             width="100%"
             height="300px"
diff --git a/src/plugins/discover/public/build_services.ts b/src/plugins/discover/public/build_services.ts
index 3656ead26f45d..5553a8ad3b23c 100644
--- a/src/plugins/discover/public/build_services.ts
+++ b/src/plugins/discover/public/build_services.ts
@@ -63,7 +63,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;
diff --git a/src/plugins/discover/public/components/json_code_editor/json_code_editor_common.tsx b/src/plugins/discover/public/components/json_code_editor/json_code_editor_common.tsx
index 8bdef98a8f576..777240fe2f5bb 100644
--- a/src/plugins/discover/public/components/json_code_editor/json_code_editor_common.tsx
+++ b/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 // 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
+    <CodeEditor
       languageId={XJsonLang.ID}
       width={width}
       height={height}

From abcc1700f68ca99c53d324e681bed86aa5691064 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Wed, 28 Jun 2023 15:56:01 -0400
Subject: [PATCH 17/50] Code Review feedback from Nathan R. - adding theme to
 the file_upload kibana_services and using that to provide them in the context
 above the CodeEditor in import_complete_view

---
 .../file_upload/public/components/import_complete_view.tsx   | 5 +++--
 x-pack/plugins/file_upload/public/kibana_services.ts         | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/file_upload/public/components/import_complete_view.tsx b/x-pack/plugins/file_upload/public/components/import_complete_view.tsx
index fb5c20de69db4..1df99905a82fc 100644
--- a/x-pack/plugins/file_upload/public/components/import_complete_view.tsx
+++ b/x-pack/plugins/file_upload/public/components/import_complete_view.tsx
@@ -20,7 +20,7 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import { CodeEditor, KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
-import { getDocLinks, getHttp, getUiSettings, getSettings } from '../kibana_services';
+import { getDocLinks, getHttp, getUiSettings, getSettings, getTheme } from '../kibana_services';
 import { ImportResults } from '../importer';
 import { getPartialImportMessage } from './utils';
 
@@ -221,8 +221,9 @@ export class ImportCompleteView extends Component<Props, {}> {
   }
 
   render() {
+    const theme = getTheme();
     return (
-      <KibanaContextProvider services={services}>
+      <KibanaContextProvider services={{ ...services, theme }}>
         {this._getStatusMsg()}
 
         {this._renderCodeEditor(
diff --git a/x-pack/plugins/file_upload/public/kibana_services.ts b/x-pack/plugins/file_upload/public/kibana_services.ts
index 2d027cb0ce614..b2fe2fd9100c6 100644
--- a/x-pack/plugins/file_upload/public/kibana_services.ts
+++ b/x-pack/plugins/file_upload/public/kibana_services.ts
@@ -21,3 +21,4 @@ export const getHttp = () => coreStart.http;
 export const getSavedObjectsClient = () => coreStart.savedObjects.client;
 export const getUiSettings = () => coreStart.settings.client;
 export const getSettings = () => coreStart.settings;
+export const getTheme = () => coreStart.theme;

From 21c6350b5e1aeb466a07c4c4fee18848321883f3 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Thu, 29 Jun 2023 08:57:23 -0400
Subject: [PATCH 18/50] Code Review feedback from Nathan R.

---
 .../file_upload/public/components/import_complete_view.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/file_upload/public/components/import_complete_view.tsx b/x-pack/plugins/file_upload/public/components/import_complete_view.tsx
index 1df99905a82fc..7279472447024 100644
--- a/x-pack/plugins/file_upload/public/components/import_complete_view.tsx
+++ b/x-pack/plugins/file_upload/public/components/import_complete_view.tsx
@@ -27,6 +27,7 @@ import { getPartialImportMessage } from './utils';
 const services = {
   uiSettings: getUiSettings(),
   settings: getSettings(),
+  theme: getTheme(),
 };
 
 interface Props {
@@ -221,9 +222,8 @@ export class ImportCompleteView extends Component<Props, {}> {
   }
 
   render() {
-    const theme = getTheme();
     return (
-      <KibanaContextProvider services={{ ...services, theme }}>
+      <KibanaContextProvider services={services}>
         {this._getStatusMsg()}
 
         {this._renderCodeEditor(

From d070e98efc203788c1942800ab69fcc0b9d6a89c Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Fri, 30 Jun 2023 13:29:37 -0400
Subject: [PATCH 19/50] Code Review feedback from Nathan R. - removing TODOs

---
 .../file_upload/public/components/import_complete_view.tsx      | 2 +-
 .../vector_tile_adapter/components/tile_request_tab.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/file_upload/public/components/import_complete_view.tsx b/x-pack/plugins/file_upload/public/components/import_complete_view.tsx
index 7279472447024..f4809c2762d59 100644
--- a/x-pack/plugins/file_upload/public/components/import_complete_view.tsx
+++ b/x-pack/plugins/file_upload/public/components/import_complete_view.tsx
@@ -77,7 +77,7 @@ export class ImportCompleteView extends Component<Props, {}> {
           </EuiFlexItem>
         </EuiFlexGroup>
         <div style={{ height: '200px' }}>
-          <CodeEditor // TODO need to provide theme in context above. Need CodeOwners help.
+          <CodeEditor
             languageId="json"
             value={jsonAsString}
             options={{
diff --git a/x-pack/plugins/maps/public/inspector/vector_tile_adapter/components/tile_request_tab.tsx b/x-pack/plugins/maps/public/inspector/vector_tile_adapter/components/tile_request_tab.tsx
index 8823627e4fdc9..e57216a024b29 100644
--- a/x-pack/plugins/maps/public/inspector/vector_tile_adapter/components/tile_request_tab.tsx
+++ b/x-pack/plugins/maps/public/inspector/vector_tile_adapter/components/tile_request_tab.tsx
@@ -90,7 +90,7 @@ export function TileRequestTab(props: Props) {
           </EuiFlexGroup>
         </EuiFlexItem>
         <EuiFlexItem grow={true}>
-          <CodeEditor // TODO Unable to find context being provided. Need help from CodeOwners
+          <CodeEditor
             languageId={XJsonLang.ID}
             value={consoleRequest}
             options={{

From 701dff486cdcdb555fb8e3b8624c8402e5630062 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Fri, 30 Jun 2023 13:34:40 -0400
Subject: [PATCH 20/50] Code Review feedback from Rachel S. - removing TODOs

---
 .../management_app/components/field/field_code_editor.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/advanced_settings/public/management_app/components/field/field_code_editor.tsx b/src/plugins/advanced_settings/public/management_app/components/field/field_code_editor.tsx
index ad21d1a2ab4f8..819a03cdb616b 100644
--- a/src/plugins/advanced_settings/public/management_app/components/field/field_code_editor.tsx
+++ b/src/plugins/advanced_settings/public/management_app/components/field/field_code_editor.tsx
@@ -81,7 +81,7 @@ export const FieldCodeEditor = ({
   );
 
   return (
-    <CodeEditor // TODO updated to provide theme via src/plugins/advanced_settings/public/management_app/advanced_settings.tsx
+    <CodeEditor
       {...a11yProps}
       languageId={type === 'json' ? XJsonLang.ID : MarkdownLang}
       value={value}

From 0bf462338fffdd5d719b3ea8ac0db2ccc31b49cd Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Fri, 30 Jun 2023 13:41:41 -0400
Subject: [PATCH 21/50] Code Review feedback from Tina H. - Removing TODO

---
 .../management_section/object_view/components/inspect.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/saved_objects_management/public/management_section/object_view/components/inspect.tsx b/src/plugins/saved_objects_management/public/management_section/object_view/components/inspect.tsx
index b11405afa745d..b904bd8035627 100644
--- a/src/plugins/saved_objects_management/public/management_section/object_view/components/inspect.tsx
+++ b/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 // TODO theme provided in src/plugins/saved_objects_management/public/management_section/object_view/saved_object_view.tsx
+        <CodeEditor
           languageId={XJsonLang.ID}
           value={objectAsJsonString}
           aria-label={codeEditorAriaLabel(title)}

From a1e24210815b035acb02ac37294e347c4f40d906 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Fri, 30 Jun 2023 15:27:11 -0400
Subject: [PATCH 22/50] Removing todo - context was provided

---
 .../vis_types/vega/public/vega_inspector/vega_inspector.tsx      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/plugins/vis_types/vega/public/vega_inspector/vega_inspector.tsx b/src/plugins/vis_types/vega/public/vega_inspector/vega_inspector.tsx
index aed81f9e6cb93..02fe668276c93 100644
--- a/src/plugins/vis_types/vega/public/vega_inspector/vega_inspector.tsx
+++ b/src/plugins/vis_types/vega/public/vega_inspector/vega_inspector.tsx
@@ -38,7 +38,6 @@ export const getVegaInspectorView = (dependencies: VegaInspectorViewDependencies
       return Boolean(adapters.vega);
     },
     component: (props) => (
-      // TODO needs to provide theme for src/plugins/vis_types/vega/public/vega_inspector/components/spec_viewer.tsx, need CodeOwner help
       <KibanaContextProvider services={dependencies}>
         <Suspense fallback={<EuiLoadingSpinner />}>
           <VegaDataInspector {...(props as VegaDataInspectorProps)} />

From 881d03122068d50d64acdd4f9abaf864245aeeab Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Fri, 30 Jun 2023 15:29:06 -0400
Subject: [PATCH 23/50] Code Review feedback from Karl G.  - Removing TODO

---
 .../cloud_defend/public/components/control_yaml_view/index.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/cloud_defend/public/components/control_yaml_view/index.tsx b/x-pack/plugins/cloud_defend/public/components/control_yaml_view/index.tsx
index 68a8bc98095b8..b93a281f232f1 100644
--- a/x-pack/plugins/cloud_defend/public/components/control_yaml_view/index.tsx
+++ b/x-pack/plugins/cloud_defend/public/components/control_yaml_view/index.tsx
@@ -153,7 +153,7 @@ export const ControlYamlView = ({ policy, onChange, show }: ViewDeps) => {
           />
         )}
         <div css={styles.yamlEditor}>
-          <CodeEditor // TODO theme provided in context by x-pack/plugins/cloud_defend/public/plugin.tsx
+          <CodeEditor
             width="100%"
             languageId={YamlLang}
             options={{

From 65029579e4be8e52d6efe227bc8742b76b796a5e Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Fri, 30 Jun 2023 15:59:50 -0400
Subject: [PATCH 24/50] Code Review feedback Sander P

---
 .../search_index/pipelines/ml_inference/test_pipeline.tsx       | 2 +-
 .../public/application/components/api_key/metadata_form.tsx     | 2 +-
 .../application/components/api_key/security_privileges_form.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/test_pipeline.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/test_pipeline.tsx
index 41a636f8c6342..5d6332b7c0475 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/test_pipeline.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/test_pipeline.tsx
@@ -211,7 +211,7 @@ export const TestPipeline: React.FC = () => {
               {(EuiResizablePanel, EuiResizableButton) => (
                 <>
                   <EuiResizablePanel grow hasBorder initialSize={50} paddingSize="xs">
-                    <CodeEditor // TODO theme is provided in context by x-pack/plugins/enterprise_search/public/applications/index.tsx
+                    <CodeEditor
                       languageId="json"
                       options={{
                         automaticLayout: true,
diff --git a/x-pack/plugins/serverless_search/public/application/components/api_key/metadata_form.tsx b/x-pack/plugins/serverless_search/public/application/components/api_key/metadata_form.tsx
index 86620533660b0..8d05da3d47a8b 100644
--- a/x-pack/plugins/serverless_search/public/application/components/api_key/metadata_form.tsx
+++ b/x-pack/plugins/serverless_search/public/application/components/api_key/metadata_form.tsx
@@ -35,7 +35,7 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
           <p>{error}</p>
         </EuiText>
       )}
-      <CodeEditorField // TODO theme provided in context by x-pack/plugins/serverless_search/public/application/index.tsx
+      <CodeEditorField
         allowFullScreen
         fullWidth
         height="600px"
diff --git a/x-pack/plugins/serverless_search/public/application/components/api_key/security_privileges_form.tsx b/x-pack/plugins/serverless_search/public/application/components/api_key/security_privileges_form.tsx
index 0d872e2ae4784..9ebee2ad3775e 100644
--- a/x-pack/plugins/serverless_search/public/application/components/api_key/security_privileges_form.tsx
+++ b/x-pack/plugins/serverless_search/public/application/components/api_key/security_privileges_form.tsx
@@ -35,7 +35,7 @@ export const SecurityPrivilegesForm: React.FC<SecurityPrivilegesFormProps> = ({
           <p>{error}</p>
         </EuiText>
       )}
-      <CodeEditorField // TODO theme provided in context by x-pack/plugins/serverless_search/public/application/index.tsx
+      <CodeEditorField
         allowFullScreen
         fullWidth
         height="600px"

From 78c3eac786a27b77c443c27ca9de0d6f7efeb7d4 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Mon, 3 Jul 2023 13:04:28 -0400
Subject: [PATCH 25/50] Code Review from Nicolas C. - removing TODOs

---
 .../applications/fleet/sections/debug/components/code_block.tsx | 2 +-
 .../edit_output_flyout/yaml_code_editor_with_placeholder.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/debug/components/code_block.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/debug/components/code_block.tsx
index 471ec8228f2ae..3addcaa862c3f 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/debug/components/code_block.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/debug/components/code_block.tsx
@@ -14,7 +14,7 @@ import { CodeEditor } from '@kbn/kibana-react-plugin/public';
  */
 export const CodeBlock: React.FunctionComponent<{ value: string }> = ({ value }) => {
   return (
-    <CodeEditor // TODO theme provided in context by x-pack/plugins/fleet/public/applications/fleet/app.tsx
+    <CodeEditor
       isCopyable
       languageId=""
       height="600px"
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/yaml_code_editor_with_placeholder.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/yaml_code_editor_with_placeholder.tsx
index 9315cf0e50db7..8cec82b11c990 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/yaml_code_editor_with_placeholder.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/yaml_code_editor_with_placeholder.tsx
@@ -75,7 +75,7 @@ export const YamlCodeEditorWithPlaceholder: React.FunctionComponent<
 
   return (
     <CodeEditorContainer>
-      <CodeEditor // TODO theme provided in context by x-pack/plugins/fleet/public/applications/fleet/app.tsx
+      <CodeEditor
         languageId="yaml"
         width="100%"
         height="116px"

From 6e444eb92353943932de6b82ae5bb8620c88e170 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Mon, 3 Jul 2023 13:20:24 -0400
Subject: [PATCH 26/50] Code Review from Alison G. - Removing TODOs

---
 .../custom_patterns_input/custom_patterns_input.js        | 2 +-
 .../public/components/event_input/event_input.js          | 2 +-
 .../public/components/pattern_input/pattern_input.js      | 2 +-
 .../shared/components/wizard_steps/step_aliases.tsx       | 2 +-
 .../shared/components/wizard_steps/step_settings.tsx      | 2 +-
 .../processor_form/field_components/text_editor.tsx       | 8 +-------
 .../pipelines_create_from_csv/pipelines_preview.tsx       | 2 +-
 7 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/x-pack/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js b/x-pack/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js
index 21ecd605f4465..def839c3f9b09 100644
--- a/x-pack/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js
+++ b/x-pack/plugins/grokdebugger/public/components/custom_patterns_input/custom_patterns_input.js
@@ -43,7 +43,7 @@ MSG message-id=<%{GREEDYDATA}>`;
       <EuiSpacer size="m" />
 
       <EuiFormRow fullWidth data-test-subj="aceCustomPatternsInput">
-        <CodeEditor // TODO theme provided in context by x-pack/plugins/grokdebugger/public/render_app.js
+        <CodeEditor
           languageId="plaintext"
           value={value}
           height={200}
diff --git a/x-pack/plugins/grokdebugger/public/components/event_input/event_input.js b/x-pack/plugins/grokdebugger/public/components/event_input/event_input.js
index 52c5f6630497b..2bfdce4f0a893 100644
--- a/x-pack/plugins/grokdebugger/public/components/event_input/event_input.js
+++ b/x-pack/plugins/grokdebugger/public/components/event_input/event_input.js
@@ -20,7 +20,7 @@ export function EventInput({ value, onChange }) {
       fullWidth
       data-test-subj="eventInput"
     >
-      <CodeEditor // TODO theme provided in context by x-pack/plugins/grokdebugger/public/render_app.js
+      <CodeEditor
         languageId="plaintext"
         value={value}
         height={200}
diff --git a/x-pack/plugins/grokdebugger/public/components/pattern_input/pattern_input.js b/x-pack/plugins/grokdebugger/public/components/pattern_input/pattern_input.js
index 54d8b36ce7364..7997073db160b 100644
--- a/x-pack/plugins/grokdebugger/public/components/pattern_input/pattern_input.js
+++ b/x-pack/plugins/grokdebugger/public/components/pattern_input/pattern_input.js
@@ -20,7 +20,7 @@ export function PatternInput({ value, onChange }) {
       fullWidth
       data-test-subj="patternInput"
     >
-      <CodeEditor // TODO theme provided in context by x-pack/plugins/grokdebugger/public/render_app.js
+      <CodeEditor
         languageId={GrokLang}
         value={value}
         height={200}
diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx
index 9627422fae114..a948b9a999fa8 100644
--- a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx
+++ b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_aliases.tsx
@@ -106,7 +106,7 @@ export const StepAliases: React.FunctionComponent<Props> = React.memo(
           error={error}
           fullWidth
         >
-          <CodeEditor // TODO theme provided in context by x-pack/plugins/index_management/public/application/index.tsx
+          <CodeEditor
             languageId="json"
             value={jsonContent}
             data-test-subj="aliasesEditor"
diff --git a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings.tsx b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings.tsx
index de236669a03e6..0fd889de03921 100644
--- a/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings.tsx
+++ b/x-pack/plugins/index_management/public/application/components/shared/components/wizard_steps/step_settings.tsx
@@ -100,7 +100,7 @@ export const StepSettings: React.FunctionComponent<Props> = React.memo(
           error={error}
           fullWidth
         >
-          <CodeEditor // TODO theme provided in context by x-pack/plugins/index_management/public/application/index.tsx
+          <CodeEditor
             languageId="json"
             value={jsonContent}
             data-test-subj="settingsEditor"
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/field_components/text_editor.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/field_components/text_editor.tsx
index 75953ff4f5eec..b45e349c1e2ef 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/field_components/text_editor.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/field_components/text_editor.tsx
@@ -38,13 +38,7 @@ export const TextEditor: FunctionComponent<Props> = ({ field, editorProps }) =>
         paddingSize="s"
         hasShadow={false}
       >
-        <CodeEditor
-          /* TODO theme provided in context by x-pack/plugins/ingest_pipelines/public/application/index.tsx */ value={
-            value
-          }
-          onChange={setValue}
-          {...(editorProps as any)}
-        />
+        <CodeEditor value={value} onChange={setValue} {...(editorProps as any)} />
       </EuiPanel>
     </EuiFormRow>
   );
diff --git a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_create_from_csv/pipelines_preview.tsx b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_create_from_csv/pipelines_preview.tsx
index 88fc79a20f0c6..b7efea0bab8cc 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_create_from_csv/pipelines_preview.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/sections/pipelines_create_from_csv/pipelines_preview.tsx
@@ -89,7 +89,7 @@ export const PipelinesPreview: FC<Props> = ({
           data-test-subj="pipelineMappingsJSONEditor"
         >
           <Fragment>
-            <CodeEditorField // TODO updated x-pack/plugins/ingest_pipelines/public/application/index.tsx to provide theme in context
+            <CodeEditorField
               aria-label={''}
               languageId={XJsonLang.ID}
               value={processorsJson}

From 79c0cfcde9cae3acd5cf41c71ce22645793b19cd Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Mon, 3 Jul 2023 13:37:57 -0400
Subject: [PATCH 27/50] Code Review from Alison G. - removing TODOs

---
 .../painless_lab/public/application/components/editor.tsx     | 2 +-
 .../public/application/components/output_pane/context_tab.tsx | 4 ++--
 .../application/components/output_pane/parameters_tab.tsx     | 2 +-
 .../components/runtime_field_form/runtime_field_form.tsx      | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/painless_lab/public/application/components/editor.tsx b/x-pack/plugins/painless_lab/public/application/components/editor.tsx
index 32a77699407fd..06cf1a9fb46f9 100644
--- a/x-pack/plugins/painless_lab/public/application/components/editor.tsx
+++ b/x-pack/plugins/painless_lab/public/application/components/editor.tsx
@@ -20,7 +20,7 @@ export function Editor({ code, onChange, context }: Props) {
   const suggestionProvider = PainlessLang.getSuggestionProvider(context);
 
   return (
-    <CodeEditor // TODO theme provided in context by x-pack/plugins/painless_lab/public/application/index.tsx
+    <CodeEditor
       languageId={PainlessLang.ID}
       // 99% width allows the editor to resize horizontally. 100% prevents it from resizing.
       width="99%"
diff --git a/x-pack/plugins/painless_lab/public/application/components/output_pane/context_tab.tsx b/x-pack/plugins/painless_lab/public/application/components/output_pane/context_tab.tsx
index 15894cf8b4cc5..03384b6ae50c4 100644
--- a/x-pack/plugins/painless_lab/public/application/components/output_pane/context_tab.tsx
+++ b/x-pack/plugins/painless_lab/public/application/components/output_pane/context_tab.tsx
@@ -140,7 +140,7 @@ export const ContextTab: FunctionComponent = () => {
           }
           fullWidth
         >
-          <CodeEditor // TODO theme provided in context by x-pack/plugins/painless_lab/public/application/index.tsx
+          <CodeEditor
             languageId="json"
             height={150}
             value={query}
@@ -177,7 +177,7 @@ export const ContextTab: FunctionComponent = () => {
           }
           fullWidth
         >
-          <CodeEditor // TODO theme provided in context by x-pack/plugins/painless_lab/public/application/index.tsx
+          <CodeEditor
             languageId="json"
             height={400}
             value={document}
diff --git a/x-pack/plugins/painless_lab/public/application/components/output_pane/parameters_tab.tsx b/x-pack/plugins/painless_lab/public/application/components/output_pane/parameters_tab.tsx
index 1cbf9f762b0dd..ba6bc83367956 100644
--- a/x-pack/plugins/painless_lab/public/application/components/output_pane/parameters_tab.tsx
+++ b/x-pack/plugins/painless_lab/public/application/components/output_pane/parameters_tab.tsx
@@ -50,7 +50,7 @@ export const ParametersTab: FunctionComponent = () => {
           </EuiText>
         }
       >
-        <CodeEditor // TODO theme provided in context by x-pack/plugins/painless_lab/public/application/index.tsx
+        <CodeEditor
           languageId="json"
           height={600}
           value={payload.parameters}
diff --git a/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx b/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx
index d0063a6faf6d3..ac74cd07df225 100644
--- a/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx
+++ b/x-pack/plugins/runtime_fields/public/components/runtime_field_form/runtime_field_form.tsx
@@ -286,7 +286,7 @@ const RuntimeFieldFormComp = ({
               }
               fullWidth
             >
-              <CodeEditor // TODO theme provided in context by x-pack/plugins/runtime_fields/public/load_editor.tsx
+              <CodeEditor
                 languageId={PainlessLang.ID}
                 suggestionProvider={suggestionProvider}
                 width="100%"

From 27acfe0277138789d248bd46004d689396051e14 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Mon, 3 Jul 2023 14:17:34 -0400
Subject: [PATCH 28/50] Code Review from Alison G - Removing TODOs

---
 .../components/repository_form/type_settings/hdfs_settings.tsx  | 2 +-
 .../components/restore_snapshot_form/steps/step_settings.tsx    | 2 +-
 .../components/json_watch_edit/json_watch_edit_form.tsx         | 2 +-
 .../components/json_watch_edit/json_watch_edit_simulate.tsx     | 2 +-
 .../action_fields/webhook_action_fields.tsx                     | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx b/x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx
index 93ad435851803..6abb387e87a1a 100644
--- a/x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx
+++ b/x-pack/plugins/snapshot_restore/public/application/components/repository_form/type_settings/hdfs_settings.tsx
@@ -347,7 +347,7 @@ export const HDFSSettings: React.FunctionComponent<Props> = ({
             />
           }
         >
-          <CodeEditor // TODO theme needs to be provided in x-pack/plugins/snapshot_restore/public/application/app_context.tsx
+          <CodeEditor
             languageId="json"
             value={additionalConf}
             data-test-subj="codeEditor"
diff --git a/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx b/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx
index aa7c1a89b9e09..968098d969c39 100644
--- a/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx
+++ b/x-pack/plugins/snapshot_restore/public/application/components/restore_snapshot_form/steps/step_settings.tsx
@@ -191,7 +191,7 @@ export const RestoreSnapshotStepSettings: React.FunctionComponent<StepProps> = (
                   }
                   data-test-subj="indexSettingsEditor"
                 >
-                  <CodeEditor // TODO theme needs to be provided in x-pack/plugins/snapshot_restore/public/application/app_context.tsx
+                  <CodeEditor
                     languageId="json"
                     value={indexSettings!}
                     height={250}
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/json_watch_edit/json_watch_edit_form.tsx b/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/json_watch_edit/json_watch_edit_form.tsx
index e87a152c22bb5..ef71362bf22a1 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/json_watch_edit/json_watch_edit_form.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/json_watch_edit/json_watch_edit_form.tsx
@@ -167,7 +167,7 @@ export const JsonWatchEditForm = () => {
           fullWidth
           errors={jsonErrors}
         >
-          <CodeEditor // TODO theme provided in context by x-pack/plugins/watcher/public/application/index.tsx
+          <CodeEditor
             languageId="json"
             value={xJson}
             data-test-subj="jsonEditor"
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/json_watch_edit/json_watch_edit_simulate.tsx b/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/json_watch_edit/json_watch_edit_simulate.tsx
index 23df17384f695..bc6ecfcbc16cc 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/json_watch_edit/json_watch_edit_simulate.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/json_watch_edit/json_watch_edit_simulate.tsx
@@ -367,7 +367,7 @@ export const JsonWatchEditSimulate = ({
             fullWidth
             errors={executeWatchErrors}
           >
-            <CodeEditor // TODO theme provided in context by x-pack/plugins/watcher/public/application/index.tsx
+            <CodeEditor
               languageId="json"
               value={xJson}
               data-test-subj="jsonEditor"
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/action_fields/webhook_action_fields.tsx b/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/action_fields/webhook_action_fields.tsx
index f52b289ef4e30..e7da2c3073870 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/action_fields/webhook_action_fields.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_edit_page/components/threshold_watch_edit/action_fields/webhook_action_fields.tsx
@@ -243,7 +243,7 @@ export const WebhookActionFields: React.FunctionComponent<Props> = ({
         fullWidth
         errors={errors}
       >
-        <CodeEditor // TODO theme provided in context by x-pack/plugins/watcher/public/application/index.tsx
+        <CodeEditor
           languageId="json"
           value={body || ''}
           data-test-subj="webhookBodyEditor"

From ac527b0645d525a0ce489f9c57540430ba55b996 Mon Sep 17 00:00:00 2001
From: Dima Arnautov <dmitrii.arnautov@elastic.co>
Date: Tue, 4 Jul 2023 13:42:18 +0200
Subject: [PATCH 29/50] fix MLJobEditor theme

---
 .../components/ml_job_editor/ml_job_editor.tsx        | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx
index 64211ff7e903a..c724abb239dc0 100644
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx
@@ -20,8 +20,6 @@ interface MlJobEditorProps {
   width?: string;
   mode?: typeof ML_EDITOR_MODE[keyof typeof ML_EDITOR_MODE];
   readOnly?: boolean;
-  syntaxChecking?: boolean;
-  theme?: string;
   onChange?: EuiCodeEditorProps['onChange'];
   'data-test-subj'?: string;
   schema?: object;
@@ -32,8 +30,6 @@ export const MLJobEditor: FC<MlJobEditorProps> = ({
   width = '100%',
   mode = ML_EDITOR_MODE.JSON,
   readOnly = false,
-  syntaxChecking = true,
-  theme = 'textmate',
   onChange = () => {},
   'data-test-subj': dataTestSubj,
   schema,
@@ -48,12 +44,9 @@ export const MLJobEditor: FC<MlJobEditorProps> = ({
   }
 
   return (
-    <CodeEditor // TODO theme provided in context by x-pack/plugins/ml/public/application/app.tsx
+    <CodeEditor
       languageId={mode}
-      options={{
-        readOnly,
-        theme,
-      }}
+      options={{ readOnly }}
       value={value}
       width={width}
       height={height}

From 7a8fa2a6277aa6a32daa5af0bf982b66a53769be Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Wed, 5 Jul 2023 09:10:55 -0400
Subject: [PATCH 30/50] Update
 x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_analytics_advanced_editor/create_analytics_advanced_editor.tsx

Co-authored-by: Dima Arnautov <arnautov.dima@gmail.com>
---
 .../create_analytics_advanced_editor.tsx                        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_analytics_advanced_editor/create_analytics_advanced_editor.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_analytics_advanced_editor/create_analytics_advanced_editor.tsx
index c031cecf5a5e2..c809597ed1208 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_analytics_advanced_editor/create_analytics_advanced_editor.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/create_analytics_advanced_editor/create_analytics_advanced_editor.tsx
@@ -139,7 +139,7 @@ export const CreateAnalyticsAdvancedEditor: FC<CreateAnalyticsFormProps> = (prop
         )}
         style={{ maxWidth: '100%' }}
       >
-        <CodeEditor // TODO theme provided in context by x-pack/plugins/ml/public/application/app.tsx
+        <CodeEditor
           languageId={'json'}
           height={500}
           languageConfiguration={{

From c26fdeb32f2594e186bd4f1a141f23f330dab317 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Wed, 5 Jul 2023 09:11:06 -0400
Subject: [PATCH 31/50] Update
 x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/runtime_mappings/runtime_mappings_editor.tsx

Co-authored-by: Dima Arnautov <arnautov.dima@gmail.com>
---
 .../components/runtime_mappings/runtime_mappings_editor.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/runtime_mappings/runtime_mappings_editor.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/runtime_mappings/runtime_mappings_editor.tsx
index 48cfc42d5704d..eb730ea1e5773 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/runtime_mappings/runtime_mappings_editor.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/runtime_mappings/runtime_mappings_editor.tsx
@@ -33,7 +33,7 @@ export const RuntimeMappingsEditor: FC<Props> = memo(
   }) => {
     return (
       <div data-test-subj="mlDataFrameAnalyticsAdvancedRuntimeMappingsEditor">
-        <CodeEditor // TODO theme provided in context by x-pack/plugins/ml/public/application/app.tsx
+        <CodeEditor
           height={250}
           languageId={'json'}
           onChange={(d: string) => {

From 6e797b2612af3b9fa1093e0579bea205892dfb47 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Wed, 5 Jul 2023 09:11:19 -0400
Subject: [PATCH 32/50] Update
 x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_pivot_editor/advanced_pivot_editor.tsx

Co-authored-by: Dima Arnautov <arnautov.dima@gmail.com>
---
 .../components/advanced_pivot_editor/advanced_pivot_editor.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_pivot_editor/advanced_pivot_editor.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_pivot_editor/advanced_pivot_editor.tsx
index 0babae5bbc3c5..6699edbfd8f96 100644
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_pivot_editor/advanced_pivot_editor.tsx
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_pivot_editor/advanced_pivot_editor.tsx
@@ -29,7 +29,7 @@ export const AdvancedPivotEditor: FC<StepDefineFormHook['advancedPivotEditor']>
         })}
         data-test-subj="transformAdvancedPivotEditor"
       >
-        <CodeEditor // TODO theme is provided in context by x-pack/plugins/transform/public/app/app.tsx
+        <CodeEditor
           height={250}
           languageId={'json'}
           onChange={(d: string) => {

From 6eab9a70dc3821e679a3e13930f82c27b97769cf Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Wed, 5 Jul 2023 09:11:31 -0400
Subject: [PATCH 33/50] Update
 x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_runtime_mappings_editor/advanced_runtime_mappings_editor.tsx

Co-authored-by: Dima Arnautov <arnautov.dima@gmail.com>
---
 .../advanced_runtime_mappings_editor.tsx                        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_runtime_mappings_editor/advanced_runtime_mappings_editor.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_runtime_mappings_editor/advanced_runtime_mappings_editor.tsx
index 97bec25fd74a7..1fdea31d74fbf 100644
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_runtime_mappings_editor/advanced_runtime_mappings_editor.tsx
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_runtime_mappings_editor/advanced_runtime_mappings_editor.tsx
@@ -26,7 +26,7 @@ export const AdvancedRuntimeMappingsEditor: FC<StepDefineFormHook['runtimeMappin
   }) => {
     return (
       <div data-test-subj="transformAdvancedRuntimeMappingsEditor">
-        <CodeEditor // TODO theme is provided in context by x-pack/plugins/transform/public/app/app.tsx
+        <CodeEditor
           height={250}
           languageId={'json'}
           onChange={(d: string) => {

From ce648975ca61d6914906d61a8a5c5e544ee110eb Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Wed, 5 Jul 2023 09:11:44 -0400
Subject: [PATCH 34/50] Update
 x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_source_editor/advanced_source_editor.tsx

Co-authored-by: Dima Arnautov <arnautov.dima@gmail.com>
---
 .../advanced_source_editor/advanced_source_editor.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_source_editor/advanced_source_editor.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_source_editor/advanced_source_editor.tsx
index 8e77154f1156c..665c9986e6e69 100644
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_source_editor/advanced_source_editor.tsx
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/advanced_source_editor/advanced_source_editor.tsx
@@ -24,7 +24,7 @@ export const AdvancedSourceEditor: FC<StepDefineFormHook> = ({
 }) => {
   return (
     <div data-test-subj="transformAdvancedRuntimeMappingsEditor">
-      <CodeEditor // TODO theme is provided in context by x-pack/plugins/transform/public/app/app.tsx
+      <CodeEditor
         height={250}
         languageId={'json'}
         onChange={(d: string) => {

From f699b43f2b21c9c7e94569a2e20be30686d9a8fd Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Wed, 5 Jul 2023 09:11:57 -0400
Subject: [PATCH 35/50] Update
 x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/editor_form.tsx

Co-authored-by: Dima Arnautov <arnautov.dima@gmail.com>
---
 .../step_define/common/filter_agg/components/editor_form.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/editor_form.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/editor_form.tsx
index bb05d05b0d746..480c1f4a31063 100644
--- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/editor_form.tsx
+++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_define/common/filter_agg/components/editor_form.tsx
@@ -19,7 +19,7 @@ export const FilterEditorForm: FilterAggConfigEditor['aggTypeConfig']['FilterAgg
   return (
     <>
       <EuiSpacer size="m" />
-      <CodeEditor // TODO theme is provided in context by x-pack/plugins/transform/public/app/app.tsx
+      <CodeEditor
         height={300}
         languageId={'json'}
         onChange={(d) => {

From d7f048e4e82c99fca6019a031f37fbe0e6035e6c Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Wed, 5 Jul 2023 13:10:17 -0400
Subject: [PATCH 36/50] Updating jest tests

---
 .../src/text_based_languages_editor.test.tsx         |  5 +++++
 .../components/doc_viewer_source/source.test.tsx     |  4 ++++
 .../public/code_editor/code_editor.test.tsx          |  4 ++--
 .../__snapshots__/import_complete_view.test.tsx.snap | 12 ++++++++++++
 .../public/components/import_complete_view.test.tsx  |  5 +++++
 .../client_integration/helpers/setup_environment.tsx |  2 ++
 6 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.test.tsx b/packages/kbn-text-based-editor/src/text_based_languages_editor.test.tsx
index 69121cf42eb5a..90c973a609874 100644
--- a/packages/kbn-text-based-editor/src/text_based_languages_editor.test.tsx
+++ b/packages/kbn-text-based-editor/src/text_based_languages_editor.test.tsx
@@ -16,18 +16,23 @@ import {
   TextBasedLanguagesEditor,
   TextBasedLanguagesEditorProps,
 } from './text_based_languages_editor';
+import { of } from 'rxjs';
 
 describe('TextBasedLanguagesEditor', () => {
   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,
   };
 
   function renderTextBasedLanguagesEditorComponent(testProps: TextBasedLanguagesEditorProps) {
diff --git a/src/plugins/discover/public/services/doc_views/components/doc_viewer_source/source.test.tsx b/src/plugins/discover/public/services/doc_views/components/doc_viewer_source/source.test.tsx
index ad42517e9b9ab..c76392924e15a 100644
--- a/src/plugins/discover/public/services/doc_views/components/doc_viewer_source/source.test.tsx
+++ b/src/plugins/discover/public/services/doc_views/components/doc_viewer_source/source.test.tsx
@@ -16,6 +16,7 @@ import { EuiButton, EuiEmptyPrompt, EuiLoadingSpinner } from '@elastic/eui';
 import { JsonCodeEditorCommon } from '../../../../components/json_code_editor/json_code_editor_common';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { buildDataTableRecord } from '../../../../utils/build_data_record';
+import { of } from 'rxjs';
 
 const mockDataView = {
   getComputedFields: () => [],
@@ -35,6 +36,9 @@ const services = {
   data: {
     dataViewService: mockDataViewService,
   },
+  theme: {
+    theme$: of({ darkMode: false }),
+  },
 };
 
 describe('Source Viewer component', () => {
diff --git a/src/plugins/kibana_react/public/code_editor/code_editor.test.tsx b/src/plugins/kibana_react/public/code_editor/code_editor.test.tsx
index 6d9b4f4ce384f..ee0e91d5b7f58 100644
--- a/src/plugins/kibana_react/public/code_editor/code_editor.test.tsx
+++ b/src/plugins/kibana_react/public/code_editor/code_editor.test.tsx
@@ -115,8 +115,8 @@ describe('<CodeEditor />', () => {
     // Verify our mount callback will be called
     expect(editorWillMount.mock.calls.length).toBe(1);
 
-    // Verify that both, default and transparent theme will be setup
-    expect((monaco.editor.defineTheme as jest.Mock).mock.calls.length).toBe(2);
+    // Verify that both, default and transparent theme will be setup and then redefined as new values come through from the theme$ observable
+    expect((monaco.editor.defineTheme as jest.Mock).mock.calls.length).toBe(4);
 
     // Verify our language features have been registered
     expect((monaco.languages.onLanguage as jest.Mock).mock.calls.length).toBe(1);
diff --git a/x-pack/plugins/file_upload/public/components/__snapshots__/import_complete_view.test.tsx.snap b/x-pack/plugins/file_upload/public/components/__snapshots__/import_complete_view.test.tsx.snap
index 270e6d2175464..dad6fa2fb89ce 100644
--- a/x-pack/plugins/file_upload/public/components/__snapshots__/import_complete_view.test.tsx.snap
+++ b/x-pack/plugins/file_upload/public/components/__snapshots__/import_complete_view.test.tsx.snap
@@ -7,6 +7,9 @@ exports[`Should render error when upload fails from elasticsearch request failur
       "settings": Object {
         "get": [MockFunction],
       },
+      "theme": Object {
+        "theme$": [MockFunction],
+      },
       "uiSettings": Object {
         "get": [MockFunction],
       },
@@ -104,6 +107,9 @@ exports[`Should render error when upload fails from http request timeout 1`] = `
       "settings": Object {
         "get": [MockFunction],
       },
+      "theme": Object {
+        "theme$": [MockFunction],
+      },
       "uiSettings": Object {
         "get": [MockFunction],
       },
@@ -201,6 +207,9 @@ exports[`Should render success 1`] = `
       "settings": Object {
         "get": [MockFunction],
       },
+      "theme": Object {
+        "theme$": [MockFunction],
+      },
       "uiSettings": Object {
         "get": [MockFunction],
       },
@@ -361,6 +370,9 @@ exports[`Should render warning when some features failed import 1`] = `
       "settings": Object {
         "get": [MockFunction],
       },
+      "theme": Object {
+        "theme$": [MockFunction],
+      },
       "uiSettings": Object {
         "get": [MockFunction],
       },
diff --git a/x-pack/plugins/file_upload/public/components/import_complete_view.test.tsx b/x-pack/plugins/file_upload/public/components/import_complete_view.test.tsx
index e0df489b09e51..6530a1fd7adfd 100644
--- a/x-pack/plugins/file_upload/public/components/import_complete_view.test.tsx
+++ b/x-pack/plugins/file_upload/public/components/import_complete_view.test.tsx
@@ -38,6 +38,11 @@ jest.mock('../kibana_services', () => ({
       get: jest.fn(),
     };
   },
+  getTheme: () => {
+    return {
+      theme$: jest.fn(),
+    };
+  },
 }));
 
 test('Should render success', () => {
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/helpers/setup_environment.tsx b/x-pack/plugins/index_management/__jest__/client_integration/helpers/setup_environment.tsx
index 6f7ef599f7d18..67fa2d99787ba 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/helpers/setup_environment.tsx
+++ b/x-pack/plugins/index_management/__jest__/client_integration/helpers/setup_environment.tsx
@@ -14,6 +14,7 @@ import {
   notificationServiceMock,
   docLinksServiceMock,
   uiSettingsServiceMock,
+  themeServiceMock,
   executionContextServiceMock,
 } from '@kbn/core/public/mocks';
 import { GlobalFlyout } from '@kbn/es-ui-shared-plugin/public';
@@ -62,6 +63,7 @@ export const kibanaVersion = new SemVer(MAJOR_VERSION);
 const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
   uiSettings: uiSettingsServiceMock.createSetupContract(),
   settings: settingsServiceMock.createStartContract(),
+  theme: themeServiceMock.createStartContract(),
   kibanaVersion: {
     get: () => kibanaVersion,
   },

From 74e23c64e9bbf5d0230d1047a995d7464f32b5aa Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Wed, 5 Jul 2023 17:33:36 -0400
Subject: [PATCH 37/50] Fixing URL Drilldown CodeEditor and Functional Test

---
 .../drilldowns/url_drilldown/public/lib/url_drilldown.tsx    | 5 ++++-
 x-pack/plugins/drilldowns/url_drilldown/public/plugin.ts     | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx
index 00ed3d3e894f7..239287cdb1a2e 100644
--- a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx
+++ b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { IExternalUrl } from '@kbn/core/public';
+import { IExternalUrl, ThemeServiceStart } from '@kbn/core/public';
 import {
   ChartActionContext,
   CONTEXT_MENU_TRIGGER,
@@ -52,6 +52,7 @@ interface UrlDrilldownDeps {
   getSyntaxHelpDocsLink: () => string;
   getVariablesHelpDocsLink: () => string;
   settings: SettingsStart;
+  theme: ThemeServiceStart;
 }
 
 export type ActionContext = ChartActionContext<EmbeddableWithQueryInput>;
@@ -120,10 +121,12 @@ export class UrlDrilldown implements Drilldown<Config, ActionContext, ActionFact
       [context]
     );
 
+    console.log(this.deps.theme);
     return (
       <KibanaContextProvider
         services={{
           settings: this.deps.settings,
+          theme: this.deps.theme(),
         }}
       >
         <UrlDrilldownCollectConfig
diff --git a/x-pack/plugins/drilldowns/url_drilldown/public/plugin.ts b/x-pack/plugins/drilldowns/url_drilldown/public/plugin.ts
index 4a2285d59ec81..d8c73b673cfe0 100644
--- a/x-pack/plugins/drilldowns/url_drilldown/public/plugin.ts
+++ b/x-pack/plugins/drilldowns/url_drilldown/public/plugin.ts
@@ -49,6 +49,7 @@ export class UrlDrilldownPlugin
         getVariablesHelpDocsLink: () =>
           startServices().core.docLinks.links.dashboard.urlDrilldownVariables,
         settings: core.settings,
+        theme: () => startServices().core.theme,
       })
     );
 

From 2ff74d85ea3061325afe0b1e2b3d3c4c6409acba Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Wed, 5 Jul 2023 17:35:45 -0400
Subject: [PATCH 38/50] Removing debug statement

---
 .../drilldowns/url_drilldown/public/lib/url_drilldown.tsx        | 1 -
 1 file changed, 1 deletion(-)

diff --git a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx
index 239287cdb1a2e..47b86910722f9 100644
--- a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx
+++ b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx
@@ -121,7 +121,6 @@ export class UrlDrilldown implements Drilldown<Config, ActionContext, ActionFact
       [context]
     );
 
-    console.log(this.deps.theme);
     return (
       <KibanaContextProvider
         services={{

From f8148746d1c7e27faf0c21634492b81d95cc72d5 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Wed, 5 Jul 2023 18:00:01 -0400
Subject: [PATCH 39/50] Passing CoreStart to props for expression editor

---
 examples/expressions_explorer/public/app.tsx    | 14 +++++++++++---
 examples/expressions_explorer/public/plugin.tsx |  3 ++-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/examples/expressions_explorer/public/app.tsx b/examples/expressions_explorer/public/app.tsx
index 5e5b76bb7fe0e..96e8fcb2908bd 100644
--- a/examples/expressions_explorer/public/app.tsx
+++ b/examples/expressions_explorer/public/app.tsx
@@ -18,7 +18,7 @@ import {
   EuiText,
   EuiLink,
 } from '@elastic/eui';
-import { AppMountParameters, IUiSettingsClient } from '@kbn/core/public';
+import { AppMountParameters, IUiSettingsClient, ThemeServiceStart } from '@kbn/core/public';
 import { ExpressionsStart } from '@kbn/expressions-plugin/public';
 import { Start as InspectorStart } from '@kbn/inspector-plugin/public';
 import { UiActionsStart } from '@kbn/ui-actions-plugin/public';
@@ -35,13 +35,21 @@ interface Props {
   actions: UiActionsStart;
   uiSettings: IUiSettingsClient;
   settings: SettingsStart;
+  theme: ThemeServiceStart;
 }
 
-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 ExpressionsExplorer = ({
+  expressions,
+  inspector,
+  actions,
+  uiSettings,
+  settings,
+  theme,
+}: Props) => {
   const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
     uiSettings,
     settings,
+    theme,
   });
   return (
     <KibanaReactContextProvider>
diff --git a/examples/expressions_explorer/public/plugin.tsx b/examples/expressions_explorer/public/plugin.tsx
index aa031376a0f5c..4c0c4074c8362 100644
--- a/examples/expressions_explorer/public/plugin.tsx
+++ b/examples/expressions_explorer/public/plugin.tsx
@@ -49,7 +49,7 @@ export class ExpressionsExplorerPlugin implements Plugin<void, void, SetupDeps,
       title: 'Expressions Explorer',
       navLinkStatus: AppNavLinkStatus.hidden,
       async mount(params: AppMountParameters) {
-        const [, depsStart] = await core.getStartServices();
+        const [coreStart, depsStart] = await core.getStartServices();
         const { renderApp } = await import('./app');
         return renderApp(
           {
@@ -58,6 +58,7 @@ export class ExpressionsExplorerPlugin implements Plugin<void, void, SetupDeps,
             actions: depsStart.uiActions,
             uiSettings: core.uiSettings,
             settings: core.settings,
+            theme: coreStart.theme,
           },
           params
         );

From 100d542121d4cc528747b9c74545e2445ddc22f4 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Thu, 6 Jul 2023 07:57:58 -0400
Subject: [PATCH 40/50] Updating props and unit test

---
 .../drilldowns/url_drilldown/public/lib/url_drilldown.test.ts | 4 ++++
 .../drilldowns/url_drilldown/public/lib/url_drilldown.tsx     | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.test.ts b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.test.ts
index b79bc452b941f..9cfeea206300e 100644
--- a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.test.ts
+++ b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.test.ts
@@ -18,6 +18,7 @@ import { of } from '@kbn/kibana-utils-plugin/common';
 import { createPoint, rowClickData, TestEmbeddable } from './test/data';
 import { ROW_CLICK_TRIGGER } from '@kbn/ui-actions-plugin/public';
 import { settingsServiceMock } from '@kbn/core-ui-settings-browser-mocks';
+import { themeServiceMock } from '@kbn/core-theme-browser-mocks';
 
 const mockDataPoints = [
   {
@@ -85,6 +86,9 @@ const createDrilldown = (isExternalUrlValid: boolean = true) => {
     getVariablesHelpDocsLink: () => 'http://localhost:5601/docs',
     navigateToUrl: mockNavigateToUrl,
     settings: settingsServiceMock.createSetupContract(),
+    theme: () => {
+      return themeServiceMock.createStartContract();
+    },
   });
   return drilldown;
 };
diff --git a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx
index 47b86910722f9..4199d5704dfe3 100644
--- a/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx
+++ b/x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx
@@ -52,7 +52,7 @@ interface UrlDrilldownDeps {
   getSyntaxHelpDocsLink: () => string;
   getVariablesHelpDocsLink: () => string;
   settings: SettingsStart;
-  theme: ThemeServiceStart;
+  theme: () => ThemeServiceStart;
 }
 
 export type ActionContext = ChartActionContext<EmbeddableWithQueryInput>;

From 1174b6ad0b48f786b18b7fd22fd7db482cc27473 Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 6 Jul 2023 12:04:10 +0000
Subject: [PATCH 41/50] [CI] Auto-commit changed files from 'node
 scripts/lint_ts_projects --fix'

---
 x-pack/plugins/drilldowns/url_drilldown/tsconfig.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/drilldowns/url_drilldown/tsconfig.json b/x-pack/plugins/drilldowns/url_drilldown/tsconfig.json
index 05a7477cd3bbe..91757c226f602 100644
--- a/x-pack/plugins/drilldowns/url_drilldown/tsconfig.json
+++ b/x-pack/plugins/drilldowns/url_drilldown/tsconfig.json
@@ -18,7 +18,8 @@
     "@kbn/std",
     "@kbn/image-embeddable-plugin",
     "@kbn/core-ui-settings-browser-mocks",
-    "@kbn/core-ui-settings-browser"
+    "@kbn/core-ui-settings-browser",
+    "@kbn/core-theme-browser-mocks"
   ],
   "exclude": [
     "target/**/*",

From c53870cd1b3dc0152f7beb9a04bbe7eace90b7c4 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Thu, 6 Jul 2023 08:06:02 -0400
Subject: [PATCH 42/50] Adding theme to fleet kb context

---
 x-pack/plugins/fleet/public/applications/fleet/app.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/app.tsx b/x-pack/plugins/fleet/public/applications/fleet/app.tsx
index 3d85bc1d8d539..6c919988e99db 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/app.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/app.tsx
@@ -258,7 +258,7 @@ export const FleetAppContext: React.FC<{
     return (
       <RedirectAppLinks application={startServices.application}>
         <startServices.i18n.Context>
-          <KibanaContextProvider services={{ ...startServices }}>
+          <KibanaContextProvider services={{ ...startServices, theme: { theme$ } }}>
             <EuiErrorBoundary>
               <ConfigContext.Provider value={config}>
                 <KibanaVersionContext.Provider value={kibanaVersion}>

From 5cf85107b60828e2a6110e5de6f49b68147ea354 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Thu, 6 Jul 2023 15:31:59 -0400
Subject: [PATCH 43/50] Changing imports to remove circular deps

---
 .../no_data_page/no_data_card/elastic_agent_card.test.tsx       | 1 +
 src/plugins/kibana_react/public/theme/use_theme.ts              | 2 +-
 src/plugins/kibana_react/public/util/to_mount_point.tsx         | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.test.tsx b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.test.tsx
index b971abf06a437..80e92692ebed5 100644
--- a/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.test.tsx
+++ b/src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.test.tsx
@@ -19,6 +19,7 @@ jest.mock('../../../context', () => ({
       },
       application: { capabilities: { navLinks: { integrations: true } } },
       uiSettings: { get: jest.fn() },
+      theme: { theme$: jest.fn() },
     },
   }),
 }));
diff --git a/src/plugins/kibana_react/public/theme/use_theme.ts b/src/plugins/kibana_react/public/theme/use_theme.ts
index d5ec9479d99be..122d68aa4390d 100644
--- a/src/plugins/kibana_react/public/theme/use_theme.ts
+++ b/src/plugins/kibana_react/public/theme/use_theme.ts
@@ -8,7 +8,7 @@
 
 import { CoreTheme } from '@kbn/core-theme-browser';
 import useObservable from 'react-use/lib/useObservable';
-import { useKibana } from '../context';
+import { useKibana } from '../context/context';
 
 export const useKibanaTheme = (): CoreTheme => {
   const defaultTheme: CoreTheme = { darkMode: false };
diff --git a/src/plugins/kibana_react/public/util/to_mount_point.tsx b/src/plugins/kibana_react/public/util/to_mount_point.tsx
index 915b787a12b48..b80074c5fe65f 100644
--- a/src/plugins/kibana_react/public/util/to_mount_point.tsx
+++ b/src/plugins/kibana_react/public/util/to_mount_point.tsx
@@ -11,7 +11,7 @@ import ReactDOM from 'react-dom';
 import { Observable } from 'rxjs';
 import { I18nProvider } from '@kbn/i18n-react';
 import type { MountPoint, CoreTheme } from '@kbn/core/public';
-import { KibanaThemeProvider } from '../theme';
+import { KibanaThemeProvider } from '../theme/kibana_theme_provider';
 
 export interface ToMountPointOptions {
   theme$?: Observable<CoreTheme>;

From 5a4453a263c46885a6d9443f515adc78d4897545 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Fri, 7 Jul 2023 09:24:58 -0400
Subject: [PATCH 44/50] Code Review from Patryk K. - removing TODO

---
 x-pack/plugins/osquery/public/editor/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/osquery/public/editor/index.tsx b/x-pack/plugins/osquery/public/editor/index.tsx
index 570a67f458fb6..876bdb7614a5c 100644
--- a/x-pack/plugins/osquery/public/editor/index.tsx
+++ b/x-pack/plugins/osquery/public/editor/index.tsx
@@ -77,7 +77,7 @@ const OsqueryEditorComponent: React.FC<OsqueryEditorProps> = ({
   );
 
   return (
-    <CodeEditor // TODO theme provided in context by x-pack/plugins/osquery/public/application.tsx
+    <CodeEditor
       languageId={'sql'}
       value={editorValue}
       onChange={setEditorValue}

From 85318b181e07a90e3bc3de0087c6491de097de8c Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Fri, 7 Jul 2023 15:08:27 -0400
Subject: [PATCH 45/50] Removing TODOs from reviewed CodeEditors

---
 x-pack/examples/testing_embedded_lens/public/app.tsx          | 2 +-
 .../management/api_keys/api_keys_grid/api_key_flyout.tsx      | 4 ++--
 .../edit_role_mapping/rule_editor_panel/json_rule_editor.tsx  | 2 +-
 .../roles/edit_role/privileges/es/index_privilege_form.tsx    | 2 +-
 .../components/monitor_add_edit/fields/code_editor.tsx        | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/x-pack/examples/testing_embedded_lens/public/app.tsx b/x-pack/examples/testing_embedded_lens/public/app.tsx
index 276b7092a73f6..b385b9988eb51 100644
--- a/x-pack/examples/testing_embedded_lens/public/app.tsx
+++ b/x-pack/examples/testing_embedded_lens/public/app.tsx
@@ -719,7 +719,7 @@ export const App = (props: {
                   </EuiFlexGroup>
                   <EuiFlexGroup style={{ height: '75vh' }} direction="column">
                     <EuiFlexItem>
-                      <CodeEditor // TODO theme is provided above!
+                      <CodeEditor
                         languageId={HJsonLang}
                         options={{
                           fontSize: 14,
diff --git a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx
index 8a078e404fec8..959c3690b623c 100644
--- a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx
+++ b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx
@@ -308,7 +308,7 @@ export const ApiKeyFlyout: FunctionComponent<ApiKeyFlyoutProps> = ({
                   error={form.errors.role_descriptors}
                   isInvalid={form.touched.role_descriptors && !!form.errors.role_descriptors}
                 >
-                  <CodeEditorField // TODO theme provided in context by x-pack/plugins/security/public/management/api_keys/api_keys_management_app.tsx
+                  <CodeEditorField
                     value={form.values.role_descriptors!}
                     onChange={(value) => form.setValue('role_descriptors', value)}
                     languageId="xjson"
@@ -406,7 +406,7 @@ export const ApiKeyFlyout: FunctionComponent<ApiKeyFlyoutProps> = ({
                   error={form.errors.metadata}
                   isInvalid={form.touched.metadata && !!form.errors.metadata}
                 >
-                  <CodeEditorField // TODO theme provided in context by x-pack/plugins/security/public/management/api_keys/api_keys_management_app.tsx
+                  <CodeEditorField
                     value={form.values.metadata!}
                     onChange={(value) => form.setValue('metadata', value)}
                     languageId="xjson"
diff --git a/x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/json_rule_editor.tsx b/x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/json_rule_editor.tsx
index b7e6585b96817..b38ab53bc4ef5 100644
--- a/x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/json_rule_editor.tsx
+++ b/x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/json_rule_editor.tsx
@@ -97,7 +97,7 @@ export const JSONRuleEditor = (props: Props) => {
       data-test-subj="roleMappingsJSONEditor"
     >
       <Fragment>
-        <CodeEditorField // TODO theme provided in context in x-pack/plugins/security/public/management/role_mappings/role_mappings_management_app.tsx
+        <CodeEditorField
           aria-label={''}
           languageId={XJsonLang.ID}
           value={rawRules}
diff --git a/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.tsx b/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.tsx
index 6081c5b58a528..2540316caac89 100644
--- a/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.tsx
+++ b/x-pack/plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.tsx
@@ -404,7 +404,7 @@ export class IndexPrivilegeForm extends Component<Props, State> {
                 fullWidth
                 data-test-subj={`queryInput${this.props.formIndex}`}
               >
-                <CodeEditorField // TODO theme provided in context by x-pack/plugins/security/public/management/roles/roles_management_app.tsx
+                <CodeEditorField
                   languageId="xjson"
                   width="100%"
                   fullWidth
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/fields/code_editor.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/fields/code_editor.tsx
index edfbb24ab3ef7..34a696389717f 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/fields/code_editor.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/fields/code_editor.tsx
@@ -57,7 +57,7 @@ export const CodeEditor = ({
           aria-label={ariaLabel}
           data-test-subj="codeEditorContainer"
         >
-          <MonacoCodeEditor // TODO theme provided in context by x-pack/plugins/synthetics/public/apps/synthetics/synthetics_app.tsx
+          <MonacoCodeEditor
             languageId={languageId}
             width={containerWidthThrottled ?? '100%'}
             height={height}

From 956c7a334d6fdd681d9c5872e13bc038fa455f85 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Mon, 10 Jul 2023 11:51:30 -0400
Subject: [PATCH 46/50] Fixing mergemain issue

---
 .../package_policy_input_var_field.tsx        | 440 +++++++++++++-----
 1 file changed, 317 insertions(+), 123 deletions(-)

diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_var_field.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_var_field.tsx
index 78ecb1d3915ff..1deb84143d2a2 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_var_field.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/package_policy_input_var_field.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useState, memo, useMemo } from 'react';
+import React, { useState, memo, useMemo, useRef } from 'react';
 import ReactMarkdown from 'react-markdown';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -17,11 +17,21 @@ import {
   EuiFieldPassword,
   EuiCodeBlock,
   EuiTextArea,
+  EuiComboBox,
+  EuiPanel,
+  EuiSpacer,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
 } from '@elastic/eui';
 import styled from 'styled-components';
 
 import { CodeEditor } from '@kbn/kibana-react-plugin/public';
 
+import { ExperimentalFeaturesService } from '../../../../../../services';
+
+import { DATASET_VAR_NAME } from '../../../../../../../../../common/constants';
+
 import type { DataStream, RegistryVarsEntry } from '../../../../../../types';
 
 import { MultiTextInput } from './multi_text_input';
@@ -31,7 +41,7 @@ const FixedHeightDiv = styled.div`
   height: 300px;
 `;
 
-export const PackagePolicyInputVarField: React.FunctionComponent<{
+interface InputFieldProps {
   varDef: RegistryVarsEntry;
   value: any;
   onChange: (newValue: any) => void;
@@ -42,7 +52,18 @@ export const PackagePolicyInputVarField: React.FunctionComponent<{
   packageName?: string;
   datastreams?: DataStream[];
   isEditPage?: boolean;
-}> = memo(
+}
+
+type InputComponentProps = InputFieldProps & {
+  isDirty: boolean;
+  setIsDirty: (isDirty: boolean) => void;
+  packageType?: string;
+  isInvalid: boolean;
+  fieldLabel: string;
+  fieldTestSelector: string;
+};
+
+export const PackagePolicyInputVarField: React.FunctionComponent<InputFieldProps> = memo(
   ({
     varDef,
     value,
@@ -56,131 +77,54 @@ export const PackagePolicyInputVarField: React.FunctionComponent<{
     isEditPage = false,
   }) => {
     const [isDirty, setIsDirty] = useState<boolean>(false);
-    const { multi, required, type, title, name, description } = varDef;
-    const isInvalid = (isDirty || forceShowErrors) && !!varErrors;
+    const { required, type, title, name, description } = varDef;
+    const isInvalid = Boolean((isDirty || forceShowErrors) && !!varErrors?.length);
     const errors = isInvalid ? varErrors : null;
     const fieldLabel = title || name;
-
-    const field = useMemo(() => {
-      if (multi) {
-        return (
-          <MultiTextInput
-            value={value ?? []}
-            onChange={onChange}
-            onBlur={() => setIsDirty(true)}
-            isDisabled={frozen}
-          />
-        );
-      }
-      if (name === 'data_stream.dataset' && packageType === 'input') {
-        return (
-          <DatasetComboBox
-            pkgName={packageName}
-            datastreams={datastreams}
-            value={value}
-            onChange={onChange}
-            isDisabled={isEditPage}
-          />
-        );
-      }
-      switch (type) {
-        case 'textarea':
-          return (
-            <EuiTextArea
-              isInvalid={isInvalid}
-              value={value === undefined ? '' : value}
-              onChange={(e) => onChange(e.target.value)}
-              onBlur={() => setIsDirty(true)}
-              disabled={frozen}
-              resize="vertical"
-            />
-          );
-        case 'yaml':
-          return frozen ? (
-            <EuiCodeBlock language="yaml" isCopyable={false} paddingSize="s">
-              <pre>{value}</pre>
-            </EuiCodeBlock>
-          ) : (
-            <FixedHeightDiv>
-              <CodeEditor // TODO theme provided in context by x-pack/plugins/fleet/public/applications/fleet/app.tsx
-                languageId="yaml"
-                width="100%"
-                height="300px"
-                value={value}
-                onChange={onChange}
-                options={{
-                  minimap: {
-                    enabled: false,
-                  },
-                  ariaLabel: i18n.translate('xpack.fleet.packagePolicyField.yamlCodeEditor', {
-                    defaultMessage: 'YAML Code Editor',
-                  }),
-                  scrollBeyondLastLine: false,
-                  wordWrap: 'off',
-                  wrappingIndent: 'indent',
-                  tabSize: 2,
-                  // To avoid left margin
-                  lineNumbers: 'off',
-                  lineNumbersMinChars: 0,
-                  glyphMargin: false,
-                  folding: false,
-                  lineDecorationsWidth: 0,
-                  overviewRulerBorder: false,
-                }}
-              />
-            </FixedHeightDiv>
-          );
-        case 'bool':
-          return (
-            <EuiSwitch
-              label={fieldLabel}
-              checked={value}
-              showLabel={false}
-              onChange={(e) => onChange(e.target.checked)}
-              onBlur={() => setIsDirty(true)}
-              disabled={frozen}
-            />
-          );
-        case 'password':
-          return (
-            <EuiFieldPassword
-              type="dual"
-              isInvalid={isInvalid}
-              value={value === undefined ? '' : value}
-              onChange={(e) => onChange(e.target.value)}
-              onBlur={() => setIsDirty(true)}
-              disabled={frozen}
-            />
-          );
-        default:
-          return (
-            <EuiFieldText
-              isInvalid={isInvalid}
-              value={value === undefined ? '' : value}
-              onChange={(e) => onChange(e.target.value)}
-              onBlur={() => setIsDirty(true)}
-              disabled={frozen}
-            />
-          );
-      }
-    }, [
-      multi,
-      name,
-      packageType,
-      type,
-      value,
-      onChange,
-      frozen,
-      packageName,
-      datastreams,
-      isEditPage,
-      isInvalid,
-      fieldLabel,
-    ]);
-
+    const fieldTestSelector = fieldLabel.replace(/\s/g, '-').toLowerCase();
     // Boolean cannot be optional by default set to false
     const isOptional = useMemo(() => type !== 'bool' && !required, [required, type]);
 
+    const { secretsStorage: secretsStorageEnabled } = ExperimentalFeaturesService.get();
+
+    let field: JSX.Element;
+
+    if (secretsStorageEnabled && varDef.secret) {
+      field = (
+        <SecretInputField
+          varDef={varDef}
+          value={value}
+          onChange={onChange}
+          frozen={frozen}
+          packageName={packageName}
+          packageType={packageType}
+          datastreams={datastreams}
+          isEditPage={isEditPage}
+          isInvalid={isInvalid}
+          fieldLabel={fieldLabel}
+          fieldTestSelector={fieldTestSelector}
+          isDirty={isDirty}
+          setIsDirty={setIsDirty}
+        />
+      );
+    } else {
+      field = getInputComponent({
+        varDef,
+        value,
+        onChange,
+        frozen,
+        packageName,
+        packageType,
+        datastreams,
+        isEditPage,
+        isInvalid,
+        fieldLabel,
+        fieldTestSelector,
+        isDirty,
+        setIsDirty,
+      });
+    }
+
     return (
       <EuiFormRow
         isInvalid={isInvalid}
@@ -203,3 +147,253 @@ export const PackagePolicyInputVarField: React.FunctionComponent<{
     );
   }
 );
+
+function getInputComponent({
+  varDef,
+  value,
+  onChange,
+  frozen,
+  packageName,
+  packageType,
+  datastreams = [],
+  isEditPage,
+  isInvalid,
+  fieldLabel,
+  fieldTestSelector,
+  setIsDirty,
+}: InputComponentProps) {
+  const { multi, type, name, options } = varDef;
+  if (multi) {
+    return (
+      <MultiTextInput
+        value={value ?? []}
+        onChange={onChange}
+        onBlur={() => setIsDirty(true)}
+        isDisabled={frozen}
+        data-test-subj={`multiTextInput-${fieldTestSelector}`}
+      />
+    );
+  }
+  if (name === DATASET_VAR_NAME && packageType === 'input') {
+    return (
+      <DatasetComboBox
+        pkgName={packageName}
+        datastreams={datastreams}
+        value={value}
+        onChange={onChange}
+        isDisabled={isEditPage}
+      />
+    );
+  }
+  switch (type) {
+    case 'textarea':
+      return (
+        <EuiTextArea
+          isInvalid={isInvalid}
+          value={value === undefined ? '' : value}
+          onChange={(e) => onChange(e.target.value)}
+          onBlur={() => setIsDirty(true)}
+          disabled={frozen}
+          resize="vertical"
+          data-test-subj={`textAreaInput-${fieldTestSelector}`}
+        />
+      );
+    case 'yaml':
+      return frozen ? (
+        <EuiCodeBlock language="yaml" isCopyable={false} paddingSize="s">
+          <pre>{value}</pre>
+        </EuiCodeBlock>
+      ) : (
+        <FixedHeightDiv>
+          <CodeEditor
+            languageId="yaml"
+            width="100%"
+            height="300px"
+            value={value}
+            onChange={onChange}
+            options={{
+              minimap: {
+                enabled: false,
+              },
+              ariaLabel: i18n.translate('xpack.fleet.packagePolicyField.yamlCodeEditor', {
+                defaultMessage: 'YAML Code Editor',
+              }),
+              scrollBeyondLastLine: false,
+              wordWrap: 'off',
+              wrappingIndent: 'indent',
+              tabSize: 2,
+              // To avoid left margin
+              lineNumbers: 'off',
+              lineNumbersMinChars: 0,
+              glyphMargin: false,
+              folding: false,
+              lineDecorationsWidth: 0,
+              overviewRulerBorder: false,
+            }}
+          />
+        </FixedHeightDiv>
+      );
+    case 'bool':
+      return (
+        <EuiSwitch
+          label={fieldLabel}
+          checked={value}
+          showLabel={false}
+          onChange={(e) => onChange(e.target.checked)}
+          onBlur={() => setIsDirty(true)}
+          disabled={frozen}
+          data-test-subj={`switch-${fieldTestSelector}`}
+        />
+      );
+    case 'password':
+      return (
+        <EuiFieldPassword
+          type="dual"
+          isInvalid={isInvalid}
+          value={value === undefined ? '' : value}
+          onChange={(e) => onChange(e.target.value)}
+          onBlur={() => setIsDirty(true)}
+          disabled={frozen}
+          data-test-subj={`passwordInput-${fieldTestSelector}`}
+        />
+      );
+    case 'select':
+      const selectOptions = options?.map((option) => ({
+        value: option.value,
+        label: option.text,
+      }));
+      const selectedOptions =
+        value === undefined ? [] : selectOptions?.filter((option) => option.value === value);
+      return (
+        <EuiComboBox
+          placeholder={i18n.translate('xpack.fleet.packagePolicyField.selectPlaceholder', {
+            defaultMessage: 'Select an option',
+          })}
+          singleSelection={{ asPlainText: true }}
+          options={selectOptions}
+          selectedOptions={selectedOptions}
+          isClearable={true}
+          onChange={(newSelectedOptions: Array<{ label: string; value?: string }>) => {
+            const newValue =
+              newSelectedOptions.length === 0 ? undefined : newSelectedOptions[0].value;
+            return onChange(newValue);
+          }}
+          onBlur={() => setIsDirty(true)}
+          data-test-subj={`select-${fieldTestSelector}`}
+        />
+      );
+    default:
+      return (
+        <EuiFieldText
+          isInvalid={isInvalid}
+          value={value === undefined ? '' : value}
+          onChange={(e) => onChange(e.target.value)}
+          onBlur={() => setIsDirty(true)}
+          disabled={frozen}
+          data-test-subj={`textInput-${fieldTestSelector}`}
+        />
+      );
+  }
+}
+
+function SecretInputField({
+  varDef,
+  value,
+  onChange,
+  frozen,
+  packageName,
+  packageType,
+  datastreams = [],
+  isEditPage,
+  isInvalid,
+  fieldLabel,
+  fieldTestSelector,
+  setIsDirty,
+  isDirty,
+}: InputComponentProps) {
+  const [editMode, setEditMode] = useState(isEditPage && !value);
+  const valueOnFirstRender = useRef(value);
+  const lowercaseTitle = varDef.title?.toLowerCase();
+  if (isEditPage && !editMode) {
+    return (
+      <EuiPanel color="subdued" borderRadius="none" hasShadow={false}>
+        <EuiText size="s" color="subdued">
+          <FormattedMessage
+            id="xpack.fleet.editPackagePolicy.stepConfigure.fieldSecretValueSet"
+            defaultMessage="The saved {varName} is hidden. You can only replace the {varName}."
+            values={{
+              varName: lowercaseTitle,
+            }}
+          />
+        </EuiText>
+        <EuiSpacer size="s" />
+        <EuiButtonEmpty
+          onClick={() => setEditMode(true)}
+          color="primary"
+          iconType="refresh"
+          iconSide="left"
+          size="xs"
+        >
+          <FormattedMessage
+            id="xpack.fleet.editPackagePolicy.stepConfigure.fieldSecretValueSetEditButton"
+            defaultMessage="Replace {varName}"
+            values={{
+              varName: lowercaseTitle,
+            }}
+          />
+        </EuiButtonEmpty>
+      </EuiPanel>
+    );
+  }
+
+  const valueIsSecretRef = value && value?.isSecretRef;
+  const field = getInputComponent({
+    varDef,
+    value: editMode && valueIsSecretRef ? '' : value,
+    onChange,
+    frozen,
+    packageName,
+    packageType,
+    datastreams,
+    isEditPage,
+    isInvalid,
+    fieldLabel,
+    fieldTestSelector,
+    isDirty,
+    setIsDirty,
+  });
+
+  if (editMode) {
+    const cancelButton = (
+      <EuiButtonEmpty
+        onClick={() => {
+          setEditMode(false);
+          setIsDirty(false);
+          onChange(valueOnFirstRender.current);
+        }}
+        color="primary"
+        iconType="refresh"
+        iconSide="left"
+        size="xs"
+      >
+        <FormattedMessage
+          id="xpack.fleet.editPackagePolicy.stepConfigure.fieldSecretValueSetCancelButton"
+          defaultMessage="Cancel {varName} change"
+          values={{
+            varName: lowercaseTitle,
+          }}
+        />
+      </EuiButtonEmpty>
+    );
+    return (
+      <EuiFlexGroup direction="column" gutterSize="s" alignItems="flexStart">
+        <EuiFlexItem grow={false} style={{ width: '100%' }}>
+          {field}
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>{cancelButton}</EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+
+  return field;
+}

From e625dcde0286a92cacbb10352964e5149b8def63 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Mon, 10 Jul 2023 15:08:09 -0400
Subject: [PATCH 47/50] Removing todos

---
 .../expressions_explorer/public/editor/expression_editor.tsx    | 2 +-
 .../public/components/expression_input/expression_input.tsx     | 2 +-
 .../components/json_editor_with_message_variables.tsx           | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/expressions_explorer/public/editor/expression_editor.tsx b/examples/expressions_explorer/public/editor/expression_editor.tsx
index 873b007ce89ae..c940a21fada27 100644
--- a/examples/expressions_explorer/public/editor/expression_editor.tsx
+++ b/examples/expressions_explorer/public/editor/expression_editor.tsx
@@ -16,7 +16,7 @@ interface Props {
 
 export function ExpressionEditor({ value, onChange }: Props) {
   return (
-    <CodeEditor // TODO theme needs to be provided from examples/expressions_explorer/public/app.tsx, need CodeOwners help
+    <CodeEditor
       languageId="javascript"
       width="100%"
       height="250px"
diff --git a/src/plugins/presentation_util/public/components/expression_input/expression_input.tsx b/src/plugins/presentation_util/public/components/expression_input/expression_input.tsx
index 63c27d99f3805..0343046082504 100644
--- a/src/plugins/presentation_util/public/components/expression_input/expression_input.tsx
+++ b/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 // TODO CodeOwners will need to help with this one
+      <CodeEditor
         languageId={EXPRESSIONS_LANGUAGE_ID}
         languageConfiguration={LANGUAGE_CONFIGURATION}
         value={expression}
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/json_editor_with_message_variables.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/json_editor_with_message_variables.tsx
index 18d805be16f60..1acd3e6392450 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/json_editor_with_message_variables.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/json_editor_with_message_variables.tsx
@@ -173,7 +173,7 @@ export const JsonEditorWithMessageVariables: React.FunctionComponent<Props> = ({
     >
       <>
         {renderErrorMessage()}
-        <CodeEditor // TODO theme provided in context by x-pack/plugins/triggers_actions_ui/public/application/app.tsx
+        <CodeEditor
           languageId={XJsonLang.ID}
           options={{
             renderValidationDecorations: xJson ? 'on' : 'off', // Disable error underline when empty

From bdbe9a83e97125ba271e026572a0c5818f56dcc2 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Tue, 11 Jul 2023 08:17:42 -0400
Subject: [PATCH 48/50] Code Review feedback from Christos N. - removing TODO

---
 .../rule_types/es_query/expression/es_query_expression.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/es_query_expression.tsx b/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/es_query_expression.tsx
index fcd71db6eb60d..bf0af46912c62 100644
--- a/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/es_query_expression.tsx
+++ b/x-pack/plugins/stack_alerts/public/rule_types/es_query/expression/es_query_expression.tsx
@@ -244,7 +244,7 @@ export const EsQueryExpression: React.FC<
           </EuiLink>
         }
       >
-        <CodeEditor // TODO unable to find context. Need CodeOwners to help
+        <CodeEditor
           languageId="xjson"
           width="100%"
           height="200px"

From cc45a2b65f19ba8c2286b02b4904101a896909e7 Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Tue, 11 Jul 2023 08:59:37 -0400
Subject: [PATCH 49/50] Removing type error to avoid breaking changes

---
 .../public/theme/use_theme.test.tsx           | 22 ++++++++++---------
 .../kibana_react/public/theme/use_theme.ts    |  9 ++++++--
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/plugins/kibana_react/public/theme/use_theme.test.tsx b/src/plugins/kibana_react/public/theme/use_theme.test.tsx
index 832439a5e31a4..1b24b2c6ccc3b 100644
--- a/src/plugins/kibana_react/public/theme/use_theme.test.tsx
+++ b/src/plugins/kibana_react/public/theme/use_theme.test.tsx
@@ -12,6 +12,7 @@ import type { CoreTheme } from '@kbn/core/public';
 import { KibanaContextProvider } from '../context';
 import { themeServiceMock } from '@kbn/core/public/mocks';
 import { useKibanaTheme } from './use_theme';
+import { of } from 'rxjs';
 
 describe('useKibanaTheme', () => {
   let resultTheme: CoreTheme | undefined;
@@ -29,9 +30,10 @@ describe('useKibanaTheme', () => {
   };
 
   it('retrieve CoreTheme when theme service is provided in context', async () => {
-    const expectedCoreTheme: CoreTheme = { darkMode: false };
+    const expectedCoreTheme: CoreTheme = { darkMode: true };
 
     const themeServiceStart = themeServiceMock.createStartContract();
+    themeServiceStart.theme$ = of({ darkMode: true });
 
     mountWithIntl(
       <KibanaContextProvider services={{ theme: themeServiceStart }}>
@@ -42,15 +44,15 @@ describe('useKibanaTheme', () => {
     expect(resultTheme).toEqual(expectedCoreTheme);
   });
 
-  it('throws type error when theme is not provided', async () => {
-    const mount = () => {
-      return mountWithIntl(
-        <KibanaContextProvider>
-          <InnerComponent />
-        </KibanaContextProvider>
-      );
-    };
+  it('does not throw error when theme service is not provided, default theme applied', async () => {
+    const expectedCoreTheme: CoreTheme = { darkMode: false };
+
+    mountWithIntl(
+      <KibanaContextProvider>
+        <InnerComponent />
+      </KibanaContextProvider>
+    );
 
-    expect(mount).toThrow(new TypeError('theme service not available in kibana-react context.'));
+    expect(resultTheme).toEqual(expectedCoreTheme);
   });
 });
diff --git a/src/plugins/kibana_react/public/theme/use_theme.ts b/src/plugins/kibana_react/public/theme/use_theme.ts
index 122d68aa4390d..6d216fee54c22 100644
--- a/src/plugins/kibana_react/public/theme/use_theme.ts
+++ b/src/plugins/kibana_react/public/theme/use_theme.ts
@@ -8,6 +8,7 @@
 
 import { CoreTheme } from '@kbn/core-theme-browser';
 import useObservable from 'react-use/lib/useObservable';
+import { of } from 'rxjs';
 import { useKibana } from '../context/context';
 
 export const useKibanaTheme = (): CoreTheme => {
@@ -17,9 +18,13 @@ export const useKibanaTheme = (): CoreTheme => {
     services: { theme },
   } = useKibana();
 
+  let themeObservable;
+
   if (!theme) {
-    throw new TypeError('theme service not available in kibana-react context.');
+    themeObservable = of(defaultTheme);
+  } else {
+    themeObservable = theme.theme$;
   }
 
-  return useObservable(theme.theme$, defaultTheme);
+  return useObservable(themeObservable, defaultTheme);
 };

From ad1ed219f83280a337361ff761ef67d3eecda4cb Mon Sep 17 00:00:00 2001
From: Kurt <kc13greiner@users.noreply.github.com>
Date: Tue, 11 Jul 2023 10:40:05 -0400
Subject: [PATCH 50/50] CodeReview feedback Oliver G. - Removing TODO

---
 .../apm_policy_form/settings_form/form_row_setting.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/apm/public/components/fleet_integration/apm_policy_form/settings_form/form_row_setting.tsx b/x-pack/plugins/apm/public/components/fleet_integration/apm_policy_form/settings_form/form_row_setting.tsx
index 33f87ffb7efe8..6f2239e66a4a1 100644
--- a/x-pack/plugins/apm/public/components/fleet_integration/apm_policy_form/settings_form/form_row_setting.tsx
+++ b/x-pack/plugins/apm/public/components/fleet_integration/apm_policy_form/settings_form/form_row_setting.tsx
@@ -125,7 +125,7 @@ export function FormRowSetting({ row, value, onChange, isDisabled }: Props) {
     case 'yaml': {
       return (
         <FixedHeightDiv>
-          <CodeEditor // TODO Unable to find context that provides theme. Need CODEOWNER Input
+          <CodeEditor
             languageId="yaml"
             width="100%"
             height="300px"