From 5b30b3d31684b54adb3e77ed941fed8afbb5e0e4 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Tue, 17 Aug 2021 19:21:17 +0300
Subject: [PATCH] [TSVB] Markdown variables should be clickable (#108844)

* [TSVB] Markdown variables should be clickable

* fix test
---
 .../application/components/markdown_editor.js    | 16 +++++++++-------
 test/functional/apps/visualize/_tsvb_markdown.ts | 12 +++++++++++-
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/plugins/vis_type_timeseries/public/application/components/markdown_editor.js b/src/plugins/vis_type_timeseries/public/application/components/markdown_editor.js
index b9aa70f5207af..27622e29c2061 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/markdown_editor.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/markdown_editor.js
@@ -26,15 +26,17 @@ export class MarkdownEditor extends Component {
     this.props.onChange({ markdown: value });
   };
 
-  handleOnLoad = (ace) => {
-    this.ace = ace;
+  handleOnLoad = (editor) => {
+    this.editor = editor;
   };
 
-  handleVarClick(snippet) {
-    return () => {
-      if (this.ace) this.ace.insert(snippet);
-    };
-  }
+  handleVarClick = (snippet) => () => {
+    if (this.editor) {
+      const range = this.editor.getSelection();
+
+      this.editor.executeEdits('', [{ range, text: snippet }]);
+    }
+  };
 
   render() {
     const { visData, model, getConfig } = this.props;
diff --git a/test/functional/apps/visualize/_tsvb_markdown.ts b/test/functional/apps/visualize/_tsvb_markdown.ts
index 89db60bc7645c..b8b74d5cd7bf3 100644
--- a/test/functional/apps/visualize/_tsvb_markdown.ts
+++ b/test/functional/apps/visualize/_tsvb_markdown.ts
@@ -11,10 +11,11 @@ import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getPageObjects, getService }: FtrProviderContext) {
-  const { visualBuilder, timePicker, visualize } = getPageObjects([
+  const { visualBuilder, timePicker, visualize, visChart } = getPageObjects([
     'visualBuilder',
     'timePicker',
     'visualize',
+    'visChart',
   ]);
   const retry = getService('retry');
 
@@ -76,6 +77,15 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         expect(markdownText).to.be(html);
       });
 
+      it('markdown variables should be clickable', async () => {
+        await visualBuilder.clearMarkdown();
+        const [firstVariable] = await visualBuilder.getMarkdownTableVariables();
+        await firstVariable.selector.click();
+        await visChart.waitForVisualizationRenderingStabilized();
+        const markdownText = await visualBuilder.getMarkdownText();
+        expect(markdownText).to.be('46');
+      });
+
       it('should render mustache list', async () => {
         const list = '{{#each _all}}\n{{ data.formatted.[0] }} {{ data.raw.[0] }}\n{{/each}}';
         const expectedRenderer = 'Sep 22, 2015 @ 06:00:00.000,6 1442901600000,6';