From bc9cb520db5d1e401d339ed435b7a58f9c0c3843 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Thu, 11 Jun 2020 14:54:57 +0200
Subject: [PATCH] add rison / json support. add basic preview

---
 .../url_drilldown_definition.tsx              | 86 +++++++++++++++----
 1 file changed, 69 insertions(+), 17 deletions(-)

diff --git a/x-pack/plugins/embeddable_enhanced/public/drilldowns/url_drilldown/url_drilldown_definition.tsx b/x-pack/plugins/embeddable_enhanced/public/drilldowns/url_drilldown/url_drilldown_definition.tsx
index 472279efe7368c..89121a9c6a000a 100644
--- a/x-pack/plugins/embeddable_enhanced/public/drilldowns/url_drilldown/url_drilldown_definition.tsx
+++ b/x-pack/plugins/embeddable_enhanced/public/drilldowns/url_drilldown/url_drilldown_definition.tsx
@@ -15,7 +15,10 @@ import {
   EuiPopover,
   EuiButtonIcon,
   EuiContextMenuPanel,
+  EuiText,
+  EuiLink,
 } from '@elastic/eui';
+import { encode } from 'rison-node';
 import { reactToUiComponent } from '../../../../../../src/plugins/kibana_react/public';
 import { UiActionsEnhancedDrilldownDefinition as DrilldownDefinition } from '../../../../ui_actions_enhanced/public';
 import {
@@ -36,9 +39,32 @@ import {
 } from '../../../../../../src/plugins/data/public';
 
 const handlebars = createHandlebars();
+
+handlebars.registerHelper('json', (v) => {
+  try {
+    return JSON.stringify(v);
+  } catch (e) {
+    return v;
+  }
+});
+
+handlebars.registerHelper('rison', (v) => {
+  try {
+    return encode(v);
+  } catch (e) {
+    return v;
+  }
+});
+
 function interpolate(url: string, scope: Scope): string {
-  const template = handlebars.compile(url);
-  return template(scope);
+  try {
+    const template = handlebars.compile(url);
+    return template(scope);
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn(e);
+    return url;
+  }
 }
 
 export type ActionContext = RangeSelectTriggerContext | ValueClickTriggerContext;
@@ -98,18 +124,18 @@ interface EventFilter {
 
 const mockEventScope: EventScope = {
   filter: {
-    key: '',
-    value: '',
-    from: '',
-    to: '',
+    key: 'testKey',
+    value: 'testValue',
+    from: 'testFrom',
+    to: 'testTo',
     negate: false,
   },
   filters: [
     {
-      key: '',
-      value: '',
-      from: '',
-      to: '',
+      key: 'testKey',
+      value: 'testValue',
+      from: 'testFrom',
+      to: 'testTo',
       negate: false,
     },
   ],
@@ -166,19 +192,24 @@ export class UrlDrilldownDefinition implements DrilldownDefinition<Config, Actio
   }) => {
     const { getGlobalScope } = this.params;
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const variables = React.useMemo(
-      () =>
-        buildVariableListForSuggestions(
-          buildScope(getGlobalScope(), getContextScopeFromEmbeddable(context.embeddable))
-        ),
+    const scope = React.useMemo(
+      () => buildScope(getGlobalScope(), getContextScopeFromEmbeddable(context.embeddable)),
       [getGlobalScope, context]
     );
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const variables = React.useMemo(() => buildVariableListForSuggestions(scope), [scope]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const interpolatedUrl = React.useMemo(() => interpolate(config.url, scope), [
+      config.url,
+      scope,
+    ]);
+    const isValid = !interpolatedUrl || isValidUrl(interpolatedUrl);
+
     return (
       <>
         <EuiFormRow
           fullWidth
-          // error={errors.subject}
-          // isInvalid={errors.subject.length > 0 && subject !== undefined}
+          isInvalid={!isValid}
           label={'Enter target URL'}
           labelAppend={
             <AddVariableButton
@@ -196,6 +227,7 @@ export class UrlDrilldownDefinition implements DrilldownDefinition<Config, Actio
             name="url"
             data-test-subj="urlInput"
             value={config.url}
+            placeholder={'https://google.com/?q={{event.filter.value}}'}
             onChange={(event) => onConfig({ ...config, url: event.target.value })}
             onBlur={() => {
               if (!config.url) return;
@@ -204,6 +236,26 @@ export class UrlDrilldownDefinition implements DrilldownDefinition<Config, Actio
             }}
           />
         </EuiFormRow>
+        <EuiFormRow
+          fullWidth
+          label={'Target URL preview'}
+          isInvalid={!isValid}
+          labelAppend={
+            <EuiText size="xs">
+              <EuiLink href={interpolatedUrl} target="_blank" external>
+                Preview
+              </EuiLink>
+            </EuiText>
+          }
+        >
+          <EuiTextArea
+            fullWidth
+            name="urlPreview"
+            data-test-subj="urlPreview"
+            value={interpolatedUrl}
+            disabled={true}
+          />
+        </EuiFormRow>
         <EuiFormRow hasChildLabel={false}>
           <EuiSwitch
             name="openInNewTab"