Close any open modals on logout (#12777)

* Close any open modals on logout

Split out from #12666

* Add test

src/Modal.tsx

@@ -22,9 +22,10 @@ import { IDeferred, defer, sleep } from "matrix-js-sdk/src/utils";
 import { TypedEventEmitter } from "matrix-js-sdk/src/matrix";
 import { Glass } from "@vector-im/compound-web";
 
-import dis from "./dispatcher/dispatcher";
+import dis, { defaultDispatcher } from "./dispatcher/dispatcher";
 import AsyncWrapper from "./AsyncWrapper";
 import { Defaultize } from "./@types/common";
+import { ActionPayload } from "./dispatcher/payloads";
 
 const DIALOG_CONTAINER_ID = "mx_Dialog_Container";
 const STATIC_DIALOG_CONTAINER_ID = "mx_Dialog_StaticContainer";
@@ -114,6 +115,21 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
         return container;
     }
 
+    public constructor() {
+        super();
+
+        // We never unregister this, but the Modal class is a singleton so there would
+        // never be an opportunity to do so anyway, except in the entirely theoretical
+        // scenario of instantiating a non-singleton instance of the Modal class.
+        defaultDispatcher.register(this.onAction);
+    }
+
+    private onAction = (payload: ActionPayload): void => {
+        if (payload.action === "logout") {
+            this.forceCloseAllModals();
+        }
+    };
+
     public toggleCurrentDialogVisibility(): void {
         const modal = this.getCurrentModal();
         if (!modal) return;

test/Modal-test.ts

@@ -16,6 +16,7 @@ limitations under the License.
 
 import Modal from "../src/Modal";
 import QuestionDialog from "../src/components/views/dialogs/QuestionDialog";
+import defaultDispatcher from "../src/dispatcher/dispatcher";
 
 describe("Modal", () => {
     test("forceCloseAllModals should close all open modals", () => {
@@ -29,4 +30,28 @@ describe("Modal", () => {
         Modal.forceCloseAllModals();
         expect(Modal.hasDialogs()).toBe(false);
     });
+
+    test("open modals should be closed on logout", () => {
+        const modal1OnFinished = jest.fn();
+        const modal2OnFinished = jest.fn();
+
+        Modal.createDialog(QuestionDialog, {
+            title: "Test dialog 1",
+            description: "This is a test dialog",
+            button: "Word",
+            onFinished: modal1OnFinished,
+        });
+
+        Modal.createDialog(QuestionDialog, {
+            title: "Test dialog 2",
+            description: "This is a test dialog",
+            button: "Word",
+            onFinished: modal2OnFinished,
+        });
+
+        defaultDispatcher.dispatch({ action: "logout" }, true);
+
+        expect(modal1OnFinished).toHaveBeenCalled();
+        expect(modal2OnFinished).toHaveBeenCalled();
+    });
 });