[Canvas] Added KibanaThemeProvider to expression_shape.

src/plugins/expression_error/public/expression_renderers/__stories__/error_renderer.stories.tsx

@@ -8,13 +8,13 @@
 
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { errorRenderer } from '../error_renderer';
+import { getErrorRenderer } from '../error_renderer';
 import { Render } from '../../../../presentation_util/public/__stories__';
 
 storiesOf('renderers/error', module).add('default', () => {
   const thrownError = new Error('There was an error');
   const config = {
     error: thrownError,
   };
-  return <Render renderer={errorRenderer} config={config} />;
+  return <Render renderer={getErrorRenderer()} config={config} />;
 });

src/plugins/expression_error/public/expression_renderers/debug_renderer.tsx

@@ -8,9 +8,13 @@
 
 import { render, unmountComponentAtNode } from 'react-dom';
 import React from 'react';
+import { Observable } from 'rxjs';
+import { CoreTheme } from 'kibana/public';
 import { ExpressionRenderDefinition } from 'src/plugins/expressions/common';
 import { i18n } from '@kbn/i18n';
-import { withSuspense } from '../../../../../src/plugins/presentation_util/public';
+import { CoreSetup } from '../../../../core/public';
+import { KibanaThemeProvider } from '../../../kibana_react/public';
+import { withSuspense, defaultTheme$ } from '../../../../../src/plugins/presentation_util/public';
 import { LazyDebugRenderComponent } from '../components';
 import { JSON } from '../../common';
 
@@ -30,13 +34,22 @@ const strings = {
     }),
 };
 
-export const debugRenderer = (): ExpressionRenderDefinition<any> => ({
-  name: 'debug',
-  displayName: strings.getDisplayName(),
-  help: strings.getHelpDescription(),
-  reuseDomNode: true,
-  render(domNode, config, handlers) {
-    handlers.onDestroy(() => unmountComponentAtNode(domNode));
-    render(<Debug parentNode={domNode} payload={config} onLoaded={handlers.done} />, domNode);
-  },
-});
+export const getDebugRenderer =
+  (theme$: Observable<CoreTheme> = defaultTheme$) =>
+  (): ExpressionRenderDefinition<any> => ({
+    name: 'debug',
+    displayName: strings.getDisplayName(),
+    help: strings.getHelpDescription(),
+    reuseDomNode: true,
+    render(domNode, config, handlers) {
+      handlers.onDestroy(() => unmountComponentAtNode(domNode));
+      render(
+        <KibanaThemeProvider theme$={theme$}>
+          <Debug parentNode={domNode} payload={config} onLoaded={handlers.done} />
+        </KibanaThemeProvider>,
+        domNode
+      );
+    },
+  });
+
+export const debugRendererFactory = (core: CoreSetup) => getDebugRenderer(core.theme.theme$);

src/plugins/expression_error/public/expression_renderers/error_renderer.tsx

@@ -5,12 +5,17 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+
 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 { i18n } from '@kbn/i18n';
 import { ExpressionRenderDefinition, IInterpreterRenderHandlers } from 'src/plugins/expressions';
-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 { ErrorRendererConfig } from '../../common/types';
 import { LazyErrorRenderComponent } from '../components';
 
@@ -27,25 +32,31 @@ const errorStrings = {
 
 const ErrorComponent = withSuspense(LazyErrorRenderComponent);
 
-export const errorRenderer = (): ExpressionRenderDefinition<ErrorRendererConfig> => ({
-  name: 'error',
-  displayName: errorStrings.getDisplayName(),
-  help: errorStrings.getHelpDescription(),
-  reuseDomNode: true,
-  render: async (
-    domNode: HTMLElement,
-    config: ErrorRendererConfig,
-    handlers: IInterpreterRenderHandlers
-  ) => {
-    handlers.onDestroy(() => {
-      unmountComponentAtNode(domNode);
-    });
+export const getErrorRenderer =
+  (theme$: Observable<CoreTheme> = defaultTheme$) =>
+  (): ExpressionRenderDefinition<ErrorRendererConfig> => ({
+    name: 'error',
+    displayName: errorStrings.getDisplayName(),
+    help: errorStrings.getHelpDescription(),
+    reuseDomNode: true,
+    render: async (
+      domNode: HTMLElement,
+      config: ErrorRendererConfig,
+      handlers: IInterpreterRenderHandlers
+    ) => {
+      handlers.onDestroy(() => {
+        unmountComponentAtNode(domNode);
+      });
+
+      render(
+        <KibanaThemeProvider theme$={theme$}>
+          <I18nProvider>
+            <ErrorComponent onLoaded={handlers.done} {...config} parentNode={domNode} />
+          </I18nProvider>
+        </KibanaThemeProvider>,
+        domNode
+      );
+    },
+  });
 
-    render(
-      <I18nProvider>
-        <ErrorComponent onLoaded={handlers.done} {...config} parentNode={domNode} />
-      </I18nProvider>,
-      domNode
-    );
-  },
-});
+export const errorRendererFactory = (core: CoreSetup) => getErrorRenderer(core.theme.theme$);

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

@@ -6,9 +6,5 @@
  * Side Public License, v 1.
  */
 
-import { errorRenderer } from './error_renderer';
-import { debugRenderer } from './debug_renderer';
-
-export const renderers = [errorRenderer, debugRenderer];
-
-export { errorRenderer, debugRenderer };
+export { getErrorRenderer, errorRendererFactory } from './error_renderer';
+export { getDebugRenderer, debugRendererFactory } from './debug_renderer';

src/plugins/expression_error/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 { ExpressionErrorPlugin } from './plugin';
 
 export type { ExpressionErrorPluginSetup, ExpressionErrorPluginStart } from './plugin';
@@ -17,5 +14,11 @@ export function plugin() {
   return new ExpressionErrorPlugin();
 }
 
-export * from './expression_renderers';
+export {
+  getErrorRenderer,
+  getDebugRenderer,
+  errorRendererFactory,
+  debugRendererFactory,
+} from './expression_renderers';
+
 export { LazyDebugComponent, LazyErrorComponent } from './components';

src/plugins/expression_error/public/plugin.ts

@@ -8,7 +8,7 @@
 
 import { CoreSetup, CoreStart, Plugin } from '../../../core/public';
 import { ExpressionsStart, ExpressionsSetup } from '../../expressions/public';
-import { errorRenderer, debugRenderer } from './expression_renderers';
+import { debugRendererFactory, errorRendererFactory } from './expression_renderers';
 
 interface SetupDeps {
   expressions: ExpressionsSetup;
@@ -25,8 +25,8 @@ export class ExpressionErrorPlugin
   implements Plugin<ExpressionErrorPluginSetup, ExpressionErrorPluginStart, SetupDeps, StartDeps>
 {
   public setup(core: CoreSetup, { expressions }: SetupDeps): ExpressionErrorPluginSetup {
-    expressions.registerRenderer(errorRenderer);
-    expressions.registerRenderer(debugRenderer);
+    expressions.registerRenderer(errorRendererFactory(core));
+    expressions.registerRenderer(debugRendererFactory(core));
   }
 
   public start(core: CoreStart): ExpressionErrorPluginStart {}

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$);