Reflect changes from kibana/159638, remove hook, rely on EuiProvider instead

packages/react/kibana_context/index.ts

@@ -7,8 +7,5 @@
  */
 
 export { KibanaThemeProvider, wrapWithTheme, type KibanaThemeProviderProps } from './theme';
-export {
-  KibanaContextProvider,
-  withKibanaContextProvider,
-  type KibanaContextProviderProps,
-} from './provider';
+export { KibanaContextProvider, type KibanaContextProviderProps } from './provider';
+export type { EuiTheme } from './types';

packages/react/kibana_context/types.ts

@@ -6,6 +6,8 @@
  * Side Public License, v 1.
  */
 
+import type { UseEuiTheme } from '@elastic/eui';
+
 // To avoid a circular dependency with the deprecation of `CoreThemeProvider`,
 // we need to define the theme type here.
 //
@@ -14,3 +16,5 @@ export interface Theme {
   /** is dark mode enabled or not */
   readonly darkMode: boolean;
 }
+
+export type EuiTheme = UseEuiTheme;

packages/shared-ux/code_editor/impl/code_editor.tsx

@@ -141,7 +141,7 @@ export const CodeEditor: React.FC<Props> = ({
   overrideEditorWillMount,
   editorDidMount,
   editorWillMount,
-  useDarkTheme,
+  useDarkTheme: useDarkThemeProp,
   transparentBackground,
   suggestionProvider,
   signatureProvider,
@@ -154,7 +154,8 @@ export const CodeEditor: React.FC<Props> = ({
   isCopyable = false,
   allowFullScreen = false,
 }) => {
-  const { euiTheme } = useEuiTheme();
+  const { colorMode, euiTheme } = useEuiTheme();
+  const useDarkTheme = useDarkThemeProp ?? colorMode === 'DARK';
 
   // We need to be able to mock the MonacoEditor in our test in order to not test implementation
   // detail and not have to call methods on the <CodeEditor /> component instance.

packages/shared-ux/code_editor/mocks/storybook.ts

@@ -15,7 +15,6 @@ type PropArguments = Pick<
   | 'value'
   | 'aria-label'
   | 'allowFullScreen'
-  | 'useDarkTheme'
   | 'transparentBackground'
   | 'placeholder'
 >;
@@ -58,12 +57,6 @@ export class CodeEditorStorybookMock extends AbstractStorybookMock<
       },
       defaultValue: false,
     },
-    useDarkTheme: {
-      control: {
-        type: 'boolean',
-      },
-      defaultValue: false,
-    },
     transparentBackground: {
       control: {
         type: 'boolean',
@@ -87,7 +80,6 @@ export class CodeEditorStorybookMock extends AbstractStorybookMock<
       value: this.getArgumentValue('value', params),
       'aria-label': this.getArgumentValue('aria-label', params),
       allowFullScreen: this.getArgumentValue('allowFullScreen', params),
-      useDarkTheme: this.getArgumentValue('useDarkTheme', params),
       transparentBackground: this.getArgumentValue('transparentBackground', params),
       placeholder: this.getArgumentValue('placeholder', params),
     };

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

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

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

@@ -20,6 +20,7 @@ import {
   EuiCopy,
   EuiFlexGroup,
   EuiFlexItem,
+  useEuiTheme,
 } from '@elastic/eui';
 import { monaco } from '@kbn/monaco';
 import { i18n } from '@kbn/i18n';
@@ -140,7 +141,7 @@ export const CodeEditor: React.FC<Props> = ({
   overrideEditorWillMount,
   editorDidMount,
   editorWillMount,
-  useDarkTheme,
+  useDarkTheme: useDarkThemeProp,
   transparentBackground,
   suggestionProvider,
   signatureProvider,
@@ -153,6 +154,9 @@ export const CodeEditor: React.FC<Props> = ({
   isCopyable = false,
   allowFullScreen = false,
 }) => {
+  const { colorMode } = useEuiTheme();
+  const useDarkTheme = useDarkThemeProp ?? colorMode === 'DARK';
+
   // We need to be able to mock the MonacoEditor in our test in order to not test implementation
   // detail and not have to call methods on the <CodeEditor /> component instance.
   const MonacoEditor: typeof ReactMonacoEditor = useMemo(() => {

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

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

src/plugins/kibana_react/public/index.ts

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

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

@@ -1,21 +0,0 @@
-/*
- * 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.
- */
-
-export {
-  /**
-   * @deprecated use `KibanaThemeProvider` from `@kbn/react-kibana-context
-   */
-  KibanaThemeProvider,
-  /**
-   * @deprecated use `wrapWithTheme` from `@kbn/react-kibana-context
-   */
-  wrapWithTheme,
-  type KibanaThemeProviderProps,
-} from '@kbn/react-kibana-context';
-export { useKibanaTheme } from './use_theme';
-export type { EuiTheme } from './types';

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

@@ -1,58 +0,0 @@
-/*
- * 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';
-import { of } from 'rxjs';
-
-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: true };
-
-    const themeServiceStart = themeServiceMock.createStartContract();
-    themeServiceStart.theme$ = of({ darkMode: true });
-
-    mountWithIntl(
-      <KibanaContextProvider services={{ theme: themeServiceStart }}>
-        <InnerComponent />
-      </KibanaContextProvider>
-    );
-
-    expect(resultTheme).toEqual(expectedCoreTheme);
-  });
-
-  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(resultTheme).toEqual(expectedCoreTheme);
-  });
-});

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

@@ -1,30 +0,0 @@
-/*
- * 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 { of } from 'rxjs';
-import { useKibana } from '../context/context';
-
-export const useKibanaTheme = (): CoreTheme => {
-  const defaultTheme: CoreTheme = { darkMode: false };
-
-  const {
-    services: { theme },
-  } = useKibana();
-
-  let themeObservable;
-
-  if (!theme) {
-    themeObservable = of(defaultTheme);
-  } else {
-    themeObservable = theme.theme$;
-  }
-
-  return useObservable(themeObservable, defaultTheme);
-};