[Canvas] Expression error

.i18nrc.json

@@ -16,6 +16,7 @@
     "esUi": "src/plugins/es_ui_shared",
     "devTools": "src/plugins/dev_tools",
     "expressions": "src/plugins/expressions",
+    "expressionError": "src/plugins/expression_error",
     "expressionRevealImage": "src/plugins/expression_reveal_image",
     "inputControl": "src/plugins/input_control_vis",
     "inspector": "src/plugins/inspector",

docs/developer/plugin-list.asciidoc

@@ -72,6 +72,10 @@ This API doesn't support angular, for registering angular dev tools, bootstrap a
 |This plugin contains reusable code in the form of self-contained modules (or libraries). Each of these modules exports a set of functionality relevant to the domain of the module.
 
 
+|{kib-repo}blob/{branch}/src/plugins/expression_error/README.md[expressionError]
+|Expression Error plugin adds an error renderer to the expression plugin. The renderer will display the error image.
+
+
 |{kib-repo}blob/{branch}/src/plugins/expression_reveal_image/README.md[expressionRevealImage]
 |Expression Reveal Image plugin adds a revealImage function to the expression plugin and an associated renderer. The renderer will display the given percentage of a given image.
 

packages/kbn-optimizer/limits.yml

@@ -112,3 +112,4 @@ pageLoadAssetSize:
   visTypePie: 35583
   expressionRevealImage: 25675
   cases: 144442
+  expressionError: 22127

src/dev/storybook/aliases.ts

@@ -17,6 +17,7 @@ export const storybookAliases = {
   dashboard_enhanced: 'x-pack/plugins/dashboard_enhanced/.storybook',
   data_enhanced: 'x-pack/plugins/data_enhanced/.storybook',
   embeddable: 'src/plugins/embeddable/.storybook',
+  expression_error: 'src/plugins/expression_error/.storybook',
   expression_reveal_image: 'src/plugins/expression_reveal_image/.storybook',
   infra: 'x-pack/plugins/infra/.storybook',
   security_solution: 'x-pack/plugins/security_solution/.storybook',

src/plugins/expression_error/.i18nrc.json

@@ -0,0 +1,7 @@
+{
+  "prefix": "expressionError",
+  "paths": {
+    "expressionError": "."
+  },
+  "translations": ["translations/ja-JP.json"]
+}

src/plugins/expression_error/README.md

@@ -0,0 +1,9 @@
+# expressionRevealImage
+
+Expression Error plugin adds an `error` renderer to the expression plugin. The renderer will display the error image.
+
+---
+
+## Development
+
+See the [kibana contributing guide](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md) for instructions setting up your development environment.

src/plugins/expression_error/common/constants.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+export const PLUGIN_ID = 'expressionError';
+export const PLUGIN_NAME = 'expressionError';

src/plugins/expression_error/common/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './constants';

src/plugins/expression_error/common/types/expression_renderers.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export type OriginString = 'bottom' | 'left' | 'top' | 'right';
+
+export interface ErrorRendererConfig {
+  error: Error;
+}
+
+export interface NodeDimensions {
+  width: number;
+  height: number;
+}

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

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './expression_renderers';

src/plugins/expression_error/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../..',
+  roots: ['<rootDir>/src/plugins/expression_error'],
+};

src/plugins/expression_error/kibana.json

@@ -0,0 +1,10 @@
+{
+  "id": "expressionError",
+  "version": "1.0.0",
+  "kibanaVersion": "kibana",
+  "server": false,
+  "ui": true,
+  "requiredPlugins": ["expressions", "presentationUtil"],
+  "optionalPlugins": [],
+  "requiredBundles": []
+}

x-pack/plugins/canvas/canvas_plugin_src/renderers/error/error.scss → src/plugins/expression_error/public/components/error.scss

@@ -13,4 +13,4 @@
       cursor: pointer;
     }
   }
-}
+}

src/plugins/expression_error/public/components/error_component.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useState, useEffect, useCallback, MouseEventHandler } from 'react';
+import { EuiIcon, useResizeObserver } from '@elastic/eui';
+import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
+import { ErrorRendererConfig } from '../../common/types';
+import {
+  withSuspense,
+  LazyErrorComponent,
+  LazyPopoverComponent,
+} from '../../../presentation_util/public';
+import './error.scss';
+
+const Error = withSuspense(LazyErrorComponent);
+const Popover = withSuspense(LazyPopoverComponent);
+
+interface ErrorComponentProps extends ErrorRendererConfig {
+  onLoaded: IInterpreterRenderHandlers['done'];
+  parentNode: HTMLElement;
+}
+
+function ErrorComponent({ onLoaded, parentNode, error }: ErrorComponentProps) {
+  const getButtonSize = (node: HTMLElement) => Math.min(node.clientHeight, node.clientWidth);
+  const parentNodeDimensions = useResizeObserver(parentNode);
+
+  const [buttonSize, setButtonSize] = useState<number>(getButtonSize(parentNode));
+
+  const updateErrorView = useCallback(() => {
+    setButtonSize(getButtonSize(parentNode));
+    onLoaded();
+  }, [parentNode, onLoaded]);
+
+  useEffect(() => {
+    updateErrorView();
+  }, [parentNodeDimensions, updateErrorView]);
+
+  const button = (handleClick: MouseEventHandler<any>) => (
+    <EuiIcon
+      className="canvasRenderError__icon"
+      onClick={handleClick}
+      style={{
+        height: buttonSize,
+        width: buttonSize,
+      }}
+      type="alert"
+    />
+  );
+
+  return (
+    <div className="canvasRenderError">
+      <Popover button={button}>{() => <Error payload={{ error }} />}</Popover>
+    </div>
+  );
+}
+
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { ErrorComponent as default };

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

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './error_component';

x-pack/plugins/canvas/canvas_plugin_src/renderers/error/__stories__/error.stories.tsx → src/plugins/expression_error/public/expression_renderers/__stories__/error_renderer.stories.tsx

@@ -1,19 +1,20 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { error } from '../';
-import { Render } from '../../__stories__/render';
+import { errorRenderer } 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={error} config={config} />;
+  return <Render renderer={errorRenderer} config={config} />;
 });

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

@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import React, { lazy } from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+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 { ErrorRendererConfig } from '../../common/types';
+
+const errorStrings = {
+  getDisplayName: () =>
+    i18n.translate('expressionError.renderer.error.displayName', {
+      defaultMessage: 'Error information',
+    }),
+  getHelpDescription: () =>
+    i18n.translate('expressionError.renderer.error.helpDescription', {
+      defaultMessage: 'Render error data in a way that is helpful to users',
+    }),
+};
+
+const LazyErrorComponent = lazy(() => import('../components/error_component'));
+const ErrorComponent = withSuspense(LazyErrorComponent);
+
+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);
+    });
+
+    render(
+      <I18nProvider>
+        <ErrorComponent onLoaded={handlers.done} {...config} parentNode={domNode} />
+      </I18nProvider>,
+      domNode
+    );
+  },
+});

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

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { errorRenderer } from './error_renderer';
+
+export const renderers = [errorRenderer];
+
+export { errorRenderer };

src/plugins/expression_error/public/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ExpressionErrorPlugin } from './plugin';
+
+export type { ExpressionErrorPluginSetup, ExpressionErrorPluginStart } from './plugin';
+
+export function plugin() {
+  return new ExpressionErrorPlugin();
+}
+
+export * from './expression_renderers';

src/plugins/expression_error/public/plugin.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { CoreSetup, CoreStart, Plugin } from '../../../core/public';
+import { ExpressionsStart, ExpressionsSetup } from '../../expressions/public';
+import { errorRenderer } from './expression_renderers';
+
+interface SetupDeps {
+  expressions: ExpressionsSetup;
+}
+
+interface StartDeps {
+  expression: ExpressionsStart;
+}
+
+export type ExpressionErrorPluginSetup = void;
+export type ExpressionErrorPluginStart = void;
+
+export class ExpressionErrorPlugin
+  implements Plugin<ExpressionErrorPluginSetup, ExpressionErrorPluginStart, SetupDeps, StartDeps> {
+  public setup(core: CoreSetup, { expressions }: SetupDeps): ExpressionErrorPluginSetup {
+    expressions.registerRenderer(errorRenderer);
+  }
+
+  public start(core: CoreStart): ExpressionErrorPluginStart {}
+
+  public stop() {}
+}

src/plugins/expression_error/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "composite": true,
+    "outDir": "./target/types",
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "declarationMap": true,
+    "isolatedModules": true
+  },
+  "include": [
+    "common/**/*",
+    "public/**/*",
+    "server/**/*",
+  ],
+  "references": [
+    { "path": "../../core/tsconfig.json" },
+    { "path": "../presentation_util/tsconfig.json" },
+    { "path": "../expressions/tsconfig.json" },
+  ]
+}

x-pack/plugins/canvas/public/components/debug/__stories__/debug.stories.tsx → src/plugins/presentation_util/public/components/debug/__stories__/debug.stories.tsx

@@ -1,8 +1,9 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import React from 'react';

x-pack/plugins/canvas/public/components/debug/__stories__/helpers.tsx → src/plugins/presentation_util/public/components/debug/__stories__/helpers.tsx

@@ -1,8 +1,9 @@
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 export const largePayload = {