[Discover] Make theme availalbe in kibana context (#160358)

- For https://github.com/elastic/kibana/pull/159638
- Also closes https://github.com/elastic/kibana/issues/160432

## Summary

This PR makes `theme` available in kibana context which is necessary for
supporting dark mode in `CodeEditor`.
Also fixed Inspect on Search Sessions page: it was blank because of
missing `settings`. Shall we backport?

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

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

@@ -22,14 +22,9 @@ import { SearchSessionsMgmtAPI } from '../../lib/api';
 
 interface InspectFlyoutProps {
   searchSession: UISession;
-  uiSettings: CoreStart['uiSettings'];
 }
 
-const InspectFlyout = ({ uiSettings, searchSession }: InspectFlyoutProps) => {
-  const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
-    uiSettings,
-  });
-
+const InspectFlyout: React.FC<InspectFlyoutProps> = ({ searchSession }) => {
   const renderInfo = () => {
     return (
       <Fragment>
@@ -54,7 +49,7 @@ const InspectFlyout = ({ uiSettings, searchSession }: InspectFlyoutProps) => {
   };
 
   return (
-    <KibanaReactContextProvider>
+    <>
       <EuiFlyoutHeader hasBorder>
         <EuiTitle size="m">
           <h2 id="flyoutTitle">
@@ -79,6 +74,32 @@ const InspectFlyout = ({ uiSettings, searchSession }: InspectFlyoutProps) => {
           {renderInfo()}
         </EuiText>
       </EuiFlyoutBody>
+    </>
+  );
+};
+
+interface InspectFlyoutWrapperProps {
+  searchSession: UISession;
+  uiSettings: CoreStart['uiSettings'];
+  settings: CoreStart['settings'];
+  theme: CoreStart['theme'];
+}
+
+const InspectFlyoutWrapper: React.FC<InspectFlyoutWrapperProps> = ({
+  searchSession,
+  uiSettings,
+  settings,
+  theme,
+}) => {
+  const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
+    uiSettings,
+    settings,
+    theme,
+  });
+
+  return (
+    <KibanaReactContextProvider>
+      <InspectFlyout searchSession={searchSession} />
     </KibanaReactContextProvider>
   );
 };
@@ -97,8 +118,17 @@ export const createInspectActionDescriptor = (
     />
   ),
   onClick: async () => {
-    const flyout = <InspectFlyout uiSettings={core.uiSettings} searchSession={uiSession} />;
-    const overlay = core.overlays.openFlyout(toMountPoint(flyout, { theme$: core.theme.theme$ }));
+    const flyoutWrapper = (
+      <InspectFlyoutWrapper
+        uiSettings={core.uiSettings}
+        settings={core.settings}
+        theme={core.theme}
+        searchSession={uiSession}
+      />
+    );
+    const overlay = core.overlays.openFlyout(
+      toMountPoint(flyoutWrapper, { theme$: core.theme.theme$ })
+    );
     await overlay.onClose;
   },
 });

src/plugins/data_view_field_editor/public/open_editor.tsx

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

src/plugins/discover/public/__mocks__/__storybook_mocks__/with_discover_services.tsx

@@ -8,8 +8,7 @@
 
 import React, { FunctionComponent } from 'react';
 import { action } from '@storybook/addon-actions';
-import { EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
-import { LIGHT_THEME } from '@elastic/charts';
+import { BehaviorSubject, Observable, of } from 'rxjs';
 import { FieldFormat } from '@kbn/field-formats-plugin/common';
 import { identity } from 'lodash';
 import { CoreStart, IUiSettingsClient, PluginInitializerContext } from '@kbn/core/public';
@@ -29,7 +28,6 @@ import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { Plugin as NavigationPublicPlugin } from '@kbn/navigation-plugin/public';
 import { SearchBar, UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
 import { SavedQuery } from '@kbn/data-plugin/public';
-import { BehaviorSubject, Observable } from 'rxjs';
 
 const NavigationPlugin = new NavigationPublicPlugin({} as PluginInitializerContext);
 
@@ -64,11 +62,16 @@ const filterManager = {
   getFetches$: () => new Observable(),
 };
 
+const theme = {
+  theme$: of({ darkMode: false }),
+};
+
 export const services = {
   core: {
     http: { basePath: { prepend: () => void 0 } },
     notifications: { toasts: {} },
     docLinks: { links: { discover: {} } },
+    theme,
   },
   storage: new LocalStorageMock({
     [SIDEBAR_CLOSED_KEY]: false,
@@ -146,19 +149,7 @@ export const services = {
       ui: { SearchBar, AggregateQuerySearchBar: SearchBar },
     } as unknown as UnifiedSearchPublicPluginStart,
   }),
-  theme: {
-    useChartsTheme: () => ({
-      ...EUI_CHARTS_THEME_LIGHT.theme,
-      chartPaddings: {
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0,
-      },
-      heatmap: { xAxisLabel: { rotation: {} } },
-    }),
-    useChartsBaseTheme: () => LIGHT_THEME,
-  },
+  theme,
   capabilities: {
     visualize: {
       show: true,

src/plugins/discover/public/__mocks__/services.ts

@@ -6,7 +6,6 @@
  * Side Public License, v 1.
  */
 import { Observable, of } from 'rxjs';
-import { EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
 import { DiscoverServices } from '../build_services';
 import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
 import { uiActionsPluginMock } from '@kbn/ui-actions-plugin/public/mocks';
@@ -93,8 +92,15 @@ export function createDiscoverServicesMock(): DiscoverServices {
     return searchSource;
   });
 
+  const theme = {
+    theme$: of({ darkMode: false }),
+  };
+
   return {
-    core: coreMock.createStart(),
+    core: {
+      ...coreMock.createStart(),
+      theme,
+    },
     charts: chartPluginMock.createSetupContract(),
     chrome: chromeServiceMock.createStartContract(),
     history: () => ({
@@ -174,10 +180,7 @@ export function createDiscoverServicesMock(): DiscoverServices {
     metadata: {
       branch: 'test',
     },
-    theme: {
-      useChartsTheme: jest.fn(() => EUI_CHARTS_THEME_LIGHT.theme),
-      useChartsBaseTheme: jest.fn(() => EUI_CHARTS_THEME_LIGHT.theme),
-    },
+    theme,
     storage: new LocalStorageMock({}) as unknown as Storage,
     addBasePath: jest.fn(),
     toastNotifications: {

src/plugins/discover/public/build_services.ts

@@ -75,7 +75,7 @@ export interface DiscoverServices {
   docLinks: DocLinksStart;
   embeddable: EmbeddableStart;
   history: () => History<HistoryLocationState>;
-  theme: ChartsPluginStart['theme'];
+  theme: CoreStart['theme'];
   filterManager: FilterManager;
   fieldFormats: FieldFormatsStart;
   dataViews: DataViewsContract;
@@ -130,7 +130,7 @@ export const buildServices = memoize(function (
     data: plugins.data,
     docLinks: core.docLinks,
     embeddable: plugins.embeddable,
-    theme: plugins.charts.theme,
+    theme: core.theme,
     fieldFormats: plugins.fieldFormats,
     filterManager: plugins.data.query.filterManager,
     history: getHistory,

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

@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import { of } from 'rxjs';
 import { shallow } from 'enzyme';
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
@@ -28,6 +29,9 @@ const mockServices = {
   fieldFormats: {
     getDefaultInstance: jest.fn(() => ({ convert: (value: unknown) => (value ? value : '-') })),
   },
+  theme: {
+    theme$: of({ darkMode: false }),
+  },
 };
 
 jest.mock('../../hooks/use_discover_services', () => {

src/plugins/unified_histogram/public/__mocks__/services.ts

@@ -6,7 +6,6 @@
  * Side Public License, v 1.
  */
 
-import { EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
 import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
 import { expressionsPluginMock } from '@kbn/expressions-plugin/public/mocks';
 import { fieldFormatsMock } from '@kbn/field-formats-plugin/common/mocks';
@@ -26,10 +25,6 @@ export const unifiedHistogramServicesMock = {
     get: jest.fn(),
     isDefault: jest.fn(() => true),
   },
-  theme: {
-    useChartsTheme: jest.fn(() => EUI_CHARTS_THEME_LIGHT.theme),
-    useChartsBaseTheme: jest.fn(() => EUI_CHARTS_THEME_LIGHT.theme),
-  },
   lens: {
     EmbeddableComponent: jest.fn(() => null),
     navigateToPrefilledEditor: jest.fn(),

src/plugins/unified_histogram/public/types.ts

@@ -6,7 +6,6 @@
  * Side Public License, v 1.
  */
 
-import type { Theme } from '@kbn/charts-plugin/public/plugin';
 import type { IUiSettingsClient, Capabilities } from '@kbn/core/public';
 import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import type { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
@@ -35,7 +34,6 @@ export enum UnifiedHistogramFetchStatus {
  */
 export interface UnifiedHistogramServices {
   data: DataPublicPluginStart;
-  theme: Theme;
   uiActions: UiActionsStart;
   uiSettings: IUiSettingsClient;
   fieldFormats: FieldFormatsStart;

src/plugins/unified_histogram/tsconfig.json

@@ -6,7 +6,6 @@
   "include": [ "../../../typings/**/*", "common/**/*", "public/**/*", "server/**/*"],
   "kbn_references": [
     "@kbn/core",
-    "@kbn/charts-plugin",
     "@kbn/data-plugin",
     "@kbn/data-views-plugin",
     "@kbn/lens-plugin",