Implement embeddable drilldown menu options (elastic#59232)

* Implement embeddable drilldown menu options

src/plugins/embeddable/public/index.ts

@@ -39,6 +39,7 @@ export {
   Embeddable,
   EmbeddableChildPanel,
   EmbeddableChildPanelProps,
+  EmbeddableContext,
   EmbeddableFactory,
   EmbeddableFactoryNotFoundError,
   EmbeddableFactoryRenderer,

x-pack/plugins/drilldowns/public/actions/flyout_create_drilldown/index.tsx

@@ -25,13 +25,13 @@ 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 = 5;
+  public order = 100;
 
   constructor(protected readonly params: OpenFlyoutAddDrilldownParams) {}
 
   public getDisplayName() {
     return i18n.translate('xpack.drilldowns.FlyoutCreateDrilldownAction.displayName', {
-      defaultMessage: 'Create Drilldown',
+      defaultMessage: 'Create drilldown',
     });
   }
 
@@ -40,7 +40,7 @@ export class FlyoutCreateDrilldownAction implements ActionByType<typeof OPEN_FLY
   }
 
   public async isCompatible({ embeddable }: FlyoutCreateDrilldownActionContext) {
-    return true;
+    return embeddable.getInput().viewMode === 'edit';
   }
 
   public async execute(context: FlyoutCreateDrilldownActionContext) {

x-pack/plugins/drilldowns/public/actions/flyout_edit_drilldown/index.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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 React from 'react';
+import { i18n } from '@kbn/i18n';
+import { CoreStart } from 'src/core/public';
+import { EuiNotificationBadge } from '@elastic/eui';
+import { ActionByType } from '../../../../../../src/plugins/ui_actions/public';
+import {
+  toMountPoint,
+  reactToUiComponent,
+} from '../../../../../../src/plugins/kibana_react/public';
+import { IEmbeddable } from '../../../../../../src/plugins/embeddable/public';
+import { FormCreateDrilldown } from '../../components/form_create_drilldown';
+
+export const OPEN_FLYOUT_EDIT_DRILLDOWN = 'OPEN_FLYOUT_EDIT_DRILLDOWN';
+
+export interface FlyoutEditDrilldownActionContext {
+  embeddable: IEmbeddable;
+}
+
+export interface FlyoutEditDrilldownParams {
+  overlays: () => Promise<CoreStart['overlays']>;
+}
+
+const displayName = i18n.translate('xpack.drilldowns.panel.openFlyoutEditDrilldown.displayName', {
+  defaultMessage: 'Manage drilldowns',
+});
+
+// mocked data
+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;
+
+  constructor(protected readonly params: FlyoutEditDrilldownParams) {}
+
+  public getDisplayName() {
+    return displayName;
+  }
+
+  public getIconType() {
+    return 'list';
+  }
+
+  private ReactComp: React.FC<{ context: FlyoutEditDrilldownActionContext }> = () => {
+    return (
+      <>
+        {displayName}{' '}
+        <EuiNotificationBadge color="subdued" style={{ float: 'right' }}>
+          {drilldrownCount}
+        </EuiNotificationBadge>
+      </>
+    );
+  };
+
+  MenuItem = reactToUiComponent(this.ReactComp);
+
+  public async isCompatible({ embeddable }: FlyoutEditDrilldownActionContext) {
+    return embeddable.getInput().viewMode === 'edit' && drilldrownCount > 0;
+  }
+
+  public async execute({ embeddable }: FlyoutEditDrilldownActionContext) {
+    const overlays = await this.params.overlays();
+    overlays.openFlyout(toMountPoint(<FormCreateDrilldown />));
+  }
+}

x-pack/plugins/drilldowns/public/actions/index.ts

@@ -5,3 +5,4 @@
  */
 
 export * from './flyout_create_drilldown';
+export * from './flyout_edit_drilldown';

x-pack/plugins/drilldowns/public/plugin.ts

@@ -7,7 +7,12 @@
 import { CoreStart, CoreSetup, Plugin } from 'src/core/public';
 import { UiActionsSetup, UiActionsStart } from '../../../../src/plugins/ui_actions/public';
 import { DrilldownService } from './service';
-import { FlyoutCreateDrilldownActionContext, OPEN_FLYOUT_ADD_DRILLDOWN } from './actions';
+import {
+  FlyoutCreateDrilldownActionContext,
+  FlyoutEditDrilldownActionContext,
+  OPEN_FLYOUT_ADD_DRILLDOWN,
+  OPEN_FLYOUT_EDIT_DRILLDOWN,
+} from './actions';
 
 export interface DrilldownsSetupDependencies {
   uiActions: UiActionsSetup;
@@ -25,6 +30,7 @@ export interface DrilldownsStartContract {}
 declare module '../../../../src/plugins/ui_actions/public' {
   export interface ActionContextMapping {
     [OPEN_FLYOUT_ADD_DRILLDOWN]: FlyoutCreateDrilldownActionContext;
+    [OPEN_FLYOUT_EDIT_DRILLDOWN]: FlyoutEditDrilldownActionContext;
   }
 }
 

x-pack/plugins/drilldowns/public/service/drilldown_service.ts

@@ -6,17 +6,20 @@
 
 import { CoreSetup } from 'src/core/public';
 import { CONTEXT_MENU_TRIGGER } from '../../../../../src/plugins/embeddable/public';
-import { FlyoutCreateDrilldownAction } from '../actions';
+import { FlyoutCreateDrilldownAction, FlyoutEditDrilldownAction } from '../actions';
 import { DrilldownsSetupDependencies } from '../plugin';
 
 export class DrilldownService {
   bootstrap(core: CoreSetup, { uiActions }: DrilldownsSetupDependencies) {
-    const actionFlyoutCreateDrilldown = new FlyoutCreateDrilldownAction({
-      overlays: async () => (await core.getStartServices())[0].overlays,
-    });
+    const overlays = async () => (await core.getStartServices())[0].overlays;
 
+    const actionFlyoutCreateDrilldown = new FlyoutCreateDrilldownAction({ overlays });
     uiActions.registerAction(actionFlyoutCreateDrilldown);
     uiActions.attachAction(CONTEXT_MENU_TRIGGER, actionFlyoutCreateDrilldown);
+
+    const actionFlyoutEditDrilldown = new FlyoutEditDrilldownAction({ overlays });
+    uiActions.registerAction(actionFlyoutEditDrilldown);
+    uiActions.attachAction(CONTEXT_MENU_TRIGGER, actionFlyoutEditDrilldown);
   }
 
   /**