Close any open flyouts when changing view mode of the dashboard

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.test.tsx

@@ -91,6 +91,43 @@ describe('FlyoutService', () => {
       });
     });
   });
+
+  describe('closeFlyout()', () => {
+    it('resolves onClose on the previous ref', async () => {
+      const ref = flyouts.open(mountText('Flyout content'));
+      const onCloseComplete = jest.fn();
+      ref.onClose.then(onCloseComplete);
+      flyouts.close();
+      await ref.onClose;
+      expect(onCloseComplete).toBeCalledTimes(1);
+    });
+
+    it('can be called multiple times', async () => {
+      flyouts.open(mountText('Flyout content'));
+      expect(mockReactDomUnmount).not.toHaveBeenCalled();
+      flyouts.close();
+      expect(mockReactDomUnmount.mock.calls).toMatchSnapshot();
+      flyouts.close();
+      expect(mockReactDomUnmount).toHaveBeenCalledTimes(1);
+    });
+
+    it("doesn't affect an inactive flyout", async () => {
+      const ref = flyouts.open(mountText('Flyout content'));
+      flyouts.close();
+      const onCloseComplete = jest.fn();
+      ref.onClose.then(onCloseComplete);
+      await ref.onClose;
+
+      mockReactDomUnmount.mockClear();
+      onCloseComplete.mockClear();
+
+      flyouts.close();
+      flyouts.close();
+      expect(mockReactDomUnmount).toBeCalledTimes(0);
+      expect(onCloseComplete).toBeCalledTimes(0);
+    });
+  });
+
   describe('FlyoutRef#close()', () => {
     it('resolves the onClose Promise', async () => {
       const ref = flyouts.open(mountText('Flyout content'));

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 @@
 
     // 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 @@
         }
       }
 
+      overlays.closeFlyout();
+
       // Set the isDirty flag back to false since we discard all the changes
       dashboard.setIsDirty(false);
     }