From 5893408106c773f40b01c239d9ba9bbe07982938 Mon Sep 17 00:00:00 2001 From: streamich Date: Mon, 4 May 2020 17:58:04 +0200 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20tooltip=20abil?= =?UTF-8?q?ity=20to=20ui=5Factions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/panel/panel_header/panel_header.tsx | 36 +++++++++++++------ .../public/actions/action_internal.ts | 5 +++ .../ui_actions/public/util/presentable.ts | 6 ++++ 3 files changed, 37 insertions(+), 10 deletions(-) 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..62999c5669447 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,32 @@ 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)} + + ); + + 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 4cbc4dd2a053c..d7e120432fdf7 100644 --- a/src/plugins/ui_actions/public/actions/action_internal.ts +++ b/src/plugins/ui_actions/public/actions/action_internal.ts @@ -46,6 +46,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 From b58f00071bcc809edd1dcf8300d605339f2bac6d Mon Sep 17 00:00:00 2001 From: streamich Date: Mon, 4 May 2020 18:11:44 +0200 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20tooltip=20supp?= =?UTF-8?q?ort=20to=20drilldown=20count=20notification?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- x-pack/.i18nrc.json | 1 + .../actions/panel_notifications_action.ts | 21 +++++++++++++++++++ 2 files changed, 22 insertions(+) diff --git a/x-pack/.i18nrc.json b/x-pack/.i18nrc.json index ccf8739dd9730..0a2cab6d38cbf 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/embeddable_enhanced/public/actions/panel_notifications_action.ts b/x-pack/plugins/embeddable_enhanced/public/actions/panel_notifications_action.ts index 19e0ac2a5a6d8..454efaab25568 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: '1 drilldown', + } +); + +export const txtManyDrilldowns = (count: number) => + i18n.translate('xpack.embeddableEnhanced.actions.panelNotifications.manyDrilldowns', { + defaultMessage: '{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 === 1 ? txtOneDrilldown : txtManyDrilldowns(count); + }; + public readonly isCompatible = async ({ embeddable }: EnhancedEmbeddableContext) => { if (embeddable.getInput().viewMode !== ViewMode.EDIT) return false; return this.getEventCount(embeddable) > 0; From 09abd167e366dc080ce03a6b60077532f64d67ea Mon Sep 17 00:00:00 2001 From: streamich Date: Mon, 4 May 2020 18:18:43 +0200 Subject: [PATCH 3/7] =?UTF-8?q?test:=20=F0=9F=92=8D=20add=20drilldown=20to?= =?UTF-8?q?oltip=20text=20tests?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../panel_notifications_action.test.ts | 34 +++++++++++++++++++ .../actions/panel_notifications_action.ts | 2 +- 2 files changed, 35 insertions(+), 1 deletion(-) 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..c6086e84b02ea 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('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('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('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 454efaab25568..c64067f72dac2 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 @@ -43,7 +43,7 @@ export class PanelNotificationsAction implements ActionDefinition { const count = this.getEventCount(embeddable); - return count === 1 ? txtOneDrilldown : txtManyDrilldowns(count); + return !count ? '' : count === 1 ? txtOneDrilldown : txtManyDrilldowns(count); }; public readonly isCompatible = async ({ embeddable }: EnhancedEmbeddableContext) => { From e3b5d3e2fe3f3749f9d9e73c1df38f1c08dcd1b6 Mon Sep 17 00:00:00 2001 From: streamich Date: Mon, 4 May 2020 18:23:56 +0200 Subject: [PATCH 4/7] =?UTF-8?q?fix:=20=F0=9F=90=9B=20improve=20tooltip=20t?= =?UTF-8?q?exts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../public/actions/panel_notifications_action.test.ts | 6 +++--- .../public/actions/panel_notifications_action.ts | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) 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 c6086e84b02ea..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 @@ -61,7 +61,7 @@ describe('PanelNotificationsAction', () => { const action = new PanelNotificationsAction(); const name = await action.getDisplayNameTooltip(context); - expect(name).toBe('1 drilldown'); + expect(name).toBe('Panel has 1 drilldown'); }); test('returns "2 drilldowns" if embeddable has two events', async () => { @@ -69,7 +69,7 @@ describe('PanelNotificationsAction', () => { const action = new PanelNotificationsAction(); const name = await action.getDisplayNameTooltip(context); - expect(name).toBe('2 drilldowns'); + expect(name).toBe('Panel has 2 drilldowns'); }); test('returns "3 drilldowns" if embeddable has three events', async () => { @@ -77,7 +77,7 @@ describe('PanelNotificationsAction', () => { const action = new PanelNotificationsAction(); const name = await action.getDisplayNameTooltip(context); - expect(name).toBe('3 drilldowns'); + expect(name).toBe('Panel has 3 drilldowns'); }); }); 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 c64067f72dac2..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 @@ -12,13 +12,13 @@ import { EnhancedEmbeddableContext, EnhancedEmbeddable } from '../types'; export const txtOneDrilldown = i18n.translate( 'xpack.embeddableEnhanced.actions.panelNotifications.oneDrilldown', { - defaultMessage: '1 drilldown', + defaultMessage: 'Panel has 1 drilldown', } ); export const txtManyDrilldowns = (count: number) => i18n.translate('xpack.embeddableEnhanced.actions.panelNotifications.manyDrilldowns', { - defaultMessage: '{count} drilldowns', + defaultMessage: 'Panel has {count} drilldowns', values: { count: String(count), }, From 0168bdbb3525f5516f8b4b50191acf86d0fa37a3 Mon Sep 17 00:00:00 2001 From: streamich Date: Tue, 5 May 2020 08:43:10 +0200 Subject: [PATCH 5/7] =?UTF-8?q?fix:=20=F0=9F=90=9B=20put=20tooltip=20on=20?= =?UTF-8?q?top?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../embeddable/public/lib/panel/panel_header/panel_header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 62999c5669447..cbcc59c487ffd 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 @@ -80,7 +80,7 @@ function renderNotifications( if (tooltip) { badge = ( - + {badge} ); From 8c4d2d5696874067fa52dcf6dd0f541067310d7e Mon Sep 17 00:00:00 2001 From: streamich Date: Tue, 5 May 2020 10:35:02 +0200 Subject: [PATCH 6/7] =?UTF-8?q?fix:=20=F0=9F=90=9B=20add=20missing=20metho?= =?UTF-8?q?d=20to=20ActionFactory?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../public/dynamic_actions/action_factory.ts | 4 ++++ 1 file changed, 4 insertions(+) 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); From d8c525c8f831d5eb7fee160ad177785959eee749 Mon Sep 17 00:00:00 2001 From: streamich Date: Wed, 6 May 2020 11:22:19 +0200 Subject: [PATCH 7/7] =?UTF-8?q?fix:=20=F0=9F=90=9B=20improve=20handling=20?= =?UTF-8?q?of=20optional=20method?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/panel/panel_header/panel_header.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) 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 cbcc59c487ffd..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 @@ -76,14 +76,16 @@ function renderNotifications( ); - const tooltip = notification.getDisplayNameTooltip!(context); + if (notification.getDisplayNameTooltip) { + const tooltip = notification.getDisplayNameTooltip(context); - if (tooltip) { - badge = ( - - {badge} - - ); + if (tooltip) { + badge = ( + + {badge} + + ); + } } return badge;