Implement new memberlist design with MVVM architecture

package.json

@@ -90,7 +90,7 @@
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^8.0.0",
         "@types/png-chunks-extract": "^1.0.2",
-        "@vector-im/compound-design-tokens": "^2.0.1",
+        "@vector-im/compound-design-tokens": "^2.1.0",
         "@vector-im/compound-web": "^7.5.0",
         "@vector-im/matrix-wysiwyg": "2.38.0",
         "@zxcvbn-ts/core": "^3.0.4",
@@ -151,7 +151,9 @@
         "temporal-polyfill": "^0.2.5",
         "ua-parser-js": "^1.0.2",
         "uuid": "^11.0.0",
-        "what-input": "^5.2.10"
+        "what-input": "^5.2.10",
+        "@types/react-virtualized": "^9.21.30",
+        "react-virtualized": "^9.22.5"
     },
     "devDependencies": {
         "@action-validator/cli": "^0.6.0",

playwright/e2e/crypto/dehydration.spec.ts

@@ -16,7 +16,7 @@ const ROOM_NAME = "Test room";
 const NAME = "Alice";
 
 function getMemberTileByName(page: Page, name: string): Locator {
-    return page.locator(`.mx_EntityTile, [title="${name}"]`);
+    return page.locator(`.mx_MemberTileView, [title="${name}"]`);
 }
 
 test.describe("Dehydration", () => {
@@ -88,7 +88,7 @@ test.describe("Dehydration", () => {
         await viewRoomSummaryByName(page, app, ROOM_NAME);
 
         await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
-        await expect(page.locator(".mx_MemberList")).toBeVisible();
+        await expect(page.locator(".mx_MemberListView")).toBeVisible();
 
         await getMemberTileByName(page, NAME).click();
         await page.locator(".mx_UserInfo_devices .mx_UserInfo_expand").click();

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

@@ -78,7 +78,7 @@ test.describe("Lazy Loading", () => {
     }
 
     function getMemberInMemberlist(page: Page, name: string): Locator {
-        return page.locator(".mx_MemberList .mx_EntityTile_name").filter({ hasText: name });
+        return page.locator(".mx_MemberListView .mx_MemberTileView_name").filter({ hasText: name });
     }
 
     async function checkMemberList(page: Page, charlies: Bot[]) {

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

@@ -0,0 +1,48 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../element-web-test";
+import { Bot } from "../../pages/bot";
+
+const ROOM_NAME = "Test room";
+const NAME = "Alice";
+
+test.use({
+    synapseConfigOptions: {
+        presence: {
+            enabled: false,
+            include_offline_users_on_sync: false,
+        },
+    },
+    displayName: NAME,
+    disablePresence: true,
+});
+
+test.describe("Memberlist", () => {
+    test.beforeEach(async ({ app, user, page, homeserver }, testInfo) => {
+        testInfo.setTimeout(testInfo.timeout + 30_000);
+        const id = await app.client.createRoom({ name: ROOM_NAME });
+        const newBots: Bot[] = [];
+        const names = ["Bob", "Bob", "Susan"];
+        for (let i = 0; i < 3; i++) {
+            const displayName = names[i];
+            const autoAcceptInvites = displayName !== "Susan";
+            const bot = new Bot(page, homeserver, { displayName, startClient: true, autoAcceptInvites });
+            await bot.prepareClient();
+            await app.client.inviteUser(id, bot.credentials?.userId);
+            newBots.push(bot);
+        }
+    });
+
+    test("Renders correctly", { tag: "@screenshot" }, async ({ page, app }) => {
+        await app.viewRoomByName(ROOM_NAME);
+        const memberlist = await app.toggleMemberlistPanel();
+        await expect(memberlist.locator(".mx_MemberTileView")).toHaveCount(4);
+        await expect(memberlist.getByText("(Invited)")).toHaveCount(1);
+        await expect(page.locator(".mx_MemberListView")).toMatchScreenshot("with-four-members.png");
+    });
+});

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

@@ -24,7 +24,7 @@ const ROOM_ADDRESS_LONG =
     "loremIpsumDolorSitAmetConsecteturAdipisicingElitSedDoEiusmodTemporIncididuntUtLaboreEtDoloreMagnaAliqua";
 
 function getMemberTileByName(page: Page, name: string): Locator {
-    return page.locator(`.mx_EntityTile, [title="${name}"]`);
+    return page.locator(`.mx_MemberTileView, [title="${name}"]`);
 }
 
 test.describe("RightPanel", () => {
@@ -107,14 +107,14 @@ test.describe("RightPanel", () => {
             await viewRoomSummaryByName(page, app, ROOM_NAME);
 
             await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click();
-            await expect(page.locator(".mx_MemberList")).toBeVisible();
+            await expect(page.locator(".mx_MemberListView")).toBeVisible();
 
             await getMemberTileByName(page, NAME).click();
             await expect(page.locator(".mx_UserInfo")).toBeVisible();
             await expect(page.locator(".mx_UserInfo_profile").getByText(NAME)).toBeVisible();
 
             await page.getByTestId("base-card-back-button").click();
-            await expect(page.locator(".mx_MemberList")).toBeVisible();
+            await expect(page.locator(".mx_MemberListView")).toBeVisible();
 
             await page.getByLabel("Room info").nth(1).click();
             await checkRoomSummaryCard(page, ROOM_NAME);
@@ -130,14 +130,14 @@ test.describe("RightPanel", () => {
                 .locator(".mx_RoomInfoLine_private")
                 .getByRole("button", { name: /\d member/ })
                 .click();
-            await expect(page.locator(".mx_MemberList")).toBeVisible();
+            await expect(page.locator(".mx_MemberListView")).toBeVisible();
 
             await getMemberTileByName(page, NAME).click();
             await expect(page.locator(".mx_UserInfo")).toBeVisible();
             await expect(page.locator(".mx_UserInfo_profile").getByText(NAME)).toBeVisible();
 
             await page.getByTestId("base-card-back-button").click();
-            await expect(page.locator(".mx_MemberList")).toBeVisible();
+            await expect(page.locator(".mx_MemberListView")).toBeVisible();
         });
     });
 });

playwright/element-web-test.ts

@@ -99,6 +99,7 @@
     bot: Bot;
     labsFlags: string[];
     webserver: Webserver;
+    disablePresence: boolean;
 }
 
 export const test = base.extend<Fixtures>({
@@ -110,8 +111,9 @@
         );
         await use(context);
     },
+    disablePresence: false,
     config: {}, // We merge this atop the default CONFIG_JSON in the page fixture to make extending it easier
-    page: async ({ homeserver, context, page, config, labsFlags }, use) => {
+    page: async ({ homeserver, context, page, config, labsFlags, disablePresence }, use) => {
         await context.route(`http://localhost:8080/config.json*`, async (route) => {
             const json = {
                 ...CONFIG_JSON,
@@ -131,6 +133,11 @@
                     return obj;
                 }, {}),
             };
+            if (disablePresence) {
+                json["enable_presence_by_hs_url"] = {
+                    [homeserver.baseUrl]: false,
+                };
+            }
             await route.fulfill({ json });
         });
         await use(page);
@@ -306,12 +313,12 @@
 
         // We add a custom style tag before taking screenshots
         const style = (await page.addStyleTag({
             content: css,
         })) as ElementHandle<Element>;
 
         const screenshotName = sanitizeFilePathBeforeExtension(name);
         await baseExpect(receiver).toHaveScreenshot(screenshotName, options);
 
         await style.evaluate((tag) => tag.remove());
 
         testInfo.annotations.push({

playwright/pages/ElementAppPage.ts

@@ -93,7 +93,7 @@
             .getByRole("tree", { name: "Rooms" })
             .locator(`[title="${name}"],[aria-label="${name}"]`)
             .first()
             .click();
     }
 
     public async viewRoomById(roomId: string): Promise<void> {
@@ -177,6 +177,18 @@
         return this.page.locator(".mx_RightPanel");
     }
 
+    /**
+     * Opens/closes the memberlist panel
+     * @returns locator to the memberlist panel
+     */
+    public async toggleMemberlistPanel(): Promise<Locator> {
+        const locator = this.page.locator(".mx_FacePile");
+        await locator.click();
+        const memberlist = this.page.locator(".mx_MemberListView");
+        await memberlist.waitFor();
+        return memberlist;
+    }
+
     /**
      * Get a locator for the tooltip associated with an element
      * @param e The element with the tooltip

playwright/testcontainers/synapse.ts

@@ -134,6 +134,10 @@ const DEFAULT_CONFIG = {
     experimental_features: {},
     oidc_providers: [],
     serve_server_wellknown: true,
+    presence: {
+        enabled: true,
+        include_offline_users_on_sync: true,
+    },
 };
 
 export type SynapseConfigOptions = Partial<typeof DEFAULT_CONFIG>;

res/css/_components.pcss

@@ -278,9 +278,9 @@
 @import "./views/rooms/_CallGuestLinkButton.pcss";
 @import "./views/rooms/_DecryptionFailureBar.pcss";
 @import "./views/rooms/_E2EIcon.pcss";
+@import "./views/rooms/_E2EIconView.pcss";
 @import "./views/rooms/_EditMessageComposer.pcss";
 @import "./views/rooms/_EmojiButton.pcss";
-@import "./views/rooms/_EntityTile.pcss";
 @import "./views/rooms/_EventBubbleTile.pcss";
 @import "./views/rooms/_EventPreview.pcss";
 @import "./views/rooms/_EventTile.pcss";
@@ -290,13 +290,17 @@
 @import "./views/rooms/_LinkPreviewGroup.pcss";
 @import "./views/rooms/_LinkPreviewWidget.pcss";
 @import "./views/rooms/_LiveContentSummary.pcss";
-@import "./views/rooms/_MemberList.pcss";
+@import "./views/rooms/_MemberListHeaderView.pcss";
+@import "./views/rooms/_MemberListView.pcss";
+@import "./views/rooms/_MemberTileView.pcss";
 @import "./views/rooms/_MessageComposer.pcss";
 @import "./views/rooms/_MessageComposerFormatBar.pcss";
 @import "./views/rooms/_NewRoomIntro.pcss";
 @import "./views/rooms/_NotificationBadge.pcss";
+@import "./views/rooms/_OverflowTile.pcss";
 @import "./views/rooms/_PinnedEventTile.pcss";
 @import "./views/rooms/_PinnedMessageBanner.pcss";
+@import "./views/rooms/_PresenceIconView.pcss";
 @import "./views/rooms/_PresenceLabel.pcss";
 @import "./views/rooms/_ReadReceiptGroup.pcss";
 @import "./views/rooms/_ReplyPreview.pcss";

res/css/views/messages/_DisambiguatedProfile.pcss

@@ -21,8 +21,29 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_DisambiguatedProfile_mxid {
-        margin-inline-start: 5px;
         color: $secondary-content;
         font-size: var(--cpd-font-size-body-sm);
+        margin-inline-start: 5px;
+    }
+}
+
+/** Disambiguated profile needs to have a different layout in the member tile */
+.mx_MemberTileView .mx_DisambiguatedProfile {
+    display: flex;
+    flex-direction: column;
+
+    .mx_DisambiguatedProfile_mxid {
+        margin-inline-start: 0;
+        font: var(--cpd-font-body-sm-regular);
+    }
+
+    span:not(.mx_DisambiguatedProfile_mxid) {
+        /**
+        In a member tile, this span element is a flex child and so
+        we need the following for text overflow to work.
+        **/
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 }

res/css/views/rooms/_E2EIconView.pcss

@@ -0,0 +1,20 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.mx_E2EIconView {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.mx_E2EIconView_warning {
+    color: var(--cpd-color-icon-critical-primary);
+}
+
+.mx_E2EIconView_verified {
+    color: var(--cpd-color-icon-success-primary);
+}