[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