Ditch right panel tabs and re-add close button (#99)

* Add extra buttons to room summary card

Signed-off-by: Michael Telatynski <[email protected]>

* Remove right panel tabs in favour of X button on each panel

Signed-off-by: Michael Telatynski <[email protected]>

* Update room summary card header to align close button correctly

Signed-off-by: Michael Telatynski <[email protected]>

* Fix typo in pinned messages heading

Signed-off-by: Michael Telatynski <[email protected]>

* Update snapshots

Signed-off-by: Michael Telatynski <[email protected]>

* Update tests

Signed-off-by: Michael Telatynski <[email protected]>

* Iterate

Signed-off-by: Michael Telatynski <[email protected]>

* Update snapshots

Signed-off-by: Michael Telatynski <[email protected]>

* Update screenshot

Signed-off-by: Michael Telatynski <[email protected]>

* Improve coverage

Signed-off-by: Michael Telatynski <[email protected]>

* i18n

Signed-off-by: Michael Telatynski <[email protected]>

* Fix base card title colours

Signed-off-by: Michael Telatynski <[email protected]>

* Update snapshots

Signed-off-by: Michael Telatynski <[email protected]>

---------

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

playwright/e2e/crypto/crypto.spec.ts

@@ -220,7 +220,7 @@ test.describe("Cryptography", function () {
 
         // Assert that verified icon is rendered
         await page.getByTestId("base-card-back-button").click();
-        await page.locator(".mx_RightPanelTabs").getByText("Info").click();
+        await page.getByLabel("Room info").nth(1).click();
         await expect(page.locator('.mx_RoomSummaryCard_badges [data-kind="success"]')).toContainText("Encrypted");
 
         // Take a snapshot of RoomSummaryCard with a verified E2EE icon

playwright/e2e/crypto/dehydration.spec.ts

@@ -94,7 +94,7 @@ test.describe("Dehydration", () => {
 
         await viewRoomSummaryByName(page, app, ROOM_NAME);
 
-        await page.locator(".mx_RightPanelTabs").getByText("People").click();
+        await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
         await expect(page.locator(".mx_MemberList")).toBeVisible();
 
         await getMemberTileByName(page, NAME).click();

playwright/e2e/crypto/utils.ts

@@ -345,7 +345,7 @@ export const verify = async (app: ElementAppPage, bob: Bot) => {
     const bobsVerificationRequestPromise = waitForVerificationRequest(bob);
 
     const roomInfo = await app.toggleRoomInfoPanel();
-    await page.locator(".mx_RightPanelTabs").getByText("People").click();
+    await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
     await roomInfo.getByText("Bob").click();
     await roomInfo.getByRole("button", { name: "Verify" }).click();
     await roomInfo.getByRole("button", { name: "Start Verification" }).click();

playwright/e2e/integration-manager/utils.ts

@@ -11,6 +11,6 @@ import type { ElementAppPage } from "../../pages/ElementAppPage";
 export async function openIntegrationManager(app: ElementAppPage) {
     const { page } = app;
     await app.toggleRoomInfoPanel();
-    await page.getByRole("tab", { name: "Extensions" }).click();
+    await page.getByRole("menuitem", { name: "Extensions" }).click();
     await page.getByRole("button", { name: "Add extensions" }).click();
 }

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

@@ -73,7 +73,7 @@ test.describe("Lazy Loading", () => {
     async function openMemberlist(app: ElementAppPage): Promise<void> {
         await app.toggleRoomInfoPanel();
         const { page } = app;
-        await page.locator(".mx_RightPanelTabs").getByText("People").click();
+        await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
     }
 
     function getMemberInMemberlist(page: Page, name: string): Locator {

playwright/e2e/read-receipts/index.ts

@@ -394,10 +394,7 @@ class Helpers {
      * Close the threads panel.
      */
     async closeThreadsPanel() {
-        await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click();
-        if (await this.page.locator("#thread-panel").isVisible()) {
-            await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click();
-        }
+        await this.page.locator(".mx_RightPanel").getByTestId("base-card-close-button").click();
         await expect(this.page.locator(".mx_RightPanel")).not.toBeVisible();
     }
 

playwright/e2e/right-panel/right-panel.spec.ts

@@ -65,7 +65,7 @@ test.describe("RightPanel", () => {
         test("should handle clicking add widgets", async ({ page, app }) => {
             await viewRoomSummaryByName(page, app, ROOM_NAME);
 
-            await page.getByRole("tab", { name: "Extensions" }).click();
+            await page.getByRole("menuitem", { name: "Extensions" }).click();
             await page.getByRole("button", { name: "Add extensions" }).click();
             await expect(page.locator(".mx_IntegrationManager")).toBeVisible();
         });
@@ -106,7 +106,7 @@ test.describe("RightPanel", () => {
         test("should handle viewing room member", async ({ page, app }) => {
             await viewRoomSummaryByName(page, app, ROOM_NAME);
 
-            await page.locator(".mx_RightPanelTabs").getByText("People").click();
+            await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
             await expect(page.locator(".mx_MemberList")).toBeVisible();
 
             await getMemberTileByName(page, NAME).click();
@@ -116,7 +116,7 @@ test.describe("RightPanel", () => {
             await page.getByTestId("base-card-back-button").click();
             await expect(page.locator(".mx_MemberList")).toBeVisible();
 
-            await page.locator(".mx_RightPanelTabs").getByText("Info").click();
+            await page.getByLabel("Room info").nth(1).click();
             await checkRoomSummaryCard(page, ROOM_NAME);
         });
     });

playwright/e2e/spaces/threads-activity-centre/index.ts

@@ -328,13 +328,6 @@ export class Helpers {
         return expect(this.page.locator(".mx_ThreadPanel")).toBeVisible();
     }
 
-    /**
-     * Assert that the thread tab is focused
-     */
-    assertThreadTabFocused() {
-        return expect(this.page.locator("#thread-panel-tab")).toBeFocused();
-    }
-
     /**
      * Populate the rooms with messages and threads
      * @param room1

playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts

@@ -157,6 +157,6 @@ test.describe("Threads Activity Centre", () => {
         await util.openTac();
         await util.clickRoomInTac(room1.name);
 
-        await util.assertThreadTabFocused();
+        await util.assertThreadPanelIsOpened();
     });
 });