Don't show release announcements while toasts are displayed (#30770)

* Don't show release announcements while toasts are displayed

Otherwise they can clash and look like a mess.

* Dismiss the toast in the e2e test

* Update screenshot

Author: dbkr

playwright/e2e/release-announcement/releaseAnnouncement.spec.ts

@@ -29,6 +29,9 @@ test.describe("Release announcement", () => {
         "should display the new room list release announcement",
         { tag: "@screenshot" },
         async ({ page, app, room, util }) => {
+            // dismiss the toast so the announcement appears
+            await page.getByRole("button", { name: "Dismiss" }).click();
+
             const name = "Chats has a new look!";
 
             // The release announcement should be displayed

playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Chats-has-a-new-look--linux.png

@@ -13,6 +13,7 @@ import { cloneDeep } from "lodash";
 import SettingsStore from "../settings/SettingsStore";
 import { SettingLevel } from "../settings/SettingLevel";
 import { Features } from "../settings/Settings";
+import ToastStore from "./ToastStore";
 
 /**
  * The features are shown in the array order.
@@ -76,6 +77,9 @@ export class ReleaseAnnouncementStore extends TypedEventEmitter<ReleaseAnnouncem
         SettingsStore.watchSetting("releaseAnnouncementData", null, () => {
             this.emit("releaseAnnouncementChanged", this.getReleaseAnnouncement());
         });
+        ToastStore.sharedInstance().on("update", () => {
+            this.emit("releaseAnnouncementChanged", this.getReleaseAnnouncement());
+        });
     }
 
     /**
@@ -104,6 +108,9 @@ export class ReleaseAnnouncementStore extends TypedEventEmitter<ReleaseAnnouncem
         const isReleaseAnnouncementEnabled = this.isReleaseAnnouncementEnabled();
         if (!isReleaseAnnouncementEnabled) return null;
 
+        // also don't show release announcements if any toasts are on screen
+        if (ToastStore.sharedInstance().getToasts().length > 0) return null;
+
         const viewedReleaseAnnouncements = this.getViewedReleaseAnnouncements();
 
         // Find the first feature that has not been viewed

src/stores/ReleaseAnnouncementStore.ts

@@ -11,8 +11,10 @@ import { mocked } from "jest-mock";
 import SettingsStore, { type CallbackFn } from "../../../src/settings/SettingsStore";
 import { type Feature, ReleaseAnnouncementStore } from "../../../src/stores/ReleaseAnnouncementStore";
 import { type SettingLevel } from "../../../src/settings/SettingLevel";
+import ToastStore from "../../../src/stores/ToastStore";
 
 jest.mock("../../../src/settings/SettingsStore");
+jest.mock("../../../src/stores/ToastStore");
 
 describe("ReleaseAnnouncementStore", () => {
     let releaseAnnouncementStore: ReleaseAnnouncementStore;
@@ -48,6 +50,11 @@ describe("ReleaseAnnouncementStore", () => {
             return "watcherId";
         });
 
+        mocked(ToastStore.sharedInstance).mockReturnValue({
+            on: jest.fn(),
+            getToasts: jest.fn().mockReturnValue([]),
+        } as any);
+
         releaseAnnouncementStore = new ReleaseAnnouncementStore();
     });
 
@@ -118,4 +125,10 @@ describe("ReleaseAnnouncementStore", () => {
         expect(await promise).toBe("newRoomList_sort");
         expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("newRoomList_sort");
     });
+
+    it("should return null when there are toasts on screen", async () => {
+        mocked(ToastStore.sharedInstance().getToasts).mockReturnValue([{} as any]);
+
+        expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBeNull();
+    });
 });