Default the room header to on (#12803)

* Default the room header to on

* Refactor code into helper method

Add a method to open/close the room info panel and use it everywhere.

* Fix broken tests, update snapshots and screenshots

* Update room header tests to make sense with the new header

Author: MidhunSureshR

playwright/e2e/app-loading/stored-credentials.spec.ts

@@ -48,7 +48,7 @@ test("Shows the last known page on reload", async ({ pageWithCredentials: page }
 
     // Check that the room reloaded
     await expect(page).toHaveURL(/\/#\/room\//);
-    await expect(page.locator(".mx_LegacyRoomHeader")).toContainText("Test Room");
+    await expect(page.locator(".mx_RoomHeader")).toContainText("Test Room");
 });
 
 test("Room link correctly loads a room view", async ({ pageWithCredentials: page }) => {

playwright/e2e/chat-export/html-export.spec.ts

@@ -108,7 +108,7 @@ test.describe("HTML Export", () => {
             page.locator(".mx_EventTile_last .mx_MTextBody .mx_EventTile_body").getByText("Testing 9"),
         ).toBeVisible();
 
-        await page.getByRole("button", { name: "Room info" }).click();
+        await app.toggleRoomInfoPanel();
         await page.getByRole("menuitem", { name: "Export Chat" }).click();
 
         const downloadPromise = page.waitForEvent("download");

playwright/e2e/create-room/create-room.spec.ts

@@ -36,7 +36,7 @@ test.describe("Create Room", () => {
         await dialog.getByRole("button", { name: "Create room" }).click();
 
         await expect(page).toHaveURL(/\/#\/room\/#test-room-1:localhost/);
-        const header = page.locator(".mx_LegacyRoomHeader");
+        const header = page.locator(".mx_RoomHeader");
         await expect(header).toContainText(name);
         await expect(header).toContainText(topic);
     });

playwright/e2e/crypto/crypto.spec.ts

@@ -224,7 +224,7 @@ test.describe("Cryptography", function () {
         await checkDMRoom(page);
         const bobRoomId = await bobJoin(page, bob);
         await testMessages(page, bob, bobRoomId);
-        await verify(page, bob);
+        await verify(app, bob);
 
         // Assert that verified icon is rendered
         await page.getByTestId("base-card-back-button").click();
@@ -246,6 +246,6 @@ test.describe("Cryptography", function () {
 
         // we need to have a room with the other user present, so we can open the verification panel
         await createSharedRoomWithUser(app, bob.credentials.userId);
-        await verify(page, bob);
+        await verify(app, bob);
     });
 });

playwright/e2e/crypto/event-shields.spec.ts

@@ -104,7 +104,7 @@ test.describe("Cryptography", function () {
             await expect(lastTileE2eIcon).not.toBeVisible();
 
             /* Now verify Bob */
-            await verify(page, bob);
+            await verify(app, bob);
 
             /* Existing message should be updated when user is verified. */
             await expect(last).toContainText("test encrypted 1");
@@ -222,7 +222,7 @@ test.describe("Cryptography", function () {
             await bobSecondDevice.prepareClient();
 
             // verify Bob
-            await verify(page, bob);
+            await verify(app, bob);
 
             // bob sends a valid event
             const testEvent = await bob.sendMessage(testRoomId, "Hoo!");

playwright/e2e/crypto/utils.ts

@@ -329,15 +329,6 @@ export async function createRoom(page: Page, roomName: string, isEncrypted: bool
     }
 }
 
-/**
- * Open the room info panel and return the panel element
- * @param page - the page to use
- */
-export const openRoomInfo = async (page: Page) => {
-    await page.getByRole("button", { name: "Room info" }).click();
-    return page.locator(".mx_RightPanel");
-};
-
 /**
  * Configure the given MatrixClient to auto-accept any invites
  * @param client - the client to configure
@@ -357,10 +348,11 @@ export async function autoJoin(client: Client) {
  * @param page - the page to use
  * @param bob - the user to verify
  */
-export const verify = async (page: Page, bob: Bot) => {
+export const verify = async (app: ElementAppPage, bob: Bot) => {
+    const page = app.page;
     const bobsVerificationRequestPromise = waitForVerificationRequest(bob);
 
-    const roomInfo = await openRoomInfo(page);
+    const roomInfo = await app.toggleRoomInfoPanel();
     await page.locator(".mx_RightPanelTabs").getByText("People").click();
     await roomInfo.getByText("Bob").click();
     await roomInfo.getByRole("button", { name: "Verify" }).click();

playwright/e2e/file-upload/image-upload.spec.ts

@@ -38,8 +38,8 @@ test.describe("Image Upload", () => {
             .locator(".mx_MessageComposer_actions input[type='file']")
             .setInputFiles("playwright/sample-files/riot.png");
 
-        expect(page.getByRole("button", { name: "Upload" })).toBeEnabled();
-        expect(page.getByRole("button", { name: "Close dialog" })).toBeEnabled();
-        expect(page).toMatchScreenshot("image-upload-preview.png");
+        await expect(page.getByRole("button", { name: "Upload" })).toBeEnabled();
+        await expect(page.getByRole("button", { name: "Close dialog" })).toBeEnabled();
+        await expect(page).toMatchScreenshot("image-upload-preview.png");
     });
 });

playwright/e2e/integration-manager/get-openid-token.spec.ts

@@ -118,8 +118,8 @@ test.describe("Integration Manager: Get OpenID Token", () => {
         await app.viewRoomByName(ROOM_NAME);
     });
 
-    test("should successfully obtain an openID token", async ({ page }) => {
-        await openIntegrationManager(page);
+    test("should successfully obtain an openID token", async ({ page, app }) => {
+        await openIntegrationManager(app);
         await sendActionFromIntegrationManager(page, integrationManagerUrl);
 
         const iframe = page.frameLocator(`iframe[src*="${integrationManagerUrl}"]`);

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

@@ -167,7 +167,7 @@ test.describe("Integration Manager: Kick", () => {
         await app.client.inviteUser(room.roomId, targetUser.credentials.userId);
         await expect(page.getByText(`${BOT_DISPLAY_NAME} joined the room`)).toBeVisible();
 
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
         await closeIntegrationManager(page, integrationManagerUrl);
         await expectKickedMessage(page, true);
@@ -185,7 +185,7 @@ test.describe("Integration Manager: Kick", () => {
             },
         });
 
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
         await closeIntegrationManager(page, integrationManagerUrl);
         await expectKickedMessage(page, false);
@@ -197,7 +197,7 @@ test.describe("Integration Manager: Kick", () => {
         await expect(page.getByText(`${BOT_DISPLAY_NAME} joined the room`)).toBeVisible();
         await targetUser.leave(room.roomId);
 
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
         await closeIntegrationManager(page, integrationManagerUrl);
         await expectKickedMessage(page, false);
@@ -209,7 +209,7 @@ test.describe("Integration Manager: Kick", () => {
         await expect(page.getByText(`${BOT_DISPLAY_NAME} joined the room`)).toBeVisible();
         await app.client.ban(room.roomId, targetUser.credentials.userId);
 
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
         await closeIntegrationManager(page, integrationManagerUrl);
         await expectKickedMessage(page, false);
@@ -218,7 +218,7 @@ test.describe("Integration Manager: Kick", () => {
     test("should no-op if the target was never a room member", async ({ page, app, bot: targetUser, room }) => {
         await app.viewRoomByName(ROOM_NAME);
 
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
         await closeIntegrationManager(page, integrationManagerUrl);
         await expectKickedMessage(page, false);

playwright/e2e/integration-manager/read_events.spec.ts

@@ -142,7 +142,7 @@ test.describe("Integration Manager: Read Events", () => {
 
         // Send a state event
         const sendEventResponse = await app.client.sendStateEvent(room.roomId, eventType, eventContent, stateKey);
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
 
         // Read state events
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, eventType, stateKey);
@@ -162,7 +162,7 @@ test.describe("Integration Manager: Read Events", () => {
 
         // Send a state event
         const sendEventResponse = await app.client.sendStateEvent(room.roomId, eventType, eventContent, stateKey);
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
 
         // Read state events
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, eventType, stateKey);
@@ -196,7 +196,7 @@ test.describe("Integration Manager: Read Events", () => {
             app.client.sendStateEvent(room.roomId, eventType, eventContent3, stateKey3),
         ]);
 
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
 
         // Read state events
         await sendActionFromIntegrationManager(
@@ -217,11 +217,11 @@ test.describe("Integration Manager: Read Events", () => {
         await expect(iframe.locator("#message-response")).toContainText(`"content":${JSON.stringify(eventContent3)}`);
     });
 
-    test("should fail to read an event type which is not allowed", async ({ page, room }) => {
+    test("should fail to read an event type which is not allowed", async ({ page, app, room }) => {
         const eventType = "com.example.event";
         const stateKey = "";
 
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
 
         // Read state events
         await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, eventType, stateKey);

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

@@ -137,7 +137,7 @@ test.describe("Integration Manager: Send Event", () => {
         );
 
         await app.viewRoomByName(ROOM_NAME);
-        await openIntegrationManager(page);
+        await openIntegrationManager(app);
     });
 
     test("should send a state event", async ({ page, app, room }) => {

playwright/e2e/integration-manager/utils.ts

@@ -14,10 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import type { Page } from "@playwright/test";
+import type { ElementAppPage } from "../../pages/ElementAppPage";
 
-export async function openIntegrationManager(page: Page) {
-    await page.getByRole("button", { name: "Room info" }).click();
+export async function openIntegrationManager(app: ElementAppPage) {
+    const { page } = app;
+    await app.toggleRoomInfoPanel();
     await page
         .locator(".mx_RoomSummaryCard_appsGroup")
         .getByRole("button", { name: "Add widgets, bridges & bots" })

playwright/e2e/invite/invite-dialog.spec.ts

@@ -36,7 +36,7 @@ test.describe("Invite dialog", function () {
         await expect(page.getByText("Hanako created and configured the room.")).toBeVisible();
 
         // Open the room info panel
-        await page.getByRole("button", { name: "Room info" }).click();
+        await app.toggleRoomInfoPanel();
 
         await page.locator(".mx_BaseCard").getByRole("menuitem", { name: "Invite" }).click();
 
@@ -114,12 +114,9 @@ test.describe("Invite dialog", function () {
 
         // Assert that the hovered user name on invitation UI does not have background color
         // TODO: implement the test on room-header.spec.ts
-        const roomHeader = page.locator(".mx_LegacyRoomHeader");
-        await roomHeader.locator(".mx_LegacyRoomHeader_name--textonly").hover();
-        await expect(roomHeader.locator(".mx_LegacyRoomHeader_name--textonly")).toHaveCSS(
-            "background-color",
-            "rgba(0, 0, 0, 0)",
-        );
+        const roomHeader = page.locator(".mx_RoomHeader");
+        await roomHeader.locator(".mx_RoomHeader_heading").hover();
+        await expect(roomHeader.locator(".mx_RoomHeader_heading")).toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
 
         // Send a message to invite the bots
         const composer = app.getComposer().locator("[contenteditable]");

playwright/e2e/knock/create-knock-room.spec.ts

@@ -31,7 +31,7 @@ test.describe("Create Knock Room", () => {
         await dialog.getByRole("option", { name: "Ask to join" }).click();
         await dialog.getByRole("button", { name: "Create room" }).click();
 
-        await expect(page.locator(".mx_LegacyRoomHeader").getByText("Cybersecurity")).toBeVisible();
+        await expect(page.locator(".mx_RoomHeader").getByText("Cybersecurity")).toBeVisible();
 
         const urlHash = await page.evaluate(() => window.location.hash);
         const roomId = urlHash.replace("#/room/", "");
@@ -48,7 +48,7 @@ test.describe("Create Knock Room", () => {
         await dialog.getByRole("textbox", { name: "Name" }).fill("Cybersecurity");
         await dialog.getByRole("button", { name: "Create room" }).click();
 
-        await expect(page.locator(".mx_LegacyRoomHeader").getByText("Cybersecurity")).toBeVisible();
+        await expect(page.locator(".mx_RoomHeader").getByText("Cybersecurity")).toBeVisible();
 
         const urlHash = await page.evaluate(() => window.location.hash);
         const roomId = urlHash.replace("#/room/", "");
@@ -74,7 +74,7 @@ test.describe("Create Knock Room", () => {
         await dialog.getByText("Make this room visible in the public room directory.").click();
         await dialog.getByRole("button", { name: "Create room" }).click();
 
-        await expect(page.locator(".mx_LegacyRoomHeader").getByText("Cybersecurity")).toBeVisible();
+        await expect(page.locator(".mx_RoomHeader").getByText("Cybersecurity")).toBeVisible();
 
         const urlHash = await page.evaluate(() => window.location.hash);
         const roomId = urlHash.replace("#/room/", "");

playwright/e2e/lazy-loading/lazy-loading.spec.ts

@@ -78,8 +78,9 @@ test.describe("Lazy Loading", () => {
         }
     }
 
-    async function openMemberlist(page: Page): Promise<void> {
-        await page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Room info" }).click();
+    async function openMemberlist(app: ElementAppPage): Promise<void> {
+        await app.toggleRoomInfoPanel();
+        const { page } = app;
         await page.locator(".mx_RightPanelTabs").getByText("People").click();
     }
 
@@ -123,7 +124,7 @@ test.describe("Lazy Loading", () => {
         // Alice should see 2 messages from every charly with the correct display name
         await checkPaginatedDisplayNames(app, charly1to5);
 
-        await openMemberlist(page);
+        await openMemberlist(app);
         await checkMemberList(page, charly1to5);
         await joinCharliesWhileAliceIsOffline(page, app, charly6to10);
         await checkMemberList(page, charly6to10);

playwright/e2e/one-to-one-chat/one-to-one-chat.spec.ts

@@ -35,10 +35,10 @@ test.describe("1:1 chat room", () => {
         await page.goto(`/#/user/${user2.userId}?action=chat`);
     });
 
-    test("should open new 1:1 chat room after leaving the old one", async ({ page, user2 }) => {
+    test("should open new 1:1 chat room after leaving the old one", async ({ page, app, user2 }) => {
         // leave 1:1 chat room
-        await page.locator(".mx_LegacyRoomHeader_nametext").getByText(user2.displayName).click();
-        await page.getByRole("menuitem", { name: "Leave" }).click();
+        await app.toggleRoomInfoPanel();
+        await page.getByRole("menuitem", { name: "Leave room" }).click();
         await page.getByRole("button", { name: "Leave" }).click();
 
         // wait till the room was left
@@ -49,6 +49,6 @@ test.describe("1:1 chat room", () => {
 
         // open new 1:1 chat room
         await page.goto(`/#/user/${user2.userId}?action=chat`);
-        await expect(page.locator(".mx_LegacyRoomHeader_nametext").getByText(user2.displayName)).toBeVisible();
+        await expect(page.locator(".mx_RoomHeader_heading").getByText(user2.displayName)).toBeVisible();
     });
 });

playwright/e2e/polls/pollHistory.spec.ts

@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import { test, expect } from "../../element-web-test";
-import type { Page } from "@playwright/test";
 import type { Bot } from "../../pages/bot";
 import type { Client } from "../../pages/client";
+import { ElementAppPage } from "../../pages/ElementAppPage";
 
 test.describe("Poll history", () => {
     type CreatePollOptions = {
@@ -66,8 +66,9 @@ test.describe("Poll history", () => {
         });
     };
 
-    async function openPollHistory(page: Page): Promise<void> {
-        await page.getByRole("button", { name: "Room info" }).click();
+    async function openPollHistory(app: ElementAppPage): Promise<void> {
+        const { page } = app;
+        await app.toggleRoomInfoPanel();
         await page.locator(".mx_RoomSummaryCard").getByRole("menuitem", { name: "Poll history" }).click();
     }
 
@@ -116,7 +117,7 @@ test.describe("Poll history", () => {
         await botVoteForOption(bot, roomId, pollId2, pollParams1.options[1].id);
         await endPoll(bot, roomId, pollId2);
 
-        await openPollHistory(page);
+        await openPollHistory(app);
 
         // these polls are also in the timeline
         // focus on the poll history dialog

playwright/e2e/presence/presence.spec.ts

@@ -59,7 +59,7 @@ test.describe("Presence tests", () => {
             );
             await app.client.createRoom({}); // trigger sync
 
-            await page.getByRole("button", { name: "Room info" }).click();
+            await app.toggleRoomInfoPanel();
             await page.locator(".mx_RightPanel").getByText("People").click();
             await expect(page.locator(".mx_EntityTile_unreachable")).toContainText("Bob");
             await expect(page.locator(".mx_EntityTile_unreachable")).toContainText("User's server unreachable");

playwright/e2e/read-receipts/index.ts

@@ -402,15 +402,15 @@ class Helpers {
      * Close the threads panel.
      */
     async closeThreadsPanel() {
-        await this.page.locator(".mx_LegacyRoomHeader").getByLabel("Threads").click();
+        await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click();
         await expect(this.page.locator(".mx_RightPanel")).not.toBeVisible();
     }
 
     /**
      * Return to the list of threads, given we are viewing a single thread.
      */
     async backToThreadsList() {
-        await this.page.locator(".mx_LegacyRoomHeader").getByLabel("Threads").click();
+        await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click();
     }
 
     /**
@@ -530,12 +530,11 @@ class Helpers {
         // whether it's open or not - wait here to give it a chance to settle.
         await this.page.waitForTimeout(200);
 
-        const ariaCurrent = await this.page.getByTestId("threadsButton").getAttribute("aria-current");
-        if (ariaCurrent !== "true") {
-            await this.page.getByTestId("threadsButton").click();
-        }
-
         const threadPanel = this.page.locator(".mx_ThreadPanel");
+        const isThreadPanelOpen = (await threadPanel.count()) !== 0;
+        if (!isThreadPanelOpen) {
+            await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click();
+        }
         await expect(threadPanel).toBeVisible();
         await threadPanel.evaluate(($panel) => {
             const $button = $panel.querySelector<HTMLElement>('[data-testid="base-card-back-button"]');