[Canvas] Added KibanaThemeProvider to expression_metric.

src/plugins/expression_metric/kibana.json

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

src/plugins/expression_metric/public/expression_renderers/__stories__/metric_renderer.stories.tsx

@@ -9,7 +9,7 @@
 import React, { CSSProperties } from 'react';
 import { storiesOf } from '@storybook/react';
 import { Style } from 'src/plugins/expressions';
-import { metricRenderer } from '../metric_renderer';
+import { getMetricRenderer } from '../metric_renderer';
 import { Render } from '../../../../presentation_util/public/__stories__';
 import { MetricRendererConfig } from '../../../common';
 
@@ -45,7 +45,7 @@ storiesOf('renderers/Metric', module)
       label: '',
       metricFormat: '',
     };
-    return <Render renderer={metricRenderer} config={config} />;
+    return <Render renderer={getMetricRenderer()} config={config} />;
   })
   .add('with number metric', () => {
     const config: MetricRendererConfig = {
@@ -55,7 +55,7 @@ storiesOf('renderers/Metric', module)
       label: '',
       metricFormat: '',
     };
-    return <Render renderer={metricRenderer} config={config} />;
+    return <Render renderer={getMetricRenderer()} config={config} />;
   })
   .add('with string metric', () => {
     const config: MetricRendererConfig = {
@@ -65,7 +65,7 @@ storiesOf('renderers/Metric', module)
       label: '',
       metricFormat: '',
     };
-    return <Render renderer={metricRenderer} config={config} />;
+    return <Render renderer={getMetricRenderer()} config={config} />;
   })
   .add('with label', () => {
     const config: MetricRendererConfig = {
@@ -75,7 +75,7 @@ storiesOf('renderers/Metric', module)
       label: 'Average price',
       metricFormat: '',
     };
-    return <Render renderer={metricRenderer} config={config} />;
+    return <Render renderer={getMetricRenderer()} config={config} />;
   })
   .add('with number metric and a specified format', () => {
     const config: MetricRendererConfig = {
@@ -85,7 +85,7 @@ storiesOf('renderers/Metric', module)
       label: 'Average price',
       metricFormat: '0.00%',
     };
-    return <Render renderer={metricRenderer} config={config} />;
+    return <Render renderer={getMetricRenderer()} config={config} />;
   })
   .add('with formatted string metric and a specified format', () => {
     const config: MetricRendererConfig = {
@@ -95,7 +95,7 @@ storiesOf('renderers/Metric', module)
       label: 'Total Revenue',
       metricFormat: '$0a',
     };
-    return <Render renderer={metricRenderer} config={config} />;
+    return <Render renderer={getMetricRenderer()} config={config} />;
   })
   .add('with invalid metricFont', () => {
     const config: MetricRendererConfig = {
@@ -105,5 +105,5 @@ storiesOf('renderers/Metric', module)
       label: 'Total Revenue',
       metricFormat: '$0a',
     };
-    return <Render renderer={metricRenderer} config={config} />;
+    return <Render renderer={getMetricRenderer()} config={config} />;
   });

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

@@ -6,8 +6,4 @@
  * Side Public License, v 1.
  */
 
-import { metricRenderer } from './metric_renderer';
-
-export const renderers = [metricRenderer];
-
-export { metricRenderer };
+export { metricRendererFactory, getMetricRenderer } from './metric_renderer';

src/plugins/expression_metric/public/expression_renderers/metric_renderer.tsx

@@ -6,10 +6,14 @@
  * Side Public License, v 1.
  */
 import React, { CSSProperties, lazy } from 'react';
+import { Observable } from 'rxjs';
+import { CoreTheme } from 'kibana/public';
 import { render, unmountComponentAtNode } from 'react-dom';
 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 { MetricRendererConfig } from '../../common/types';
 
 const strings = {
@@ -26,30 +30,36 @@ const strings = {
 const LazyMetricComponent = lazy(() => import('../components/metric_component'));
 const MetricComponent = withSuspense(LazyMetricComponent);
 
-export const metricRenderer = (): ExpressionRenderDefinition<MetricRendererConfig> => ({
-  name: 'metric',
-  displayName: strings.getDisplayName(),
-  help: strings.getHelpDescription(),
-  reuseDomNode: true,
-  render: async (
-    domNode: HTMLElement,
-    config: MetricRendererConfig,
-    handlers: IInterpreterRenderHandlers
-  ) => {
-    handlers.onDestroy(() => {
-      unmountComponentAtNode(domNode);
-    });
+export const getMetricRenderer =
+  (theme$: Observable<CoreTheme> = defaultTheme$) =>
+  (): ExpressionRenderDefinition<MetricRendererConfig> => ({
+    name: 'metric',
+    displayName: strings.getDisplayName(),
+    help: strings.getHelpDescription(),
+    reuseDomNode: true,
+    render: async (
+      domNode: HTMLElement,
+      config: MetricRendererConfig,
+      handlers: IInterpreterRenderHandlers
+    ) => {
+      handlers.onDestroy(() => {
+        unmountComponentAtNode(domNode);
+      });
 
-    render(
-      <MetricComponent
-        label={config.label}
-        labelFont={config.labelFont ? (config.labelFont.spec as CSSProperties) : {}}
-        metric={config.metric}
-        metricFont={config.metricFont ? (config.metricFont.spec as CSSProperties) : {}}
-        metricFormat={config.metricFormat}
-      />,
-      domNode,
-      () => handlers.done()
-    );
-  },
-});
+      render(
+        <KibanaThemeProvider theme$={theme$}>
+          <MetricComponent
+            label={config.label}
+            labelFont={config.labelFont ? (config.labelFont.spec as CSSProperties) : {}}
+            metric={config.metric}
+            metricFont={config.metricFont ? (config.metricFont.spec as CSSProperties) : {}}
+            metricFormat={config.metricFormat}
+          />
+        </KibanaThemeProvider>,
+        domNode,
+        () => handlers.done()
+      );
+    },
+  });
+
+export const metricRendererFactory = (core: CoreSetup) => getMetricRenderer(core.theme.theme$);

src/plugins/expression_metric/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 { ExpressionMetricPlugin } from './plugin';
 
 export type { ExpressionMetricPluginSetup, ExpressionMetricPluginStart } from './plugin';
@@ -17,4 +14,4 @@ export function plugin() {
   return new ExpressionMetricPlugin();
 }
 
-export * from './expression_renderers';
+export { metricRendererFactory, getMetricRenderer } from './expression_renderers';

src/plugins/expression_metric/public/plugin.ts

@@ -9,7 +9,7 @@
 import { CoreSetup, CoreStart, Plugin } from '../../../core/public';
 import { ExpressionsStart, ExpressionsSetup } from '../../expressions/public';
 import { metricFunction } from '../common/expression_functions';
-import { metricRenderer } from './expression_renderers';
+import { metricRendererFactory } from './expression_renderers';
 
 interface SetupDeps {
   expressions: ExpressionsSetup;
@@ -27,7 +27,7 @@ export class ExpressionMetricPlugin
 {
   public setup(core: CoreSetup, { expressions }: SetupDeps): ExpressionMetricPluginSetup {
     expressions.registerFunction(metricFunction);
-    expressions.registerRenderer(metricRenderer);
+    expressions.registerRenderer(metricRendererFactory(core));
   }
 
   public start(core: CoreStart): ExpressionMetricPluginStart {}

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

@@ -6,7 +6,7 @@
  */
 
 import { imageRenderer } from '../../../../../src/plugins/expression_image/public';
-import { metricRenderer } from '../../../../../src/plugins/expression_metric/public';
+import { metricRendererFactory } from '../../../../../src/plugins/expression_metric/public';
 import {
   errorRendererFactory,
   debugRendererFactory,
@@ -20,11 +20,14 @@ import {
 
 export const renderFunctions = [
   imageRenderer,
-  metricRenderer,
   revealImageRenderer,
   shapeRenderer,
   repeatImageRenderer,
   progressRenderer,
 ];
 
-export const renderFunctionFactories = [debugRendererFactory, errorRendererFactory];
+export const renderFunctionFactories = [
+  debugRendererFactory,
+  errorRendererFactory,
+  metricRendererFactory,
+];

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

@@ -21,7 +21,7 @@ import {
   shapeRenderer as shape,
   progressRenderer as progress,
 } from '../../../../src/plugins/expression_shape/public';
-import { metricRenderer as metric } from '../../../../src/plugins/expression_metric/public';
+import { getMetricRenderer } from '../../../../src/plugins/expression_metric/public';
 
 const unboxFactory = (factory) => factory();
 
@@ -31,6 +31,7 @@ const renderFunctionsFactories = [
   getTableRenderer,
   getErrorRenderer,
   getDebugRenderer,
+  getMetricRenderer,
 ];
 
 /**
@@ -42,7 +43,6 @@ export const renderFunctions = [
   image,
   repeatImage,
   revealImage,
-  metric,
   pie,
   plot,
   progress,