close customize panel overlay when dashboard is destroyed

elastic · Feb 2, 2023 · 6aa6987 · 6aa6987
1 parent 491361e
commit 6aa6987
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/src/plugins/dashboard/public/dashboard_app/top_nav/use_dashboard_menu_items.tsx b/src/plugins/dashboard/public/dashboard_app/top_nav/use_dashboard_menu_items.tsx
@@ -156,7 +156,10 @@ export const useDashboardMenuItems = ({
         iconType: 'pencil',
         testId: 'dashboardEditMode',
         className: 'eui-hideFor--s eui-hideFor--xs', // hide for small screens - editing doesn't work in mobile mode.
-        run: () => dispatch(setViewMode(ViewMode.EDIT)),
+        run: () => {
+          dashboardContainer.clearOverlays();
+          dispatch(setViewMode(ViewMode.EDIT));
+        },
       } as TopNavMenuData,
 
       quickSave: {

diff --git a/...le/public/lib/panel/panel_header/panel_actions/customize_panel/customize_panel_action.tsx b/...le/public/lib/panel/panel_header/panel_actions/customize_panel/customize_panel_action.tsx
@@ -7,9 +7,8 @@
  */
 
 import React from 'react';
-import { Subject } from 'rxjs';
 import { i18n } from '@kbn/i18n';
-import { OverlayStart, ThemeServiceStart } from '@kbn/core/public';
+import { OverlayRef, OverlayStart, ThemeServiceStart } from '@kbn/core/public';
 import { Action, IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
 import { toMountPoint } from '@kbn/kibana-react-plugin/public';
 import { TimeRange } from '@kbn/es-query';
@@ -29,6 +28,15 @@ const VISUALIZE_EMBEDDABLE_TYPE = 'visualization';
 
 type VisualizeEmbeddable = IEmbeddable<{ id: string }, EmbeddableOutput & { visTypeName: string }>;
 
+interface TracksOverlays {
+  openOverlay: (ref: OverlayRef) => void;
+  clearOverlays: () => void;
+}
+
+function tracksOverlays(root: unknown): root is TracksOverlays {
+  return Boolean((root as TracksOverlays).openOverlay && (root as TracksOverlays).clearOverlays);
+}
+
 function isVisualizeEmbeddable(
   embeddable: IEmbeddable | VisualizeEmbeddable
 ): embeddable is VisualizeEmbeddable {
@@ -100,11 +108,9 @@ export class CustomizePanelAction implements Action<CustomizePanelActionContext>
       throw new IncompatibleActionError();
     }
 
-    const closed$ = new Subject<true>();
-    const close = () => {
-      closed$.next(true);
-      handle.close();
-    };
+    // send the overlay ref to the root embeddable if it is capable of tracking overlays
+    const rootEmbeddable = embeddable.getRoot();
+    const overlayTracker = tracksOverlays(rootEmbeddable) ? rootEmbeddable : undefined;
 
     const handle = this.overlays.openFlyout(
       toMountPoint(
@@ -113,7 +119,10 @@ export class CustomizePanelAction implements Action<CustomizePanelActionContext>
           timeRangeCompatible={this.isTimeRangeCompatible({ embeddable })}
           dateFormat={this.dateFormat}
           commonlyUsedRanges={this.commonlyUsedRanges}
-          onClose={close}
+          onClose={() => {
+            if (overlayTracker) overlayTracker.clearOverlays();
+            handle.close();
+          }}
         />,
         { theme$: this.theme.theme$ }
       ),
@@ -122,5 +131,6 @@ export class CustomizePanelAction implements Action<CustomizePanelActionContext>
         'data-test-subj': 'customizePanel',
       }
     );
+    overlayTracker?.openOverlay(handle);
   }
 }