Move the room list to the new ListView(backed by react-virtuoso) (#30515)

* Move Room List to ListView

- Also remove Space/Enter handing from keyboard navigation we can just leave the default behaviour of those keys and handle via onClick

* Update rooms when the primary filter changes

Otherwise when changing spaces, the filter does not reset until the next update to the RVS is made.

* Fix stickyRow/scrollIntoView when switiching space or changing filters

- Also remove the rest of space/enter keyboard handling use

* Remove the rest of space/enter keyboard handling use

* Remove useCombinedRef and add @radix-ui/react-compose-refs as we already depend on it

- Also remove eact-virtualized dep

* Update RoomList unit test

* Update snapshots and unit tests

* Fix e2e tests

* Remove react-virtualized from tests

* Fix e2e flake

* Update more screenshots

* Fix e2e test case where were should scroll to the top when the active room is no longer in the list

* Move from gitpkg to package-patch

* Update to latest react virtuoso release/api.

Also pass spaceId to the room list and scroll the activeIndex into view when spaceId or primaryFilter change.

* Use listbox/option roles to improve ScreenReader experience

* Change onKeyDown e.stopPropogation to cover context menu

* lint

* Remove unneeded exposure of the listView ref

Also move scrollIntoViewOnChange to useCallback

* Update unit test and snapshot

* Fix e2e tests and update screenshots

* Fix unit test and snapshot

* Update more unit tests

* Fix keyboard shortcuts and e2e test

* Fix another e2e and unit test

* lint

* Improve the naming for RoomResult and the documentation on it's fields meaning.

Also update the login in RoomList to check for any change in filters, this is a bit more future proof for when we introduce multi select than using activePrimaryFilter.

* Put back and fix landmark tests

* Fix test import

* Add comment regarding context object getting rendered.

* onKeyDown should be optional

* Use SpaceKey type on RoomResult

* lint

test/unit-tests/components/views/rooms/RoomListPanel/RoomList-test.tsx

@@ -9,28 +9,25 @@ import React from "react";
 import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { render } from "jest-matrix-react";
 import { fireEvent } from "@testing-library/dom";
+import { VirtuosoMockContext } from "react-virtuoso";
 
-import { mkRoom, stubClient, withClientContextRenderOptions } from "../../../../../test-utils";
 import { type RoomListViewState } from "../../../../../../src/components/viewmodels/roomlist/RoomListViewModel";
 import { RoomList } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomList";
 import DMRoomMap from "../../../../../../src/utils/DMRoomMap";
+import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
 import { Landmark, LandmarkNavigation } from "../../../../../../src/accessibility/LandmarkNavigation";
+import { mkRoom, stubClient } from "../../../../../test-utils";
 
 describe("<RoomList />", () => {
     let matrixClient: MatrixClient;
     let vm: RoomListViewState;
 
     beforeEach(() => {
-        // Needed to render the virtualized list in rtl tests
-        // https://github.com/bvaughn/react-virtualized/issues/493#issuecomment-640084107
-        jest.spyOn(HTMLElement.prototype, "offsetHeight", "get").mockReturnValue(1500);
-        jest.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockReturnValue(1500);
-
         matrixClient = stubClient();
         const rooms = Array.from({ length: 10 }, (_, i) => mkRoom(matrixClient, `room${i}`));
         vm = {
             isLoadingRooms: false,
-            rooms,
+            roomsResult: { spaceId: "home", rooms },
             primaryFilters: [],
             createRoom: jest.fn(),
             createChatRoom: jest.fn(),
@@ -44,7 +41,18 @@ describe("<RoomList />", () => {
     });
 
     it("should render a room list", () => {
-        const { asFragment } = render(<RoomList vm={vm} />, withClientContextRenderOptions(matrixClient));
+        const { asFragment } = render(<RoomList vm={vm} />, {
+            wrapper: ({ children }) => (
+                <MatrixClientContext.Provider value={matrixClient}>
+                    <VirtuosoMockContext.Provider value={{ viewportHeight: 600, itemHeight: 56 }}>
+                        <>{children}</>
+                    </VirtuosoMockContext.Provider>
+                </MatrixClientContext.Provider>
+            ),
+        });
+        // At the moment the context prop on Virtuoso gets rendered in the dom as "[object Object]".
+        // This is a general issue with the react-virtuoso library.
+        // TODO: Update the snapshot when the following issue is resolved: https://github.com/petyosi/react-virtuoso/issues/1281
         expect(asFragment()).toMatchSnapshot();
     });
 
@@ -53,7 +61,15 @@ describe("<RoomList />", () => {
         { shortcut: { key: "F6", ctrlKey: true }, isPreviousLandmark: false, label: "NextLandmark" },
     ])("should navigate to the landmark on NextLandmark.$label action", ({ shortcut, isPreviousLandmark }) => {
         const spyFindLandmark = jest.spyOn(LandmarkNavigation, "findAndFocusNextLandmark").mockReturnValue();
-        const { getByTestId } = render(<RoomList vm={vm} />, withClientContextRenderOptions(matrixClient));
+        const { getByTestId } = render(<RoomList vm={vm} />, {
+            wrapper: ({ children }) => (
+                <MatrixClientContext.Provider value={matrixClient}>
+                    <VirtuosoMockContext.Provider value={{ viewportHeight: 600, itemHeight: 56 }}>
+                        <>{children}</>
+                    </VirtuosoMockContext.Provider>
+                </MatrixClientContext.Provider>
+            ),
+        });
         const roomList = getByTestId("room-list");
         fireEvent.keyDown(roomList, shortcut);