Room list: move sections out of labs to all the users (#33810)

* feat: remove section labs flag

* test: update tests

* feat: remove favourites and low prioriy filter in SC

* test: update screenshots

* test: update snapshots

* test: update playwright tests

* test: update playright screenshots

* test: update screenshot

* test: close release announcement

* test: fix skeleton screenshot

* test: fix sliding sync

* test: update room list tests

* test: update room list tests after section dnd

* test: update toast screenshot

* test: update again room list tests

* test: update screenshot

apps/web/playwright/e2e/crypto/history-sharing.spec.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { createNewInstance, rejectToast } from "@element-hq/element-web-playwright-common";
+import { closeReleaseAnnouncement, createNewInstance, rejectToast } from "@element-hq/element-web-playwright-common";
 
 import { expect, test } from "../../element-web-test";
 import { ElementAppPage } from "../../pages/ElementAppPage";
@@ -30,6 +30,11 @@ test.describe("History sharing", function () {
             await aliceElementApp.client.bootstrapCrossSigning(aliceCredentials);
             await aliceElementApp.closeKeyStorageToast();
 
+            await rejectToast(alicePage, "Notifications");
+
+            // Close the release announcement about the new room list sections
+            await closeReleaseAnnouncement(alicePage, "Introducing Sections");
+
             // Register a second user, and open it in a second instance of the app
             const bobCredentials = await homeserver.registerUser(`user_${testInfo.testId}_bob`, "password", "Bob");
             const bobPage = await createNewInstance(browser, bobCredentials, {}, labsFlags);
@@ -37,8 +42,6 @@ test.describe("History sharing", function () {
             await bobElementApp.client.bootstrapCrossSigning(bobCredentials);
             await bobElementApp.closeKeyStorageToast();
 
-            await rejectToast(aliceElementApp.page, "Notifications");
-
             // Create the room and send a message
             await createRoom(alicePage, "TestRoom", true);
 

apps/web/playwright/e2e/integration-manager/kick.spec.ts

@@ -6,6 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
+import { closeReleaseAnnouncement } from "@element-hq/element-web-playwright-common";
+
 import type { Page } from "@playwright/test";
 import { test, expect } from "../../element-web-test";
 import { openIntegrationManager } from "./utils";
@@ -139,6 +141,11 @@ test.describe("Integration Manager: Kick", () => {
         await app.viewRoomByName(ROOM_NAME);
     });
 
+    test.beforeEach(async ({ page, user, app, room }) => {
+        // Close the release announcement about the new room list sections
+        await closeReleaseAnnouncement(page, "Introducing Sections");
+    });
+
     test("should kick the target", async ({ page, app, bot: targetUser, room }) => {
         await app.viewRoomByName(ROOM_NAME);
         await app.client.inviteUser(room.roomId, targetUser.credentials.userId);

apps/web/playwright/e2e/integration-manager/send_event.spec.ts

@@ -6,6 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
+import { closeReleaseAnnouncement, rejectToast } from "@element-hq/element-web-playwright-common";
+
 import type { Page } from "@playwright/test";
 import { test, expect } from "../../element-web-test";
 import { openIntegrationManager } from "./utils";
@@ -103,6 +105,11 @@ test.describe("Integration Manager: Send Event", () => {
     });
 
     test.beforeEach(async ({ page, user, app, room }) => {
+        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");
+
         await app.client.setAccountData("m.widgets", {
             "m.integration_manager": {
                 content: {

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

@@ -22,7 +22,7 @@ import {
 test.describe("Room list custom sections", () => {
     test.use({
         displayName: "Alice",
-        labsFlags: ["feature_new_room_list", "feature_room_list_sections"],
+        labsFlags: ["feature_new_room_list"],
         botCreateOpts: {
             displayName: "BotBob",
             autoAcceptInvites: true,

apps/web/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts

@@ -7,7 +7,7 @@
 
 import { type Visibility } from "matrix-js-sdk/src/matrix";
 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 { SettingLevel } from "../../../../src/settings/SettingLevel";
@@ -35,6 +35,9 @@ test.describe("Room list filters and sort", () => {
         // The toasts are displayed above the search section
         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");
     });
 
     test("Tombstoned rooms are not shown even when they receive updates", async ({ page, app, bot }) => {
@@ -177,19 +180,19 @@ test.describe("Room list filters and sort", () => {
             await expect.poll(() => roomList.locator("role=option").count()).toBe(2);
 
             await primaryFilters.getByRole("option", { name: "Rooms" }).click();
-            await expect(roomList.getByRole("option", { name: "unread room" })).toBeVisible();
-            await expect(roomList.getByRole("option", { name: "favourite room" })).toBeVisible();
-            await expect(roomList.getByRole("option", { name: "empty room" })).toBeVisible();
-            await expect(roomList.getByRole("option", { name: "room with mention" })).toBeVisible();
-            await expect(roomList.getByRole("option", { name: "Low prio room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=option").count()).toBe(5);
+            // "Open room" prefix disambiguates the room tile from the "Toggle Chats section with
+            // unread rooms" section header button, which also matches the "unread room" substring.
+            await expect(roomList.getByRole("button", { name: "Open room unread room" })).toBeVisible();
+            await expect(roomList.getByRole("button", { name: "favourite room" })).toBeVisible();
+            await expect(roomList.getByRole("button", { name: "empty room" })).toBeVisible();
+            await expect(roomList.getByRole("button", { name: "room with mention" })).toBeVisible();
+            await expect(roomList.getByRole("button", { name: "Low prio room" })).toBeVisible();
+            // 5 room tiles spread across 3 sections (Favourites, Rooms, Low priority); each section
+            // header is also a button, so 5 rooms + 3 section headers = 8 buttons.
+            await expect.poll(() => roomList.locator("role=button").count()).toBe(8);
 
             await getFilterExpandButton(page).click();
 
-            await primaryFilters.getByRole("option", { name: "Favourite" }).click();
-            await expect(roomList.getByRole("option", { name: "favourite room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=option").count()).toBe(1);
-
             await primaryFilters.getByRole("option", { name: "Mentions" }).click();
             await expect(roomList.getByRole("option", { name: "room with mention" })).toBeVisible();
             await expect.poll(() => roomList.locator("role=option").count()).toBe(1);
@@ -216,7 +219,7 @@ test.describe("Room list filters and sort", () => {
                 await app.settings.closeDialog();
 
                 // Let's open a room other than unread room or unread dm
-                await roomListView.getByRole("option", { name: "Open room favourite room" }).click();
+                await roomListView.getByRole("button", { name: "Open room favourite room" }).click();
 
                 // Let's make the bot send a new message in both rooms
                 await bot.sendMessage(unReadDmId, "Hello!");
@@ -239,15 +242,20 @@ test.describe("Room list filters and sort", () => {
             await getRoomOptionsMenu(page).click();
             await page.getByRole("menuitemradio", { name: "A-Z" }).click();
 
-            await expect(roomListView.getByRole("option").first()).toHaveText(/empty room/);
+            // Favourite + chat section headers are buttons + favourite room
+            await expect(roomListView.getByRole("button").nth(3)).toHaveText(/empty room/);
         });
 
-        test("should move room to the top on message when sorting by activity", async ({ page, bot }) => {
+        test("should move room to the top on message (chat section) when sorting by activity", async ({
+            page,
+            bot,
+        }) => {
             const roomListView = getRoomList(page);
 
             await bot.sendMessage(unReadDmId, "Hello!");
 
-            await expect(roomListView.getByRole("option").first()).toHaveText(/unread dm/);
+            // Favourite + chat section headers are buttons + favourite room
+            await expect(roomListView.getByRole("button").nth(3)).toHaveText(/unread dm/);
         });
     });
 
@@ -302,7 +310,7 @@ test.describe("Room list filters and sort", () => {
             );
         });
 
-        ["People", "Rooms", "Favourite"].forEach((filter) => {
+        ["People", "Rooms"].forEach((filter) => {
             test(
                 `should render the placeholder for ${filter} filter`,
                 { tag: "@screenshot" },

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

@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { rejectToast } from "@element-hq/element-web-playwright-common";
+import { closeReleaseAnnouncement, rejectToast } from "@element-hq/element-web-playwright-common";
 
 import { test, expect } from "../../../element-web-test";
 import { getHeaderSection } from "./utils";
@@ -19,6 +19,9 @@ test.describe("Header section of the room list", () => {
         // The toasts are displayed above the search section
         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");
     });
 
     test("should render the header section", { tag: "@screenshot" }, async ({ page, app, user }) => {

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

@@ -13,7 +13,7 @@ import { assertRoomInSection, dragRoomToSection, getPrimaryFilters, getRoomList,
 test.describe("Room list sections", () => {
     test.use({
         displayName: "Alice",
-        labsFlags: ["feature_new_room_list", "feature_room_list_sections"],
+        labsFlags: ["feature_new_room_list"],
         botCreateOpts: {
             displayName: "BotBob",
             autoAcceptInvites: true,

apps/web/playwright/e2e/left-panel/room-list-panel/room-list.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 { type Bot } from "../../../pages/bot";
@@ -27,6 +27,9 @@ test.describe("Room list", () => {
         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 to have hover decoration
         await page.getByRole("button", { name: "User menu" }).focus();
     });
@@ -71,11 +74,11 @@ test.describe("Room list", () => {
 
         test("should open the more options menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
             const roomListView = getRoomList(page);
-            const roomItem = roomListView.getByRole("option", { name: "Open room room29" });
+            let roomItem = roomListView.getByRole("option", { name: "Open room room29" });
             await roomItem.hover();
 
             await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
-            const roomItemMenu = roomItem.getByRole("button", { name: "More Options" });
+            let roomItemMenu = roomItem.getByRole("button", { name: "More Options" });
             await roomItemMenu.click();
             await expect(page).toMatchScreenshot("room-list-item-open-more-options.png");
 
@@ -83,7 +86,9 @@ test.describe("Room list", () => {
             await page.getByRole("menuitemcheckbox", { name: "Favourited" }).click();
 
             // Check that the room is favourited
+            roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
             await roomItem.hover();
+            roomItemMenu = roomItem.getByRole("button", { name: "More Options" });
             await roomItemMenu.click();
             await expect(page.getByRole("menuitemcheckbox", { name: "Favourited" })).toBeChecked();
             // It should show the invite dialog
@@ -296,13 +301,14 @@ test.describe("Room list", () => {
             // @ts-ignore Visibility enum is not accessible
             await app.client.createRoom({ name: "low priority room", visibility: "public" });
             const roomListView = getRoomList(page);
-            const publicRoom = roomListView.getByRole("option", { name: "low priority room" });
+            let publicRoom = roomListView.getByRole("option", { name: "low priority room" });
 
             // Make room low priority
             await publicRoom.click({ button: "right" });
             await page.getByRole("menuitemcheckbox", { name: "Low priority" }).click();
 
             // Should have low priority decoration
+            publicRoom = roomListView.getByRole("gridcell", { name: "low priority room" });
             await expect(publicRoom.locator(".mx_RoomAvatarView_icon")).toHaveAccessibleName(
                 "This is a low priority room",
             );

apps/web/playwright/e2e/settings/room-settings/room-security-tab.spec.ts

@@ -6,6 +6,7 @@
  */
 
 import { type Locator } from "@playwright/test";
+import { closeReleaseAnnouncement, rejectToast } from "@element-hq/element-web-playwright-common";
 
 import { test, expect } from "../../../element-web-test";
 
@@ -18,7 +19,12 @@ test.describe("Roles & Permissions room settings tab", () => {
 
     let settings: Locator;
 
-    test.beforeEach(async ({ user, app }) => {
+    test.beforeEach(async ({ user, app, page }) => {
+        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");
+
         await app.client.createRoom({
             name: roomName,
             power_level_content_override: {

apps/web/playwright/e2e/sliding-sync/sliding-sync.spec.ts

@@ -291,7 +291,7 @@ test.describe("Sliding Sync", () => {
         await checkOrder(["Room to Join", "Test Room"], page);
     });
 
-    test("should show a favourite DM only in the favourite sublist", async ({ page, app }) => {
+    test("should show a favourite DM only in the favourite section", async ({ page, app }) => {
         const roomId = await app.client.createRoom({
             name: "Favourite DM",
             is_direct: true,
@@ -300,12 +300,9 @@ test.describe("Sliding Sync", () => {
             await client.setRoomTag(roomId, "m.favourite", { order: 0.5 });
         }, roomId);
 
-        await getFilterExpandButton(page).click();
+        await expect(page.getByRole("button", { name: "Favourite DM" })).toBeVisible();
+
         const primaryFilters = getPrimaryFilters(page);
-        await primaryFilters.getByRole("option", { name: "Favourites" }).click();
-
-        await expect(page.getByRole("option", { name: "Favourite DM" })).toBeVisible();
-
         await primaryFilters.getByRole("option", { name: "People" }).click();
 
         await expect(page.getByRole("option", { name: "Favourite DM" })).not.toBeAttached();

apps/web/playwright/e2e/voip/element-call.spec.ts

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import { readFile } from "node:fs/promises";
 import { fileURLToPath } from "node:url";
 import { type Page } from "@playwright/test";
+import { closeReleaseAnnouncement, rejectToast } from "@element-hq/element-web-playwright-common";
 
 import type { EventType, Preset } from "matrix-js-sdk/src/matrix";
 import { SettingLevel } from "../../../src/settings/SettingLevel";
@@ -132,6 +133,11 @@ test.describe("Element Call", () => {
             SettingLevel.DEVICE,
             new URL("/widget.html#", page.url()).toString(),
         );
+
+        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");
     });
 
     test.describe("Group Chat", () => {