[wip] URL drilldown

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

@@ -11,7 +11,7 @@ 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 { SampleUrlDrilldown } from './sample_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';
@@ -37,7 +37,11 @@ export class UiActionsEnhancedExamplesPlugin
     const start = createStartServicesGetter(core.getStartServices);
 
     uiActions.registerDrilldown(new DashboardHelloWorldDrilldown());
-    uiActions.registerDrilldown(new DashboardToUrlDrilldown());
+    uiActions.registerDrilldown(
+      new SampleUrlDrilldown({
+        getGlobalScope: () => ({ kibanaUrl: window.location.origin + core.http.basePath.get() }),
+      })
+    );
     uiActions.registerDrilldown(new DashboardToDiscoverDrilldown({ start }));
   }
 

x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_url_drilldown/index.tsx → x-pack/examples/ui_actions_enhanced_examples/public/sample_url_drilldown/index.tsx

@@ -5,13 +5,15 @@
  */
 
 import React from 'react';
-import { EuiFormRow, EuiSwitch, EuiFieldText, EuiCallOut, EuiSpacer } from '@elastic/eui';
+import { EuiCallOut, EuiSpacer } from '@elastic/eui';
 import { reactToUiComponent } from '../../../../../src/plugins/kibana_react/public';
-import { UiActionsEnhancedDrilldownDefinition as Drilldown } from '../../../../plugins/ui_actions_enhanced/public';
 import {
-  RangeSelectTriggerContext,
-  ValueClickTriggerContext,
-} from '../../../../../src/plugins/embeddable/public';
+  UiActionsEnhancedDrilldownDefinition as Drilldown,
+  UiActionsEnhancedUrlDrilldownCollectConfig as UrlDrilldownCollectConfig,
+  UiActionsEnhancedUrlDrilldownConfig as UrlDrilldownConfig,
+  UiActionsEnhancedUrlDrilldownGlobalScope as UrlDrilldownGlobalScope,
+  uiActionsEnhancedUrlDrilldownCompile as compile,
+} from '../../../../plugins/ui_actions_enhanced/public';
 import { CollectConfigProps as CollectConfigPropsBase } from '../../../../../src/plugins/kibana_utils/public';
 
 function isValidUrl(url: string) {
@@ -23,26 +25,26 @@ function isValidUrl(url: string) {
   }
 }
 
-export type ActionContext = RangeSelectTriggerContext | ValueClickTriggerContext;
-
 export interface Config {
   url: string;
   openInNewTab: boolean;
 }
 
 export type CollectConfigProps = CollectConfigPropsBase<Config>;
 
-const SAMPLE_DASHBOARD_TO_URL_DRILLDOWN = 'SAMPLE_DASHBOARD_TO_URL_DRILLDOWN';
+const SAMPLE_URL_DRILLDOWN = 'SAMPLE_URL_DRILLDOWN';
 
-export class DashboardToUrlDrilldown implements Drilldown<Config, ActionContext> {
-  public readonly id = SAMPLE_DASHBOARD_TO_URL_DRILLDOWN;
+export class SampleUrlDrilldown implements Drilldown<UrlDrilldownConfig, {}> {
+  public readonly id = SAMPLE_URL_DRILLDOWN;
 
   public readonly order = 8;
 
   public readonly getDisplayName = () => 'Go to URL (example)';
 
   public readonly euiIcon = 'link';
 
+  constructor(private params: { getGlobalScope: () => UrlDrilldownGlobalScope }) {}
+
   private readonly ReactCollectConfig: React.FC<CollectConfigProps> = ({ config, onConfig }) => (
     <>
       <EuiCallOut title="Example warning!" color="warning" iconType="help">
@@ -57,28 +59,11 @@ export class DashboardToUrlDrilldown implements Drilldown<Config, ActionContext>
         </p>
       </EuiCallOut>
       <EuiSpacer size="xl" />
-      <EuiFormRow label="Enter target URL" fullWidth>
-        <EuiFieldText
-          fullWidth
-          name="url"
-          placeholder="Enter URL"
-          value={config.url}
-          onChange={(event) => onConfig({ ...config, url: event.target.value })}
-          onBlur={() => {
-            if (!config.url) return;
-            if (/https?:\/\//.test(config.url)) return;
-            onConfig({ ...config, url: 'https://' + config.url });
-          }}
-        />
-      </EuiFormRow>
-      <EuiFormRow hasChildLabel={false}>
-        <EuiSwitch
-          name="openInNewTab"
-          label="Open in new tab?"
-          checked={config.openInNewTab}
-          onChange={() => onConfig({ ...config, openInNewTab: !config.openInNewTab })}
-        />
-      </EuiFormRow>
+      <UrlDrilldownCollectConfig
+        config={config}
+        onConfig={onConfig}
+        scope={this.params.getGlobalScope()}
+      />
     </>
   );
 
@@ -98,12 +83,12 @@ export class DashboardToUrlDrilldown implements Drilldown<Config, ActionContext>
    * `getHref` is need to support mouse middle-click and Cmd + Click behavior
    * to open a link in new tab.
    */
-  public readonly getHref = async (config: Config, context: ActionContext) => {
-    return config.url;
+  public readonly getHref = async (config: Config) => {
+    return compile(config.url, this.params.getGlobalScope());
   };
 
-  public readonly execute = async (config: Config, context: ActionContext) => {
-    const url = await this.getHref(config, context);
+  public readonly execute = async (config: Config) => {
+    const url = await this.getHref(config);
 
     if (config.openInNewTab) {
       window.open(url, '_blank');

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

@@ -66,6 +66,7 @@ export class FlyoutCreateDrilldownAction implements ActionByType<typeof OPEN_FLY
           onClose={() => handle.close()}
           viewMode={'create'}
           dynamicActionManager={embeddable.enhancements.dynamicActions}
+          context={{ embeddable }}
         />
       ),
       {

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

@@ -62,6 +62,7 @@ export class FlyoutEditDrilldownAction implements ActionByType<typeof OPEN_FLYOU
           onClose={() => handle.close()}
           viewMode={'manage'}
           dynamicActionManager={embeddable.enhancements.dynamicActions}
+          context={{ embeddable }}
         />
       ),
       {

x-pack/plugins/drilldowns/public/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.tsx

@@ -36,6 +36,11 @@ interface ConnectedFlyoutManageDrilldownsProps {
   dynamicActionManager: DynamicActionManager;
   viewMode?: 'create' | 'manage';
   onClose?: () => void;
+
+  /**
+   * TODO?
+   */
+  context?: object;
 }
 
 /**
@@ -74,9 +79,10 @@ export function createFlyoutManageDrilldowns({
 
     const factoryContext: object = React.useMemo(
       () => ({
+        ...props.context,
         triggers: selectedTriggers,
       }),
-      [selectedTriggers]
+      [props.context, selectedTriggers]
     );
 
     const actionFactories = useCompatibleActionFactoriesForCurrentContext(

x-pack/plugins/embeddable_enhanced/kibana.json

@@ -3,5 +3,5 @@
   "version": "kibana",
   "server": false,
   "ui": true,
-  "requiredPlugins": ["embeddable", "uiActionsEnhanced"]
+  "requiredPlugins": ["embeddable", "uiActionsEnhanced", "data"]
 }

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

@@ -0,0 +1,3 @@
+# Embeddable to URL drilldown
+
+Specific url drilldown implementation which relies on the `IEmbeddable` as context and on `ValueClickTrigger` and `RangeSelectTrigger` for action triggers