feat: 🎸 add ability to disable URL encoding in URL Drilldown

Author: streamich

x-pack/plugins/drilldowns/url_drilldown/public/lib/url_drilldown.tsx

@@ -97,14 +97,19 @@ export class UrlDrilldown implements Drilldown<Config, UrlTrigger, ActionFactory
     config: Config,
     context: ActionFactoryContext
   ): config is Config => {
-    const { isValid } = urlDrilldownValidateUrlTemplate(config.url, this.buildEditorScope(context));
+    const { isValid } = urlDrilldownValidateUrlTemplate(
+      config.url,
+      this.buildEditorScope(context),
+      config.disableEncoding
+    );
     return isValid;
   };
 
   public readonly isCompatible = async (config: Config, context: ActionContext) => {
     const { isValid, error } = urlDrilldownValidateUrlTemplate(
       config.url,
-      await this.buildRuntimeScope(context)
+      await this.buildRuntimeScope(context),
+      config.disableEncoding
     );
 
     if (!isValid) {
@@ -118,10 +123,18 @@ export class UrlDrilldown implements Drilldown<Config, UrlTrigger, ActionFactory
   };
 
   public readonly getHref = async (config: Config, context: ActionContext) =>
-    urlDrilldownCompileUrl(config.url.template, this.buildRuntimeScope(context));
+    urlDrilldownCompileUrl(
+      config.url.template,
+      this.buildRuntimeScope(context),
+      config.disableEncoding
+    );
 
   public readonly execute = async (config: Config, context: ActionContext) => {
-    const url = urlDrilldownCompileUrl(config.url.template, this.buildRuntimeScope(context));
+    const url = urlDrilldownCompileUrl(
+      config.url.template,
+      this.buildRuntimeScope(context),
+      config.disableEncoding
+    );
     if (config.openInNewTab) {
       window.open(url, '_blank', 'noopener');
     } else {

x-pack/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/i18n.ts

@@ -79,3 +79,10 @@ export const txtUrlTemplateOpenInNewTab = i18n.translate(
     defaultMessage: 'Open in new tab',
   }
 );
+
+export const txtDisableEncoding = i18n.translate(
+  'xpack.uiActionsEnhanced.drilldowns.urlDrilldownCollectConfig.disableEncoding',
+  {
+    defaultMessage: 'Disable encoding',
+  }
+);

x-pack/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.tsx

@@ -34,6 +34,7 @@ import {
   txtUrlTemplatePlaceholder,
   txtUrlTemplatePreviewLabel,
   txtUrlTemplatePreviewLinkText,
+  txtDisableEncoding,
 } from './i18n';
 
 export interface UrlDrilldownCollectConfig {
@@ -55,11 +56,11 @@ export const UrlDrilldownCollectConfig: React.FC<UrlDrilldownCollectConfig> = ({
   const urlTemplate = config.url.template ?? '';
   const compiledUrl = React.useMemo(() => {
     try {
-      return compile(urlTemplate, scope);
+      return compile(urlTemplate, scope, config.disableEncoding);
     } catch {
       return urlTemplate;
     }
-  }, [urlTemplate, scope]);
+  }, [urlTemplate, scope, config.disableEncoding]);
   const scopeVariables = React.useMemo(() => buildScopeSuggestions(scope), [scope]);
 
   function updateUrlTemplate(newUrlTemplate: string) {
@@ -74,8 +75,8 @@ export const UrlDrilldownCollectConfig: React.FC<UrlDrilldownCollectConfig> = ({
     }
   }
   const { error, isValid } = React.useMemo(
-    () => validateUrlTemplate({ template: urlTemplate }, scope),
-    [urlTemplate, scope]
+    () => validateUrlTemplate({ template: urlTemplate }, scope, config.disableEncoding),
+    [urlTemplate, scope, config.disableEncoding]
   );
   const isEmpty = !urlTemplate;
   const isInvalid = !isValid && !isEmpty;
@@ -154,6 +155,15 @@ export const UrlDrilldownCollectConfig: React.FC<UrlDrilldownCollectConfig> = ({
           onChange={() => onConfig({ ...config, openInNewTab: !config.openInNewTab })}
         />
       </EuiFormRow>
+      <EuiFormRow hasChildLabel={false}>
+        <EuiCheckbox
+          id="disableEncoding"
+          name="disableEncoding"
+          label={txtDisableEncoding}
+          checked={config.disableEncoding}
+          onChange={() => onConfig({ ...config, disableEncoding: !config.disableEncoding })}
+        />
+      </EuiFormRow>
     </>
   );
 };

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

@@ -7,6 +7,7 @@
 export type UrlDrilldownConfig = {
   url: { format?: 'handlebars_v1'; template: string };
   openInNewTab: boolean;
+  disableEncoding?: boolean;
 };
 
 /**

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

@@ -116,7 +116,9 @@ handlebars.registerHelper('replace', (...args) => {
   return String(str).split(searchString).join(valueString);
 });
 
-export function compile(url: string, context: object): string {
+export function compile(url: string, context: object, disableEncoding?: boolean): string {
   const template = handlebars.compile(url, { strict: true, noEscape: true });
-  return encodeURI(template(context));
+  let uri = template(context);
+  if (!disableEncoding) uri = encodeURI(uri);
+  return uri;
 }

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

@@ -51,7 +51,8 @@ export function validateUrl(url: string): { isValid: boolean; error?: string } {
 
 export function validateUrlTemplate(
   urlTemplate: UrlDrilldownConfig['url'],
-  scope: UrlDrilldownScope
+  scope: UrlDrilldownScope,
+  disableEncoding?: boolean
 ): { isValid: boolean; error?: string } {
   if (!urlTemplate.template)
     return {
@@ -60,7 +61,7 @@ export function validateUrlTemplate(
     };
 
   try {
-    const compiledUrl = compile(urlTemplate.template, scope);
+    const compiledUrl = compile(urlTemplate.template, scope, disableEncoding);
     return validateUrl(compiledUrl);
   } catch (e) {
     return {