[Drilldowns] URL drilldown MVP

src/plugins/ui_actions/public/triggers/select_range_trigger.ts

@@ -27,6 +27,6 @@ export const selectRangeTrigger: Trigger<'SELECT_RANGE_TRIGGER'> = {
     defaultMessage: 'Range selection',
   }),
   description: i18n.translate('uiActions.triggers.selectRangeDescription', {
-    defaultMessage: 'Select a group of values',
+    defaultMessage: 'A range of values on the visualization',
   }),
 };

src/plugins/ui_actions/public/triggers/value_click_trigger.ts

@@ -27,6 +27,6 @@ export const valueClickTrigger: Trigger<'VALUE_CLICK_TRIGGER'> = {
     defaultMessage: 'Single click',
   }),
   description: i18n.translate('uiActions.triggers.valueClickDescription', {
-    defaultMessage: 'A single point clicked on a visualization',
+    defaultMessage: 'A single point on the visualization',
   }),
 };

x-pack/examples/ui_actions_enhanced_examples/public/plugin.ts

@@ -11,7 +11,6 @@ import {
   AdvancedUiActionsStart,
 } from '../../../../x-pack/plugins/ui_actions_enhanced/public';
 import { DashboardHelloWorldDrilldown } from './dashboard_hello_world_drilldown';
-import { DashboardToUrlDrilldown } from './dashboard_to_url_drilldown';
 import { DashboardToDiscoverDrilldown } from './dashboard_to_discover_drilldown';
 import { createStartServicesGetter } from '../../../../src/plugins/kibana_utils/public';
 import { DiscoverSetup, DiscoverStart } from '../../../../src/plugins/discover/public';
@@ -39,7 +38,6 @@ export class UiActionsEnhancedExamplesPlugin
 
     uiActions.registerDrilldown(new DashboardHelloWorldDrilldown());
     uiActions.registerDrilldown(new DashboardHelloWorldOnlyRangeSelectDrilldown());
-    uiActions.registerDrilldown(new DashboardToUrlDrilldown());
     uiActions.registerDrilldown(new DashboardToDiscoverDrilldown({ start }));
   }
 

x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_create_drilldown/flyout_create_drilldown.tsx

@@ -80,6 +80,7 @@ export class FlyoutCreateDrilldownAction implements ActionByType<typeof OPEN_FLY
           viewMode={'create'}
           dynamicActionManager={embeddable.enhancements.dynamicActions}
           supportedTriggers={ensureNestedTriggers(embeddable.supportedTriggers())}
+          extraContext={{ embeddable }}
         />
       ),
       {

x-pack/plugins/dashboard_enhanced/public/services/drilldowns/actions/flyout_edit_drilldown/flyout_edit_drilldown.tsx

@@ -64,6 +64,7 @@ export class FlyoutEditDrilldownAction implements ActionByType<typeof OPEN_FLYOU
           viewMode={'manage'}
           dynamicActionManager={embeddable.enhancements.dynamicActions}
           supportedTriggers={ensureNestedTriggers(embeddable.supportedTriggers())}
+          extraContext={{ embeddable }}
         />
       ),
       {

x-pack/plugins/embeddable_enhanced/kibana.json

@@ -3,5 +3,6 @@
   "version": "kibana",
   "server": false,
   "ui": true,
-  "requiredPlugins": ["embeddable", "uiActionsEnhanced"]
+  "requiredPlugins": ["embeddable", "kibanaReact", "uiActions", "uiActionsEnhanced"],
+  "requiredBundles": ["kibanaUtils"]
 }

x-pack/plugins/embeddable_enhanced/public/drilldowns/url_drilldown/README.md

@@ -0,0 +1,21 @@
+# Basic url drilldown implementation
+
+Url drilldown allows navigating to external URL or to internal kibana URL.
+By using variables in url template result url can be dynamic and depend on user's interaction.
+
+URL drilldown has 3 sources for variables:
+
+- Global static variables like, for example, `kibanaUrl`. Such variables won’t change depending on a place where url drilldown is used.
+- Context variables are dynamic and different depending on where drilldown is created and used. For example:
+- Event variables depend on a trigger context. These variables are dynamically extracted from the action context when drilldown is executed.
+
+In current implementation url drilldown has to be used inside the embeddable and with `ValueClickTrigger` or `RangeSelectTrigger`.
+
+- `context` variables extracted from `embeddable`
+- `event` variables extracted from `trigger` context
+
+In future this basic url drilldown implementation would allow injecting more variables into `context` (e.g. `dashboard` app specific variables) and would allow providing support for new trigger types from outside.
+This extensibility improvements are tracked here: https://github.com/elastic/kibana/issues/55324
+
+In case a solution app has a use case for url drilldown that has to be different from current basic implementation and
+just extending variables list is not enough, then recommendation is to create own custom url drilldown and reuse building blocks from `ui_actions_enhanced`.

x-pack/plugins/embeddable_enhanced/public/drilldowns/url_drilldown/url_drilldown.test.ts

@@ -0,0 +1,166 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { UrlDrilldown, ActionContext, Config } from './url_drilldown';
+import { coreMock } from '../../../../../../src/core/public/mocks';
+import { IEmbeddable } from '../../../../../../src/plugins/embeddable/public/lib/embeddables';
+
+const mockDataPoints = [
+  {
+    table: {
+      columns: [
+        {
+          name: 'test',
+          id: '1-1',
+          meta: {
+            type: 'histogram',
+            indexPatternId: 'logstash-*',
+            aggConfigParams: {
+              field: 'bytes',
+              interval: 30,
+              otherBucket: true,
+            },
+          },
+        },
+      ],
+      rows: [
+        {
+          '1-1': '2048',
+        },
+      ],
+    },
+    column: 0,
+    row: 0,
+    value: 'test',
+  },
+];
+
+const mockEmbeddable = ({
+  getInput: () => ({
+    filters: [],
+    timeRange: { from: 'now-15m', to: 'now' },
+    query: { query: 'test', language: 'kuery' },
+  }),
+  getOutput: () => ({}),
+} as unknown) as IEmbeddable;
+
+const mockNavigateToUrl = jest.fn(() => Promise.resolve());
+
+describe('UrlDrilldown', () => {
+  const urlDrilldown = new UrlDrilldown({
+    getGlobalScope: () => ({ kibanaUrl: 'http://localhost:5601/' }),
+    getOpenModal: () => Promise.resolve(coreMock.createStart().overlays.openModal),
+    getSyntaxHelpDocsLink: () => 'http://localhost:5601/docs',
+    navigateToUrl: mockNavigateToUrl,
+  });
+
+  test('license', () => {
+    expect(urlDrilldown.minimalLicense).toBe('gold');
+  });
+
+  describe('isCompatible', () => {
+    test('throws if no embeddable', async () => {
+      const config: Config = {
+        url: {
+          template: `https://elasti.co/?{{event.value}}`,
+        },
+        openInNewTab: false,
+      };
+
+      const context: ActionContext = {
+        data: {
+          data: mockDataPoints,
+        },
+      };
+
+      await expect(urlDrilldown.isCompatible(config, context)).rejects.toThrowError();
+    });
+
+    test('compatible if url is valid', async () => {
+      const config: Config = {
+        url: {
+          template: `https://elasti.co/?{{event.value}}&{{rison context.panel.query}}`,
+        },
+        openInNewTab: false,
+      };
+
+      const context: ActionContext = {
+        data: {
+          data: mockDataPoints,
+        },
+        embeddable: mockEmbeddable,
+      };
+
+      await expect(urlDrilldown.isCompatible(config, context)).resolves.toBe(true);
+    });
+
+    test('not compatible if url is invalid', async () => {
+      const config: Config = {
+        url: {
+          template: `https://elasti.co/?{{event.value}}&{{rison context.panel.somethingFake}}`,
+        },
+        openInNewTab: false,
+      };
+
+      const context: ActionContext = {
+        data: {
+          data: mockDataPoints,
+        },
+        embeddable: mockEmbeddable,
+      };
+
+      await expect(urlDrilldown.isCompatible(config, context)).resolves.toBe(false);
+    });
+  });
+
+  describe('getHref & execute', () => {
+    beforeEach(() => {
+      mockNavigateToUrl.mockReset();
+    });
+
+    test('valid url', async () => {
+      const config: Config = {
+        url: {
+          template: `https://elasti.co/?{{event.value}}&{{rison context.panel.query}}`,
+        },
+        openInNewTab: false,
+      };
+
+      const context: ActionContext = {
+        data: {
+          data: mockDataPoints,
+        },
+        embeddable: mockEmbeddable,
+      };
+
+      const url = await urlDrilldown.getHref(config, context);
+      expect(url).toMatchInlineSnapshot(`"https://elasti.co/?test&(language:kuery,query:test)"`);
+
+      await urlDrilldown.execute(config, context);
+      expect(mockNavigateToUrl).toBeCalledWith(url);
+    });
+
+    test('invalid url', async () => {
+      const config: Config = {
+        url: {
+          template: `https://elasti.co/?{{event.value}}&{{rison context.panel.invalid}}`,
+        },
+        openInNewTab: false,
+      };
+
+      const context: ActionContext = {
+        data: {
+          data: mockDataPoints,
+        },
+        embeddable: mockEmbeddable,
+      };
+
+      await expect(urlDrilldown.getHref(config, context)).rejects.toThrowError();
+      await expect(urlDrilldown.execute(config, context)).rejects.toThrowError();
+      expect(mockNavigateToUrl).not.toBeCalled();
+    });
+  });
+});