feat: 🎸 add URI encoding Handlebars helpers

Author: streamich

x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.test.ts

@@ -461,6 +461,7 @@ describe('encoding', () => {
       openInNewTab: false,
     };
     const url = await urlDrilldown.getHref(config, context);
+
     expect(url).toBe('https://elastic.co?foo=head%2526shoulders');
   });
 
@@ -473,6 +474,7 @@ describe('encoding', () => {
       encodeUrl: true,
     };
     const url = await urlDrilldown.getHref(config, context);
+
     expect(url).toBe('https://elastic.co?foo=head%2526shoulders');
   });
 
@@ -485,6 +487,33 @@ describe('encoding', () => {
       encodeUrl: false,
     };
     const url = await urlDrilldown.getHref(config, context);
+
     expect(url).toBe('https://elastic.co?foo=head%26shoulders');
   });
+
+  test('can encode URI component using "encodeURIComponent" Handlebars helper', async () => {
+    const config: Config = {
+      url: {
+        template: 'https://elastic.co?foo={{encodeURIComponent "head%26shoulders@gmail.com"}}',
+      },
+      openInNewTab: false,
+      encodeUrl: false,
+    };
+    const url = await urlDrilldown.getHref(config, context);
+
+    expect(url).toBe('https://elastic.co?foo=head%2526shoulders%40gmail.com');
+  });
+
+  test('can encode URI component using "encodeURIQuery" Handlebars helper', async () => {
+    const config: Config = {
+      url: {
+        template: 'https://elastic.co?foo={{encodeURIQuery "head%26shoulders@gmail.com"}}',
+      },
+      openInNewTab: false,
+      encodeUrl: false,
+    };
+    const url = await urlDrilldown.getHref(config, context);
+
+    expect(url).toBe('https://elastic.co?foo=head%2526shoulders@gmail.com');
+  });
 });

x-pack/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/url_template.ts

@@ -9,6 +9,7 @@ import { encode, RisonValue } from 'rison-node';
 import dateMath from '@elastic/datemath';
 import moment, { Moment } from 'moment';
 import numeral from '@elastic/numeral';
+import { url } from '../../../../../../src/plugins/kibana_utils/public';
 
 const handlebars = createHandlebars();
 
@@ -116,13 +117,22 @@ handlebars.registerHelper('replace', (...args) => {
   return String(str).split(searchString).join(valueString);
 });
 
+handlebars.registerHelper('encodeURIComponent', (component: unknown) => {
+  const str = String(component);
+  return encodeURIComponent(str);
+});
+handlebars.registerHelper('encodeURIQuery', (component: unknown) => {
+  const str = String(component);
+  return url.encodeUriQuery(str);
+});
+
 export function compile(urlTemplate: string, context: object, doEncode: boolean = true): string {
   const handlebarsTemplate = handlebars.compile(urlTemplate, { strict: true, noEscape: true });
-  let url: string = handlebarsTemplate(context);
+  let processedUrl: string = handlebarsTemplate(context);
 
   if (doEncode) {
-    url = encodeURI(url);
+    processedUrl = encodeURI(processedUrl);
   }
 
-  return url;
+  return processedUrl;
 }