feat: 🎸 open new drilldown flyout from panel's context menu

Author: streamich

src/plugins/embeddable/public/lib/panel/actions/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export * from './open_flyout_add_drilldown';

src/plugins/embeddable/public/lib/panel/actions/open_flyout_add_drilldown/index.tsx

@@ -0,0 +1,62 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { Action } from '../../../../../../ui_actions/public';
+import { toMountPoint } from '../../../../../../kibana_react/public';
+import { IEmbeddable } from '../../../embeddables';
+import { CoreStart } from '../../../../../../../core/public';
+import { FormCreateDrilldown } from '../../../../components/form_create_drilldown';
+
+export const OPEN_FLYOUT_ADD_DRILLDOWN = '';
+
+interface ActionContext {
+  embeddable: IEmbeddable;
+}
+
+export interface OpenFlyoutAddDrilldownParams {
+  overlays: CoreStart['overlays'];
+}
+
+export class OpenFlyoutAddDrilldown implements Action<ActionContext> {
+  public readonly type = OPEN_FLYOUT_ADD_DRILLDOWN;
+  public readonly id = OPEN_FLYOUT_ADD_DRILLDOWN;
+  public order = 100;
+
+  constructor(protected readonly params: OpenFlyoutAddDrilldownParams) {}
+
+  public getDisplayName() {
+    return i18n.translate('embeddableApi.panel.openFlyoutAddDrilldown.displayName', {
+      defaultMessage: 'Add drilldown',
+    });
+  }
+
+  public getIconType() {
+    return 'empty';
+  }
+
+  public async isCompatible({ embeddable }: ActionContext) {
+    return true;
+  }
+
+  public async execute({ embeddable }: ActionContext) {
+    this.params.overlays.openFlyout(toMountPoint(<FormCreateDrilldown />));
+  }
+}

src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx

@@ -36,6 +36,7 @@ import { PanelHeader } from './panel_header/panel_header';
 import { InspectPanelAction } from './panel_header/panel_actions/inspect_panel_action';
 import { EditPanelAction } from '../actions';
 import { CustomizePanelModal } from './panel_header/panel_actions/customize_title/customize_panel_modal';
+import { OpenFlyoutAddDrilldown } from './actions/open_flyout_add_drilldown';
 
 interface Props {
   embeddable: IEmbeddable<any, any>;
@@ -243,6 +244,9 @@ export class EmbeddablePanel extends React.Component<Props, State> {
       new InspectPanelAction(this.props.inspector),
       new RemovePanelAction(),
       new EditPanelAction(this.props.getEmbeddableFactory),
+      new OpenFlyoutAddDrilldown({
+        overlays: this.props.overlays,
+      }),
     ];
 
     const sorted = actions.concat(extraActions).sort((a: Action, b: Action) => {