[Canvas] Expression reveal image. Async libs and images loading.

src/plugins/expression_reveal_image/common/constants.ts

@@ -7,3 +7,6 @@
  */
 export const PLUGIN_ID = 'expressionRevealImage';
 export const PLUGIN_NAME = 'expressionRevealImage';
+
+export const BASE64 = '`base64`';
+export const URL = 'URL';

src/plugins/expression_reveal_image/common/expression_functions/reveal_image.test.ts

@@ -8,21 +8,26 @@
 
 import {
   functionWrapper,
-  elasticOutline,
-  elasticLogo,
+  getElasticOutline,
+  getElasticLogo,
 } from '../../../presentation_util/common/lib';
-import { getFunctionErrors } from '../i18n';
-import { revealImageFunction } from './reveal_image_function';
+import { revealImageFunction, errors } 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(
+  let elasticLogo = '';
+  let elasticOutline = '';
+
+  beforeEach(async () => {
+    elasticLogo = await (await getElasticLogo()).elasticLogo;
+    elasticOutline = await (await getElasticOutline()).elasticOutline;
+  });
+
+  it('returns a render as revealImage', async () => {
+    const result = await fn(
       0.5,
       {
         image: null,
@@ -36,130 +41,147 @@ describe('revealImageFunction', () => {
   });
 
   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));
+    it('throws when context is not a number between 0 and 1', async () => {
+      expect.assertions(2);
+      await fn(
+        10,
+        {
+          image: elasticLogo,
+          emptyImage: elasticOutline,
+          origin: Origin.TOP,
+        },
+        {} as ExecutionContext
+      ).catch((e: any) => {
+        expect(e.message).toMatch(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));
+      await fn(
+        -0.1,
+        {
+          image: elasticLogo,
+          emptyImage: elasticOutline,
+          origin: Origin.TOP,
+        },
+        {} as ExecutionContext
+      ).catch((e: any) => {
+        expect(e.message).toMatch(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
+      it('sets the image', async () => {
+        const result = (
+          await 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
+      it('defaults to the Elastic outline logo', async () => {
+        const result = (
+          await 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
+      it('sets the background image', async () => {
+        const result = (
+          await 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
+      it('sets emptyImage to null', async () => {
+        const result = (
+          await 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
+      it('sets which side to start the reveal from', async () => {
+        let result = (
+          await 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
+        result = (
+          await 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
+        result = (
+          await 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
+        result = (
+          await fn(
+            1,
+            {
+              emptyImage: null,
+              origin: Origin.RIGHT,
+              image: null,
+            },
+            {} as ExecutionContext
+          )
         ).value;
         expect(result).toHaveProperty('origin', 'right');
       });

src/plugins/expression_reveal_image/common/expression_functions/reveal_image_function.ts

@@ -6,13 +6,77 @@
  * Side Public License, v 1.
  */
 
-import { resolveWithMissingImage, elasticOutline } from '../../../presentation_util/common/lib';
-import { getFunctionHelp, getFunctionErrors } from '../i18n';
-import { ExpressionRevealImageFunction, Origin } from '../types';
+import { i18n } from '@kbn/i18n';
+import {
+  resolveWithMissingImage,
+  getElasticOutline,
+  isValidUrl,
+} from '../../../presentation_util/common/lib';
+import { ExpressionRevealImageFunction, Origin, Position } from '../../common/types';
+import { BASE64, URL } from '../../common/constants';
+
+const strings = {
+  help: i18n.translate('expressionRevealImage.functions.revealImageHelpText', {
+    defaultMessage: 'Configures an image reveal element.',
+  }),
+  args: {
+    image: i18n.translate('expressionRevealImage.functions.revealImage.args.imageHelpText', {
+      defaultMessage:
+        'The image to reveal. Provide an image asset as a {BASE64} data {URL}, ' +
+        'or pass in a sub-expression.',
+      values: {
+        BASE64,
+        URL,
+      },
+    }),
+    emptyImage: i18n.translate(
+      'expressionRevealImage.functions.revealImage.args.emptyImageHelpText',
+      {
+        defaultMessage:
+          'An optional background image to reveal over. ' +
+          'Provide an image asset as a `{BASE64}` data {URL}, or pass in a sub-expression.',
+        values: {
+          BASE64,
+          URL,
+        },
+      }
+    ),
+    origin: i18n.translate('expressionRevealImage.functions.revealImage.args.originHelpText', {
+      defaultMessage: 'The position to start the image fill. For example, {list}, or {end}.',
+      values: {
+        list: Object.values(Position)
+          .slice(0, -1)
+          .map((position) => `\`"${position}"\``)
+          .join(', '),
+        end: Object.values(Position).slice(-1)[0],
+      },
+    }),
+  },
+};
+
+export const errors = {
+  invalidPercent: (percent: number) =>
+    new Error(
+      i18n.translate('expressionRevealImage.functions.revealImage.invalidPercentErrorMessage', {
+        defaultMessage: "Invalid value: '{percent}'. Percentage must be between 0 and 1",
+        values: {
+          percent,
+        },
+      })
+    ),
+  invalidImageUrl: (imageUrl: string) =>
+    new Error(
+      i18n.translate('expressionRevealImage.functions.revealImage.invalidImageUrl', {
+        defaultMessage: "Invalid image url: '{imageUrl}'.",
+        values: {
+          imageUrl,
+        },
+      })
+    ),
+};
 
 export const revealImageFunction: ExpressionRevealImageFunction = () => {
-  const { help, args: argHelp } = getFunctionHelp().revealImage;
-  const errors = getFunctionErrors().revealImage;
+  const { help, args: argHelp } = strings;
 
   return {
     name: 'revealImage',
@@ -24,7 +88,7 @@ export const revealImageFunction: ExpressionRevealImageFunction = () => {
       image: {
         types: ['string', 'null'],
         help: argHelp.image,
-        default: elasticOutline,
+        default: null,
       },
       emptyImage: {
         types: ['string', 'null'],
@@ -38,11 +102,16 @@ export const revealImageFunction: ExpressionRevealImageFunction = () => {
         options: Object.values(Origin),
       },
     },
-    fn: (percent, args) => {
+    fn: async (percent, args) => {
       if (percent > 1 || percent < 0) {
         throw errors.invalidPercent(percent);
       }
 
+      if (args.image && !isValidUrl(args.image)) {
+        throw errors.invalidImageUrl(args.image);
+      }
+
+      const { elasticOutline } = await getElasticOutline();
       return {
         type: 'render',
         as: 'revealImage',