Use KibanaThemeProvider for security/spaces apps (#119124)

src/plugins/interactive_setup/public/cluster_address_form.test.tsx

@@ -9,7 +9,7 @@
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import React from 'react';
 
-import { coreMock } from 'src/core/public/mocks';
+import { coreMock, themeServiceMock } from 'src/core/public/mocks';
 
 import { ClusterAddressForm } from './cluster_address_form';
 import { Providers } from './plugin';
@@ -21,14 +21,16 @@ jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
 describe('ClusterAddressForm', () => {
   jest.setTimeout(20_000);
 
+  const theme$ = themeServiceMock.createTheme$();
+
   it('calls enrollment API when submitting form', async () => {
     const coreStart = coreMock.createStart();
     coreStart.http.post.mockResolvedValue({});
 
     const onSuccess = jest.fn();
 
     const { findByRole, findByLabelText } = render(
-      <Providers services={coreStart}>
+      <Providers services={coreStart} theme$={theme$}>
         <ClusterAddressForm onSuccess={onSuccess} />
       </Providers>
     );
@@ -52,7 +54,7 @@ describe('ClusterAddressForm', () => {
     const onSuccess = jest.fn();
 
     const { findAllByText, findByRole, findByLabelText } = render(
-      <Providers services={coreStart}>
+      <Providers services={coreStart} theme$={theme$}>
         <ClusterAddressForm onSuccess={onSuccess} />
       </Providers>
     );

src/plugins/interactive_setup/public/cluster_configuration_form.test.tsx

@@ -9,7 +9,7 @@
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import React from 'react';
 
-import { coreMock } from 'src/core/public/mocks';
+import { coreMock, themeServiceMock } from 'src/core/public/mocks';
 
 import { ClusterConfigurationForm } from './cluster_configuration_form';
 import { Providers } from './plugin';
@@ -21,14 +21,16 @@ jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
 describe('ClusterConfigurationForm', () => {
   jest.setTimeout(20_000);
 
+  const theme$ = themeServiceMock.createTheme$();
+
   it('calls enrollment API for https addresses when submitting form', async () => {
     const coreStart = coreMock.createStart();
     coreStart.http.post.mockResolvedValue({});
 
     const onSuccess = jest.fn();
 
     const { findByRole, findByLabelText } = render(
-      <Providers services={coreStart}>
+      <Providers services={coreStart} theme$={theme$}>
         <ClusterConfigurationForm
           host="https://localhost:9200"
           authRequired
@@ -78,7 +80,7 @@ describe('ClusterConfigurationForm', () => {
     const onSuccess = jest.fn();
 
     const { findByRole } = render(
-      <Providers services={coreStart}>
+      <Providers services={coreStart} theme$={theme$}>
         <ClusterConfigurationForm
           host="http://localhost:9200"
           authRequired={false}
@@ -107,7 +109,7 @@ describe('ClusterConfigurationForm', () => {
     const onSuccess = jest.fn();
 
     const { findAllByText, findByRole, findByLabelText } = render(
-      <Providers services={coreStart}>
+      <Providers services={coreStart} theme$={theme$}>
         <ClusterConfigurationForm
           host="https://localhost:9200"
           authRequired

src/plugins/interactive_setup/public/enrollment_token_form.test.tsx

@@ -9,7 +9,7 @@
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import React from 'react';
 
-import { coreMock } from 'src/core/public/mocks';
+import { coreMock, themeServiceMock } from 'src/core/public/mocks';
 
 import type { EnrollmentToken } from '../common';
 import { decodeEnrollmentToken, EnrollmentTokenForm } from './enrollment_token_form';
@@ -29,14 +29,16 @@ const token: EnrollmentToken = {
 describe('EnrollmentTokenForm', () => {
   jest.setTimeout(20_000);
 
+  const theme$ = themeServiceMock.createTheme$();
+
   it('calls enrollment API when submitting form', async () => {
     const coreStart = coreMock.createStart();
     coreStart.http.post.mockResolvedValue({});
 
     const onSuccess = jest.fn();
 
     const { findByRole, findByLabelText } = render(
-      <Providers services={coreStart}>
+      <Providers services={coreStart} theme$={theme$}>
         <EnrollmentTokenForm onSuccess={onSuccess} />
       </Providers>
     );
@@ -62,7 +64,7 @@ describe('EnrollmentTokenForm', () => {
     const onSuccess = jest.fn();
 
     const { findAllByText, findByRole, findByLabelText } = render(
-      <Providers services={coreStart}>
+      <Providers services={coreStart} theme$={theme$}>
         <EnrollmentTokenForm onSuccess={onSuccess} />
       </Providers>
     );

src/plugins/interactive_setup/public/plugin.tsx

@@ -9,11 +9,13 @@
 import type { FunctionComponent } from 'react';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import type { Observable } from 'rxjs';
 
 import { I18nProvider } from '@kbn/i18n/react';
-import type { CoreSetup, CoreStart, Plugin } from 'src/core/public';
+import type { CoreSetup, CoreStart, CoreTheme, Plugin } from 'src/core/public';
 
 import { App } from './app';
+import { KibanaThemeProvider } from './theme'; // TODO: replace this with the one exported from `kibana_react` after https://github.com/elastic/kibana/issues/119204 is implemented.
 import { KibanaProvider } from './use_kibana';
 import { VerificationProvider } from './use_verification';
 
@@ -24,7 +26,7 @@ export class InteractiveSetupPlugin implements Plugin<void, void, {}, {}> {
       title: 'Configure Elastic to get started',
       appRoute: '/',
       chromeless: true,
-      mount: async (params) => {
+      mount: async ({ element, theme$ }) => {
         const url = new URL(window.location.href);
         const defaultCode = url.searchParams.get('code') || undefined;
         const onSuccess = () => {
@@ -34,12 +36,12 @@ export class InteractiveSetupPlugin implements Plugin<void, void, {}, {}> {
         const [services] = await core.getStartServices();
 
         ReactDOM.render(
-          <Providers defaultCode={defaultCode} services={services}>
+          <Providers defaultCode={defaultCode} services={services} theme$={theme$}>
             <App onSuccess={onSuccess} />
           </Providers>,
-          params.element
+          element
         );
-        return () => ReactDOM.unmountComponentAtNode(params.element);
+        return () => ReactDOM.unmountComponentAtNode(element);
       },
     });
   }
@@ -49,17 +51,21 @@ export class InteractiveSetupPlugin implements Plugin<void, void, {}, {}> {
 
 export interface ProvidersProps {
   services: CoreStart;
+  theme$: Observable<CoreTheme>;
   defaultCode?: string;
 }
 
 export const Providers: FunctionComponent<ProvidersProps> = ({
   defaultCode,
   services,
+  theme$,
   children,
 }) => (
   <I18nProvider>
-    <KibanaProvider services={services}>
-      <VerificationProvider defaultCode={defaultCode}>{children}</VerificationProvider>
-    </KibanaProvider>
+    <KibanaThemeProvider theme$={theme$}>
+      <KibanaProvider services={services}>
+        <VerificationProvider defaultCode={defaultCode}>{children}</VerificationProvider>
+      </KibanaProvider>
+    </KibanaThemeProvider>
   </I18nProvider>
 );

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

@@ -0,0 +1,9 @@
+/*
+ * 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 { KibanaThemeProvider } from './kibana_theme_provider';

src/plugins/interactive_setup/public/theme/kibana_theme_provider.test.tsx

@@ -0,0 +1,88 @@
+/*
+ * 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 { useEuiTheme } from '@elastic/eui';
+import type { ReactWrapper } from 'enzyme';
+import type { FC } from 'react';
+import React, { useEffect } from 'react';
+import { act } from 'react-dom/test-utils';
+import { BehaviorSubject, of } from 'rxjs';
+
+import { mountWithIntl } from '@kbn/test/jest';
+import type { CoreTheme } from 'src/core/public';
+
+import { KibanaThemeProvider } from './kibana_theme_provider';
+
+describe('KibanaThemeProvider', () => {
+  let euiTheme: ReturnType<typeof useEuiTheme> | undefined;
+
+  beforeEach(() => {
+    euiTheme = undefined;
+  });
+
+  const flushPromises = async () => {
+    await new Promise<void>(async (resolve, reject) => {
+      try {
+        setImmediate(() => resolve());
+      } catch (error) {
+        reject(error);
+      }
+    });
+  };
+
+  const InnerComponent: FC = () => {
+    const theme = useEuiTheme();
+    useEffect(() => {
+      euiTheme = theme;
+    }, [theme]);
+    return <div>foo</div>;
+  };
+
+  const refresh = async (wrapper: ReactWrapper<unknown>) => {
+    await act(async () => {
+      await flushPromises();
+      wrapper.update();
+    });
+  };
+
+  it('exposes the EUI theme provider', async () => {
+    const coreTheme: CoreTheme = { darkMode: true };
+
+    const wrapper = mountWithIntl(
+      <KibanaThemeProvider theme$={of(coreTheme)}>
+        <InnerComponent />
+      </KibanaThemeProvider>
+    );
+
+    await refresh(wrapper);
+
+    expect(euiTheme!.colorMode).toEqual('DARK');
+  });
+
+  it('propagates changes of the coreTheme observable', async () => {
+    const coreTheme$ = new BehaviorSubject<CoreTheme>({ darkMode: true });
+
+    const wrapper = mountWithIntl(
+      <KibanaThemeProvider theme$={coreTheme$}>
+        <InnerComponent />
+      </KibanaThemeProvider>
+    );
+
+    await refresh(wrapper);
+
+    expect(euiTheme!.colorMode).toEqual('DARK');
+
+    await act(async () => {
+      coreTheme$.next({ darkMode: false });
+    });
+
+    await refresh(wrapper);
+
+    expect(euiTheme!.colorMode).toEqual('LIGHT');
+  });
+});

src/plugins/interactive_setup/public/theme/kibana_theme_provider.tsx

@@ -0,0 +1,33 @@
+/*
+ * 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 { EuiThemeProvider } from '@elastic/eui';
+import type { FC } from 'react';
+import React, { useMemo } from 'react';
+import useObservable from 'react-use/lib/useObservable';
+import type { Observable } from 'rxjs';
+
+import type { CoreTheme } from '../../../../core/public';
+import { getColorMode } from './utils';
+
+interface KibanaThemeProviderProps {
+  theme$: Observable<CoreTheme>;
+}
+
+const defaultTheme: CoreTheme = {
+  darkMode: false,
+};
+
+/**
+ * Copied from the `kibana_react` plugin, remove once https://github.com/elastic/kibana/issues/119204 is implemented.
+ */
+export const KibanaThemeProvider: FC<KibanaThemeProviderProps> = ({ theme$, children }) => {
+  const theme = useObservable(theme$, defaultTheme);
+  const colorMode = useMemo(() => getColorMode(theme), [theme]);
+  return <EuiThemeProvider colorMode={colorMode}>{children}</EuiThemeProvider>;
+};

src/plugins/interactive_setup/public/theme/utils.test.ts

@@ -0,0 +1,19 @@
+/*
+ * 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 { getColorMode } from './utils';
+
+describe('getColorMode', () => {
+  it('returns the correct `colorMode` when `darkMode` is enabled', () => {
+    expect(getColorMode({ darkMode: true })).toEqual('DARK');
+  });
+
+  it('returns the correct `colorMode` when `darkMode` is disabled', () => {
+    expect(getColorMode({ darkMode: false })).toEqual('LIGHT');
+  });
+});

src/plugins/interactive_setup/public/theme/utils.ts

@@ -0,0 +1,19 @@
+/*
+ * 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 type { EuiThemeColorMode } from '@elastic/eui/src/services/theme/types';
+
+import type { CoreTheme } from '../../../../core/public';
+
+/**
+ * Copied from the `kibana_react` plugin, remove once https://github.com/elastic/kibana/issues/119204 is implemented.
+ */
+export const getColorMode = (theme: CoreTheme): EuiThemeColorMode => {
+  // COLOR_MODES_STANDARD is not exported from eui
+  return theme.darkMode ? 'DARK' : 'LIGHT';
+};

src/plugins/interactive_setup/public/verification_code_form.test.tsx

@@ -9,7 +9,7 @@
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import React from 'react';
 
-import { coreMock } from 'src/core/public/mocks';
+import { coreMock, themeServiceMock } from 'src/core/public/mocks';
 
 import { Providers } from './plugin';
 import { VerificationCodeForm } from './verification_code_form';
@@ -21,14 +21,16 @@ jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
 describe('VerificationCodeForm', () => {
   jest.setTimeout(20_000);
 
+  const theme$ = themeServiceMock.createTheme$();
+
   it('calls enrollment API when submitting form', async () => {
     const coreStart = coreMock.createStart();
     coreStart.http.post.mockResolvedValue({});
 
     const onSuccess = jest.fn();
 
     const { findByRole, findByLabelText } = render(
-      <Providers services={coreStart}>
+      <Providers services={coreStart} theme$={theme$}>
         <VerificationCodeForm onSuccess={onSuccess} />
       </Providers>
     );
@@ -65,7 +67,7 @@ describe('VerificationCodeForm', () => {
     const onSuccess = jest.fn();
 
     const { findAllByText, findByRole, findByLabelText } = render(
-      <Providers services={coreStart}>
+      <Providers services={coreStart} theme$={theme$}>
         <VerificationCodeForm onSuccess={onSuccess} />
       </Providers>
     );