[Canvas] Added KibanaThemeProvider to expression_repeat_image. (#120089)

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

Hide file tree

Showing 9 changed files with 59 additions and 48 deletions.
diff --git a/src/plugins/expression_repeat_image/kibana.json b/src/plugins/expression_repeat_image/kibana.json
@@ -11,5 +11,5 @@
   "ui": true,
   "requiredPlugins": ["expressions", "presentationUtil"],
   "optionalPlugins": [],
-  "requiredBundles": []
+  "requiredBundles": ["kibanaReact"]
 }
diff --git a/src/plugins/expression_repeat_image/public/components/repeat_image_component.tsx b/src/plugins/expression_repeat_image/public/components/repeat_image_component.tsx
@@ -46,7 +46,9 @@ function setImageSize(img: HTMLImageElement, size: number) {
 }
 
 function createImageJSX(img: HTMLImageElement | null) {
-  if (!img) return null;
+  if (!img) {
+    return null;
+  }
   const params = img.width > img.height ? { heigth: img.height } : { width: img.width };
   return <img src={img.src} {...params} alt="" />;
 }

diff --git a/...on_repeat_image/public/expression_renderers/__stories__/repeat_image_renderer.stories.tsx b/...on_repeat_image/public/expression_renderers/__stories__/repeat_image_renderer.stories.tsx
@@ -9,7 +9,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { Render } from '../../../../presentation_util/public/__stories__';
-import { repeatImageRenderer } from '../repeat_image_renderer';
+import { getRepeatImageRenderer } from '../repeat_image_renderer';
 import {
   getElasticLogo,
   getElasticOutline,
@@ -31,7 +31,7 @@ const Renderer = ({
     emptyImage: elasticOutline,
   };
 
-  return <Render renderer={repeatImageRenderer} config={config} width="400px" />;
+  return <Render renderer={getRepeatImageRenderer()} config={config} width="400px" />;
 };
 
 storiesOf('enderers/repeatImage', module).add(

diff --git a/src/plugins/expression_repeat_image/public/expression_renderers/index.ts b/src/plugins/expression_repeat_image/public/expression_renderers/index.ts
@@ -6,8 +6,4 @@
  * Side Public License, v 1.
  */
 
-import { repeatImageRenderer } from './repeat_image_renderer';
-
-export const renderers = [repeatImageRenderer];
-
-export { repeatImageRenderer };
+export { getRepeatImageRenderer, repeatImageRendererFactory } from './repeat_image_renderer';
diff --git a/src/plugins/expression_repeat_image/public/expression_renderers/repeat_image_renderer.tsx b/src/plugins/expression_repeat_image/public/expression_renderers/repeat_image_renderer.tsx
@@ -7,10 +7,19 @@
  */
 import React, { lazy } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
-import { I18nProvider } from '@kbn/i18n-react';
+import { Observable } from 'rxjs';
+import { CoreTheme } from 'kibana/public';
 import { ExpressionRenderDefinition, IInterpreterRenderHandlers } from 'src/plugins/expressions';
 import { i18n } from '@kbn/i18n';
-import { getElasticOutline, isValidUrl, withSuspense } from '../../../presentation_util/public';
+import { I18nProvider } from '@kbn/i18n-react';
+import { KibanaThemeProvider } from '../../../kibana_react/public';
+import { CoreSetup } from '../../../../core/public';
+import {
+  defaultTheme$,
+  getElasticOutline,
+  isValidUrl,
+  withSuspense,
+} from '../../../presentation_util/public';
 import { RepeatImageRendererConfig } from '../../common/types';
 
 const strings = {
@@ -27,32 +36,39 @@ const strings = {
 const LazyRepeatImageComponent = lazy(() => import('../components/repeat_image_component'));
 const RepeatImageComponent = withSuspense(LazyRepeatImageComponent, null);
 
-export const repeatImageRenderer = (): ExpressionRenderDefinition<RepeatImageRendererConfig> => ({
-  name: 'repeatImage',
-  displayName: strings.getDisplayName(),
-  help: strings.getHelpDescription(),
-  reuseDomNode: true,
-  render: async (
-    domNode: HTMLElement,
-    config: RepeatImageRendererConfig,
-    handlers: IInterpreterRenderHandlers
-  ) => {
-    const { elasticOutline } = await getElasticOutline();
-    const settings = {
-      ...config,
-      image: isValidUrl(config.image) ? config.image : elasticOutline,
-      emptyImage: config.emptyImage || '',
-    };
+export const getRepeatImageRenderer =
+  (theme$: Observable<CoreTheme> = defaultTheme$) =>
+  (): ExpressionRenderDefinition<RepeatImageRendererConfig> => ({
+    name: 'repeatImage',
+    displayName: strings.getDisplayName(),
+    help: strings.getHelpDescription(),
+    reuseDomNode: true,
+    render: async (
+      domNode: HTMLElement,
+      config: RepeatImageRendererConfig,
+      handlers: IInterpreterRenderHandlers
+    ) => {
+      const { elasticOutline } = await getElasticOutline();
+      const settings = {
+        ...config,
+        image: isValidUrl(config.image) ? config.image : elasticOutline,
+        emptyImage: config.emptyImage || '',
+      };
+
+      handlers.onDestroy(() => {
+        unmountComponentAtNode(domNode);
+      });
 
-    handlers.onDestroy(() => {
-      unmountComponentAtNode(domNode);
-    });
+      render(
+        <KibanaThemeProvider theme$={theme$}>
+          <I18nProvider>
+            <RepeatImageComponent onLoaded={handlers.done} {...settings} parentNode={domNode} />
+          </I18nProvider>
+        </KibanaThemeProvider>,
+        domNode
+      );
+    },
+  });
 
-    render(
-      <I18nProvider>
-        <RepeatImageComponent onLoaded={handlers.done} {...settings} parentNode={domNode} />
-      </I18nProvider>,
-      domNode
-    );
-  },
-});
+export const repeatImageRendererFactory = (core: CoreSetup) =>
+  getRepeatImageRenderer(core.theme.theme$);
diff --git a/src/plugins/expression_repeat_image/public/index.ts b/src/plugins/expression_repeat_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 { ExpressionRepeatImagePlugin } from './plugin';
 
 export type { ExpressionRepeatImagePluginSetup, ExpressionRepeatImagePluginStart } from './plugin';
@@ -17,4 +14,4 @@ export function plugin() {
   return new ExpressionRepeatImagePlugin();
 }
 
-export * from './expression_renderers';
+export { getRepeatImageRenderer, repeatImageRendererFactory } from './expression_renderers';
diff --git a/src/plugins/expression_repeat_image/public/plugin.ts b/src/plugins/expression_repeat_image/public/plugin.ts
@@ -9,7 +9,7 @@
 import { CoreSetup, CoreStart, Plugin } from '../../../core/public';
 import { ExpressionsStart, ExpressionsSetup } from '../../expressions/public';
 import { repeatImageFunction } from '../common/expression_functions';
-import { repeatImageRenderer } from './expression_renderers';
+import { repeatImageRendererFactory } from './expression_renderers';
 
 interface SetupDeps {
   expressions: ExpressionsSetup;
@@ -33,7 +33,7 @@ export class ExpressionRepeatImagePlugin
 {
   public setup(core: CoreSetup, { expressions }: SetupDeps): ExpressionRepeatImagePluginSetup {
     expressions.registerFunction(repeatImageFunction);
-    expressions.registerRenderer(repeatImageRenderer);
+    expressions.registerRenderer(repeatImageRendererFactory(core));
   }
 
   public start(core: CoreStart): ExpressionRepeatImagePluginStart {}

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,7 +11,7 @@ import {
   errorRendererFactory,
   debugRendererFactory,
 } from '../../../../../src/plugins/expression_error/public';
-import { repeatImageRenderer } from '../../../../../src/plugins/expression_repeat_image/public';
+import { repeatImageRendererFactory } from '../../../../../src/plugins/expression_repeat_image/public';
 import { revealImageRenderer } from '../../../../../src/plugins/expression_reveal_image/public';
 import {
   shapeRenderer,
@@ -22,12 +22,12 @@ export const renderFunctions = [
   imageRenderer,
   revealImageRenderer,
   shapeRenderer,
-  repeatImageRenderer,
   progressRenderer,
 ];
 
 export const renderFunctionFactories = [
   debugRendererFactory,
   errorRendererFactory,
+  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,7 +15,7 @@ import {
   getErrorRenderer,
   getDebugRenderer,
 } from '../../../../src/plugins/expression_error/public';
-import { repeatImageRenderer as repeatImage } from '../../../../src/plugins/expression_repeat_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,
@@ -31,6 +31,7 @@ const renderFunctionsFactories = [
   getTableRenderer,
   getErrorRenderer,
   getDebugRenderer,
+  getRepeatImageRenderer,
   getMetricRenderer,
 ];
 
@@ -41,7 +42,6 @@ const renderFunctionsFactories = [
  */
 export const renderFunctions = [
   image,
-  repeatImage,
   revealImage,
   pie,
   plot,