From e7e8d2f13b44ae78b33ada4a3904b17066c6fd37 Mon Sep 17 00:00:00 2001 From: Ola Pawlus <98127445+olapawlus@users.noreply.github.com> Date: Fri, 9 May 2025 19:24:49 +0200 Subject: [PATCH] Fix: success message and scroll after adding panel from library (#220122) Initially there was no success message for any type in the library and there was no scrolling to added panel. This change sets displaySuccessMessage to true for each plugin registered in the Add from Library flyout. It ensures that: - users see a success toast after adding a panel, - the newly added panel is automatically scrolled into view. Closes: #188775 --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> --- .../register_saved_object_example.ts | 13 ++++++++----- .../plugins/private/links/public/plugin.ts | 15 +++++++++------ .../plugins/shared/discover/public/plugin.tsx | 15 +++++++++------ .../add_from_library_flyout.tsx | 1 - .../plugins/shared/embeddable/public/types.ts | 16 ++++++++++++---- .../shared/visualizations/public/plugin.ts | 17 ++++++++++------- .../test/accessibility/apps/dashboard.ts | 6 ++++-- .../plugins/shared/lens/public/plugin.ts | 17 ++++++++++------- .../react_embeddable/setup_map_embeddable.ts | 15 +++++++++------ 9 files changed, 71 insertions(+), 44 deletions(-) diff --git a/examples/embeddable_examples/public/react_embeddables/register_saved_object_example.ts b/examples/embeddable_examples/public/react_embeddables/register_saved_object_example.ts index 3da19ec1de19..e5df8bcd4b57 100644 --- a/examples/embeddable_examples/public/react_embeddables/register_saved_object_example.ts +++ b/examples/embeddable_examples/public/react_embeddables/register_saved_object_example.ts @@ -16,12 +16,15 @@ const APP_ICON = 'logoKibana'; export const registerMyEmbeddableSavedObject = (embeddableSetup: EmbeddableSetup) => embeddableSetup.registerAddFromLibraryType({ onAdd: (container, savedObject) => { - container.addNewPanel({ - panelType: MY_EMBEDDABLE_TYPE, - serializedState: { - rawState: savedObject.attributes, + container.addNewPanel( + { + panelType: MY_EMBEDDABLE_TYPE, + serializedState: { + rawState: savedObject.attributes, + }, }, - }); + true // shows a toast and scrolls to panel + ); }, savedObjectType: MY_SAVED_OBJECT_TYPE, savedObjectName: 'Some saved object', diff --git a/src/platform/plugins/private/links/public/plugin.ts b/src/platform/plugins/private/links/public/plugin.ts index fa749fc5c0b6..808866da7eb2 100644 --- a/src/platform/plugins/private/links/public/plugin.ts +++ b/src/platform/plugins/private/links/public/plugin.ts @@ -65,14 +65,17 @@ export class LinksPlugin plugins.embeddable.registerAddFromLibraryType({ onAdd: async (container, savedObject) => { - container.addNewPanel({ - panelType: CONTENT_ID, - serializedState: { - rawState: { - savedObjectId: savedObject.id, + container.addNewPanel( + { + panelType: CONTENT_ID, + serializedState: { + rawState: { + savedObjectId: savedObject.id, + }, }, }, - }); + true + ); }, savedObjectType: CONTENT_ID, savedObjectName: APP_NAME, diff --git a/src/platform/plugins/shared/discover/public/plugin.tsx b/src/platform/plugins/shared/discover/public/plugin.tsx index e6c47a565e6b..3c580987f39b 100644 --- a/src/platform/plugins/shared/discover/public/plugin.tsx +++ b/src/platform/plugins/shared/discover/public/plugin.tsx @@ -398,13 +398,16 @@ export class DiscoverPlugin plugins.embeddable.registerAddFromLibraryType({ onAdd: async (container, savedObject) => { - container.addNewPanel({ - panelType: SEARCH_EMBEDDABLE_TYPE, - serializedState: { - rawState: { savedObjectId: savedObject.id }, - references: savedObject.references, + container.addNewPanel( + { + panelType: SEARCH_EMBEDDABLE_TYPE, + serializedState: { + rawState: { savedObjectId: savedObject.id }, + references: savedObject.references, + }, }, - }); + true + ); }, savedObjectType: SavedSearchType, savedObjectName: i18n.translate('discover.savedSearch.savedObjectName', { diff --git a/src/platform/plugins/shared/embeddable/public/add_from_library/add_from_library_flyout.tsx b/src/platform/plugins/shared/embeddable/public/add_from_library/add_from_library_flyout.tsx index eed7226a029f..803aae84c85b 100644 --- a/src/platform/plugins/shared/embeddable/public/add_from_library/add_from_library_flyout.tsx +++ b/src/platform/plugins/shared/embeddable/public/add_from_library/add_from_library_flyout.tsx @@ -68,7 +68,6 @@ export const AddFromLibraryFlyout = ({ ); return; } - libraryType.onAdd(container, savedObject); runAddTelemetry(container, savedObject, libraryType.savedObjectMetaData); }, diff --git a/src/platform/plugins/shared/embeddable/public/types.ts b/src/platform/plugins/shared/embeddable/public/types.ts index 3902b20ece71..24da8c0211ab 100644 --- a/src/platform/plugins/shared/embeddable/public/types.ts +++ b/src/platform/plugins/shared/embeddable/public/types.ts @@ -38,13 +38,21 @@ export interface EmbeddableSetup { /** * Register a saved object type with the "Add from library" flyout. * + * `onAdd` receives the container and the saved object. You may pass a second boolean parameter + * to `addNewPanel` to enable a success message and automatic scrolling. + * * @example * registerAddFromLibraryType({ * onAdd: (container, savedObject) => { - * container.addNewPanel({ - * panelType: CONTENT_ID, - * initialState: savedObject.attributes, - * }); + * container.addNewPanel( + * { + * panelType: MY_EMBEDDABLE_TYPE, + * serializedState: { + * rawState: savedObject.attributes, + * }, + * }, + * true // shows a toast and scrolls to panel + * ); * }, * savedObjectType: MAP_SAVED_OBJECT_TYPE, * savedObjectName: i18n.translate('xpack.maps.mapSavedObjectLabel', { diff --git a/src/platform/plugins/shared/visualizations/public/plugin.ts b/src/platform/plugins/shared/visualizations/public/plugin.ts index d3009dc4c81a..40800acc956f 100644 --- a/src/platform/plugins/shared/visualizations/public/plugin.ts +++ b/src/platform/plugins/shared/visualizations/public/plugin.ts @@ -407,15 +407,18 @@ export class VisualizationsPlugin }); embeddable.registerAddFromLibraryType({ onAdd: async (container, savedObject) => { - container.addNewPanel({ - panelType: VISUALIZE_EMBEDDABLE_TYPE, - serializedState: { - rawState: { - savedObjectId: savedObject.id, + container.addNewPanel( + { + panelType: VISUALIZE_EMBEDDABLE_TYPE, + serializedState: { + rawState: { + savedObjectId: savedObject.id, + }, + references: savedObject.references, }, - references: savedObject.references, }, - }); + true + ); }, savedObjectType: VISUALIZE_EMBEDDABLE_TYPE, savedObjectName: i18n.translate('visualizations.visualizeSavedObjectName', { diff --git a/src/platform/test/accessibility/apps/dashboard.ts b/src/platform/test/accessibility/apps/dashboard.ts index 2984c22d7c84..912525db3e8c 100644 --- a/src/platform/test/accessibility/apps/dashboard.ts +++ b/src/platform/test/accessibility/apps/dashboard.ts @@ -17,11 +17,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const testSubjects = getService('testSubjects'); const listingTable = getService('listingTable'); - describe('Dashboard', () => { + // https://github.com/elastic/kibana/issues/220515 + describe.skip('Dashboard', () => { const dashboardName = 'Dashboard Listing A11y'; const clonedDashboardName = 'Dashboard Listing A11y (1)'; - it('navitate to dashboard app', async () => { + // https://github.com/elastic/kibana/issues/220515 + it.skip('navigate to dashboard app', async () => { await common.navigateToApp('dashboard'); await a11y.testAppSnapshot(); }); diff --git a/x-pack/platform/plugins/shared/lens/public/plugin.ts b/x-pack/platform/plugins/shared/lens/public/plugin.ts index 8727e9704f1d..052ff1e5b707 100644 --- a/x-pack/platform/plugins/shared/lens/public/plugin.ts +++ b/x-pack/platform/plugins/shared/lens/public/plugin.ts @@ -399,15 +399,18 @@ export class LensPlugin { // Let Dashboard know about the Lens panel type embeddable.registerAddFromLibraryType({ onAdd: async (container, savedObject) => { - container.addNewPanel({ - panelType: LENS_EMBEDDABLE_TYPE, - serializedState: { - rawState: { - savedObjectId: savedObject.id, + container.addNewPanel( + { + panelType: LENS_EMBEDDABLE_TYPE, + serializedState: { + rawState: { + savedObjectId: savedObject.id, + }, + references: savedObject.references, }, - references: savedObject.references, }, - }); + true + ); }, savedObjectType: LENS_EMBEDDABLE_TYPE, savedObjectName: i18n.translate('xpack.lens.mapSavedObjectLabel', { diff --git a/x-pack/platform/plugins/shared/maps/public/react_embeddable/setup_map_embeddable.ts b/x-pack/platform/plugins/shared/maps/public/react_embeddable/setup_map_embeddable.ts index e6eb53a8b812..d1214cc1caac 100644 --- a/x-pack/platform/plugins/shared/maps/public/react_embeddable/setup_map_embeddable.ts +++ b/x-pack/platform/plugins/shared/maps/public/react_embeddable/setup_map_embeddable.ts @@ -25,14 +25,17 @@ export function setupMapEmbeddable(embeddableSetup: EmbeddableSetup) { embeddableSetup.registerAddFromLibraryType({ onAdd: (container, savedObject) => { - container.addNewPanel({ - panelType: MAP_SAVED_OBJECT_TYPE, - serializedState: { - rawState: { - savedObjectId: savedObject.id, + container.addNewPanel( + { + panelType: MAP_SAVED_OBJECT_TYPE, + serializedState: { + rawState: { + savedObjectId: savedObject.id, + }, }, }, - }); + true + ); }, savedObjectType: MAP_SAVED_OBJECT_TYPE, savedObjectName: i18n.translate('xpack.maps.mapSavedObjectLabel', {