diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx b/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx index 35a10ed848e83..bb2eb52f9df72 100644 --- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx +++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_header.tsx @@ -62,16 +62,34 @@ function renderNotifications( notifications: Array>, embeddable: IEmbeddable ) { - return notifications.map(notification => ( - notification.execute({ embeddable })} - > - {notification.getDisplayName({ embeddable })} - - )); + return notifications.map(notification => { + const context = { embeddable }; + + let badge = ( + notification.execute(context)} + > + {notification.getDisplayName(context)} + + ); + + if (notification.getDisplayNameTooltip) { + const tooltip = notification.getDisplayNameTooltip(context); + + if (tooltip) { + badge = ( + + {badge} + + ); + } + } + + return badge; + }); } function renderTooltip(description: string) { diff --git a/src/plugins/ui_actions/public/actions/action_internal.ts b/src/plugins/ui_actions/public/actions/action_internal.ts index e3504c7c5d301..aba1e22fe09ee 100644 --- a/src/plugins/ui_actions/public/actions/action_internal.ts +++ b/src/plugins/ui_actions/public/actions/action_internal.ts @@ -48,6 +48,11 @@ export class ActionInternal return this.definition.getDisplayName(context); } + public getDisplayNameTooltip(context: Context): string { + if (!this.definition.getDisplayNameTooltip) return ''; + return this.definition.getDisplayNameTooltip(context); + } + public async isCompatible(context: Context): Promise { if (!this.definition.isCompatible) return true; return await this.definition.isCompatible(context); diff --git a/src/plugins/ui_actions/public/util/presentable.ts b/src/plugins/ui_actions/public/util/presentable.ts index f43b776e74658..57070f7673f61 100644 --- a/src/plugins/ui_actions/public/util/presentable.ts +++ b/src/plugins/ui_actions/public/util/presentable.ts @@ -50,6 +50,12 @@ export interface Presentable { */ getDisplayName(context: Context): string; + /** + * Returns tooltip text which should be displayed when user hovers this object. + * Should return empty string if tooltip should not be displayed. + */ + getDisplayNameTooltip(context: Context): string; + /** * This method should return a link if this item can be clicked on. The link * is used to navigate user if user middle-clicks it or Ctrl + clicks or diff --git a/x-pack/.i18nrc.json b/x-pack/.i18nrc.json index a033515fef8b0..7c464d44d5761 100644 --- a/x-pack/.i18nrc.json +++ b/x-pack/.i18nrc.json @@ -14,6 +14,7 @@ "xpack.dashboardMode": "legacy/plugins/dashboard_mode", "xpack.data": "plugins/data_enhanced", "xpack.drilldowns": "plugins/drilldowns", + "xpack.embeddableEnhanced": "plugins/embeddable_enhanced", "xpack.endpoint": "plugins/endpoint", "xpack.features": "plugins/features", "xpack.fileUpload": "plugins/file_upload", diff --git a/x-pack/plugins/advanced_ui_actions/public/dynamic_actions/action_factory.ts b/x-pack/plugins/advanced_ui_actions/public/dynamic_actions/action_factory.ts index f1aef5deff49e..262a5ef7d4561 100644 --- a/x-pack/plugins/advanced_ui_actions/public/dynamic_actions/action_factory.ts +++ b/x-pack/plugins/advanced_ui_actions/public/dynamic_actions/action_factory.ts @@ -42,6 +42,10 @@ export class ActionFactory< return this.def.getDisplayName(context); } + public getDisplayNameTooltip(context: FactoryContext): string { + return ''; + } + public async isCompatible(context: FactoryContext): Promise { if (!this.def.isCompatible) return true; return await this.def.isCompatible(context); diff --git a/x-pack/plugins/embeddable_enhanced/public/actions/panel_notifications_action.test.ts b/x-pack/plugins/embeddable_enhanced/public/actions/panel_notifications_action.test.ts index 839379387e094..158641cd97695 100644 --- a/x-pack/plugins/embeddable_enhanced/public/actions/panel_notifications_action.test.ts +++ b/x-pack/plugins/embeddable_enhanced/public/actions/panel_notifications_action.test.ts @@ -47,6 +47,40 @@ describe('PanelNotificationsAction', () => { }); }); + describe('getDisplayNameTooltip', () => { + test('returns empty string if embeddable has no event', async () => { + const context = createContext(); + const action = new PanelNotificationsAction(); + + const name = await action.getDisplayNameTooltip(context); + expect(name).toBe(''); + }); + + test('returns "1 drilldown" if embeddable has one event', async () => { + const context = createContext([{}]); + const action = new PanelNotificationsAction(); + + const name = await action.getDisplayNameTooltip(context); + expect(name).toBe('Panel has 1 drilldown'); + }); + + test('returns "2 drilldowns" if embeddable has two events', async () => { + const context = createContext([{}, {}]); + const action = new PanelNotificationsAction(); + + const name = await action.getDisplayNameTooltip(context); + expect(name).toBe('Panel has 2 drilldowns'); + }); + + test('returns "3 drilldowns" if embeddable has three events', async () => { + const context = createContext([{}, {}, {}]); + const action = new PanelNotificationsAction(); + + const name = await action.getDisplayNameTooltip(context); + expect(name).toBe('Panel has 3 drilldowns'); + }); + }); + describe('isCompatible', () => { test('returns false if not in "edit" mode', async () => { const context = createContext([{}]); diff --git a/x-pack/plugins/embeddable_enhanced/public/actions/panel_notifications_action.ts b/x-pack/plugins/embeddable_enhanced/public/actions/panel_notifications_action.ts index 19e0ac2a5a6d8..165ce24c13ea3 100644 --- a/x-pack/plugins/embeddable_enhanced/public/actions/panel_notifications_action.ts +++ b/x-pack/plugins/embeddable_enhanced/public/actions/panel_notifications_action.ts @@ -4,10 +4,26 @@ * you may not use this file except in compliance with the Elastic License. */ +import { i18n } from '@kbn/i18n'; import { UiActionsActionDefinition as ActionDefinition } from '../../../../../src/plugins/ui_actions/public'; import { ViewMode } from '../../../../../src/plugins/embeddable/public'; import { EnhancedEmbeddableContext, EnhancedEmbeddable } from '../types'; +export const txtOneDrilldown = i18n.translate( + 'xpack.embeddableEnhanced.actions.panelNotifications.oneDrilldown', + { + defaultMessage: 'Panel has 1 drilldown', + } +); + +export const txtManyDrilldowns = (count: number) => + i18n.translate('xpack.embeddableEnhanced.actions.panelNotifications.manyDrilldowns', { + defaultMessage: 'Panel has {count} drilldowns', + values: { + count: String(count), + }, + }); + export const ACTION_PANEL_NOTIFICATIONS = 'ACTION_PANEL_NOTIFICATIONS'; /** @@ -25,6 +41,11 @@ export class PanelNotificationsAction implements ActionDefinition { + const count = this.getEventCount(embeddable); + return !count ? '' : count === 1 ? txtOneDrilldown : txtManyDrilldowns(count); + }; + public readonly isCompatible = async ({ embeddable }: EnhancedEmbeddableContext) => { if (embeddable.getInput().viewMode !== ViewMode.EDIT) return false; return this.getEventCount(embeddable) > 0;