From 645bc3f9e596e4f1fa6c98968413b87e94179f82 Mon Sep 17 00:00:00 2001 From: Yaroslav Kuznietsov Date: Thu, 15 Jul 2021 12:19:55 +0300 Subject: [PATCH] [Canvas] Expression error (#103048) * Basic setup of error plugin. * Removed not used `function` files at `error` expression. * Moved related components from canvas. * Changed imports of components. * Fixed renderer and storybook. * Fixed types errors. * Added limits. * Removed useless translations and fixed .i18nrc.json * added `done` handler call. * Added more fixes fo i18nc. * Added docs. * More fixes of i18nrc. * Fixed async functions. Written current code, based on https://github.com/storybookjs/storybook/issues/7745 * Fixed one test with Expression input. After changing the way of rendering in stories, all elements are mounting and componentDidMount is involved. The previous snapshot was without mounted `monaco` editor. * Fixed storybook error. * More fixes. * removed unused translations. * Removed handlers and changed the way of handling `resize` and calling `done`. * Fixed i18n error. * Fixed storybook. * Replaced Popover with EuiPopover. * Moved `Popover` back to `canvas` * Removed `Popover` export from presentation_utils components. * Moved error_component and debug_component from presentation_util to expression_error. * Fixed translations and imports. * Moved `debug renderer` to `expression_error` plugin. * Fixed error. * Fixed lazy exports. * Fixed imports * Fixed storybook snapshot. * Removed `.i18nrc.json`. * Fixed color of `error`. * Exported concrete elements from popover. Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> # Conflicts: # packages/kbn-optimizer/limits.yml # src/plugins/expression_error/public/components/debug/debug.tsx --- .i18nrc.json | 1 + docs/developer/plugin-list.asciidoc | 4 ++ packages/kbn-optimizer/limits.yml | 1 + src/dev/storybook/aliases.ts | 1 + .../expression_error/.storybook/main.js | 10 +++ src/plugins/expression_error/README.md | 9 +++ .../expression_error/common/constants.ts | 11 +++ src/plugins/expression_error/common/index.ts | 9 +++ .../common/types/expression_renderers.ts | 18 +++++ .../expression_error/common/types/index.ts | 9 +++ src/plugins/expression_error/jest.config.js | 13 ++++ src/plugins/expression_error/kibana.json | 10 +++ .../__snapshots__/debug.stories.storyshot | 0 .../debug/__stories__/debug.stories.tsx | 5 +- .../components/debug/__stories__/helpers.tsx | 5 +- .../public/components/debug/debug.scss | 0 .../public/components/debug/debug.tsx | 13 ++-- .../public/components/debug/index.tsx | 10 +++ .../public/components/debug_component.tsx | 52 ++++++++++++++ .../public/components/error/error.tsx | 16 ++--- .../public/components/error/index.ts | 10 +++ .../components/error/show_debugging.tsx | 12 ++-- .../public/components/error_component.tsx | 67 +++++++++++++++++++ .../public/components/index.ts | 14 ++++ .../__snapshots__/error.stories.storyshot | 0 .../__stories__/error_renderer.stories.tsx | 11 +-- .../expression_renderers/debug_renderer.tsx | 42 ++++++++++++ .../expression_renderers/error_renderer.tsx | 51 ++++++++++++++ .../public/expression_renderers/index.ts | 14 ++++ src/plugins/expression_error/public/index.ts | 18 +++++ src/plugins/expression_error/public/plugin.ts | 34 ++++++++++ src/plugins/expression_error/tsconfig.json | 21 ++++++ .../canvas_plugin_src/renderers/core.ts | 4 -- .../canvas_plugin_src/renderers/debug.tsx | 38 ----------- .../renderers/error/error.scss | 16 ----- .../renderers/error/index.tsx | 58 ---------------- .../canvas_plugin_src/renderers/external.ts | 3 +- x-pack/plugins/canvas/i18n/renderers.ts | 10 --- x-pack/plugins/canvas/kibana.json | 1 + .../arg_add_popover/arg_add_popover.tsx | 6 +- .../color_picker_popover.tsx | 3 +- .../datasource_component.stories.tsx | 2 + .../datasource/datasource_component.js | 3 + .../datasource_preview/datasource_preview.js | 5 +- .../canvas/public/components/debug/index.tsx | 8 --- .../canvas/public/components/error/index.ts | 8 --- .../expression_input.stories.storyshot | 13 +++- .../home/__snapshots__/home.stories.storyshot | 19 +++++- .../public/components/popover/popover.tsx | 1 - .../edit_menu/edit_menu.component.tsx | 3 +- .../element_menu/element_menu.component.tsx | 3 +- .../share_menu/share_menu.component.tsx | 3 +- .../view_menu/view_menu.component.tsx | 3 +- x-pack/plugins/canvas/public/style/index.scss | 1 - .../shareable_runtime/supported_renderers.js | 6 +- .../canvas/storybook/storyshots.test.tsx | 21 +++++- x-pack/plugins/canvas/tsconfig.json | 1 + .../translations/translations/ja-JP.json | 13 ++-- .../translations/translations/zh-CN.json | 13 ++-- 59 files changed, 538 insertions(+), 218 deletions(-) create mode 100644 src/plugins/expression_error/.storybook/main.js create mode 100755 src/plugins/expression_error/README.md create mode 100644 src/plugins/expression_error/common/constants.ts create mode 100755 src/plugins/expression_error/common/index.ts create mode 100644 src/plugins/expression_error/common/types/expression_renderers.ts create mode 100644 src/plugins/expression_error/common/types/index.ts create mode 100644 src/plugins/expression_error/jest.config.js create mode 100755 src/plugins/expression_error/kibana.json rename {x-pack/plugins/canvas => src/plugins/expression_error}/public/components/debug/__stories__/__snapshots__/debug.stories.storyshot (100%) rename {x-pack/plugins/canvas => src/plugins/expression_error}/public/components/debug/__stories__/debug.stories.tsx (72%) rename {x-pack/plugins/canvas => src/plugins/expression_error}/public/components/debug/__stories__/helpers.tsx (99%) rename {x-pack/plugins/canvas => src/plugins/expression_error}/public/components/debug/debug.scss (100%) rename {x-pack/plugins/canvas => src/plugins/expression_error}/public/components/debug/debug.tsx (66%) create mode 100644 src/plugins/expression_error/public/components/debug/index.tsx create mode 100644 src/plugins/expression_error/public/components/debug_component.tsx rename {x-pack/plugins/canvas => src/plugins/expression_error}/public/components/error/error.tsx (76%) create mode 100644 src/plugins/expression_error/public/components/error/index.ts rename {x-pack/plugins/canvas => src/plugins/expression_error}/public/components/error/show_debugging.tsx (77%) create mode 100644 src/plugins/expression_error/public/components/error_component.tsx create mode 100644 src/plugins/expression_error/public/components/index.ts rename {x-pack/plugins/canvas/canvas_plugin_src/renderers/error => src/plugins/expression_error/public/expression_renderers}/__stories__/__snapshots__/error.stories.storyshot (100%) rename 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 (51%) create mode 100644 src/plugins/expression_error/public/expression_renderers/debug_renderer.tsx create mode 100644 src/plugins/expression_error/public/expression_renderers/error_renderer.tsx create mode 100644 src/plugins/expression_error/public/expression_renderers/index.ts create mode 100755 src/plugins/expression_error/public/index.ts create mode 100755 src/plugins/expression_error/public/plugin.ts create mode 100644 src/plugins/expression_error/tsconfig.json delete mode 100644 x-pack/plugins/canvas/canvas_plugin_src/renderers/debug.tsx delete mode 100644 x-pack/plugins/canvas/canvas_plugin_src/renderers/error/error.scss delete mode 100644 x-pack/plugins/canvas/canvas_plugin_src/renderers/error/index.tsx delete mode 100644 x-pack/plugins/canvas/public/components/debug/index.tsx delete mode 100644 x-pack/plugins/canvas/public/components/error/index.ts diff --git a/.i18nrc.json b/.i18nrc.json index 390e5e917d08e..732644b43e1f7 100644 --- a/.i18nrc.json +++ b/.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", diff --git a/docs/developer/plugin-list.asciidoc b/docs/developer/plugin-list.asciidoc index 63c55d5944115..0223b89a41ba7 100644 --- a/docs/developer/plugin-list.asciidoc +++ b/docs/developer/plugin-list.asciidoc @@ -70,6 +70,10 @@ This API doesn't support angular, for registering angular dev tools, bootstrap a |WARNING: Missing README. +|{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. diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml index 83a834e40fc9a..24b8b9853fff9 100644 --- a/packages/kbn-optimizer/limits.yml +++ b/packages/kbn-optimizer/limits.yml @@ -112,3 +112,4 @@ pageLoadAssetSize: visTypePie: 35583 expressionRevealImage: 25675 cases: 144442 + expressionError: 22127 diff --git a/src/dev/storybook/aliases.ts b/src/dev/storybook/aliases.ts index 6fc0841551fad..15497258d4574 100644 --- a/src/dev/storybook/aliases.ts +++ b/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', diff --git a/src/plugins/expression_error/.storybook/main.js b/src/plugins/expression_error/.storybook/main.js new file mode 100644 index 0000000000000..742239e638b8a --- /dev/null +++ b/src/plugins/expression_error/.storybook/main.js @@ -0,0 +1,10 @@ +/* + * 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. + */ + +// eslint-disable-next-line import/no-commonjs +module.exports = require('@kbn/storybook').defaultConfig; diff --git a/src/plugins/expression_error/README.md b/src/plugins/expression_error/README.md new file mode 100755 index 0000000000000..5e22d8fc652c7 --- /dev/null +++ b/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. diff --git a/src/plugins/expression_error/common/constants.ts b/src/plugins/expression_error/common/constants.ts new file mode 100644 index 0000000000000..3a522d200090d --- /dev/null +++ b/src/plugins/expression_error/common/constants.ts @@ -0,0 +1,11 @@ +/* + * 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'; + +export const JSON = 'JSON'; diff --git a/src/plugins/expression_error/common/index.ts b/src/plugins/expression_error/common/index.ts new file mode 100755 index 0000000000000..d8989abcc3d6f --- /dev/null +++ b/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'; diff --git a/src/plugins/expression_error/common/types/expression_renderers.ts b/src/plugins/expression_error/common/types/expression_renderers.ts new file mode 100644 index 0000000000000..25a9d5edac4ad --- /dev/null +++ b/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; +} diff --git a/src/plugins/expression_error/common/types/index.ts b/src/plugins/expression_error/common/types/index.ts new file mode 100644 index 0000000000000..22961a0dc2fe0 --- /dev/null +++ b/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'; diff --git a/src/plugins/expression_error/jest.config.js b/src/plugins/expression_error/jest.config.js new file mode 100644 index 0000000000000..64f3e9292ff07 --- /dev/null +++ b/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: ['/src/plugins/expression_error'], +}; diff --git a/src/plugins/expression_error/kibana.json b/src/plugins/expression_error/kibana.json new file mode 100755 index 0000000000000..9d8dd566d5b3a --- /dev/null +++ b/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": [] +} diff --git a/x-pack/plugins/canvas/public/components/debug/__stories__/__snapshots__/debug.stories.storyshot b/src/plugins/expression_error/public/components/debug/__stories__/__snapshots__/debug.stories.storyshot similarity index 100% rename from x-pack/plugins/canvas/public/components/debug/__stories__/__snapshots__/debug.stories.storyshot rename to src/plugins/expression_error/public/components/debug/__stories__/__snapshots__/debug.stories.storyshot diff --git a/x-pack/plugins/canvas/public/components/debug/__stories__/debug.stories.tsx b/src/plugins/expression_error/public/components/debug/__stories__/debug.stories.tsx similarity index 72% rename from x-pack/plugins/canvas/public/components/debug/__stories__/debug.stories.tsx rename to src/plugins/expression_error/public/components/debug/__stories__/debug.stories.tsx index f29ab4b7bfda4..7dce5e8f1862b 100644 --- a/x-pack/plugins/canvas/public/components/debug/__stories__/debug.stories.tsx +++ b/src/plugins/expression_error/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'; diff --git a/x-pack/plugins/canvas/public/components/debug/__stories__/helpers.tsx b/src/plugins/expression_error/public/components/debug/__stories__/helpers.tsx similarity index 99% rename from x-pack/plugins/canvas/public/components/debug/__stories__/helpers.tsx rename to src/plugins/expression_error/public/components/debug/__stories__/helpers.tsx index 38ff5977254f9..666731e199b4d 100644 --- a/x-pack/plugins/canvas/public/components/debug/__stories__/helpers.tsx +++ b/src/plugins/expression_error/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 = { diff --git a/x-pack/plugins/canvas/public/components/debug/debug.scss b/src/plugins/expression_error/public/components/debug/debug.scss similarity index 100% rename from x-pack/plugins/canvas/public/components/debug/debug.scss rename to src/plugins/expression_error/public/components/debug/debug.scss diff --git a/x-pack/plugins/canvas/public/components/debug/debug.tsx b/src/plugins/expression_error/public/components/debug/debug.tsx similarity index 66% rename from x-pack/plugins/canvas/public/components/debug/debug.tsx rename to src/plugins/expression_error/public/components/debug/debug.tsx index 243325228f80a..925616d5550b1 100644 --- a/x-pack/plugins/canvas/public/components/debug/debug.tsx +++ b/src/plugins/expression_error/public/components/debug/debug.tsx @@ -1,13 +1,14 @@ /* * 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 PropTypes from 'prop-types'; import { EuiCode } from '@elastic/eui'; +import './debug.scss'; const LimitRows = (key: string, value: any) => { if (key === 'rows') { @@ -16,14 +17,10 @@ const LimitRows = (key: string, value: any) => { return value; }; -export const Debug = ({ payload }: any) => ( +export const Debug = ({ payload }: { payload: unknown }) => ( 
       {JSON.stringify(payload, LimitRows, 2)}
); - -Debug.propTypes = { - payload: PropTypes.object.isRequired, -}; diff --git a/src/plugins/expression_error/public/components/debug/index.tsx b/src/plugins/expression_error/public/components/debug/index.tsx new file mode 100644 index 0000000000000..1984eecfe4e39 --- /dev/null +++ b/src/plugins/expression_error/public/components/debug/index.tsx @@ -0,0 +1,10 @@ +/* + * 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. + */ + +// eslint-disable-next-line import/no-default-export +export { Debug as default } from './debug'; diff --git a/src/plugins/expression_error/public/components/debug_component.tsx b/src/plugins/expression_error/public/components/debug_component.tsx new file mode 100644 index 0000000000000..6cb927380d669 --- /dev/null +++ b/src/plugins/expression_error/public/components/debug_component.tsx @@ -0,0 +1,52 @@ +/* + * 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 } from 'react'; +import { useResizeObserver } from '@elastic/eui'; +import { IInterpreterRenderHandlers } from '../../../expressions'; +import { withSuspense } from '../../../presentation_util/public'; +import { NodeDimensions } from '../../common/types'; +import { LazyDebugComponent } from '.'; + +const Debug = withSuspense(LazyDebugComponent); + +interface DebugComponentProps { + onLoaded: IInterpreterRenderHandlers['done']; + parentNode: HTMLElement; + payload: any; +} + +function DebugComponent({ onLoaded, parentNode, payload }: DebugComponentProps) { + const parentNodeDimensions = useResizeObserver(parentNode); + const [dimensions, setDimensions] = useState({ + width: parentNode.offsetWidth, + height: parentNode.offsetHeight, + }); + + const updateDebugView = useCallback(() => { + setDimensions({ + width: parentNode.offsetWidth, + height: parentNode.offsetHeight, + }); + onLoaded(); + }, [parentNode, onLoaded]); + + useEffect(() => { + updateDebugView(); + }, [parentNodeDimensions, updateDebugView]); + + return ( +
+ +
+ ); +} + +// default export required for React.Lazy +// eslint-disable-next-line import/no-default-export +export { DebugComponent as default }; diff --git a/x-pack/plugins/canvas/public/components/error/error.tsx b/src/plugins/expression_error/public/components/error/error.tsx similarity index 76% rename from x-pack/plugins/canvas/public/components/error/error.tsx rename to src/plugins/expression_error/public/components/error/error.tsx index cb2c2cd5d58c1..99318357d8602 100644 --- a/x-pack/plugins/canvas/public/components/error/error.tsx +++ b/src/plugins/expression_error/public/components/error/error.tsx @@ -1,28 +1,28 @@ /* * 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, { FC } from 'react'; -import PropTypes from 'prop-types'; import { EuiCallOut } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { get } from 'lodash'; - import { ShowDebugging } from './show_debugging'; const strings = { getDescription: () => - i18n.translate('xpack.canvas.errorComponent.description', { + i18n.translate('expressionError.errorComponent.description', { defaultMessage: 'Expression failed with the message:', }), getTitle: () => - i18n.translate('xpack.canvas.errorComponent.title', { + i18n.translate('expressionError.errorComponent.title', { defaultMessage: 'Whoops! Expression failed', }), }; + export interface Props { payload: { error: Error; @@ -46,7 +46,3 @@ export const Error: FC = ({ payload }) => { ); }; - -Error.propTypes = { - payload: PropTypes.object.isRequired, -}; diff --git a/src/plugins/expression_error/public/components/error/index.ts b/src/plugins/expression_error/public/components/error/index.ts new file mode 100644 index 0000000000000..4edaa4260d1ce --- /dev/null +++ b/src/plugins/expression_error/public/components/error/index.ts @@ -0,0 +1,10 @@ +/* + * 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. + */ + +// eslint-disable-next-line import/no-default-export +export { Error as default } from './error'; diff --git a/x-pack/plugins/canvas/public/components/error/show_debugging.tsx b/src/plugins/expression_error/public/components/error/show_debugging.tsx similarity index 77% rename from x-pack/plugins/canvas/public/components/error/show_debugging.tsx rename to src/plugins/expression_error/public/components/error/show_debugging.tsx index 844bd9fdbff6e..5ce3f79a6139b 100644 --- a/x-pack/plugins/canvas/public/components/error/show_debugging.tsx +++ b/src/plugins/expression_error/public/components/error/show_debugging.tsx @@ -1,14 +1,14 @@ /* * 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, { FC, useState } from 'react'; -import PropTypes from 'prop-types'; import { EuiButtonEmpty } from '@elastic/eui'; -import { Debug } from '../debug'; +import Debug from '../debug'; import { Props } from './error'; export const ShowDebugging: FC = ({ payload }) => { @@ -30,7 +30,3 @@ export const ShowDebugging: FC = ({ payload }) => { ); }; - -ShowDebugging.propTypes = { - payload: PropTypes.object.isRequired, -}; diff --git a/src/plugins/expression_error/public/components/error_component.tsx b/src/plugins/expression_error/public/components/error_component.tsx new file mode 100644 index 0000000000000..58161d8a068a2 --- /dev/null +++ b/src/plugins/expression_error/public/components/error_component.tsx @@ -0,0 +1,67 @@ +/* + * 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 } from 'react'; +import { EuiIcon, useResizeObserver, EuiPopover } from '@elastic/eui'; +import { IInterpreterRenderHandlers } from '../../../expressions'; +import { withSuspense } from '../../../presentation_util/public'; +import { ErrorRendererConfig } from '../../common/types'; +import { LazyErrorComponent } from '.'; + +const Error = withSuspense(LazyErrorComponent); + +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(getButtonSize(parentNode)); + const [isPopoverOpen, setPopoverOpen] = useState(false); + + const handlePopoverClick = () => setPopoverOpen(!isPopoverOpen); + const closePopover = () => setPopoverOpen(false); + + const updateErrorView = useCallback(() => { + setButtonSize(getButtonSize(parentNode)); + onLoaded(); + }, [parentNode, onLoaded]); + + useEffect(() => { + updateErrorView(); + }, [parentNodeDimensions, updateErrorView]); + + return ( +
+ + } + isOpen={isPopoverOpen} + > + + +
+ ); +} + +// default export required for React.Lazy +// eslint-disable-next-line import/no-default-export +export { ErrorComponent as default }; diff --git a/src/plugins/expression_error/public/components/index.ts b/src/plugins/expression_error/public/components/index.ts new file mode 100644 index 0000000000000..23eb02fa063a7 --- /dev/null +++ b/src/plugins/expression_error/public/components/index.ts @@ -0,0 +1,14 @@ +/* + * 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 { lazy } from 'react'; + +export const LazyErrorComponent = lazy(() => import('./error')); +export const LazyDebugComponent = lazy(() => import('./debug')); + +export const LazyErrorRenderComponent = lazy(() => import('./error_component')); +export const LazyDebugRenderComponent = lazy(() => import('./debug_component')); diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/error/__stories__/__snapshots__/error.stories.storyshot b/src/plugins/expression_error/public/expression_renderers/__stories__/__snapshots__/error.stories.storyshot similarity index 100% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/error/__stories__/__snapshots__/error.stories.storyshot rename to src/plugins/expression_error/public/expression_renderers/__stories__/__snapshots__/error.stories.storyshot diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/error/__stories__/error.stories.tsx b/src/plugins/expression_error/public/expression_renderers/__stories__/error_renderer.stories.tsx similarity index 51% rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/error/__stories__/error.stories.tsx rename to src/plugins/expression_error/public/expression_renderers/__stories__/error_renderer.stories.tsx index 9598fa00e4e35..9081a8512c11a 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/error/__stories__/error.stories.tsx +++ b/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 ; + return ; }); diff --git a/src/plugins/expression_error/public/expression_renderers/debug_renderer.tsx b/src/plugins/expression_error/public/expression_renderers/debug_renderer.tsx new file mode 100644 index 0000000000000..e3cf86b67148f --- /dev/null +++ b/src/plugins/expression_error/public/expression_renderers/debug_renderer.tsx @@ -0,0 +1,42 @@ +/* + * 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 { render, unmountComponentAtNode } from 'react-dom'; +import React from 'react'; +import { ExpressionRenderDefinition } from 'src/plugins/expressions/common'; +import { i18n } from '@kbn/i18n'; +import { withSuspense } from '../../../../../src/plugins/presentation_util/public'; +import { LazyDebugRenderComponent } from '../components'; +import { JSON } from '../../common'; + +const Debug = withSuspense(LazyDebugRenderComponent); + +const strings = { + getDisplayName: () => + i18n.translate('expressionError.renderer.debug.displayName', { + defaultMessage: 'Debug', + }), + getHelpDescription: () => + i18n.translate('expressionError.renderer.debug.helpDescription', { + defaultMessage: 'Render debug output as formatted {JSON}', + values: { + JSON, + }, + }), +}; + +export const debugRenderer = (): ExpressionRenderDefinition => ({ + name: 'debug', + displayName: strings.getDisplayName(), + help: strings.getHelpDescription(), + reuseDomNode: true, + render(domNode, config, handlers) { + handlers.onDestroy(() => unmountComponentAtNode(domNode)); + render(, domNode); + }, +}); diff --git a/src/plugins/expression_error/public/expression_renderers/error_renderer.tsx b/src/plugins/expression_error/public/expression_renderers/error_renderer.tsx new file mode 100644 index 0000000000000..8ce4d5fdbbbca --- /dev/null +++ b/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 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'; +import { LazyErrorRenderComponent } from '../components'; + +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 ErrorComponent = withSuspense(LazyErrorRenderComponent); + +export const errorRenderer = (): ExpressionRenderDefinition => ({ + name: 'error', + displayName: errorStrings.getDisplayName(), + help: errorStrings.getHelpDescription(), + reuseDomNode: true, + render: async ( + domNode: HTMLElement, + config: ErrorRendererConfig, + handlers: IInterpreterRenderHandlers + ) => { + handlers.onDestroy(() => { + unmountComponentAtNode(domNode); + }); + + render( + + + , + domNode + ); + }, +}); diff --git a/src/plugins/expression_error/public/expression_renderers/index.ts b/src/plugins/expression_error/public/expression_renderers/index.ts new file mode 100644 index 0000000000000..237ee5644cdc0 --- /dev/null +++ b/src/plugins/expression_error/public/expression_renderers/index.ts @@ -0,0 +1,14 @@ +/* + * 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'; +import { debugRenderer } from './debug_renderer'; + +export const renderers = [errorRenderer, debugRenderer]; + +export { errorRenderer, debugRenderer }; diff --git a/src/plugins/expression_error/public/index.ts b/src/plugins/expression_error/public/index.ts new file mode 100755 index 0000000000000..04c29a96b853a --- /dev/null +++ b/src/plugins/expression_error/public/index.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. + */ + +import { ExpressionErrorPlugin } from './plugin'; + +export type { ExpressionErrorPluginSetup, ExpressionErrorPluginStart } from './plugin'; + +export function plugin() { + return new ExpressionErrorPlugin(); +} + +export * from './expression_renderers'; +export { LazyDebugComponent, LazyErrorComponent } from './components'; diff --git a/src/plugins/expression_error/public/plugin.ts b/src/plugins/expression_error/public/plugin.ts new file mode 100755 index 0000000000000..3727cab5436c9 --- /dev/null +++ b/src/plugins/expression_error/public/plugin.ts @@ -0,0 +1,34 @@ +/* + * 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, debugRenderer } from './expression_renderers'; + +interface SetupDeps { + expressions: ExpressionsSetup; +} + +interface StartDeps { + expression: ExpressionsStart; +} + +export type ExpressionErrorPluginSetup = void; +export type ExpressionErrorPluginStart = void; + +export class ExpressionErrorPlugin + implements Plugin { + public setup(core: CoreSetup, { expressions }: SetupDeps): ExpressionErrorPluginSetup { + expressions.registerRenderer(errorRenderer); + expressions.registerRenderer(debugRenderer); + } + + public start(core: CoreStart): ExpressionErrorPluginStart {} + + public stop() {} +} diff --git a/src/plugins/expression_error/tsconfig.json b/src/plugins/expression_error/tsconfig.json new file mode 100644 index 0000000000000..aa4562ec73576 --- /dev/null +++ b/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" }, + ] +} diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.ts index 3295332bb6316..906f1646757a7 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.ts @@ -5,8 +5,6 @@ * 2.0. */ -import { debug } from './debug'; -import { error } from './error'; import { image } from './image'; import { markdown } from './markdown'; import { metric } from './metric'; @@ -19,8 +17,6 @@ import { table } from './table'; import { text } from './text'; export const renderFunctions = [ - debug, - error, image, markdown, metric, diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/debug.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/debug.tsx deleted file mode 100644 index 5870338ff6894..0000000000000 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/debug.tsx +++ /dev/null @@ -1,38 +0,0 @@ -/* - * 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. - */ - -import ReactDOM from 'react-dom'; -import React from 'react'; -import { Debug } from '../../public/components/debug'; -import { RendererStrings } from '../../i18n'; -import { RendererFactory } from '../../types'; - -const { debug: strings } = RendererStrings; - -export const debug: RendererFactory = () => ({ - name: 'debug', - displayName: strings.getDisplayName(), - help: strings.getHelpDescription(), - reuseDomNode: true, - render(domNode, config, handlers) { - const renderDebug = () => ( -
- -
- ); - - ReactDOM.render(renderDebug(), domNode, () => handlers.done()); - - if (handlers.onResize) { - handlers.onResize(() => { - ReactDOM.render(renderDebug(), domNode, () => handlers.done()); - }); - } - - handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode)); - }, -}); diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/error/error.scss b/x-pack/plugins/canvas/canvas_plugin_src/renderers/error/error.scss deleted file mode 100644 index 9229c1f88a096..0000000000000 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/error/error.scss +++ /dev/null @@ -1,16 +0,0 @@ -.canvasRenderError { - display: flex; - justify-content: center; - align-items: center; - - .canvasRenderError__icon { - opacity: .4; - stroke: $euiColorEmptyShade; - stroke-width: .2px; - - &:hover { - opacity: .6; - cursor: pointer; - } - } -} diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/error/index.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/error/index.tsx deleted file mode 100644 index dcf83c68f0c75..0000000000000 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/error/index.tsx +++ /dev/null @@ -1,58 +0,0 @@ -/* - * 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. - */ - -import ReactDOM from 'react-dom'; -import React, { MouseEventHandler } from 'react'; -import { EuiIcon } from '@elastic/eui'; -import { Error } from '../../../public/components/error'; -import { Popover } from '../../../public/components/popover'; -import { RendererStrings } from '../../../i18n'; -import { RendererFactory } from '../../../types'; - -export interface Config { - error: Error; -} - -const { error: strings } = RendererStrings; - -export const error: RendererFactory = () => ({ - name: 'error', - displayName: strings.getDisplayName(), - help: strings.getHelpDescription(), - reuseDomNode: true, - render(domNode, config, handlers) { - const draw = () => { - const buttonSize = Math.min(domNode.clientHeight, domNode.clientWidth); - const button = (handleClick: MouseEventHandler) => ( - - ); - - ReactDOM.render( -
- {() => } -
, - - domNode, - () => handlers.done() - ); - }; - - draw(); - - handlers.onResize(draw); - - handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode)); - }, -}); diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts index bf9b6a744e686..1d032aa829bc0 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts +++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts @@ -6,6 +6,7 @@ */ import { revealImageRenderer } from '../../../../../src/plugins/expression_reveal_image/public'; +import { errorRenderer, debugRenderer } from '../../../../../src/plugins/expression_error/public'; -export const renderFunctions = [revealImageRenderer]; +export const renderFunctions = [revealImageRenderer, errorRenderer, debugRenderer]; export const renderFunctionFactories = []; diff --git a/x-pack/plugins/canvas/i18n/renderers.ts b/x-pack/plugins/canvas/i18n/renderers.ts index 29687155818e7..fa1fbc063dbe6 100644 --- a/x-pack/plugins/canvas/i18n/renderers.ts +++ b/x-pack/plugins/canvas/i18n/renderers.ts @@ -55,16 +55,6 @@ export const RendererStrings = { defaultMessage: 'Renders an embeddable Saved Object from other parts of Kibana', }), }, - error: { - getDisplayName: () => - i18n.translate('xpack.canvas.renderer.error.displayName', { - defaultMessage: 'Error information', - }), - getHelpDescription: () => - i18n.translate('xpack.canvas.renderer.error.helpDescription', { - defaultMessage: 'Render error data in a way that is helpful to users', - }), - }, image: { getDisplayName: () => i18n.translate('xpack.canvas.renderer.image.displayName', { diff --git a/x-pack/plugins/canvas/kibana.json b/x-pack/plugins/canvas/kibana.json index 85d2e0709cb3e..545eae742a89e 100644 --- a/x-pack/plugins/canvas/kibana.json +++ b/x-pack/plugins/canvas/kibana.json @@ -10,6 +10,7 @@ "charts", "data", "embeddable", + "expressionError", "expressionRevealImage", "expressions", "features", diff --git a/x-pack/plugins/canvas/public/components/arg_add_popover/arg_add_popover.tsx b/x-pack/plugins/canvas/public/components/arg_add_popover/arg_add_popover.tsx index d9df1e4661fbf..e1cd5c55393fb 100644 --- a/x-pack/plugins/canvas/public/components/arg_add_popover/arg_add_popover.tsx +++ b/x-pack/plugins/canvas/public/components/arg_add_popover/arg_add_popover.tsx @@ -9,9 +9,7 @@ import React, { MouseEventHandler, FC } from 'react'; import PropTypes from 'prop-types'; import { EuiButtonIcon } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; - -// @ts-expect-error untyped local -import { Popover, PopoverChildrenProps } from '../popover'; +import { Popover } from '../popover'; import { ArgAdd } from '../arg_add'; // @ts-expect-error untyped local import { Arg } from '../../expression_types/arg'; @@ -49,7 +47,7 @@ export const ArgAddPopover: FC = ({ options }) => { panelPaddingSize="none" button={button} > - {({ closePopover }: PopoverChildrenProps) => + {({ closePopover }) => options.map((opt) => ( )) .add('datasource with expression arguments', () => ( @@ -90,5 +91,6 @@ storiesOf('components/datasource/DatasourceComponent', module) setPreviewing={action('setPreviewing')} isInvalid={false} setInvalid={action('setInvalid')} + renderError={action('renderError')} /> )); diff --git a/x-pack/plugins/canvas/public/components/datasource/datasource_component.js b/x-pack/plugins/canvas/public/components/datasource/datasource_component.js index f09ce4c925820..c1df18fc06d55 100644 --- a/x-pack/plugins/canvas/public/components/datasource/datasource_component.js +++ b/x-pack/plugins/canvas/public/components/datasource/datasource_component.js @@ -60,6 +60,7 @@ export class DatasourceComponent extends PureComponent { setPreviewing: PropTypes.func, isInvalid: PropTypes.bool, setInvalid: PropTypes.func, + renderError: PropTypes.func, }; state = { defaultIndex: '' }; @@ -125,6 +126,7 @@ export class DatasourceComponent extends PureComponent { setPreviewing, isInvalid, setInvalid, + renderError, } = this.props; const { defaultIndex } = this.state; @@ -155,6 +157,7 @@ export class DatasourceComponent extends PureComponent { isInvalid, setInvalid, defaultIndex, + renderError, }); const hasExpressionArgs = Object.values(stateArgs).some((a) => a && typeof a[0] === 'object'); diff --git a/x-pack/plugins/canvas/public/components/datasource/datasource_preview/datasource_preview.js b/x-pack/plugins/canvas/public/components/datasource/datasource_preview/datasource_preview.js index 2eb42c5cb98dc..a45613f4bc96b 100644 --- a/x-pack/plugins/canvas/public/components/datasource/datasource_preview/datasource_preview.js +++ b/x-pack/plugins/canvas/public/components/datasource/datasource_preview/datasource_preview.js @@ -20,8 +20,11 @@ import { import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; +import { withSuspense } from '../../../../../../../src/plugins/presentation_util/public'; +import { LazyErrorComponent } from '../../../../../../../src/plugins/expression_error/public'; import { Datatable } from '../../datatable'; -import { Error } from '../../error'; + +const Error = withSuspense(LazyErrorComponent); const strings = { getEmptyFirstLineDescription: () => diff --git a/x-pack/plugins/canvas/public/components/debug/index.tsx b/x-pack/plugins/canvas/public/components/debug/index.tsx deleted file mode 100644 index 8adec03e85408..0000000000000 --- a/x-pack/plugins/canvas/public/components/debug/index.tsx +++ /dev/null @@ -1,8 +0,0 @@ -/* - * 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. - */ - -export { Debug } from './debug'; diff --git a/x-pack/plugins/canvas/public/components/error/index.ts b/x-pack/plugins/canvas/public/components/error/index.ts deleted file mode 100644 index 65c4af8a369ae..0000000000000 --- a/x-pack/plugins/canvas/public/components/error/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -/* - * 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. - */ - -export { Error } from './error'; diff --git a/x-pack/plugins/canvas/public/components/expression_input/__stories__/__snapshots__/expression_input.stories.storyshot b/x-pack/plugins/canvas/public/components/expression_input/__stories__/__snapshots__/expression_input.stories.storyshot index 5c17eb2b68137..99d5dc3c115be 100644 --- a/x-pack/plugins/canvas/public/components/expression_input/__stories__/__snapshots__/expression_input.stories.storyshot +++ b/x-pack/plugins/canvas/public/components/expression_input/__stories__/__snapshots__/expression_input.stories.storyshot @@ -16,7 +16,18 @@ exports[`Storyshots components/ExpressionInput default 1`] = ` id="generated-id" onBlur={[Function]} onFocus={[Function]} - /> + > +
+
+
diff --git a/x-pack/plugins/canvas/public/components/home/__snapshots__/home.stories.storyshot b/x-pack/plugins/canvas/public/components/home/__snapshots__/home.stories.storyshot index 770e94ec4b174..02f54723abd42 100644 --- a/x-pack/plugins/canvas/public/components/home/__snapshots__/home.stories.storyshot +++ b/x-pack/plugins/canvas/public/components/home/__snapshots__/home.stories.storyshot @@ -123,9 +123,22 @@ exports[`Storyshots Home Home Page 1`] = `
- +
+
+ +
+
diff --git a/x-pack/plugins/canvas/public/components/popover/popover.tsx b/x-pack/plugins/canvas/public/components/popover/popover.tsx index 275d800fe2ca1..a2793b3759f1e 100644 --- a/x-pack/plugins/canvas/public/components/popover/popover.tsx +++ b/x-pack/plugins/canvas/public/components/popover/popover.tsx @@ -5,7 +5,6 @@ * 2.0. */ -/* eslint react/no-did-mount-set-state: 0, react/forbid-elements: 0 */ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { EuiPopover, EuiToolTip } from '@elastic/eui'; diff --git a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.component.tsx b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.component.tsx index efc7f2fae8f8b..f501410b26a74 100644 --- a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.component.tsx +++ b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.component.tsx @@ -9,10 +9,9 @@ import React, { Fragment, FunctionComponent, useState } from 'react'; import PropTypes from 'prop-types'; import { EuiButtonEmpty, EuiContextMenu, EuiIcon } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; - +import { Popover, ClosePopoverFn } from '../../popover'; import { ShortcutStrings } from '../../../../i18n/shortcuts'; import { flattenPanelTree } from '../../../lib/flatten_panel_tree'; -import { Popover, ClosePopoverFn } from '../../popover'; import { CustomElementModal } from '../../custom_element_modal'; import { CONTEXT_MENU_TOP_BORDER_CLASSNAME } from '../../../../common/lib/constants'; import { PositionedElement } from '../../../../types'; diff --git a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/element_menu.component.tsx b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/element_menu.component.tsx index e1d69163e0761..2907e8c4d5dd7 100644 --- a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/element_menu.component.tsx +++ b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/element_menu.component.tsx @@ -15,12 +15,11 @@ import { EuiContextMenuPanelItemDescriptor, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; - +import { Popover, ClosePopoverFn } from '../../popover'; import { CONTEXT_MENU_TOP_BORDER_CLASSNAME } from '../../../../common/lib'; import { ElementSpec } from '../../../../types'; import { flattenPanelTree } from '../../../lib/flatten_panel_tree'; import { getId } from '../../../lib/get_id'; -import { Popover, ClosePopoverFn } from '../../popover'; import { AssetManager } from '../../asset_manager'; import { SavedElementsModal } from '../../saved_elements_modal'; diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.component.tsx b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.component.tsx index e59bf284258fc..de712b2698359 100644 --- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.component.tsx +++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.component.tsx @@ -9,12 +9,11 @@ import React, { FunctionComponent, useState } from 'react'; import PropTypes from 'prop-types'; import { EuiButtonEmpty, EuiContextMenu, EuiIcon } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; - +import { Popover, ClosePopoverFn } from '../../popover'; import { ReportingStart } from '../../../../../reporting/public'; import { PDF, JSON } from '../../../../i18n/constants'; import { flattenPanelTree } from '../../../lib/flatten_panel_tree'; import { usePlatformService } from '../../../services'; -import { ClosePopoverFn, Popover } from '../../popover'; import { ShareWebsiteFlyout } from './flyout'; import { CanvasWorkpadSharingData, getPdfJobParams } from './utils'; diff --git a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.component.tsx b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.component.tsx index b001ad04caa44..b2c6d97a51748 100644 --- a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.component.tsx +++ b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.component.tsx @@ -14,7 +14,7 @@ import { EuiContextMenuPanelItemDescriptor, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; - +import { Popover, ClosePopoverFn } from '../../popover'; import { MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL, @@ -22,7 +22,6 @@ import { } from '../../../../common/lib/constants'; import { flattenPanelTree } from '../../../lib/flatten_panel_tree'; -import { Popover, ClosePopoverFn } from '../../popover'; import { AutoRefreshControls } from './auto_refresh_controls'; import { KioskControls } from './kiosk_controls'; diff --git a/x-pack/plugins/canvas/public/style/index.scss b/x-pack/plugins/canvas/public/style/index.scss index aac898c3dd374..0860bfd5afe6a 100644 --- a/x-pack/plugins/canvas/public/style/index.scss +++ b/x-pack/plugins/canvas/public/style/index.scss @@ -19,7 +19,6 @@ @import '../components/datasource/datasource'; @import '../components/datasource/datasource_preview/datasource_preview'; @import '../components/datatable/datatable'; -@import '../components/debug/debug'; @import '../components/dom_preview/dom_preview'; @import '../components/element_card/element_card'; @import '../components/element_content/element_content'; diff --git a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js index 60987e987f63a..df894a65afab1 100644 --- a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js +++ b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js @@ -5,8 +5,6 @@ * 2.0. */ -import { debug } from '../canvas_plugin_src/renderers/debug'; -import { error } from '../canvas_plugin_src/renderers/error'; import { image } from '../canvas_plugin_src/renderers/image'; import { repeatImage } from '../canvas_plugin_src/renderers/repeat_image'; import { markdown } from '../canvas_plugin_src/renderers/markdown'; @@ -18,6 +16,10 @@ import { shape } from '../canvas_plugin_src/renderers/shape'; import { table } from '../canvas_plugin_src/renderers/table'; import { text } from '../canvas_plugin_src/renderers/text'; import { revealImageRenderer as revealImage } from '../../../../src/plugins/expression_reveal_image/public'; +import { + errorRenderer as error, + debugRenderer as debug, +} from '../../../../src/plugins/expression_error/public'; /** * This is a collection of renderers which are bundled with the runtime. If diff --git a/x-pack/plugins/canvas/storybook/storyshots.test.tsx b/x-pack/plugins/canvas/storybook/storyshots.test.tsx index 84ac1a26281e0..ddb52a22d2f17 100644 --- a/x-pack/plugins/canvas/storybook/storyshots.test.tsx +++ b/x-pack/plugins/canvas/storybook/storyshots.test.tsx @@ -6,13 +6,15 @@ */ import fs from 'fs'; -import { ReactChildren } from 'react'; +import { ReactChildren, createElement } from 'react'; import path from 'path'; import moment from 'moment'; import 'moment-timezone'; import ReactDOM from 'react-dom'; +import { shallow } from 'enzyme'; +import { create, act } from 'react-test-renderer'; -import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots'; +import initStoryshots, { Stories2SnapsConverter } from '@storybook/addon-storyshots'; // @ts-expect-error untyped library import styleSheetSerializer from 'jest-styled-components/src/styleSheetSerializer'; import { addSerializer } from 'jest-specific-snapshot'; @@ -114,11 +116,24 @@ jest.mock('../public/lib/es_service', () => ({ addSerializer(styleSheetSerializer); +const converter = new Stories2SnapsConverter(); + // Initialize Storyshots and build the Jest Snapshots initStoryshots({ configPath: path.resolve(__dirname), framework: 'react', - test: multiSnapshotWithOptions(), + // test: multiSnapshotWithOptions({}), + asyncJest: true, + test: async ({ story, context, done }) => { + const renderer = create(createElement(story.render)); + // wait until the element will perform all renders and resolve all promises (lazy loading, especially) + await act(() => new Promise((resolve) => setTimeout(resolve, 0))); + // save each snapshot to a different file (similar to "multiSnapshotWithOptions") + const snapshotFileName = converter.getSnapshotFileName(context); + expect(renderer).toMatchSpecificSnapshot(snapshotFileName); + done?.(); + }, // Don't snapshot tests that start with 'redux' storyNameRegex: /^((?!.*?redux).)*$/, + renderer: shallow, }); diff --git a/x-pack/plugins/canvas/tsconfig.json b/x-pack/plugins/canvas/tsconfig.json index 84581d7be85a3..bf9544a173f16 100644 --- a/x-pack/plugins/canvas/tsconfig.json +++ b/x-pack/plugins/canvas/tsconfig.json @@ -31,6 +31,7 @@ { "path": "../../../src/plugins/discover/tsconfig.json" }, { "path": "../../../src/plugins/embeddable/tsconfig.json" }, { "path": "../../../src/plugins/expressions/tsconfig.json" }, + { "path": "../../../src/plugins/expression_error/tsconfig.json" }, { "path": "../../../src/plugins/expression_reveal_image/tsconfig.json" }, { "path": "../../../src/plugins/home/tsconfig.json" }, { "path": "../../../src/plugins/inspector/tsconfig.json" }, diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index a6e643c03276a..a4886bacb3b27 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -6109,9 +6109,8 @@ "xpack.canvas.error.useImportWorkpad.missingPropertiesErrorMessage": "{CANVAS} ワークパッドに必要なプロパティの一部が欠けています。 {JSON} ファイルを編集して正しいプロパティ値を入力し、再試行してください。", "xpack.canvas.error.workpadRoutes.createFailureErrorMessage": "ワークパッドを作成できませんでした", "xpack.canvas.error.workpadRoutes.loadFailureErrorMessage": "ID でワークパッドを読み込めませんでした", - "xpack.canvas.errorComponent.description": "表現が失敗し次のメッセージが返されました：", - "xpack.canvas.errorComponent.title": "おっと！表現が失敗しました", - "xpack.canvas.errors.useImportWorkpad.fileUploadFileWithFileNameErrorMessage": "「{fileName}」をアップロードできませんでした", + "expressionError.errorComponent.description": "表現が失敗し次のメッセージが返されました：", + "expressionError.errorComponent.title": "おっと！表現が失敗しました", "xpack.canvas.expression.cancelButtonLabel": "キャンセル", "xpack.canvas.expression.closeButtonLabel": "閉じる", "xpack.canvas.expression.learnLinkText": "表現構文の詳細", @@ -6523,15 +6522,15 @@ "xpack.canvas.renderer.advancedFilter.displayName": "高度なフィルター", "xpack.canvas.renderer.advancedFilter.helpDescription": "Canvas フィルター表現をレンダリングします。", "xpack.canvas.renderer.advancedFilter.inputPlaceholder": "フィルター表現を入力", - "xpack.canvas.renderer.debug.displayName": "デバッグ", - "xpack.canvas.renderer.debug.helpDescription": "デバッグアウトプットをフォーマットされた {JSON} としてレンダリングします", + "expressionError.renderer.debug.displayName": "デバッグ", + "expressionError.renderer.debug.helpDescription": "デバッグアウトプットをフォーマットされた {JSON} としてレンダリングします", "xpack.canvas.renderer.dropdownFilter.displayName": "ドロップダウンフィルター", "xpack.canvas.renderer.dropdownFilter.helpDescription": "「{exactly}」フィルターの値を選択できるドロップダウンです", "xpack.canvas.renderer.dropdownFilter.matchAllOptionLabel": "すべて", "xpack.canvas.renderer.embeddable.displayName": "埋め込み可能", "xpack.canvas.renderer.embeddable.helpDescription": "Kibana の他の部分から埋め込み可能な保存済みオブジェクトをレンダリングします", - "xpack.canvas.renderer.error.displayName": "エラー情報", - "xpack.canvas.renderer.error.helpDescription": "エラーデータをユーザーにわかるようにレンダリングします", + "expressionError.renderer.error.displayName": "エラー情報", + "expressionError.renderer.error.helpDescription": "エラーデータをユーザーにわかるようにレンダリングします", "xpack.canvas.renderer.image.displayName": "画像", "xpack.canvas.renderer.image.helpDescription": "画像をレンダリングします", "xpack.canvas.renderer.markdown.displayName": "マークダウン", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index bd8ca2f1b6055..dd3fcba3e2bdd 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -6148,9 +6148,8 @@ "xpack.canvas.error.useImportWorkpad.missingPropertiesErrorMessage": "{CANVAS} Workpad 所需的某些属性缺失。 编辑 {JSON} 文件以提供正确的属性值，然后重试。", "xpack.canvas.error.workpadRoutes.createFailureErrorMessage": "无法创建 Workpad", "xpack.canvas.error.workpadRoutes.loadFailureErrorMessage": "无法加载具有以下 ID 的 Workpad", - "xpack.canvas.errorComponent.description": "表达式失败，并显示消息：", - "xpack.canvas.errorComponent.title": "哎哟！表达式失败", - "xpack.canvas.errors.useImportWorkpad.fileUploadFileWithFileNameErrorMessage": "无法上传“{fileName}”", + "expressionError.errorComponent.description": "表达式失败，并显示消息：", + "expressionError.errorComponent.title": "哎哟！表达式失败", "xpack.canvas.expression.cancelButtonLabel": "取消", "xpack.canvas.expression.closeButtonLabel": "关闭", "xpack.canvas.expression.learnLinkText": "学习表达式语法", @@ -6563,15 +6562,15 @@ "xpack.canvas.renderer.advancedFilter.displayName": "高级筛选", "xpack.canvas.renderer.advancedFilter.helpDescription": "呈现 Canvas 筛选表达式", "xpack.canvas.renderer.advancedFilter.inputPlaceholder": "输入筛选表达式", - "xpack.canvas.renderer.debug.displayName": "故障排查", - "xpack.canvas.renderer.debug.helpDescription": "将故障排查输出呈现为带格式的 {JSON}", + "expressionError.renderer.debug.displayName": "故障排查", + "expressionError.renderer.debug.helpDescription": "将故障排查输出呈现为带格式的 {JSON}", "xpack.canvas.renderer.dropdownFilter.displayName": "下拉列表筛选", "xpack.canvas.renderer.dropdownFilter.helpDescription": "可以从其中为“{exactly}”筛选选择值的下拉列表", "xpack.canvas.renderer.dropdownFilter.matchAllOptionLabel": "任意", "xpack.canvas.renderer.embeddable.displayName": "可嵌入", "xpack.canvas.renderer.embeddable.helpDescription": "从 Kibana 的其他部分呈现可嵌入的已保存对象", - "xpack.canvas.renderer.error.displayName": "错误信息", - "xpack.canvas.renderer.error.helpDescription": "以用户友好的方式呈现错误数据", + "expressionError.renderer.error.displayName": "错误信息", + "expressionError.renderer.error.helpDescription": "以用户友好的方式呈现错误数据", "xpack.canvas.renderer.image.displayName": "图像", "xpack.canvas.renderer.image.helpDescription": "呈现图像", "xpack.canvas.renderer.markdown.displayName": "Markdown",