From 5925fcd2d72c8e0e49a948014eb69d5b13c7c6d8 Mon Sep 17 00:00:00 2001 From: Matthew Kime Date: Fri, 6 Mar 2020 20:58:24 -0600 Subject: [PATCH] Implement embeddable drilldown menu options (#59232) * Implement embeddable drilldown menu options --- src/plugins/embeddable/public/index.ts | 1 + .../actions/flyout_create_drilldown/index.tsx | 6 +- .../actions/flyout_edit_drilldown/index.tsx | 72 +++++++++++++++++++ .../drilldowns/public/actions/index.ts | 1 + x-pack/plugins/drilldowns/public/plugin.ts | 8 ++- .../public/service/drilldown_service.ts | 11 +-- 6 files changed, 91 insertions(+), 8 deletions(-) create mode 100644 x-pack/plugins/drilldowns/public/actions/flyout_edit_drilldown/index.tsx diff --git a/src/plugins/embeddable/public/index.ts b/src/plugins/embeddable/public/index.ts index 34abd57eeacdda3..0b5fd8184deb10d 100644 --- a/src/plugins/embeddable/public/index.ts +++ b/src/plugins/embeddable/public/index.ts @@ -39,6 +39,7 @@ export { Embeddable, EmbeddableChildPanel, EmbeddableChildPanelProps, + EmbeddableContext, EmbeddableFactory, EmbeddableFactoryNotFoundError, EmbeddableFactoryRenderer, 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 index 1db57eb3d0b2891..4834cc80813742c 100644 --- 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,13 +25,13 @@ export interface OpenFlyoutAddDrilldownParams { export class FlyoutCreateDrilldownAction implements ActionByType { 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 Promise; +} + +const displayName = i18n.translate('xpack.drilldowns.panel.openFlyoutEditDrilldown.displayName', { + defaultMessage: 'Manage drilldowns', +}); + +// mocked data +const drilldrownCount = 2; + +export class FlyoutEditDrilldownAction implements ActionByType { + 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}{' '} + + {drilldrownCount} + + + ); + }; + + 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()); + } +} diff --git a/x-pack/plugins/drilldowns/public/actions/index.ts b/x-pack/plugins/drilldowns/public/actions/index.ts index ce235043b4ef6e2..4a0a34f08428ab7 100644 --- a/x-pack/plugins/drilldowns/public/actions/index.ts +++ b/x-pack/plugins/drilldowns/public/actions/index.ts @@ -5,3 +5,4 @@ */ export * from './flyout_create_drilldown'; +export * from './flyout_edit_drilldown'; diff --git a/x-pack/plugins/drilldowns/public/plugin.ts b/x-pack/plugins/drilldowns/public/plugin.ts index 1761e17d55986aa..b89172541b91e3b 100644 --- a/x-pack/plugins/drilldowns/public/plugin.ts +++ b/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; } } diff --git a/x-pack/plugins/drilldowns/public/service/drilldown_service.ts b/x-pack/plugins/drilldowns/public/service/drilldown_service.ts index 715b0ce8e60e1ee..7209045191e94a0 100644 --- a/x-pack/plugins/drilldowns/public/service/drilldown_service.ts +++ b/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); } /**