Display pinned messages on a banner at the top of a room (#12917)

* Move pinned message hooks to a dedicated file

* Add a banner at the top of a room to display the pinned messages

* Put the pinning banner behind labs pinning labs flag

* Add redacted event support

* Handle UTD in pinning message banner

* Add tests for redaction

* Make all the banner clickable

* Add tests for PinnedMessageBanner.tsx

* Add e2e tests for the pinned message banner

* Review changes

Author: florianduros

playwright/e2e/pinned-messages/index.ts

@@ -168,9 +168,8 @@ export class Helpers {
 
     /**
      * Return the right panel
-     * @private
      */
-    private getRightPanel() {
+    public getRightPanel() {
         return this.page.locator("#mx_RightPanel");
     }
 
@@ -183,7 +182,6 @@ export class Helpers {
         await expect(rightPanel.getByRole("heading", { name: "Pinned messages" })).toHaveText(
             `${messages.length} Pinned messages`,
         );
-        await expect(rightPanel).toMatchScreenshot(`pinned-messages-list-messages-${messages.length}.png`);
 
         const list = rightPanel.getByRole("list");
         await expect(list.getByRole("listitem")).toHaveCount(messages.length);
@@ -243,6 +241,36 @@ export class Helpers {
         await item.getByRole("button").click();
         await this.page.getByRole("menu", { name: "Open menu" }).getByRole("menuitem", { name: "Unpin" }).click();
     }
+
+    /**
+     * Return the banner
+     * @private
+     */
+    public getBanner() {
+        return this.page.getByTestId("pinned-message-banner");
+    }
+
+    /**
+     * Assert that the banner contains the given message
+     * @param msg
+     */
+    async assertMessageInBanner(msg: string) {
+        await expect(this.getBanner().getByText(msg)).toBeVisible();
+    }
+
+    /**
+     * Return the view all button
+     */
+    public getViewAllButton() {
+        return this.page.getByRole("button", { name: "View all" });
+    }
+
+    /**
+     * Return the close list button
+     */
+    public getCloseListButton() {
+        return this.page.getByRole("button", { name: "Close list" });
+    }
 }
 
 export { expect };

playwright/e2e/pinned-messages/pinned-messages.spec.ts

@@ -48,6 +48,7 @@ test.describe("Pinned messages", () => {
         await util.openRoomInfo();
         await util.openPinnedMessagesList();
         await util.assertPinnedMessagesList(["Msg1", "Msg2", "Msg4"]);
+        await expect(util.getRightPanel()).toMatchScreenshot(`pinned-messages-list-pin-3.png`);
     });
 
     test("should unpin one message", async ({ page, app, room1, util }) => {
@@ -59,6 +60,7 @@ test.describe("Pinned messages", () => {
         await util.openPinnedMessagesList();
         await util.unpinMessageFromMessageList("Msg2");
         await util.assertPinnedMessagesList(["Msg1", "Msg4"]);
+        await expect(util.getRightPanel()).toMatchScreenshot(`pinned-messages-list-unpin-2.png`);
         await util.backPinnedMessagesList();
         await util.assertPinnedCountInRoomInfo(2);
     });
@@ -87,4 +89,65 @@ test.describe("Pinned messages", () => {
         await util.pinMessagesFromQuickActions(["Msg1"], true);
         await util.assertPinnedCountInRoomInfo(0);
     });
+
+    test("should display one message in the banner", async ({ page, app, room1, util }) => {
+        await util.goTo(room1);
+        await util.receiveMessages(room1, ["Msg1"]);
+        await util.pinMessages(["Msg1"]);
+        await util.assertMessageInBanner("Msg1");
+        await expect(util.getBanner()).toMatchScreenshot("pinned-message-banner-1-Msg1.png");
+    });
+
+    test("should display 2 messages in the banner", async ({ page, app, room1, util }) => {
+        await util.goTo(room1);
+        await util.receiveMessages(room1, ["Msg1", "Msg2"]);
+        await util.pinMessages(["Msg1", "Msg2"]);
+
+        await util.assertMessageInBanner("Msg1");
+        await expect(util.getBanner()).toMatchScreenshot("pinned-message-banner-2-Msg1.png");
+
+        await util.getBanner().click();
+        await util.assertMessageInBanner("Msg2");
+        await expect(util.getBanner()).toMatchScreenshot("pinned-message-banner-2-Msg2.png");
+
+        await util.getBanner().click();
+        await util.assertMessageInBanner("Msg1");
+        await expect(util.getBanner()).toMatchScreenshot("pinned-message-banner-2-Msg1.png");
+    });
+
+    test("should display 4 messages in the banner", async ({ page, app, room1, util }) => {
+        await util.goTo(room1);
+        await util.receiveMessages(room1, ["Msg1", "Msg2", "Msg3", "Msg4"]);
+        await util.pinMessages(["Msg1", "Msg2", "Msg3", "Msg4"]);
+
+        for (const msg of ["Msg1", "Msg4", "Msg3", "Msg2"]) {
+            await util.assertMessageInBanner(msg);
+            await expect(util.getBanner()).toMatchScreenshot(`pinned-message-banner-4-${msg}.png`);
+            await util.getBanner().click();
+        }
+    });
+
+    test("should open the pinned messages list from the banner", async ({ page, app, room1, util }) => {
+        await util.goTo(room1);
+        await util.receiveMessages(room1, ["Msg1", "Msg2"]);
+        await util.pinMessages(["Msg1", "Msg2"]);
+
+        await util.getViewAllButton().click();
+        await util.assertPinnedMessagesList(["Msg1", "Msg2"]);
+        await expect(util.getRightPanel()).toMatchScreenshot("pinned-message-banner-2.png");
+
+        await expect(util.getCloseListButton()).toBeVisible();
+    });
+
+    test("banner should listen to pinned message list", async ({ page, app, room1, util }) => {
+        await util.goTo(room1);
+        await util.receiveMessages(room1, ["Msg1", "Msg2"]);
+        await util.pinMessages(["Msg1", "Msg2"]);
+
+        await expect(util.getViewAllButton()).toBeVisible();
+
+        await util.openRoomInfo();
+        await util.openPinnedMessagesList();
+        await expect(util.getCloseListButton()).toBeVisible();
+    });
 });