sliding sync: add lazy-loading member support (#9530)

* sliding sync: add lazy-loading member support

Also swap to `$ME` constants when referring to our own member event.

* Hook into existing LL logic when showing the MemberList

* Linting

* Use consts in js sdk not react sdk

* Add jest tests

* linting

* Store the room in the test

* Fix up getRoom impl

* Add MemberListStore

* Use the right context in MemberList tests

* Fix RightPanel-test

* Always return members even if we lazy load

* Add MemberListStore tests

* Additional tests

test/SlidingSyncManager-test.ts

@@ -16,6 +16,7 @@ limitations under the License.
 
 import { SlidingSync } from 'matrix-js-sdk/src/sliding-sync';
 import { mocked } from 'jest-mock';
+import { MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk/src/matrix';
 
 import { SlidingSyncManager } from '../src/SlidingSyncManager';
 import { stubClient } from './test-utils';
@@ -26,14 +27,57 @@ const MockSlidingSync = <jest.Mock<SlidingSync>><unknown>SlidingSync;
 describe('SlidingSyncManager', () => {
     let manager: SlidingSyncManager;
     let slidingSync: SlidingSync;
+    let client: MatrixClient;
 
     beforeEach(() => {
         slidingSync = new MockSlidingSync();
         manager = new SlidingSyncManager();
-        manager.configure(stubClient(), "invalid");
+        client = stubClient();
+        // by default the client has no rooms: stubClient magically makes rooms annoyingly.
+        mocked(client.getRoom).mockReturnValue(null);
+        manager.configure(client, "invalid");
         manager.slidingSync = slidingSync;
     });
 
+    describe("setRoomVisible", () => {
+        it("adds a subscription for the room", async () => {
+            const roomId = "!room:id";
+            const subs = new Set<string>();
+            mocked(slidingSync.getRoomSubscriptions).mockReturnValue(subs);
+            mocked(slidingSync.modifyRoomSubscriptions).mockResolvedValue("yep");
+            await manager.setRoomVisible(roomId, true);
+            expect(slidingSync.modifyRoomSubscriptions).toBeCalledWith(new Set<string>([roomId]));
+        });
+        it("adds a custom subscription for a lazy-loadable room", async () => {
+            const roomId = "!lazy:id";
+            const room = new Room(roomId, client, client.getUserId());
+            room.getLiveTimeline().initialiseState([
+                new MatrixEvent({
+                    type: "m.room.create",
+                    state_key: "",
+                    event_id: "$abc123",
+                    sender: client.getUserId(),
+                    content: {
+                        creator: client.getUserId(),
+                    },
+                }),
+            ]);
+            mocked(client.getRoom).mockImplementation((r: string): Room => {
+                if (roomId === r) {
+                    return room;
+                }
+                return null;
+            });
+            const subs = new Set<string>();
+            mocked(slidingSync.getRoomSubscriptions).mockReturnValue(subs);
+            mocked(slidingSync.modifyRoomSubscriptions).mockResolvedValue("yep");
+            await manager.setRoomVisible(roomId, true);
+            expect(slidingSync.modifyRoomSubscriptions).toBeCalledWith(new Set<string>([roomId]));
+            // we aren't prescriptive about what the sub name is.
+            expect(slidingSync.useCustomSubscription).toBeCalledWith(roomId, expect.anything());
+        });
+    });
+
     describe("startSpidering", () => {
         it("requests in batchSizes", async () => {
             const gapMs = 1;

test/components/structures/RightPanel-test.tsx

@@ -24,7 +24,7 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
 import _RightPanel from "../../../src/components/structures/RightPanel";
 import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
 import ResizeNotifier from "../../../src/utils/ResizeNotifier";
-import { stubClient, wrapInMatrixClientContext, mkRoom } from "../../test-utils";
+import { stubClient, wrapInMatrixClientContext, mkRoom, wrapInSdkContext } from "../../test-utils";
 import { Action } from "../../../src/dispatcher/actions";
 import dis from "../../../src/dispatcher/dispatcher";
 import DMRoomMap from "../../../src/utils/DMRoomMap";
@@ -35,17 +35,23 @@ import { UPDATE_EVENT } from "../../../src/stores/AsyncStore";
 import { WidgetLayoutStore } from "../../../src/stores/widgets/WidgetLayoutStore";
 import RoomSummaryCard from "../../../src/components/views/right_panel/RoomSummaryCard";
 import MemberList from "../../../src/components/views/rooms/MemberList";
+import { SdkContextClass } from "../../../src/contexts/SDKContext";
 
-const RightPanel = wrapInMatrixClientContext(_RightPanel);
+const RightPanelBase = wrapInMatrixClientContext(_RightPanel);
 
 describe("RightPanel", () => {
     const resizeNotifier = new ResizeNotifier();
 
     let cli: MockedObject<MatrixClient>;
+    let context: SdkContextClass;
+    let RightPanel: React.ComponentType<React.ComponentProps<typeof RightPanelBase>>;
     beforeEach(() => {
         stubClient();
         cli = mocked(MatrixClientPeg.get());
         DMRoomMap.makeShared();
+        context = new SdkContextClass();
+        context.client = cli;
+        RightPanel = wrapInSdkContext(RightPanelBase, context);
     });
 
     afterEach(async () => {

test/components/views/rooms/MemberList-test.tsx

@@ -1,5 +1,6 @@
 /*
 Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+Copyright 2022 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -26,7 +27,8 @@ import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
 import * as TestUtils from '../../../test-utils';
 import MemberList from "../../../../src/components/views/rooms/MemberList";
 import MemberTile from '../../../../src/components/views/rooms/MemberTile';
-import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
+import { SDKContext } from '../../../../src/contexts/SDKContext';
+import { TestSdkContext } from '../../../TestSdkContext';
 
 function generateRoomId() {
     return '!' + Math.random().toString().slice(2, 10) + ':domain';
@@ -116,9 +118,11 @@ describe('MemberList', () => {
         const gatherWrappedRef = (r) => {
             memberList = r;
         };
+        const context = new TestSdkContext();
+        context.client = client;
         root = ReactDOM.render(
             (
-                <MatrixClientContext.Provider value={client}>
+                <SDKContext.Provider value={context}>
                     <MemberList
                         searchQuery=""
                         onClose={jest.fn()}
@@ -126,7 +130,7 @@ describe('MemberList', () => {
                         roomId={memberListRoom.roomId}
                         ref={gatherWrappedRef}
                     />
-                </MatrixClientContext.Provider>
+                </SDKContext.Provider>
             ),
             parentDiv,
         );

test/stores/MemberListStore-test.ts

@@ -0,0 +1,235 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { mocked } from "jest-mock";
+import { EventType, IContent, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+
+import SdkConfig from "../../src/SdkConfig";
+import SettingsStore from "../../src/settings/SettingsStore";
+import { MemberListStore } from "../../src/stores/MemberListStore";
+import { stubClient } from "../test-utils";
+import { TestSdkContext } from "../TestSdkContext";
+
+describe("MemberListStore", () => {
+    const alice = "@alice:bar";
+    const bob = "@bob:bar";
+    const charlie = "@charlie:bar";
+    const roomId = "!foo:bar";
+    let store: MemberListStore;
+    let client: MatrixClient;
+    let room: Room;
+
+    beforeEach(() => {
+        const context = new TestSdkContext();
+        client = stubClient();
+        client.baseUrl = "https://invalid.base.url.here";
+        context.client = client;
+        store = new MemberListStore(context);
+        // alice is joined to the room.
+        room = new Room(roomId, client, client.getUserId()!);
+        room.currentState.setStateEvents([
+            new MatrixEvent({
+                type: EventType.RoomCreate,
+                state_key: "",
+                content: {
+                    creator: alice,
+                },
+                sender: alice,
+                room_id: roomId,
+                event_id: "$1",
+            }),
+            new MatrixEvent({
+                type: EventType.RoomMember,
+                state_key: alice,
+                content: {
+                    membership: "join",
+                },
+                sender: alice,
+                room_id: roomId,
+                event_id: "$2",
+            }),
+        ]);
+        room.recalculate();
+        mocked(client.getRoom).mockImplementation((r: string): Room | null => {
+            if (r === roomId) {
+                return room;
+            }
+            return null;
+        });
+        SdkConfig.put({
+            enable_presence_by_hs_url: {
+                [client.baseUrl]: false,
+            },
+        });
+    });
+
+    it("loads members in a room", async () => {
+        addMember(room, bob, "invite");
+        addMember(room, charlie, "leave");
+
+        const { invited, joined } = await store.loadMemberList(roomId);
+        expect(invited).toEqual([room.getMember(bob)]);
+        expect(joined).toEqual([room.getMember(alice)]);
+    });
+
+    it("fails gracefully for invalid rooms", async () => {
+        const { invited, joined } = await store.loadMemberList("!idontexist:bar");
+        expect(invited).toEqual([]);
+        expect(joined).toEqual([]);
+    });
+
+    it("sorts by power level", async () => {
+        addMember(room, bob, "join");
+        addMember(room, charlie, "join");
+        setPowerLevels(room, {
+            users: {
+                [alice]: 100,
+                [charlie]: 50,
+            },
+            users_default: 10,
+        });
+
+        const { invited, joined } = await store.loadMemberList(roomId);
+        expect(invited).toEqual([]);
+        expect(joined).toEqual([room.getMember(alice), room.getMember(charlie), room.getMember(bob)]);
+    });
+
+    it("sorts by name if power level is equal", async () => {
+        const doris = "@doris:bar";
+        addMember(room, bob, "join");
+        addMember(room, charlie, "join");
+        setPowerLevels(room, {
+            users_default: 10,
+        });
+
+        let { invited, joined } = await store.loadMemberList(roomId);
+        expect(invited).toEqual([]);
+        expect(joined).toEqual([room.getMember(alice), room.getMember(bob), room.getMember(charlie)]);
+
+        // Ensure it sorts by display name if they are set
+        addMember(room, doris, "join", "AAAAA");
+        ({ invited, joined } = await store.loadMemberList(roomId));
+        expect(invited).toEqual([]);
+        expect(joined).toEqual(
+            [room.getMember(doris), room.getMember(alice), room.getMember(bob), room.getMember(charlie)],
+        );
+    });
+
+    it("filters based on a search query", async () => {
+        const mice = "@mice:bar";
+        const zorro = "@zorro:bar";
+        addMember(room, bob, "join");
+        addMember(room, mice, "join");
+
+        let { invited, joined } = await store.loadMemberList(roomId, "ice");
+        expect(invited).toEqual([]);
+        expect(joined).toEqual([room.getMember(alice), room.getMember(mice)]);
+
+        // Ensure it filters by display name if they are set
+        addMember(room, zorro, "join", "ice ice baby");
+        ({ invited, joined } = await store.loadMemberList(roomId, "ice"));
+        expect(invited).toEqual([]);
+        expect(joined).toEqual([room.getMember(alice), room.getMember(zorro), room.getMember(mice)]);
+    });
+
+    describe("lazy loading", () => {
+        beforeEach(() => {
+            mocked(client.hasLazyLoadMembersEnabled).mockReturnValue(true);
+            room.loadMembersIfNeeded = jest.fn();
+            mocked(room.loadMembersIfNeeded).mockResolvedValue(true);
+        });
+
+        it("calls Room.loadMembersIfNeeded once when enabled", async () => {
+            let { joined } = await store.loadMemberList(roomId);
+            expect(joined).toEqual([room.getMember(alice)]);
+            expect(room.loadMembersIfNeeded).toHaveBeenCalledTimes(1);
+            ({ joined } = await store.loadMemberList(roomId));
+            expect(joined).toEqual([room.getMember(alice)]);
+            expect(room.loadMembersIfNeeded).toHaveBeenCalledTimes(1);
+        });
+    });
+
+    describe("sliding sync", () => {
+        beforeEach(() => {
+            jest.spyOn(SettingsStore, 'getValue').mockImplementation((settingName, roomId, value) => {
+                return settingName === "feature_sliding_sync"; // this is enabled, everything else is disabled.
+            });
+            client.members = jest.fn();
+        });
+
+        it("calls /members when lazy loading", async () => {
+            mocked(client.members).mockResolvedValue({
+                chunk: [
+                    {
+                        type: EventType.RoomMember,
+                        state_key: bob,
+                        content: {
+                            membership: "join",
+                            displayname: "Bob",
+                        },
+                        sender: bob,
+                        room_id: room.roomId,
+                        event_id: "$" + Math.random(),
+                        origin_server_ts: 2,
+                    },
+                ],
+            });
+            const { joined } = await store.loadMemberList(roomId);
+            expect(joined).toEqual([room.getMember(alice), room.getMember(bob)]);
+            expect(client.members).toHaveBeenCalled();
+        });
+
+        it("does not use lazy loading on encrypted rooms", async () => {
+            client.isRoomEncrypted = jest.fn();
+            mocked(client.isRoomEncrypted).mockReturnValue(true);
+
+            const { joined } = await store.loadMemberList(roomId);
+            expect(joined).toEqual([room.getMember(alice)]);
+            expect(client.members).not.toHaveBeenCalled();
+        });
+    });
+});
+
+function addEventToRoom(room: Room, ev: MatrixEvent) {
+    room.getLiveTimeline().addEvent(ev, {
+        toStartOfTimeline: false,
+    });
+}
+
+function setPowerLevels(room: Room, pl: IContent) {
+    addEventToRoom(room, new MatrixEvent({
+        type: EventType.RoomPowerLevels,
+        state_key: "",
+        content: pl,
+        sender: room.getCreator()!,
+        room_id: room.roomId,
+        event_id: "$" + Math.random(),
+    }));
+}
+
+function addMember(room: Room, userId: string, membership: string, displayName?: string) {
+    addEventToRoom(room, new MatrixEvent({
+        type: EventType.RoomMember,
+        state_key: userId,
+        content: {
+            membership: membership,
+            displayname: displayName,
+        },
+        sender: userId,
+        room_id: room.roomId,
+        event_id: "$" + Math.random(),
+    }));
+}