[Canvas] Added KibanaThemeProvider to expression_reveal_image.

src/plugins/expression_error/public/expression_renderers/__stories__/error_renderer.stories.tsx

@@ -8,13 +8,13 @@
 
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { errorRenderer } from '../error_renderer';
+import { getErrorRenderer } from '../error_renderer';
 import { Render } from '../../../../presentation_util/public/__stories__';
 
 storiesOf('renderers/error', module).add('default', () => {
   const thrownError = new Error('There was an error');
   const config = {
     error: thrownError,
   };
-  return <Render renderer={errorRenderer} config={config} />;
+  return <Render renderer={getErrorRenderer()} config={config} />;
 });

src/plugins/expression_error/public/expression_renderers/debug_renderer.tsx

@@ -8,9 +8,13 @@
 
 import { render, unmountComponentAtNode } from 'react-dom';
 import React from 'react';
+import { Observable } from 'rxjs';
+import { CoreTheme } from 'kibana/public';
 import { ExpressionRenderDefinition } from 'src/plugins/expressions/common';
 import { i18n } from '@kbn/i18n';
-import { withSuspense } from '../../../../../src/plugins/presentation_util/public';
+import { CoreSetup } from '../../../../core/public';
+import { KibanaThemeProvider } from '../../../kibana_react/public';
+import { withSuspense, defaultTheme$ } from '../../../../../src/plugins/presentation_util/public';
 import { LazyDebugRenderComponent } from '../components';
 import { JSON } from '../../common';
 
@@ -30,13 +34,22 @@ const strings = {
     }),
 };
 
-export const debugRenderer = (): ExpressionRenderDefinition<any> => ({
-  name: 'debug',
-  displayName: strings.getDisplayName(),
-  help: strings.getHelpDescription(),
-  reuseDomNode: true,
-  render(domNode, config, handlers) {
-    handlers.onDestroy(() => unmountComponentAtNode(domNode));
-    render(<Debug parentNode={domNode} payload={config} onLoaded={handlers.done} />, domNode);
-  },
-});
+export const getDebugRenderer =
+  (theme$: Observable<CoreTheme> = defaultTheme$) =>
+  (): ExpressionRenderDefinition<any> => ({
+    name: 'debug',
+    displayName: strings.getDisplayName(),
+    help: strings.getHelpDescription(),
+    reuseDomNode: true,
+    render(domNode, config, handlers) {
+      handlers.onDestroy(() => unmountComponentAtNode(domNode));
+      render(
+        <KibanaThemeProvider theme$={theme$}>
+          <Debug parentNode={domNode} payload={config} onLoaded={handlers.done} />
+        </KibanaThemeProvider>,
+        domNode
+      );
+    },
+  });
+
+export const debugRendererFactory = (core: CoreSetup) => getDebugRenderer(core.theme.theme$);

src/plugins/expression_error/public/expression_renderers/error_renderer.tsx

@@ -5,12 +5,17 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
+import { Observable } from 'rxjs';
+import { CoreTheme } from 'kibana/public';
 import { I18nProvider } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { ExpressionRenderDefinition, IInterpreterRenderHandlers } from 'src/plugins/expressions';
-import { withSuspense } from '../../../presentation_util/public';
+import { CoreSetup } from '../../../../core/public';
+import { KibanaThemeProvider } from '../../../kibana_react/public';
+import { withSuspense, defaultTheme$ } from '../../../presentation_util/public';
 import { ErrorRendererConfig } from '../../common/types';
 import { LazyErrorRenderComponent } from '../components';
 
@@ -27,25 +32,31 @@ const errorStrings = {
 
 const ErrorComponent = withSuspense(LazyErrorRenderComponent);
 
-export const errorRenderer = (): ExpressionRenderDefinition<ErrorRendererConfig> => ({
-  name: 'error',
-  displayName: errorStrings.getDisplayName(),
-  help: errorStrings.getHelpDescription(),
-  reuseDomNode: true,
-  render: async (
-    domNode: HTMLElement,
-    config: ErrorRendererConfig,
-    handlers: IInterpreterRenderHandlers
-  ) => {
-    handlers.onDestroy(() => {
-      unmountComponentAtNode(domNode);
-    });
+export const getErrorRenderer =
+  (theme$: Observable<CoreTheme> = defaultTheme$) =>
+  (): ExpressionRenderDefinition<ErrorRendererConfig> => ({
+    name: 'error',
+    displayName: errorStrings.getDisplayName(),
+    help: errorStrings.getHelpDescription(),
+    reuseDomNode: true,
+    render: async (
+      domNode: HTMLElement,
+      config: ErrorRendererConfig,
+      handlers: IInterpreterRenderHandlers
+    ) => {
+      handlers.onDestroy(() => {
+        unmountComponentAtNode(domNode);
+      });
+
+      render(
+        <KibanaThemeProvider theme$={theme$}>
+          <I18nProvider>
+            <ErrorComponent onLoaded={handlers.done} {...config} parentNode={domNode} />
+          </I18nProvider>
+        </KibanaThemeProvider>,
+        domNode
+      );
+    },
+  });
 
-    render(
-      <I18nProvider>
-        <ErrorComponent onLoaded={handlers.done} {...config} parentNode={domNode} />
-      </I18nProvider>,
-      domNode
-    );
-  },
-});
+export const errorRendererFactory = (core: CoreSetup) => getErrorRenderer(core.theme.theme$);

src/plugins/expression_error/public/expression_renderers/index.ts

@@ -6,9 +6,5 @@
  * Side Public License, v 1.
  */
 
-import { errorRenderer } from './error_renderer';
-import { debugRenderer } from './debug_renderer';
-
-export const renderers = [errorRenderer, debugRenderer];
-
-export { errorRenderer, debugRenderer };
+export { getErrorRenderer, errorRendererFactory } from './error_renderer';
+export { getDebugRenderer, debugRendererFactory } from './debug_renderer';

src/plugins/expression_error/public/index.ts

@@ -6,9 +6,6 @@
  * Side Public License, v 1.
  */
 
-// TODO: https://github.com/elastic/kibana/issues/110893
-/* eslint-disable @kbn/eslint/no_export_all */
-
 import { ExpressionErrorPlugin } from './plugin';
 
 export type { ExpressionErrorPluginSetup, ExpressionErrorPluginStart } from './plugin';
@@ -17,5 +14,11 @@ export function plugin() {
   return new ExpressionErrorPlugin();
 }
 
-export * from './expression_renderers';
+export {
+  getErrorRenderer,
+  getDebugRenderer,
+  errorRendererFactory,
+  debugRendererFactory,
+} from './expression_renderers';
+
 export { LazyDebugComponent, LazyErrorComponent } from './components';

src/plugins/expression_error/public/plugin.ts

@@ -8,7 +8,7 @@
 
 import { CoreSetup, CoreStart, Plugin } from '../../../core/public';
 import { ExpressionsStart, ExpressionsSetup } from '../../expressions/public';
-import { errorRenderer, debugRenderer } from './expression_renderers';
+import { debugRendererFactory, errorRendererFactory } from './expression_renderers';
 
 interface SetupDeps {
   expressions: ExpressionsSetup;
@@ -25,8 +25,8 @@ export class ExpressionErrorPlugin
   implements Plugin<ExpressionErrorPluginSetup, ExpressionErrorPluginStart, SetupDeps, StartDeps>
 {
   public setup(core: CoreSetup, { expressions }: SetupDeps): ExpressionErrorPluginSetup {
-    expressions.registerRenderer(errorRenderer);
-    expressions.registerRenderer(debugRenderer);
+    expressions.registerRenderer(errorRendererFactory(core));
+    expressions.registerRenderer(debugRendererFactory(core));
   }
 
   public start(core: CoreStart): ExpressionErrorPluginStart {}

src/plugins/expression_reveal_image/kibana.json

@@ -11,5 +11,5 @@
   "ui": true,
   "requiredPlugins": ["expressions", "presentationUtil"],
   "optionalPlugins": [],
-  "requiredBundles": []
+  "requiredBundles": ["kibanaReact"]
 }

src/plugins/expression_reveal_image/public/expression_renderers/__stories__/reveal_image_renderer.stories.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { revealImageRenderer } from '../';
+import { getRevealImageRenderer } from '../';
 import { getElasticOutline, getElasticLogo } from '../../../../presentation_util/public';
 import { Render, waitFor } from '../../../../presentation_util/public/__stories__';
 import { Origin } from '../../../common/types/expression_functions';
@@ -26,7 +26,7 @@ const Renderer = ({
     origin: Origin.LEFT,
     percent: 0.45,
   };
-  return <Render renderer={revealImageRenderer} config={config} />;
+  return <Render renderer={getRevealImageRenderer()} config={config} />;
 };
 
 storiesOf('renderers/revealImage', module).add(

src/plugins/expression_reveal_image/public/expression_renderers/index.ts

@@ -6,8 +6,4 @@
  * Side Public License, v 1.
  */
 
-import { revealImageRenderer } from './reveal_image_renderer';
-
-export const renderers = [revealImageRenderer];
-
-export { revealImageRenderer };
+export { revealImageRendererFactory, getRevealImageRenderer } from './reveal_image_renderer';

src/plugins/expression_reveal_image/public/expression_renderers/reveal_image_renderer.tsx

@@ -7,10 +7,14 @@
  */
 import React, { lazy } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
+import { Observable } from 'rxjs';
+import { CoreTheme } from 'kibana/public';
 import { I18nProvider } from '@kbn/i18n-react';
 import { ExpressionRenderDefinition, IInterpreterRenderHandlers } from 'src/plugins/expressions';
 import { i18n } from '@kbn/i18n';
-import { withSuspense } from '../../../presentation_util/public';
+import { CoreSetup } from '../../../../core/public';
+import { KibanaThemeProvider } from '../../../kibana_react/public';
+import { withSuspense, defaultTheme$ } from '../../../presentation_util/public';
 import { RevealImageRendererConfig } from '../../common/types';
 
 export const strings = {
@@ -27,25 +31,32 @@ export const strings = {
 const LazyRevealImageComponent = lazy(() => import('../components/reveal_image_component'));
 const RevealImageComponent = withSuspense(LazyRevealImageComponent, null);
 
-export const revealImageRenderer = (): ExpressionRenderDefinition<RevealImageRendererConfig> => ({
-  name: 'revealImage',
-  displayName: strings.getDisplayName(),
-  help: strings.getHelpDescription(),
-  reuseDomNode: true,
-  render: (
-    domNode: HTMLElement,
-    config: RevealImageRendererConfig,
-    handlers: IInterpreterRenderHandlers
-  ) => {
-    handlers.onDestroy(() => {
-      unmountComponentAtNode(domNode);
-    });
+export const getRevealImageRenderer =
+  (theme$: Observable<CoreTheme> = defaultTheme$) =>
+  (): ExpressionRenderDefinition<RevealImageRendererConfig> => ({
+    name: 'revealImage',
+    displayName: strings.getDisplayName(),
+    help: strings.getHelpDescription(),
+    reuseDomNode: true,
+    render: (
+      domNode: HTMLElement,
+      config: RevealImageRendererConfig,
+      handlers: IInterpreterRenderHandlers
+    ) => {
+      handlers.onDestroy(() => {
+        unmountComponentAtNode(domNode);
+      });
 
-    render(
-      <I18nProvider>
-        <RevealImageComponent onLoaded={handlers.done} {...config} parentNode={domNode} />
-      </I18nProvider>,
-      domNode
-    );
-  },
-});
+      render(
+        <KibanaThemeProvider theme$={theme$}>
+          <I18nProvider>
+            <RevealImageComponent onLoaded={handlers.done} {...config} parentNode={domNode} />
+          </I18nProvider>
+        </KibanaThemeProvider>,
+        domNode
+      );
+    },
+  });
+
+export const revealImageRendererFactory = (core: CoreSetup) =>
+  getRevealImageRenderer(core.theme.theme$);

src/plugins/expression_reveal_image/public/index.ts

@@ -6,9 +6,6 @@
  * Side Public License, v 1.
  */
 
-// TODO: https://github.com/elastic/kibana/issues/110893
-/* eslint-disable @kbn/eslint/no_export_all */
-
 import { ExpressionRevealImagePlugin } from './plugin';
 
 export type { ExpressionRevealImagePluginSetup, ExpressionRevealImagePluginStart } from './plugin';
@@ -17,4 +14,4 @@ export function plugin() {
   return new ExpressionRevealImagePlugin();
 }
 
-export * from './expression_renderers';
+export { revealImageRendererFactory, getRevealImageRenderer } from './expression_renderers';

src/plugins/expression_reveal_image/public/plugin.ts

@@ -8,7 +8,7 @@
 
 import { CoreSetup, CoreStart, Plugin } from '../../../core/public';
 import { ExpressionsStart, ExpressionsSetup } from '../../expressions/public';
-import { revealImageRenderer } from './expression_renderers';
+import { revealImageRendererFactory } from './expression_renderers';
 import { revealImageFunction } from '../common/expression_functions';
 
 interface SetupDeps {
@@ -33,7 +33,7 @@ export class ExpressionRevealImagePlugin
 {
   public setup(core: CoreSetup, { expressions }: SetupDeps): ExpressionRevealImagePluginSetup {
     expressions.registerFunction(revealImageFunction);
-    expressions.registerRenderer(revealImageRenderer);
+    expressions.registerRenderer(revealImageRendererFactory(core));
   }
 
   public start(core: CoreStart): ExpressionRevealImagePluginStart {}

x-pack/plugins/canvas/public/lib/default_theme.ts → src/plugins/presentation_util/common/lib/utils/default_theme.ts

@@ -1,9 +1,11 @@
 /*
  * 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; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 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 'kibana/public';
 import { Observable } from 'rxjs';
 

src/plugins/presentation_util/common/lib/utils/index.ts

@@ -10,6 +10,7 @@ export * from './dataurl';
 export * from './httpurl';
 export * from './resolve_dataurl';
 export * from './url';
+export { defaultTheme$ } from './default_theme';
 
 export async function getElasticLogo() {
   return await import('./elastic_logo');

x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts

@@ -7,23 +7,27 @@
 
 import { imageRenderer } from '../../../../../src/plugins/expression_image/public';
 import { metricRenderer } from '../../../../../src/plugins/expression_metric/public';
-import { errorRenderer, debugRenderer } from '../../../../../src/plugins/expression_error/public';
+import {
+  errorRendererFactory,
+  debugRendererFactory,
+} from '../../../../../src/plugins/expression_error/public';
 import { repeatImageRenderer } from '../../../../../src/plugins/expression_repeat_image/public';
-import { revealImageRenderer } from '../../../../../src/plugins/expression_reveal_image/public';
+import { revealImageRendererFactory } from '../../../../../src/plugins/expression_reveal_image/public';
 import {
   shapeRenderer,
   progressRenderer,
 } from '../../../../../src/plugins/expression_shape/public';
 
 export const renderFunctions = [
-  debugRenderer,
-  errorRenderer,
   imageRenderer,
   metricRenderer,
-  revealImageRenderer,
   shapeRenderer,
   repeatImageRenderer,
   progressRenderer,
 ];
 
-export const renderFunctionFactories = [];
+export const renderFunctionFactories = [
+  debugRendererFactory,
+  errorRendererFactory,
+  revealImageRendererFactory,
+];

x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx

@@ -10,12 +10,12 @@ import ReactDOM from 'react-dom';
 import { CoreTheme } from 'kibana/public';
 import { Observable } from 'rxjs';
 import { KibanaThemeProvider } from '../../../../../../src/plugins/kibana_react/public';
+import { defaultTheme$ } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { StartInitializer } from '../../plugin';
 import { RendererStrings } from '../../../i18n';
 import { Return as Config } from '../../functions/browser/markdown';
 import { Markdown } from '../../../../../../src/plugins/kibana_react/public';
 import { RendererFactory } from '../../../types';
-import { defaultTheme$ } from '../../../public/lib/default_theme';
 
 const { markdown: strings } = RendererStrings;