[Canvas] Added KibanaThemeProvider to expression_shape. (#120099)

* Added kibanaThemeProvider to expression_shape.

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

src/plugins/expression_shape/common/index.ts

@@ -6,10 +6,31 @@
  * Side Public License, v 1.
  */
 
-// TODO: https://github.com/elastic/kibana/issues/110893
-/* eslint-disable @kbn/eslint/no_export_all */
+export {
+  PLUGIN_ID,
+  PLUGIN_NAME,
+  SVG,
+  CSS,
+  FONT_FAMILY,
+  FONT_WEIGHT,
+  BOOLEAN_TRUE,
+  BOOLEAN_FALSE,
+} from './constants';
 
-export * from './constants';
-export * from './types';
+export type {
+  Output,
+  ExpressionShapeFunction,
+  ProgressArguments,
+  ProgressOutput,
+  ExpressionProgressFunction,
+  OriginString,
+  ShapeRendererConfig,
+  NodeDimensions,
+  ParentNodeParams,
+  ViewBoxParams,
+  ProgressRendererConfig,
+} from './types';
+
+export { Progress, Shape } from './types';
 
 export { getAvailableShapes, getAvailableProgressShapes } from './lib/available_shapes';

src/plugins/expression_shape/common/types/index.ts

@@ -5,5 +5,21 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-export * from './expression_functions';
-export * from './expression_renderers';
+
+export type {
+  Output,
+  ExpressionShapeFunction,
+  ProgressArguments,
+  ProgressOutput,
+  ExpressionProgressFunction,
+} from './expression_functions';
+export { Progress, Shape } from './expression_functions';
+
+export type {
+  OriginString,
+  ShapeRendererConfig,
+  NodeDimensions,
+  ParentNodeParams,
+  ViewBoxParams,
+  ProgressRendererConfig,
+} from './expression_renderers';

src/plugins/expression_shape/kibana.json

@@ -12,5 +12,5 @@
   "extraPublicDirs": ["common"],
   "requiredPlugins": ["expressions", "presentationUtil"],
   "optionalPlugins": [],
-  "requiredBundles": []
+  "requiredBundles": ["kibanaReact"]
 }

src/plugins/expression_shape/public/expression_renderers/__stories__/progress_renderer.stories.tsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { Render } from '../../../../presentation_util/public/__stories__';
-import { progressRenderer } from '../progress_renderer';
+import { getProgressRenderer } from '../progress_renderer';
 import { Progress } from '../../../common';
 
 storiesOf('renderers/progress', module).add('default', () => {
@@ -29,5 +29,5 @@ storiesOf('renderers/progress', module).add('default', () => {
     valueWeight: 15,
   };
 
-  return <Render renderer={progressRenderer} config={config} />;
+  return <Render renderer={getProgressRenderer()} config={config} />;
 });

src/plugins/expression_shape/public/expression_renderers/__stories__/shape_renderer.stories.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { shapeRenderer as shape } from '../';
+import { getShapeRenderer } from '../';
 import { Render } from '../../../../presentation_util/public/__stories__';
 import { Shape } from '../../../common/types';
 
@@ -22,5 +22,5 @@ storiesOf('renderers/shape', module).add('default', () => {
     maintainAspect: true,
   };
 
-  return <Render renderer={shape} config={config} />;
+  return <Render renderer={getShapeRenderer()} config={config} />;
 });

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

@@ -6,9 +6,5 @@
  * Side Public License, v 1.
  */
 
-import { shapeRenderer } from './shape_renderer';
-import { progressRenderer } from './progress_renderer';
-
-export const renderers = [shapeRenderer, progressRenderer];
-
-export { shapeRenderer, progressRenderer };
+export { getShapeRenderer, shapeRendererFactory } from './shape_renderer';
+export { getProgressRenderer, progressRendererFactory } from './progress_renderer';

src/plugins/expression_shape/public/expression_renderers/progress_renderer.tsx

@@ -7,11 +7,16 @@
  */
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
+import { Observable } from 'rxjs';
+import { CoreTheme } from 'kibana/public';
 import { ExpressionRenderDefinition, IInterpreterRenderHandlers } from 'src/plugins/expressions';
 import { i18n } from '@kbn/i18n';
+import { I18nProvider } from '@kbn/i18n-react';
+import { KibanaThemeProvider } from '../../../kibana_react/public';
+import { CoreSetup } from '../../../../core/public';
 import { ProgressRendererConfig } from '../../common/types';
 import { LazyProgressComponent } from '../components/progress';
-import { withSuspense } from '../../../presentation_util/public';
+import { withSuspense, defaultTheme$ } from '../../../presentation_util/public';
 
 const ProgressComponent = withSuspense(LazyProgressComponent);
 
@@ -26,23 +31,31 @@ const strings = {
     }),
 };
 
-export const progressRenderer = (): ExpressionRenderDefinition<ProgressRendererConfig> => ({
-  name: 'progress',
-  displayName: strings.getDisplayName(),
-  help: strings.getHelpDescription(),
-  reuseDomNode: true,
-  render: async (
-    domNode: HTMLElement,
-    config: ProgressRendererConfig,
-    handlers: IInterpreterRenderHandlers
-  ) => {
-    handlers.onDestroy(() => {
-      unmountComponentAtNode(domNode);
-    });
+export const getProgressRenderer =
+  (theme$: Observable<CoreTheme> = defaultTheme$) =>
+  (): ExpressionRenderDefinition<ProgressRendererConfig> => ({
+    name: 'progress',
+    displayName: strings.getDisplayName(),
+    help: strings.getHelpDescription(),
+    reuseDomNode: true,
+    render: async (
+      domNode: HTMLElement,
+      config: ProgressRendererConfig,
+      handlers: IInterpreterRenderHandlers
+    ) => {
+      handlers.onDestroy(() => {
+        unmountComponentAtNode(domNode);
+      });
 
-    render(
-      <ProgressComponent {...config} parentNode={domNode} onLoaded={handlers.done} />,
-      domNode
-    );
-  },
-});
+      render(
+        <KibanaThemeProvider theme$={theme$}>
+          <I18nProvider>
+            <ProgressComponent {...config} parentNode={domNode} onLoaded={handlers.done} />
+          </I18nProvider>
+        </KibanaThemeProvider>,
+        domNode
+      );
+    },
+  });
+
+export const progressRendererFactory = (core: CoreSetup) => getProgressRenderer(core.theme.theme$);

src/plugins/expression_shape/public/expression_renderers/shape_renderer.tsx

@@ -7,10 +7,14 @@
  */
 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 { 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 { ShapeRendererConfig } from '../../common/types';
 import { LazyShapeComponent } from '../components/shape';
 
@@ -27,25 +31,31 @@ const strings = {
 
 const ShapeComponent = withSuspense(LazyShapeComponent);
 
-export const shapeRenderer = (): ExpressionRenderDefinition<ShapeRendererConfig> => ({
-  name: 'shape',
-  displayName: strings.getDisplayName(),
-  help: strings.getHelpDescription(),
-  reuseDomNode: true,
-  render: async (
-    domNode: HTMLElement,
-    config: ShapeRendererConfig,
-    handlers: IInterpreterRenderHandlers
-  ) => {
-    handlers.onDestroy(() => {
-      unmountComponentAtNode(domNode);
-    });
+export const getShapeRenderer =
+  (theme$: Observable<CoreTheme> = defaultTheme$) =>
+  (): ExpressionRenderDefinition<ShapeRendererConfig> => ({
+    name: 'shape',
+    displayName: strings.getDisplayName(),
+    help: strings.getHelpDescription(),
+    reuseDomNode: true,
+    render: async (
+      domNode: HTMLElement,
+      config: ShapeRendererConfig,
+      handlers: IInterpreterRenderHandlers
+    ) => {
+      handlers.onDestroy(() => {
+        unmountComponentAtNode(domNode);
+      });
 
-    render(
-      <I18nProvider>
-        <ShapeComponent onLoaded={handlers.done} {...config} parentNode={domNode} />
-      </I18nProvider>,
-      domNode
-    );
-  },
-});
+      render(
+        <KibanaThemeProvider theme$={theme$}>
+          <I18nProvider>
+            <ShapeComponent onLoaded={handlers.done} {...config} parentNode={domNode} />
+          </I18nProvider>
+        </KibanaThemeProvider>,
+        domNode
+      );
+    },
+  });
+
+export const shapeRendererFactory = (core: CoreSetup) => getShapeRenderer(core.theme.theme$);

src/plugins/expression_shape/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 { ExpressionShapePlugin } from './plugin';
 
 export type { ExpressionShapePluginSetup, ExpressionShapePluginStart } from './plugin';
@@ -17,10 +14,50 @@ export function plugin() {
   return new ExpressionShapePlugin();
 }
 
-export * from './expression_renderers';
+export {
+  getShapeRenderer,
+  shapeRendererFactory,
+  getProgressRenderer,
+  progressRendererFactory,
+} from './expression_renderers';
+
 export { LazyShapeDrawer } from './components/shape';
 export { LazyProgressDrawer } from './components/progress';
 export { getDefaultShapeData } from './components/reusable';
-export * from './components/shape/types';
-export * from './components/reusable/types';
-export * from '../common/types';
+
+export type {
+  ShapeProps,
+  ShapeAttributes,
+  ShapeContentAttributes,
+  SvgConfig,
+  SvgTextAttributes,
+  CircleParams,
+  RectParams,
+  PathParams,
+  PolygonParams,
+  SpecificShapeContentAttributes,
+  ShapeDrawerProps,
+  ShapeDrawerComponentProps,
+  ShapeRef,
+  ShapeType,
+} from './components/reusable/types';
+
+export { SvgElementTypes } from './components/reusable/types';
+
+export type {
+  Output,
+  ExpressionShapeFunction,
+  ProgressArguments,
+  ProgressOutput,
+  ExpressionProgressFunction,
+  OriginString,
+  ShapeRendererConfig,
+  NodeDimensions,
+  ParentNodeParams,
+  ViewBoxParams,
+  ProgressRendererConfig,
+} from '../common/types';
+
+export { Progress, Shape } from '../common/types';
+
+export type { ShapeComponentProps, Dimensions } from './components/shape/types';

src/plugins/expression_shape/public/plugin.ts

@@ -8,7 +8,7 @@
 
 import { CoreSetup, CoreStart, Plugin } from '../../../core/public';
 import { ExpressionsStart, ExpressionsSetup } from '../../expressions/public';
-import { shapeRenderer, progressRenderer } from './expression_renderers';
+import { shapeRendererFactory, progressRendererFactory } from './expression_renderers';
 import { shapeFunction, progressFunction } from '../common/expression_functions';
 
 interface SetupDeps {
@@ -28,8 +28,8 @@ export class ExpressionShapePlugin
   public setup(core: CoreSetup, { expressions }: SetupDeps): ExpressionShapePluginSetup {
     expressions.registerFunction(shapeFunction);
     expressions.registerFunction(progressFunction);
-    expressions.registerRenderer(shapeRenderer);
-    expressions.registerRenderer(progressRenderer);
+    expressions.registerRenderer(shapeRendererFactory(core));
+    expressions.registerRenderer(progressRendererFactory(core));
   }
 
   public start(core: CoreStart): ExpressionShapePluginStart {}

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

@@ -14,15 +14,17 @@ import {
 import { revealImageRendererFactory } from '../../../../../src/plugins/expression_reveal_image/public';
 import { repeatImageRendererFactory } from '../../../../../src/plugins/expression_repeat_image/public';
 import {
-  shapeRenderer,
-  progressRenderer,
+  shapeRendererFactory,
+  progressRendererFactory,
 } from '../../../../../src/plugins/expression_shape/public';
 
-export const renderFunctions = [imageRenderer, shapeRenderer, progressRenderer];
+export const renderFunctions = [imageRenderer];
 
 export const renderFunctionFactories = [
   debugRendererFactory,
   errorRendererFactory,
+  shapeRendererFactory,
+  progressRendererFactory,
   revealImageRendererFactory,
   repeatImageRendererFactory,
   metricRendererFactory,

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

@@ -18,8 +18,8 @@ import {
 import { getRevealImageRenderer } from '../../../../src/plugins/expression_reveal_image/public';
 import { getRepeatImageRenderer } from '../../../../src/plugins/expression_repeat_image/public';
 import {
-  shapeRenderer as shape,
-  progressRenderer as progress,
+  getShapeRenderer,
+  getProgressRenderer,
 } from '../../../../src/plugins/expression_shape/public';
 import { getMetricRenderer } from '../../../../src/plugins/expression_metric/public';
 
@@ -31,6 +31,8 @@ const renderFunctionsFactories = [
   getTableRenderer,
   getErrorRenderer,
   getDebugRenderer,
+  getShapeRenderer,
+  getProgressRenderer,
   getRevealImageRenderer,
   getRepeatImageRenderer,
   getMetricRenderer,
@@ -41,13 +43,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,
-  progress,
-  shape,
-  ...renderFunctionsFactories.map(unboxFactory),
-];
+export const renderFunctions = [image, pie, plot, ...renderFunctionsFactories.map(unboxFactory)];
 
 export const renderFunctionNames = [...renderFunctions.map((fn) => fn().name)];