Close any open system flyout when changing view mode of the dashboard

Signed-off-by: Miki <miki@amazon.com>

changelogs/fragments/6923.yml

@@ -0,0 +1,2 @@
+fix:
+- Close any open system flyout when changing view mode of the dashboard ([#6923](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6923))

src/core/public/overlays/flyout/flyout_service.mock.ts

@@ -37,6 +37,7 @@ const createStartContractMock = () => {
       close: jest.fn(),
       onClose: Promise.resolve(),
     }),
+    close: jest.fn(),
   };
   return startContract;
 };

src/core/public/overlays/flyout/flyout_service.tsx

@@ -94,6 +94,11 @@ export interface OverlayFlyoutStart {
    * @return {@link OverlayRef} A reference to the opened flyout panel.
    */
   open(mount: MountPoint, options?: OverlayFlyoutOpenOptions): OverlayRef;
+
+  /**
+   * Closes any open flyout panel.
+   */
+  close(): void;
 }
 
 /**
@@ -149,6 +154,12 @@ export class FlyoutService {
 
         return flyout;
       },
+      close: () => {
+        if (this.activeFlyout) {
+          this.activeFlyout.close();
+          this.cleanupDom();
+        }
+      },
     };
   }
 

src/core/public/overlays/overlay_service.mock.ts

@@ -36,11 +36,13 @@ import { overlayModalServiceMock } from './modal/modal_service.mock';
 import { overlaySidecarServiceMock } from './sidecar/sidecar_service.mock';
 
 const createStartContractMock = () => {
-  const overlayStart = overlayModalServiceMock.createStartContract();
+  const overlayModalStart = overlayModalServiceMock.createStartContract();
+  const overlayFlyoutStart = overlayFlyoutServiceMock.createStartContract();
   const startContract: DeeplyMockedKeys<OverlayStart> = {
-    openFlyout: overlayFlyoutServiceMock.createStartContract().open,
-    openModal: overlayStart.open,
-    openConfirm: overlayStart.openConfirm,
+    openFlyout: overlayFlyoutStart.open,
+    closeFlyout: overlayFlyoutStart.close,
+    openModal: overlayModalStart.open,
+    openConfirm: overlayModalStart.openConfirm,
     banners: overlayBannersServiceMock.createStartContract(),
     sidecar: overlaySidecarServiceMock.createStartContract(),
   };

src/core/public/overlays/overlay_service.ts

@@ -68,6 +68,7 @@ export class OverlayService {
     return {
       banners,
       openFlyout: flyouts.open.bind(flyouts),
+      closeFlyout: flyouts.close.bind(flyouts),
       openModal: modals.open.bind(modals),
       openConfirm: modals.openConfirm.bind(modals),
       sidecar: sidecars,
@@ -81,6 +82,8 @@ export interface OverlayStart {
   banners: OverlayBannersStart;
   /** {@link OverlayFlyoutStart#open} */
   openFlyout: OverlayFlyoutStart['open'];
+  /** {@link OverlayFlyoutStart#close} */
+  closeFlyout: OverlayFlyoutStart['close'];
   /** {@link OverlayModalStart#open} */
   openModal: OverlayModalStart['open'];
   /** {@link OverlayModalStart#openConfirm} */

src/plugins/dashboard/public/application/utils/get_nav_actions.tsx

@@ -308,6 +308,7 @@ export const getNavActions = (
 
     // If there are no changes, do not show the discard window
     if (!willLoseChanges) {
+      overlays.closeFlyout();
       stateContainer.transitions.set('viewMode', newMode);
       return;
     }
@@ -349,6 +350,8 @@ export const getNavActions = (
         }
       }
 
+      overlays.closeFlyout();
+
       // Set the isDirty flag back to false since we discard all the changes
       dashboard.setIsDirty(false);
     }