Drilldown context menu (#59638)

* fix: 🐛 fix TypeScript error * feat: 🎸 add CONTEXT_MENU_DRILLDOWNS_TRIGGER trigger * fix: 🐛 correctly order context menu items * fix: 🐛 set correct order on drilldown flyout actions * fix: 🐛 clean up context menu building functions * feat: 🎸 add context menu separator action
elastic · Mar 9, 2020 · 43583c2 · 43583c2
1 parent a7ed6ab
commit 43583c2
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 41 deletions.
diff --git a/src/plugins/embeddable/public/bootstrap.ts b/src/plugins/embeddable/public/bootstrap.ts
@@ -21,6 +21,7 @@ import { Filter } from '../../data/public';
 import {
   applyFilterTrigger,
   contextMenuTrigger,
+  contextMenuDrilldownsTrigger,
   createFilterAction,
   panelBadgeTrigger,
   selectRangeTrigger,
@@ -32,6 +33,7 @@ import {
   VALUE_CLICK_TRIGGER,
   SELECT_RANGE_TRIGGER,
   CONTEXT_MENU_TRIGGER,
+  CONTEXT_MENU_DRILLDOWNS_TRIGGER,
   PANEL_BADGE_TRIGGER,
   ACTION_ADD_PANEL,
   ACTION_CUSTOMIZE_PANEL,
@@ -51,6 +53,7 @@ declare module '../../ui_actions/public' {
       filters: Filter[];
     };
     [CONTEXT_MENU_TRIGGER]: EmbeddableContext;
+    [CONTEXT_MENU_DRILLDOWNS_TRIGGER]: EmbeddableContext;
     [PANEL_BADGE_TRIGGER]: EmbeddableContext;
   }
 
@@ -70,6 +73,7 @@ declare module '../../ui_actions/public' {
  */
 export const bootstrap = (uiActions: UiActionsSetup) => {
   uiActions.registerTrigger(contextMenuTrigger);
+  uiActions.registerTrigger(contextMenuDrilldownsTrigger);
   uiActions.registerTrigger(applyFilterTrigger);
   uiActions.registerTrigger(panelBadgeTrigger);
   uiActions.registerTrigger(selectRangeTrigger);

diff --git a/src/plugins/embeddable/public/index.ts b/src/plugins/embeddable/public/index.ts
@@ -33,6 +33,7 @@ export {
   ContainerInput,
   ContainerOutput,
   CONTEXT_MENU_TRIGGER,
+  CONTEXT_MENU_DRILLDOWNS_TRIGGER,
   contextMenuTrigger,
   ACTION_EDIT_PANEL,
   EditPanelAction,

diff --git a/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx b/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx
@@ -20,12 +20,22 @@ import { EuiContextMenuPanelDescriptor, EuiPanel, htmlIdGenerator } from '@elast
 import classNames from 'classnames';
 import React from 'react';
 import { Subscription } from 'rxjs';
-import { buildContextMenuForActions, UiActionsService, Action } from '../ui_actions';
+import {
+  buildContextMenuForActions,
+  UiActionsService,
+  Action,
+  contextMenuSeparatorAction,
+} from '../ui_actions';
 import { CoreStart, OverlayStart } from '../../../../../core/public';
 import { toMountPoint } from '../../../../kibana_react/public';
 
 import { Start as InspectorStartContract } from '../inspector';
-import { CONTEXT_MENU_TRIGGER, PANEL_BADGE_TRIGGER, EmbeddableContext } from '../triggers';
+import {
+  CONTEXT_MENU_TRIGGER,
+  CONTEXT_MENU_DRILLDOWNS_TRIGGER,
+  PANEL_BADGE_TRIGGER,
+  EmbeddableContext,
+} from '../triggers';
 import { IEmbeddable } from '../embeddables/i_embeddable';
 import { ViewMode, GetEmbeddableFactory, GetEmbeddableFactories } from '../types';
 
@@ -37,6 +47,14 @@ import { InspectPanelAction } from './panel_header/panel_actions/inspect_panel_a
 import { EditPanelAction } from '../actions';
 import { CustomizePanelModal } from './panel_header/panel_actions/customize_title/customize_panel_modal';
 
+const sortByOrderField = (
+  { order: orderA }: { order?: number },
+  { order: orderB }: { order?: number }
+) => (orderB || 0) - (orderA || 0);
+
+const removeById = (disabledActions: string[]) => ({ id }: { id: string }) =>
+  disabledActions.indexOf(id) === -1;
+
 interface Props {
   embeddable: IEmbeddable<any, any>;
   getActions: UiActionsService['getTriggerCompatibleActions'];
@@ -200,13 +218,18 @@ export class EmbeddablePanel extends React.Component<Props, State> {
   };
 
   private getActionContextMenuPanel = async () => {
-    let actions = await this.props.getActions(CONTEXT_MENU_TRIGGER, {
+    let regularActions = await this.props.getActions(CONTEXT_MENU_TRIGGER, {
+      embeddable: this.props.embeddable,
+    });
+    let drilldownActions = await this.props.getActions(CONTEXT_MENU_DRILLDOWNS_TRIGGER, {
       embeddable: this.props.embeddable,
     });
 
     const { disabledActions } = this.props.embeddable.getInput();
     if (disabledActions) {
-      actions = actions.filter(action => disabledActions.indexOf(action.id) === -1);
+      const removeDisabledActions = removeById(disabledActions);
+      regularActions = regularActions.filter(removeDisabledActions);
+      drilldownActions = drilldownActions.filter(removeDisabledActions);
     }
 
     const createGetUserData = (overlays: OverlayStart) =>
@@ -245,16 +268,16 @@ export class EmbeddablePanel extends React.Component<Props, State> {
       new EditPanelAction(this.props.getEmbeddableFactory),
     ];
 
-    const sorted = (actions as Array<Action<EmbeddableContext>>)
-      .concat(extraActions)
-      .sort((a: Action<EmbeddableContext>, b: Action<EmbeddableContext>) => {
-        const bOrder = b.order || 0;
-        const aOrder = a.order || 0;
-        return bOrder - aOrder;
-      });
+    const sortedRegularActions = [...regularActions, ...extraActions].sort(sortByOrderField);
+    const sortedDrilldownActions = [...drilldownActions].sort(sortByOrderField);
+    const actions = [
+      ...sortedDrilldownActions,
+      ...(sortedDrilldownActions.length ? [contextMenuSeparatorAction] : []),
+      ...sortedRegularActions,
+    ];
 
     return await buildContextMenuForActions({
-      actions: sorted,
+      actions,
       actionContext: { embeddable: this.props.embeddable },
       closeMenu: this.closeMyContextMenuPanel,
     });

diff --git a/src/plugins/embeddable/public/lib/triggers/triggers.ts b/src/plugins/embeddable/public/lib/triggers/triggers.ts
@@ -54,6 +54,13 @@ export const contextMenuTrigger: Trigger<'CONTEXT_MENU_TRIGGER'> = {
   description: 'Triggered on top-right corner context-menu select.',
 };
 
+export const CONTEXT_MENU_DRILLDOWNS_TRIGGER = 'CONTEXT_MENU_DRILLDOWNS_TRIGGER';
+export const contextMenuDrilldownsTrigger: Trigger<'CONTEXT_MENU_DRILLDOWNS_TRIGGER'> = {
+  id: CONTEXT_MENU_DRILLDOWNS_TRIGGER,
+  title: 'Drilldown context menu',
+  description: 'Triggered on top-right corner context-menu select.',
+};
+
 export const APPLY_FILTER_TRIGGER = 'FILTER_TRIGGER';
 export const applyFilterTrigger: Trigger<'FILTER_TRIGGER'> = {
   id: APPLY_FILTER_TRIGGER,

diff --git a/src/plugins/ui_actions/public/context_menu/build_eui_context_menu_panels.tsx b/src/plugins/ui_actions/public/context_menu/build_eui_context_menu_panels.tsx
@@ -21,8 +21,23 @@ import * as React from 'react';
 import { EuiContextMenuPanelDescriptor, EuiContextMenuPanelItemDescriptor } from '@elastic/eui';
 import _ from 'lodash';
 import { i18n } from '@kbn/i18n';
-import { uiToReactComponent } from '../../../kibana_react/public';
-import { Action } from '../actions';
+import { uiToReactComponent, reactToUiComponent } from '../../../kibana_react/public';
+import { Action, ActionInternal } from '../actions';
+
+export const contextMenuSeparatorAction = new ActionInternal({
+  id: 'CONTEXT_MENU_SEPARATOR',
+  getDisplayName: () => 'separator',
+  MenuItem: reactToUiComponent(() => (
+    <div
+      style={{
+        width: '100%',
+        height: '1px',
+        background: 'red',
+      }}
+    />
+  )),
+  execute: () => Promise.resolve(),
+});
 
 /**
  * Transforms an array of Actions to the shape EuiContextMenuPanel expects.
@@ -63,33 +78,25 @@ async function buildEuiContextMenuPanelItems<Context extends object>({
   actionContext: Context;
   closeMenu: () => void;
 }) {
-  const items: EuiContextMenuPanelItemDescriptor[] = [];
-  const promises = actions.map(async action => {
+  const items: EuiContextMenuPanelItemDescriptor[] = new Array(actions.length);
+  const promises = actions.map(async (action, index) => {
     const isCompatible = await action.isCompatible(actionContext);
     if (!isCompatible) {
       return;
     }
 
-    items.push(
-      convertPanelActionToContextMenuItem({
-        action,
-        actionContext,
-        closeMenu,
-      })
-    );
+    items[index] = convertPanelActionToContextMenuItem({
+      action,
+      actionContext,
+      closeMenu,
+    });
   });
 
   await Promise.all(promises);
 
-  return items;
+  return items.filter(Boolean);
 }
 
-/**
- *
- * @param {ContextMenuAction} action
- * @param {Embeddable} embeddable
- * @return {EuiContextMenuPanelItemDescriptor}
- */
 function convertPanelActionToContextMenuItem<Context extends object>({
   action,
   actionContext,
@@ -115,8 +122,11 @@ function convertPanelActionToContextMenuItem<Context extends object>({
     closeMenu();
   };
 
-  if (action.getHref && action.getHref(actionContext)) {
-    menuPanelItem.href = action.getHref(actionContext);
+  if (action.getHref) {
+    const href = action.getHref(actionContext);
+    if (href) {
+      menuPanelItem.href = action.getHref(actionContext);
+    }
   }
 
   return menuPanelItem;

diff --git a/src/plugins/ui_actions/public/context_menu/index.ts b/src/plugins/ui_actions/public/context_menu/index.ts
@@ -17,5 +17,8 @@
  * under the License.
  */
 
-export { buildContextMenuForActions } from './build_eui_context_menu_panels';
+export {
+  buildContextMenuForActions,
+  contextMenuSeparatorAction,
+} from './build_eui_context_menu_panels';
 export { openContextMenu } from './open_context_menu';
diff --git a/src/plugins/ui_actions/public/index.ts b/src/plugins/ui_actions/public/index.ts
@@ -35,7 +35,7 @@ export {
   ActionContract as UiActionsActionContract,
 } from './actions';
 export { CollectConfigProps as UiActionsCollectConfigProps } from './util';
-export { buildContextMenuForActions } from './context_menu';
+export { buildContextMenuForActions, contextMenuSeparatorAction } from './context_menu';
 export { Trigger, TriggerContext } from './triggers';
 export { TriggerContextMapping, TriggerId, ActionContextMapping, ActionType } from './types';
 export { ActionByType } from './actions';
diff --git a/x-pack/plugins/drilldowns/public/actions/flyout_create_drilldown/index.tsx b/x-pack/plugins/drilldowns/public/actions/flyout_create_drilldown/index.tsx
@@ -25,7 +25,7 @@ export interface OpenFlyoutAddDrilldownParams {
 export class FlyoutCreateDrilldownAction implements ActionByType<typeof OPEN_FLYOUT_ADD_DRILLDOWN> {
   public readonly type = OPEN_FLYOUT_ADD_DRILLDOWN;
   public readonly id = OPEN_FLYOUT_ADD_DRILLDOWN;
-  public order = 100;
+  public order = 2;
 
   constructor(protected readonly params: OpenFlyoutAddDrilldownParams) {}
 

diff --git a/x-pack/plugins/drilldowns/public/actions/flyout_edit_drilldown/index.tsx b/x-pack/plugins/drilldowns/public/actions/flyout_edit_drilldown/index.tsx
@@ -14,7 +14,7 @@ import {
   reactToUiComponent,
 } from '../../../../../../src/plugins/kibana_react/public';
 import { IEmbeddable } from '../../../../../../src/plugins/embeddable/public';
-import { FormCreateDrilldown } from '../../components/form_create_drilldown';
+import { FormDrilldownWizard } from '../../components/form_drilldown_wizard';
 
 export const OPEN_FLYOUT_EDIT_DRILLDOWN = 'OPEN_FLYOUT_EDIT_DRILLDOWN';
 
@@ -36,7 +36,7 @@ const drilldrownCount = 2;
 export class FlyoutEditDrilldownAction implements ActionByType<typeof OPEN_FLYOUT_EDIT_DRILLDOWN> {
   public readonly type = OPEN_FLYOUT_EDIT_DRILLDOWN;
   public readonly id = OPEN_FLYOUT_EDIT_DRILLDOWN;
-  public order = 100;
+  public order = 1;
 
   constructor(protected readonly params: FlyoutEditDrilldownParams) {}
 
@@ -67,6 +67,6 @@ export class FlyoutEditDrilldownAction implements ActionByType<typeof OPEN_FLYOU
 
   public async execute({ embeddable }: FlyoutEditDrilldownActionContext) {
     const overlays = await this.params.overlays();
-    overlays.openFlyout(toMountPoint(<FormCreateDrilldown />));
+    overlays.openFlyout(toMountPoint(<FormDrilldownWizard />));
   }
 }
diff --git a/x-pack/plugins/drilldowns/public/service/drilldown_service.ts b/x-pack/plugins/drilldowns/public/service/drilldown_service.ts
@@ -5,7 +5,7 @@
  */
 
 import { CoreSetup } from 'src/core/public';
-import { CONTEXT_MENU_TRIGGER } from '../../../../../src/plugins/embeddable/public';
+import { CONTEXT_MENU_DRILLDOWNS_TRIGGER } from '../../../../../src/plugins/embeddable/public';
 import { FlyoutCreateDrilldownAction, FlyoutEditDrilldownAction } from '../actions';
 import { DrilldownsSetupDependencies } from '../plugin';
 
@@ -15,11 +15,11 @@ export class DrilldownService {
 
     const actionFlyoutCreateDrilldown = new FlyoutCreateDrilldownAction({ overlays });
     uiActions.registerAction(actionFlyoutCreateDrilldown);
-    uiActions.attachAction(CONTEXT_MENU_TRIGGER, actionFlyoutCreateDrilldown);
+    uiActions.attachAction(CONTEXT_MENU_DRILLDOWNS_TRIGGER, actionFlyoutCreateDrilldown);
 
     const actionFlyoutEditDrilldown = new FlyoutEditDrilldownAction({ overlays });
     uiActions.registerAction(actionFlyoutEditDrilldown);
-    uiActions.attachAction(CONTEXT_MENU_TRIGGER, actionFlyoutEditDrilldown);
+    uiActions.attachAction(CONTEXT_MENU_DRILLDOWNS_TRIGGER, actionFlyoutEditDrilldown);
   }
 
   /**