Fix Add From Library Flyout Staying Open (#86698)

* Fixed add from library flyout staying open after save or cancel

docs/development/plugins/embeddable/public/kibana-plugin-plugins-embeddable-public.openaddpanelflyout.md

@@ -14,7 +14,7 @@ export declare function openAddPanelFlyout(options: {
     overlays: OverlayStart;
     notifications: NotificationsStart;
     SavedObjectFinder: React.ComponentType<any>;
-}): Promise<void>;
+}): OverlayRef;
 ```
 
 ## Parameters
@@ -25,5 +25,5 @@ export declare function openAddPanelFlyout(options: {
 
 <b>Returns:</b>
 
-`Promise<void>`
+`OverlayRef`
 

src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx

@@ -57,10 +57,12 @@ import { showOptionsPopover } from './show_options_popover';
 import { TopNavIds } from './top_nav_ids';
 import { ShowShareModal } from './show_share_modal';
 import { PanelToolbar } from './panel_toolbar';
+import { OverlayRef } from '../../../../../core/public';
 import { DashboardContainer } from '..';
 
 export interface DashboardTopNavState {
   chromeIsVisible: boolean;
+  addPanelOverlay?: OverlayRef;
   savedQuery?: SavedQuery;
 }
 
@@ -111,14 +113,17 @@ export function DashboardTopNav({
 
   const addFromLibrary = useCallback(() => {
     if (!isErrorEmbeddable(dashboardContainer)) {
-      openAddPanelFlyout({
-        embeddable: dashboardContainer,
-        getAllFactories: embeddable.getEmbeddableFactories,
-        getFactory: embeddable.getEmbeddableFactory,
-        notifications: core.notifications,
-        overlays: core.overlays,
-        SavedObjectFinder: getSavedObjectFinder(core.savedObjects, uiSettings),
-      });
+      setState((s) => ({
+        ...s,
+        addPanelOverlay: openAddPanelFlyout({
+          embeddable: dashboardContainer,
+          getAllFactories: embeddable.getEmbeddableFactories,
+          getFactory: embeddable.getEmbeddableFactory,
+          notifications: core.notifications,
+          overlays: core.overlays,
+          SavedObjectFinder: getSavedObjectFinder(core.savedObjects, uiSettings),
+        }),
+      }));
     }
   }, [
     embeddable.getEmbeddableFactories,
@@ -139,8 +144,16 @@ export function DashboardTopNav({
     await factory.create({} as EmbeddableInput, dashboardContainer);
   }, [dashboardContainer, embeddable]);
 
+  const clearAddPanel = useCallback(() => {
+    if (state.addPanelOverlay) {
+      state.addPanelOverlay.close();
+      setState((s) => ({ ...s, addPanelOverlay: undefined }));
+    }
+  }, [state.addPanelOverlay]);
+
   const onChangeViewMode = useCallback(
     (newMode: ViewMode) => {
+      clearAddPanel();
       const isPageRefresh = newMode === dashboardStateManager.getViewMode();
       const isLeavingEditMode = !isPageRefresh && newMode === ViewMode.VIEW;
       const willLoseChanges = isLeavingEditMode && dashboardStateManager.getIsDirty(timefilter);
@@ -178,7 +191,7 @@ export function DashboardTopNav({
           }
         });
     },
-    [redirectTo, timefilter, core.overlays, savedDashboard.id, dashboardStateManager]
+    [redirectTo, timefilter, core.overlays, savedDashboard.id, dashboardStateManager, clearAddPanel]
   );
 
   /**
@@ -301,8 +314,16 @@ export function DashboardTopNav({
         showCopyOnSave={lastDashboardId ? true : false}
       />
     );
+    clearAddPanel();
     showSaveModal(dashboardSaveModal, core.i18n.Context);
-  }, [save, core.i18n.Context, savedObjectsTagging, dashboardStateManager, lastDashboardId]);
+  }, [
+    save,
+    clearAddPanel,
+    lastDashboardId,
+    core.i18n.Context,
+    savedObjectsTagging,
+    dashboardStateManager,
+  ]);
 
   const runClone = useCallback(() => {
     const currentTitle = dashboardStateManager.getTitle();

src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx

@@ -17,20 +17,20 @@
  * under the License.
  */
 import React from 'react';
-import { NotificationsStart, OverlayStart } from 'src/core/public';
+import { NotificationsStart, OverlayRef, OverlayStart } from 'src/core/public';
 import { EmbeddableStart } from '../../../../../plugin';
 import { toMountPoint } from '../../../../../../../kibana_react/public';
 import { IContainer } from '../../../../containers';
 import { AddPanelFlyout } from './add_panel_flyout';
 
-export async function openAddPanelFlyout(options: {
+export function openAddPanelFlyout(options: {
   embeddable: IContainer;
   getFactory: EmbeddableStart['getEmbeddableFactory'];
   getAllFactories: EmbeddableStart['getEmbeddableFactories'];
   overlays: OverlayStart;
   notifications: NotificationsStart;
   SavedObjectFinder: React.ComponentType<any>;
-}) {
+}): OverlayRef {
   const {
     embeddable,
     getFactory,
@@ -59,4 +59,5 @@ export async function openAddPanelFlyout(options: {
       ownFocus: true,
     }
   );
+  return flyoutSession;
 }

src/plugins/embeddable/public/public.api.md

@@ -34,6 +34,7 @@ import { MaybePromise } from '@kbn/utility-types';
 import { NotificationsStart as NotificationsStart_2 } from 'src/core/public';
 import { Observable } from 'rxjs';
 import { Optional } from '@kbn/utility-types';
+import { OverlayRef as OverlayRef_2 } from 'src/core/public';
 import { OverlayStart as OverlayStart_2 } from 'src/core/public';
 import { PackageInfo } from '@kbn/config';
 import { Path } from 'history';
@@ -717,7 +718,7 @@ export function openAddPanelFlyout(options: {
     overlays: OverlayStart_2;
     notifications: NotificationsStart_2;
     SavedObjectFinder: React.ComponentType<any>;
-}): Promise<void>;
+}): OverlayRef_2;
 
 // Warning: (ae-missing-release-tag) "OutputSpec" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //