Room list: add release announcement for sections (#33800)

* feat: add release announcement for sections

* test: update screenshot

* test: update tests

* test: add release annoucement utils to close it

* test: close release announcement in custom section tests

* test: update release announcement e2e test

* test: add more tests

* feat: update Ra labels

* test: update screenshot

* chore: remove stale screenshot

apps/web/playwright/e2e/left-panel/room-list-panel/room-list-custom-sections.spec.ts

@@ -6,7 +6,7 @@
  */
 
 import { type Page } from "@playwright/test";
-import { rejectToast } from "@element-hq/element-web-playwright-common";
+import { closeReleaseAnnouncement, rejectToast } from "@element-hq/element-web-playwright-common";
 
 import { expect, test } from "../../../element-web-test";
 import { assertRoomInSection, dragRoomToSection, getRoomList, getRoomListHeader, getSectionHeader } from "./utils";
@@ -46,6 +46,9 @@ test.describe("Room list custom sections", () => {
         await rejectToast(page, "Verify this device");
         await rejectToast(page, "Notifications");
 
+        // Close the release announcement about the new room list sections
+        await closeReleaseAnnouncement(page, "Introducing Sections");
+
         // Focus the user menu to avoid hover decoration
         await page.getByRole("button", { name: "User menu" }).focus();
     });

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

@@ -6,15 +6,12 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { test, expect } from "./";
+import { rejectToast } from "@element-hq/element-web-playwright-common";
+
+import { test } from "./";
 
 test.describe("Release announcement", () => {
     test.use({
-        config: {
-            features: {
-                feature_release_announcement: true,
-            },
-        },
         room: async ({ app, user }, use) => {
             const roomId = await app.client.createRoom({
                 name: "Test room",
@@ -22,37 +19,31 @@ test.describe("Release announcement", () => {
             await app.viewRoomById(roomId);
             await use({ roomId });
         },
-        labsFlags: ["feature_new_room_list"],
+        labsFlags: ["feature_room_list_sections"],
+    });
+
+    test.beforeEach(async ({ page, app, user }) => {
+        // The toasts are displayed above the search section
+        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");
     });
 
     // There is no release announcement currently live
-    test.skip(
-        "should display the new room list release announcement",
+    test(
+        "should display the room list section release announcement",
         { tag: "@screenshot" },
         async ({ page, app, room, util }) => {
-            // dismiss the toast so the announcement appears
-            await page.getByRole("button", { name: "Dismiss" }).click();
+            const sectionName = "Introducing Sections";
+            // The section release announcement should be displayed
+            await util.assertReleaseAnnouncementIsVisible(sectionName);
+            // Hide the section release announcement
+            const dialog = util.getReleaseAnnouncement(sectionName);
+            await dialog.getByRole("button", { name: "Ok" }).click();
 
-            const newSoundsName = "We’ve refreshed your sounds";
-            // The new sounds release announcement should be displayed
-            await util.assertReleaseAnnouncementIsVisible(newSoundsName);
-            // Hide the new sounds release announcement
-            const newSoundsDialog = util.getReleaseAnnouncement(newSoundsName);
-            await newSoundsDialog.getByRole("button", { name: "OK" }).click();
-
-            const newRoomListName = "Chats has a new look!";
-            // The new room list release announcement should be displayed
-            await util.assertReleaseAnnouncementIsVisible(newRoomListName);
-            // Hide the new room list release announcement
-            const dialog = util.getReleaseAnnouncement(newRoomListName);
-            await dialog.getByRole("button", { name: "Next" }).click();
-
-            await util.assertReleaseAnnouncementIsNotVisible(newRoomListName);
+            await util.assertReleaseAnnouncementIsNotVisible(sectionName);
 
             await page.reload();
-            await expect(page.getByRole("button", { name: "Room options" })).toBeVisible();
-            // Check that once the release announcements has been marked as viewed, it does not appear again
-            await util.assertReleaseAnnouncementIsNotVisible(newRoomListName);
+            await util.assertReleaseAnnouncementIsNotVisible(sectionName);
         },
     );
 });

apps/web/src/stores/ReleaseAnnouncementStore.ts

@@ -19,7 +19,7 @@ import ToastStore from "./ToastStore";
  * We include a `_test_dummy` value to enable tests to function even where there are no running release announcements.
  * This value must be at the end of the list.
  */
-const FEATURES = ["_test_dummy1", "_test_dummy2"] as const;
+const FEATURES = ["room_list_section", "_test_dummy1", "_test_dummy2"] as const;
 /**
  * All the features that can be shown in the release announcements.
  */

apps/web/src/viewmodels/room-list/RoomListHeaderViewModel.ts

@@ -32,6 +32,7 @@ import RoomListStoreV3 from "../../stores/room-list-v3/RoomListStoreV3";
 import { SortingAlgorithm } from "../../stores/room-list-v3/skip-list/sorters";
 import { SettingLevel } from "../../settings/SettingLevel";
 import { createRoom, hasCreateRoomRights } from "./utils";
+import { ReleaseAnnouncementStore } from "../../stores/ReleaseAnnouncementStore";
 
 export interface Props {
     /**
@@ -82,6 +83,12 @@ export class RoomListHeaderViewModel
         // Listen for section collapse state changes from RoomListViewModel
         const dispatcherRef = defaultDispatcher.register(this.onDispatch);
         this.disposables.track(() => defaultDispatcher.unregister(dispatcherRef));
+
+        this.disposables.trackListener(
+            ReleaseAnnouncementStore.instance,
+            "releaseAnnouncementChanged",
+            this.onReleaseAnnouncementChanged,
+        );
     }
 
     /**
@@ -229,7 +236,21 @@ export class RoomListHeaderViewModel
             });
         }
     };
+
+    public closeSectionReleaseAnnouncement = (): void => {
+        ReleaseAnnouncementStore.instance.nextReleaseAnnouncement();
+        this.snapshot.merge({ displaySectionReleaseAnnouncement: false });
+    };
+
+    public onReleaseAnnouncementChanged = (): void => {
+        const isSectionFeatureEnabled = SettingsStore.getValue("feature_room_list_sections");
+        const displaySectionReleaseAnnouncement =
+            isSectionFeatureEnabled &&
+            ReleaseAnnouncementStore.instance.getReleaseAnnouncement() === "room_list_section";
+        this.snapshot.merge({ displaySectionReleaseAnnouncement });
+    };
 }
+
 /**
  * Get the initial snapshot for the RoomListHeaderViewModel.
  * @param spaceStore - The space store instance.
@@ -290,6 +311,8 @@ function computeHeaderSpaceState(
     matrixClient: MatrixClient,
 ): Omit<RoomListHeaderViewSnapshot, "activeSortOption" | "isMessagePreviewEnabled"> {
     const isSectionFeatureEnabled = SettingsStore.getValue("feature_room_list_sections");
+    const displaySectionReleaseAnnouncement =
+        isSectionFeatureEnabled && ReleaseAnnouncementStore.instance.getReleaseAnnouncement() === "room_list_section";
 
     const activeSpace = spaceStore.activeSpaceRoom;
     const title = getHeaderTitle(spaceStore);
@@ -316,5 +339,6 @@ function computeHeaderSpaceState(
         canAccessSpaceSettings,
         canCreateSection,
         useComposeIcon,
+        displaySectionReleaseAnnouncement,
     };
 }

apps/web/test/unit-tests/components/structures/ReleaseAnnouncement-test.tsx

@@ -22,7 +22,12 @@ describe("ReleaseAnnouncement", () => {
 
     function renderReleaseAnnouncement() {
         return render(
-            <ReleaseAnnouncement feature="_test_dummy1" header="header" description="description" closeLabel="close">
+            <ReleaseAnnouncement
+                feature="room_list_section"
+                header="header"
+                description="description"
+                closeLabel="close"
+            >
                 <div>content</div>
             </ReleaseAnnouncement>,
         );

apps/web/test/unit-tests/stores/ReleaseAnnouncementStore-test.tsx

@@ -108,13 +108,13 @@ describe("ReleaseAnnouncementStore", () => {
 
     it("should listen to release announcement data changes in the store", async () => {
         const secondStore = new ReleaseAnnouncementStore();
-        expect(secondStore.getReleaseAnnouncement()).toBe("_test_dummy1");
+        expect(secondStore.getReleaseAnnouncement()).toBe("room_list_section");
 
         const promise = listenReleaseAnnouncementChanged();
         await secondStore.nextReleaseAnnouncement();
 
-        expect(await promise).toBe("_test_dummy2");
-        expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("_test_dummy2");
+        expect(await promise).toBe("_test_dummy1");
+        expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("_test_dummy1");
     });
 
     it("should return null when there are toasts on screen", async () => {

apps/web/test/viewmodels/room-list/RoomListHeaderViewModel-test.ts

@@ -26,6 +26,7 @@ import {
 import { createTestClient, mkSpace } from "../../test-utils";
 import { createRoom, hasCreateRoomRights } from "../../../src/viewmodels/room-list/utils";
 import PosthogTrackers from "../../../src/PosthogTrackers";
+import { ReleaseAnnouncementStore } from "../../../src/stores/ReleaseAnnouncementStore";
 
 jest.mock("../../../src/PosthogTrackers", () => ({
     trackInteraction: jest.fn(),
@@ -59,6 +60,9 @@ describe("RoomListHeaderViewModel", () => {
         mocked(hasCreateRoomRights).mockReturnValue(true);
         mocked(shouldShowSpaceSettings).mockReturnValue(true);
 
+        jest.spyOn(ReleaseAnnouncementStore.instance, "getReleaseAnnouncement").mockReturnValue(null);
+        jest.spyOn(ReleaseAnnouncementStore.instance, "nextReleaseAnnouncement").mockResolvedValue(undefined);
+
         jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName: string) => {
             if (settingName === "RoomList.preferredSorting") return SortingAlgorithm.Recency;
             if (settingName === "feature_video_rooms") return true;
@@ -191,6 +195,28 @@ describe("RoomListHeaderViewModel", () => {
                 expect(vm.getSnapshot().useComposeIcon).toBe(expectedUseComposeIcon);
             },
         );
+
+        it("should set displaySectionReleaseAnnouncement to true when sections feature is enabled and announcement is active", () => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName: string) => {
+                if (settingName === "feature_room_list_sections") return true;
+                return false;
+            });
+            jest.spyOn(ReleaseAnnouncementStore.instance, "getReleaseAnnouncement").mockReturnValue(
+                "room_list_section",
+            );
+
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            expect(vm.getSnapshot().displaySectionReleaseAnnouncement).toBe(true);
+        });
+
+        it("should set displaySectionReleaseAnnouncement to false when sections feature is disabled", () => {
+            jest.spyOn(ReleaseAnnouncementStore.instance, "getReleaseAnnouncement").mockReturnValue(
+                "room_list_section",
+            );
+
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            expect(vm.getSnapshot().displaySectionReleaseAnnouncement).toBe(false);
+        });
     });
 
     describe("event listeners", () => {
@@ -435,5 +461,14 @@ describe("RoomListHeaderViewModel", () => {
             expect(setValueSpy).toHaveBeenCalledWith("RoomList.showMessagePreview", null, expect.anything(), false);
             expect(vm.getSnapshot().isMessagePreviewEnabled).toBe(false);
         });
+
+        it("should call nextReleaseAnnouncement and set displaySectionReleaseAnnouncement to false when closeSectionReleaseAnnouncement is called", () => {
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+
+            vm.closeSectionReleaseAnnouncement();
+
+            expect(ReleaseAnnouncementStore.instance.nextReleaseAnnouncement).toHaveBeenCalled();
+            expect(vm.getSnapshot().displaySectionReleaseAnnouncement).toBe(false);
+        });
     });
 });