[Canvas] Expression reveal image. (elastic#101987)

* expression_reveal_image skeleton. * expression_functions added. * expression_renderers added. * Backup of daily work. * Fixed errors. * Added legacy support. Added button for legacy. * Added storybook. * Removed revealImage from canvas. * setState while rendering error fixed. * tsconfig.json added. * jest.config.js added. * Demo doc added. * Types fixed. * added limits. * Removed not used imports. * i18n namespaces fixed. * Fixed test suite error. * Some errors fixed. * Fixed eslint error. * Removed more unused translations. * Moved UI and elements, related to expressionRevealImage from canvas. * Fixed unused translations errors. * Moved type of element to types. * Fixed types and added service for representing elements, ui and supported renderers to canvas. * Added expression registration to canvas. * Fixed * Fixed mutiple call of the function. * Removed support of a legacy lib for revealImage chart. * Removed legacy presentation_utils plugin import. * Doc error fixed. * Removed useless translations and tried to fix error. * One more fix. * Small imports fix. * Fixed translations. * Made fixes based on nits. * Removed useless params. * fix. * Fixed errors, related to jest and __mocks__. * Removed useless type definition. * Replaced RendererHandlers with IInterpreterRendererHandlers. * fixed supported_shareable. * Moved elements back to canvas. * Moved views to canvas, removed expression service and imported renderer to canvas. * Fixed translations. * Types fix. * Moved libs to presentation utils. * Fixed one mistake. * removed dataurl lib. * Fixed jest files. * elasticLogo removed. * Removed elastic_outline. * removed httpurl. * Removed missing_asset. * removed url. * replaced mostly all tests. * Fixed types. * Fixed types and removed function_wrapper.ts * Fixed types of test helpers. * Changed limits of presentationUtil plugin. * Fixed imports. * One more fix. * Fixed huge size of bundle. * Reduced allow limit for presentationUtil * Updated limits for presentationUtil. * Fixed public API. * fixed type errors. * Moved css to component. * Fixed spaces at element. * Changed order of requiredPlugins. * Updated limits. * Removed unused plugin. * Added rule for allowing import from __stories__ directory. * removed useless comment. * Changed readme.md * Fixed docs error. * A possible of smoke test. * onResize changed to useResizeObserver. * Remove useless events and `useEffect` block. * Changed from passing handlers to separate functions. * `function` moved to `server`. * Fixed eslint error. Co-authored-by: Kibana Machine <[email protected]>
kibanamachine · Jul 1, 2021 · 8fbcab4 · 8fbcab4
1 parent 15abbff
commit 8fbcab4
Show file tree

Hide file tree

Showing 159 changed files with 1,311 additions and 512 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -451,6 +451,7 @@ module.exports = {
                   '(src|x-pack)/plugins/**/(public|server)/**/*',
                   '!(src|x-pack)/plugins/**/(public|server)/mocks/index.{js,mjs,ts}',
                   '!(src|x-pack)/plugins/**/(public|server)/(index|mocks).{js,mjs,ts,tsx}',
+                  '!(src|x-pack)/plugins/**/__stories__/index.{js,mjs,ts,tsx}',
                 ],
                 allowSameFolder: true,
                 errorMessage: 'Plugins may only import from top-level public and server modules.',

diff --git 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",
+    "expressionRevealImage": "src/plugins/expression_reveal_image",
     "inputControl": "src/plugins/input_control_vis",
     "inspector": "src/plugins/inspector",
     "inspectorViews": "src/legacy/core_plugins/inspector_views",

diff --git 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_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.
+
+
 |<<kibana-expressions-plugin>>
 |Expression pipeline is a chain of functions that *pipe* its output to the
 input of the next function. Functions can be configured using arguments provided

diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
@@ -99,7 +99,7 @@ pageLoadAssetSize:
   watcher: 43742
   runtimeFields: 41752
   stackAlerts: 29684
-  presentationUtil: 49767
+  presentationUtil: 94301
   spacesOss: 18817
   indexPatternFieldEditor: 90489
   osquery: 107090
@@ -110,4 +110,5 @@ pageLoadAssetSize:
   timelines: 230410
   screenshotMode: 17856
   visTypePie: 35583
+  expressionRevealImage: 25675
   cases: 144442
diff --git 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_reveal_image: 'src/plugins/expression_reveal_image/.storybook',
   infra: 'x-pack/plugins/infra/.storybook',
   security_solution: 'x-pack/plugins/security_solution/.storybook',
   ui_actions_enhanced: 'x-pack/plugins/ui_actions_enhanced/.storybook',

diff --git a/src/plugins/expression_reveal_image/.i18nrc.json b/src/plugins/expression_reveal_image/.i18nrc.json
@@ -0,0 +1,7 @@
+{
+  "prefix": "expressionRevealImage",
+  "paths": {
+    "expressionRevealImage": "."
+  },
+  "translations": ["translations/ja-JP.json"]
+}
diff --git a/src/plugins/expression_reveal_image/.storybook/main.js b/src/plugins/expression_reveal_image/.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_reveal_image/README.md b/src/plugins/expression_reveal_image/README.md
@@ -0,0 +1,9 @@
+# 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.
+
+---
+
+## 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_reveal_image/common/constants.ts b/src/plugins/expression_reveal_image/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 = 'expressionRevealImage';
+export const PLUGIN_NAME = 'expressionRevealImage';
diff --git a/src/plugins/expression_reveal_image/common/expression_functions/index.ts b/src/plugins/expression_reveal_image/common/expression_functions/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 { revealImageFunction } from './reveal_image_function';
+
+export const functions = [revealImageFunction];
+
+export { revealImageFunction };
diff --git a/src/plugins/expression_reveal_image/common/expression_functions/reveal_image.test.ts b/src/plugins/expression_reveal_image/common/expression_functions/reveal_image.test.ts
@@ -0,0 +1,168 @@
+/*
+ * 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 {
+  functionWrapper,
+  elasticOutline,
+  elasticLogo,
+} from '../../../presentation_util/common/lib';
+import { getFunctionErrors } from '../i18n';
+import { revealImageFunction } from './reveal_image_function';
+import { Origin } from '../types';
+import { ExecutionContext } from 'src/plugins/expressions';
+
+const errors = getFunctionErrors().revealImage;
+
+describe('revealImageFunction', () => {
+  const fn = functionWrapper(revealImageFunction);
+
+  it('returns a render as revealImage', () => {
+    const result = fn(
+      0.5,
+      {
+        image: null,
+        emptyImage: null,
+        origin: Origin.BOTTOM,
+      },
+      {} as ExecutionContext
+    );
+    expect(result).toHaveProperty('type', 'render');
+    expect(result).toHaveProperty('as', 'revealImage');
+  });
+
+  describe('context', () => {
+    it('throws when context is not a number between 0 and 1', () => {
+      expect(() => {
+        fn(
+          10,
+          {
+            image: elasticLogo,
+            emptyImage: elasticOutline,
+            origin: Origin.TOP,
+          },
+          {} as ExecutionContext
+        );
+      }).toThrow(new RegExp(errors.invalidPercent(10).message));
+
+      expect(() => {
+        fn(
+          -0.1,
+          {
+            image: elasticLogo,
+            emptyImage: elasticOutline,
+            origin: Origin.TOP,
+          },
+          {} as ExecutionContext
+        );
+      }).toThrow(new RegExp(errors.invalidPercent(-0.1).message));
+    });
+  });
+
+  describe('args', () => {
+    describe('image', () => {
+      it('sets the image', () => {
+        const result = fn(
+          0.89,
+          {
+            emptyImage: null,
+            origin: Origin.TOP,
+            image: elasticLogo,
+          },
+          {} as ExecutionContext
+        ).value;
+        expect(result).toHaveProperty('image', elasticLogo);
+      });
+
+      it('defaults to the Elastic outline logo', () => {
+        const result = fn(
+          0.89,
+          {
+            emptyImage: null,
+            origin: Origin.TOP,
+            image: null,
+          },
+          {} as ExecutionContext
+        ).value;
+        expect(result).toHaveProperty('image', elasticOutline);
+      });
+    });
+
+    describe('emptyImage', () => {
+      it('sets the background image', () => {
+        const result = fn(
+          0,
+          {
+            emptyImage: elasticLogo,
+            origin: Origin.TOP,
+            image: null,
+          },
+          {} as ExecutionContext
+        ).value;
+        expect(result).toHaveProperty('emptyImage', elasticLogo);
+      });
+
+      it('sets emptyImage to null', () => {
+        const result = fn(
+          0,
+          {
+            emptyImage: null,
+            origin: Origin.TOP,
+            image: null,
+          },
+          {} as ExecutionContext
+        ).value;
+        expect(result).toHaveProperty('emptyImage', null);
+      });
+    });
+
+    describe('origin', () => {
+      it('sets which side to start the reveal from', () => {
+        let result = fn(
+          1,
+          {
+            emptyImage: null,
+            origin: Origin.TOP,
+            image: null,
+          },
+          {} as ExecutionContext
+        ).value;
+        expect(result).toHaveProperty('origin', 'top');
+        result = fn(
+          1,
+          {
+            emptyImage: null,
+            origin: Origin.LEFT,
+            image: null,
+          },
+          {} as ExecutionContext
+        ).value;
+        expect(result).toHaveProperty('origin', 'left');
+        result = fn(
+          1,
+          {
+            emptyImage: null,
+            origin: Origin.BOTTOM,
+            image: null,
+          },
+          {} as ExecutionContext
+        ).value;
+        expect(result).toHaveProperty('origin', 'bottom');
+        result = fn(
+          1,
+          {
+            emptyImage: null,
+            origin: Origin.RIGHT,
+            image: null,
+          },
+          {} as ExecutionContext
+        ).value;
+        expect(result).toHaveProperty('origin', 'right');
+      });
+    });
+  });
+});
diff --git a/...lugin_src/functions/common/revealImage.ts → ...ession_functions/reveal_image_function.ts b/...lugin_src/functions/common/revealImage.ts → ...ession_functions/reveal_image_function.ts
@@ -1,41 +1,16 @@
 /*
  * 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 { ExpressionFunctionDefinition, ExpressionValueRender } from 'src/plugins/expressions';
-import { resolveWithMissingImage } from '../../../common/lib/resolve_dataurl';
-import { elasticOutline } from '../../lib/elastic_outline';
-import { getFunctionHelp, getFunctionErrors } from '../../../i18n';
+import { resolveWithMissingImage, elasticOutline } from '../../../presentation_util/common/lib';
+import { getFunctionHelp, getFunctionErrors } from '../i18n';
+import { ExpressionRevealImageFunction, Origin } from '../types';
 
-export enum Origin {
-  TOP = 'top',
-  LEFT = 'left',
-  BOTTOM = 'bottom',
-  RIGHT = 'right',
-}
-
-interface Arguments {
-  image: string | null;
-  emptyImage: string | null;
-  origin: Origin;
-}
-
-export interface Output {
-  image: string;
-  emptyImage: string;
-  origin: Origin;
-  percent: number;
-}
-
-export function revealImage(): ExpressionFunctionDefinition<
-  'revealImage',
-  number,
-  Arguments,
-  ExpressionValueRender<Output>
-> {
+export const revealImageFunction: ExpressionRevealImageFunction = () => {
   const { help, args: argHelp } = getFunctionHelp().revealImage;
   const errors = getFunctionErrors().revealImage;
 
@@ -80,4 +55,4 @@ export function revealImage(): ExpressionFunctionDefinition<
       };
     },
   };
-}
+};
diff --git a/src/plugins/expression_reveal_image/common/i18n/constants.ts b/src/plugins/expression_reveal_image/common/i18n/constants.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.
+ */
+
+export const BASE64 = '`base64`';
+export const URL = 'URL';