[8.x] [Vega] Add ability to open links in Vega in new window (#216200) (#218132)

# Backport This will backport the following commits from `main` to `8.x`: - [[Vega] Add ability to open links in Vega in new window (#216200)](https://github.com/elastic/kibana/pull/216200)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Andreana Malama <72010092+andrimal@users.noreply.github.com>
2025-04-23 17:28:26 -04:00 · 2025-04-14 18:40:34 +02:00 · 2025-04-14 18:40:34 +02:00 · 595f8db751
commit 595f8db751
parent 0b60e4c08a
2 changed files with 95 additions and 0 deletions
--- a/src/platform/plugins/private/vis_types/vega/public/vega_view/vega_base_view.js
+++ b/src/platform/plugins/private/vis_types/vega/public/vega_view/vega_base_view.js
@ -236,6 +236,11 @@ export class VegaBaseView {

      return result;
    };
+
+    const vegaSpec = this._parser.isVegaLite ? this._parser.vlspec : this._parser.spec;
+    const usermetaLoaderOptions = vegaSpec.usermeta?.embedOptions?.loader;
+    vegaLoader.options = usermetaLoaderOptions ?? {};
+
    config.loader = vegaLoader;

    const vegaLogger = logger(Warn);
--- a/src/platform/test/functional/apps/visualize/group6/_vega_chart.ts
+++ b/src/platform/test/functional/apps/visualize/group6/_vega_chart.ts
@ -27,6 +27,49 @@ signals: [ {
  }]
 }]}`;

+const getLinkTestSpec = (url: string, usermeta?: string) => `
+{
+  $schema: https://vega.github.io/schema/vega-lite/v5.json
+  data: {
+    url: {
+      %context%: true
+      %timefield%: @timestamp
+      index: logstash-*
+      body: {
+        aggs: {
+          country_buckets: {
+            terms: {
+              field: geo.dest
+              size: 1
+            }
+          }
+        }
+        size: 0
+      }
+    }
+    format: {property: "aggregations.country_buckets.buckets"}
+  }
+  transform: [
+    {
+      "calculate": "'${url}'", "as": "url"
+    }
+  ]
+  mark: bar
+  encoding: {
+    x: {
+      field: key 
+      type: nominal 
+      axis: {labelAngle: 0}
+    }
+    y: {
+      field: doc_count
+      type: quantitative
+    }
+    "href": {"field": "url", "type": "nominal"}
+  }
+  usermeta: ${usermeta}
+}`;
+
 export default function ({ getPageObjects, getService }: FtrProviderContext) {
  const { timePicker, visualize, visChart, visEditor, vegaChart } = getPageObjects([
    'timePicker',
@ -292,5 +335,52 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
        expect(await filterBar.getFilterCount()).to.be(0);
      });
    });
+
+    describe('clickable marks with links', () => {
+      beforeEach(async () => {
+        await timePicker.setDefaultAbsoluteRange();
+      });
+
+      const fillSpecAndGo = async (newSpec: string) => {
+        await vegaChart.fillSpec(newSpec);
+        await visEditor.clickGo();
+
+        const viewContainer = await vegaChart.getViewContainer();
+        const canvasElement = await viewContainer.findByTagName('canvas');
+        const { width, height } = await canvasElement.getSize();
+
+        await canvasElement.moveMouseTo({
+          xOffset: Math.round(width / 2),
+          yOffset: Math.round(height / 2),
+        });
+        await canvasElement.click();
+      };
+
+      const getKibanaBaseUrl = async () => {
+        const currentUrl = await browser.getCurrentUrl();
+        return currentUrl.substring(0, currentUrl.indexOf('#'));
+      };
+
+      it('should open in a new tab when passing the appropriate usermeta to spec', async () => {
+        const usermeta = JSON.stringify({ embedOptions: { loader: { target: '_blank' } } });
+        const spec = getLinkTestSpec(await getKibanaBaseUrl(), usermeta);
+        await fillSpecAndGo(spec);
+
+        const windowHandlers = await browser.getAllWindowHandles();
+        expect(windowHandlers.length).to.equal(2);
+
+        await browser.switchTab(1);
+        await browser.closeCurrentWindow();
+        await browser.switchTab(0);
+      });
+
+      it('should open in the same tab without passing the appropriate usermeta to spec', async () => {
+        const spec = getLinkTestSpec(await getKibanaBaseUrl());
+        await fillSpecAndGo(spec);
+
+        const windowHandlers = await browser.getAllWindowHandles();
+        expect(windowHandlers.length).to.equal(1);
+      });
+    });
  });
 }