Set expanded panel to new ID on link/unlink

elastic · Feb 7, 2023 · 122fa13 · 122fa13
1 parent 705ba7b
commit 122fa13
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/src/plugins/dashboard/public/dashboard_actions/add_to_library_action.tsx b/src/plugins/dashboard/public/dashboard_actions/add_to_library_action.tsx
@@ -92,14 +92,16 @@ export class AddToLibraryAction implements Action<AddToLibraryActionContext> {
       type: embeddable.type,
       explicitInput: { ...newInput },
     };
-    dashboard.replacePanel(panelToReplace, newPanel, true);
+    const replacedPanelId = await dashboard.replacePanel(panelToReplace, newPanel, true);
 
     const title = dashboardAddToLibraryActionStrings.getSuccessMessage(
       embeddable.getTitle() ? `'${embeddable.getTitle()}'` : ''
     );
+
     if (dashboard.getExpandedPanelId() !== undefined) {
-      dashboard.setExpandedPanelId(undefined);
+      dashboard.setExpandedPanelId(replacedPanelId);
     }
+
     this.toastsService.addSuccess({
       title,
       'data-test-subj': 'addPanelToLibrarySuccess',

diff --git a/src/plugins/dashboard/public/dashboard_actions/unlink_from_library_action.tsx b/src/plugins/dashboard/public/dashboard_actions/unlink_from_library_action.tsx
@@ -86,13 +86,14 @@ export class UnlinkFromLibraryAction implements Action<UnlinkFromLibraryActionCo
       type: embeddable.type,
       explicitInput: { ...newInput, title: embeddable.getTitle() },
     };
-    dashboard.replacePanel(panelToReplace, newPanel, true);
+    const replacedPanelId = await dashboard.replacePanel(panelToReplace, newPanel, true);
 
     const title = dashboardUnlinkFromLibraryActionStrings.getSuccessMessage(
       embeddable.getTitle() ? `'${embeddable.getTitle()}'` : ''
     );
+
     if (dashboard.getExpandedPanelId() !== undefined) {
-      dashboard.setExpandedPanelId(undefined);
+      dashboard.setExpandedPanelId(replacedPanelId);
     }
 
     this.toastsService.addSuccess({

diff --git a/src/plugins/dashboard/public/dashboard_container/embeddable/api/panel_management.ts b/src/plugins/dashboard/public/dashboard_container/embeddable/api/panel_management.ts
@@ -46,47 +46,52 @@ export async function replacePanel(
   previousPanelState: DashboardPanelState<EmbeddableInput>,
   newPanelState: Partial<PanelState>,
   generateNewId?: boolean
-) {
+): Promise<string> {
   let panels;
+  let panelId;
+
   if (generateNewId) {
     // replace panel can be called with generateNewId in order to totally destroy and recreate the embeddable
+    panelId = uuidv4();
     panels = { ...this.input.panels };
     delete panels[previousPanelState.explicitInput.id];
-    const newId = uuidv4();
-    panels[newId] = {
+    panels[panelId] = {
       ...previousPanelState,
       ...newPanelState,
       gridData: {
         ...previousPanelState.gridData,
-        i: newId,
+        i: panelId,
       },
       explicitInput: {
         ...newPanelState.explicitInput,
-        id: newId,
+        id: panelId,
       },
     };
   } else {
     // Because the embeddable type can change, we have to operate at the container level here
+    panelId = previousPanelState.explicitInput.id;
     panels = {
       ...this.input.panels,
-      [previousPanelState.explicitInput.id]: {
+      [panelId]: {
         ...previousPanelState,
         ...newPanelState,
         gridData: {
           ...previousPanelState.gridData,
         },
         explicitInput: {
           ...newPanelState.explicitInput,
-          id: previousPanelState.explicitInput.id,
+          id: panelId,
         },
       },
     };
   }
 
-  return this.updateInput({
+  await this.updateInput({
     panels,
     lastReloadRequestTime: new Date().getTime(),
   });
+
+  return panelId;
 }
 
 export function showPlaceholderUntil<TPlacementMethodArgs extends IPanelPlacementArgs>(