[Canvas] Added KibanaThemeProvider to expression_image. (#120104)

* Added kibanaThemeProvider to expression_image

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

src/plugins/expression_image/kibana.json

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

src/plugins/expression_image/public/expression_renderers/__stories__/image_renderer.stories.tsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { Render, waitFor } from '../../../../presentation_util/public/__stories__';
-import { imageRenderer } from '../image_renderer';
+import { getImageRenderer } from '../image_renderer';
 import { getElasticLogo } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { ImageMode } from '../../../common';
 
@@ -19,7 +19,7 @@ const Renderer = ({ elasticLogo }: { elasticLogo: string }) => {
     mode: ImageMode.COVER,
   };
 
-  return <Render renderer={imageRenderer} config={config} width="500px" height="500px" />;
+  return <Render renderer={getImageRenderer()} config={config} width="500px" height="500px" />;
 };
 
 storiesOf('renderers/image', module).add(

src/plugins/expression_image/public/expression_renderers/image_renderer.tsx

@@ -9,7 +9,11 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { ExpressionRenderDefinition, IInterpreterRenderHandlers } from 'src/plugins/expressions';
 import { i18n } from '@kbn/i18n';
-import { getElasticLogo, isValidUrl } from '../../../presentation_util/public';
+import { Observable } from 'rxjs';
+import { CoreTheme } from 'kibana/public';
+import { CoreSetup } from '../../../../core/public';
+import { KibanaThemeProvider } from '../../../kibana_react/public';
+import { getElasticLogo, isValidUrl, defaultTheme$ } from '../../../presentation_util/public';
 import { ImageRendererConfig } from '../../common/types';
 
 const strings = {
@@ -23,31 +27,41 @@ const strings = {
     }),
 };
 
-export const imageRenderer = (): ExpressionRenderDefinition<ImageRendererConfig> => ({
-  name: 'image',
-  displayName: strings.getDisplayName(),
-  help: strings.getHelpDescription(),
-  reuseDomNode: true,
-  render: async (
-    domNode: HTMLElement,
-    config: ImageRendererConfig,
-    handlers: IInterpreterRenderHandlers
-  ) => {
-    const { elasticLogo } = await getElasticLogo();
-    const dataurl = isValidUrl(config.dataurl ?? '') ? config.dataurl : elasticLogo;
+export const getImageRenderer =
+  (theme$: Observable<CoreTheme> = defaultTheme$) =>
+  (): ExpressionRenderDefinition<ImageRendererConfig> => ({
+    name: 'image',
+    displayName: strings.getDisplayName(),
+    help: strings.getHelpDescription(),
+    reuseDomNode: true,
+    render: async (
+      domNode: HTMLElement,
+      config: ImageRendererConfig,
+      handlers: IInterpreterRenderHandlers
+    ) => {
+      const { elasticLogo } = await getElasticLogo();
+      const dataurl = isValidUrl(config.dataurl ?? '') ? config.dataurl : elasticLogo;
 
-    const style = {
-      height: '100%',
-      backgroundImage: `url(${dataurl})`,
-      backgroundRepeat: 'no-repeat',
-      backgroundPosition: 'center center',
-      backgroundSize: config.mode as string,
-    };
+      const style = {
+        height: '100%',
+        backgroundImage: `url(${dataurl})`,
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center center',
+        backgroundSize: config.mode as string,
+      };
 
-    handlers.onDestroy(() => {
-      unmountComponentAtNode(domNode);
-    });
+      handlers.onDestroy(() => {
+        unmountComponentAtNode(domNode);
+      });
 
-    render(<div style={style} />, domNode, () => handlers.done());
-  },
-});
+      render(
+        <KibanaThemeProvider theme$={theme$}>
+          <div style={style} />
+        </KibanaThemeProvider>,
+        domNode,
+        () => handlers.done()
+      );
+    },
+  });
+
+export const imageRendererFactory = (core: CoreSetup) => getImageRenderer(core.theme.theme$);

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

@@ -6,8 +6,4 @@
  * Side Public License, v 1.
  */
 
-import { imageRenderer } from './image_renderer';
-
-export const renderers = [imageRenderer];
-
-export { imageRenderer };
+export { imageRendererFactory, getImageRenderer } from './image_renderer';

src/plugins/expression_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 { ExpressionImagePlugin } from './plugin';
 
 export type { ExpressionImagePluginSetup, ExpressionImagePluginStart } from './plugin';
@@ -17,4 +14,4 @@ export function plugin() {
   return new ExpressionImagePlugin();
 }
 
-export * from './expression_renderers';
+export { imageRendererFactory, getImageRenderer } from './expression_renderers';

src/plugins/expression_image/public/plugin.ts

@@ -8,7 +8,7 @@
 
 import { CoreSetup, CoreStart, Plugin } from '../../../core/public';
 import { ExpressionsStart, ExpressionsSetup } from '../../expressions/public';
-import { imageRenderer } from './expression_renderers';
+import { imageRendererFactory } from './expression_renderers';
 import { imageFunction } from '../common/expression_functions';
 
 interface SetupDeps {
@@ -27,7 +27,7 @@ export class ExpressionImagePlugin
 {
   public setup(core: CoreSetup, { expressions }: SetupDeps): ExpressionImagePluginSetup {
     expressions.registerFunction(imageFunction);
-    expressions.registerRenderer(imageRenderer);
+    expressions.registerRenderer(imageRendererFactory(core));
   }
 
   public start(core: CoreStart): ExpressionImagePluginStart {}

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

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { imageRenderer } from '../../../../../src/plugins/expression_image/public';
+import { imageRendererFactory } from '../../../../../src/plugins/expression_image/public';
 import { metricRendererFactory } from '../../../../../src/plugins/expression_metric/public';
 import {
   errorRendererFactory,
@@ -18,11 +18,12 @@ import {
   progressRendererFactory,
 } from '../../../../../src/plugins/expression_shape/public';
 
-export const renderFunctions = [imageRenderer];
+export const renderFunctions = [];
 
 export const renderFunctionFactories = [
   debugRendererFactory,
   errorRendererFactory,
+  imageRendererFactory,
   shapeRendererFactory,
   progressRendererFactory,
   revealImageRendererFactory,

x-pack/plugins/canvas/shareable_runtime/supported_renderers.js

@@ -10,7 +10,7 @@ import { pie } from '../canvas_plugin_src/renderers/pie';
 import { plot } from '../canvas_plugin_src/renderers/plot';
 import { getTableRenderer } from '../canvas_plugin_src/renderers/table';
 import { getTextRenderer } from '../canvas_plugin_src/renderers/text';
-import { imageRenderer as image } from '../../../../src/plugins/expression_image/public';
+import { getImageRenderer } from '../../../../src/plugins/expression_image/public';
 import {
   getErrorRenderer,
   getDebugRenderer,
@@ -31,6 +31,7 @@ const renderFunctionsFactories = [
   getTableRenderer,
   getErrorRenderer,
   getDebugRenderer,
+  getImageRenderer,
   getShapeRenderer,
   getProgressRenderer,
   getRevealImageRenderer,
@@ -43,6 +44,6 @@ const renderFunctionsFactories = [
  * a renderer is not listed here, but is used by the Shared Workpad, it will
  * not render.  This includes any plugins.
  */
-export const renderFunctions = [image, pie, plot, ...renderFunctionsFactories.map(unboxFactory)];
+export const renderFunctions = [pie, plot, ...renderFunctionsFactories.map(unboxFactory)];
 
 export const renderFunctionNames = [...renderFunctions.map((fn) => fn().name)];