[TSVB] Markdown variables should be clickable (#108844)

* [TSVB] Markdown variables should be clickable * fix test
elastic · Aug 17, 2021 · 5b30b3d · 5b30b3d
1 parent 6a5a215
commit 5b30b3d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 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
@@ -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
@@ -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';