[Canvas] Added KibanaThemeProvider to expression_reveal_image. (#120094)

* Added kibanaThemeProvider to expression_reveal_image. Co-authored-by: Kibana Machine <[email protected]>
elastic · Dec 3, 2021 · ffbe19c · ffbe19c
1 parent c7a06cd
commit ffbe19c
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 45 deletions.
diff --git a/src/plugins/expression_reveal_image/kibana.json b/src/plugins/expression_reveal_image/kibana.json
@@ -11,5 +11,5 @@
   "ui": true,
   "requiredPlugins": ["expressions", "presentationUtil"],
   "optionalPlugins": [],
-  "requiredBundles": []
+  "requiredBundles": ["kibanaReact"]
 }
diff --git a/...on_reveal_image/public/expression_renderers/__stories__/reveal_image_renderer.stories.tsx b/...on_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(

diff --git a/src/plugins/expression_reveal_image/public/expression_renderers/index.ts b/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';
diff --git a/src/plugins/expression_reveal_image/public/expression_renderers/reveal_image_renderer.tsx b/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$);
diff --git a/src/plugins/expression_reveal_image/public/index.ts b/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';
diff --git a/src/plugins/expression_reveal_image/public/plugin.ts b/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 {}

diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts
@@ -11,23 +11,19 @@ import {
   errorRendererFactory,
   debugRendererFactory,
 } from '../../../../../src/plugins/expression_error/public';
+import { revealImageRendererFactory } from '../../../../../src/plugins/expression_reveal_image/public';
 import { repeatImageRendererFactory } from '../../../../../src/plugins/expression_repeat_image/public';
-import { revealImageRenderer } from '../../../../../src/plugins/expression_reveal_image/public';
 import {
   shapeRenderer,
   progressRenderer,
 } from '../../../../../src/plugins/expression_shape/public';
 
-export const renderFunctions = [
-  imageRenderer,
-  revealImageRenderer,
-  shapeRenderer,
-  progressRenderer,
-];
+export const renderFunctions = [imageRenderer, shapeRenderer, progressRenderer];
 
 export const renderFunctionFactories = [
   debugRendererFactory,
   errorRendererFactory,
+  revealImageRendererFactory,
   repeatImageRendererFactory,
   metricRendererFactory,
 ];
diff --git a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
@@ -15,8 +15,8 @@ import {
   getErrorRenderer,
   getDebugRenderer,
 } from '../../../../src/plugins/expression_error/public';
+import { getRevealImageRenderer } from '../../../../src/plugins/expression_reveal_image/public';
 import { getRepeatImageRenderer } from '../../../../src/plugins/expression_repeat_image/public';
-import { revealImageRenderer as revealImage } from '../../../../src/plugins/expression_reveal_image/public';
 import {
   shapeRenderer as shape,
   progressRenderer as progress,
@@ -31,6 +31,7 @@ const renderFunctionsFactories = [
   getTableRenderer,
   getErrorRenderer,
   getDebugRenderer,
+  getRevealImageRenderer,
   getRepeatImageRenderer,
   getMetricRenderer,
 ];
@@ -42,7 +43,6 @@ const renderFunctionsFactories = [
  */
 export const renderFunctions = [
   image,
-  revealImage,
   pie,
   plot,
   progress,