feat: Migrate sidebar room list to Virtua

apps/meteor/client/sidebar/RoomList/RoomList.spec.tsx

@@ -0,0 +1,205 @@
+import { render, screen } from '@testing-library/react';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import RoomList from './RoomList';
+
+const mockCollapsedGroups: string[] = [];
+const mockHandleClick = jest.fn();
+const mockHandleKeyDown = jest.fn();
+const mockUsePreventDefault = jest.fn();
+const mockUseShortcutOpenMenu = jest.fn();
+
+const rooms = [
+	{ _id: 'general', name: 'general' },
+	{ _id: 'support', name: 'support' },
+	{ _id: 'alice', name: 'alice' },
+];
+
+const groupedUnreadInfo = [
+	{ userMentions: 1, groupMentions: 0, unread: 3, tunread: [], tunreadUser: [], tunreadGroup: [] },
+	{ userMentions: 0, groupMentions: 1, unread: 1, tunread: [], tunreadUser: [], tunreadGroup: [] },
+	{ userMentions: 0, groupMentions: 0, unread: 0, tunread: [], tunreadUser: [], tunreadGroup: [] },
+];
+
+type MockSidebarVirtualListProps = {
+	groups: {
+		key: string;
+		group: {
+			groupTitle: string;
+			unreadCount: (typeof groupedUnreadInfo)[number];
+		};
+		items: typeof rooms;
+	}[];
+	renderGroup: (group: { groupTitle: string; unreadCount: (typeof groupedUnreadInfo)[number] }, groupIndex: number) => ReactNode;
+	renderItem: (
+		item: (typeof rooms)[number],
+		itemIndex: number,
+		group: { groupTitle: string },
+		groupIndex: number,
+		rowIndex: number,
+	) => ReactNode;
+	getItemKey: (item: (typeof rooms)[number]) => string;
+	overscan?: number;
+};
+
+const mockSidebarVirtualList = jest.fn(({ groups, renderGroup, renderItem, getItemKey }: MockSidebarVirtualListProps) => {
+	let rowIndex = 0;
+
+	return (
+		<div data-testid='sidebar-virtual-list'>
+			{groups.map(({ key, group, items }, groupIndex) => {
+				rowIndex += 1;
+
+				return (
+					<section key={key} data-testid='virtual-group'>
+						{renderGroup(group, groupIndex)}
+						{items.map((item, itemIndex) => {
+							const itemRowIndex = rowIndex;
+							rowIndex += 1;
+
+							return (
+								<div key={getItemKey(item)} data-testid='virtual-item'>
+									{renderItem(item, itemIndex, group, groupIndex, itemRowIndex)}
+								</div>
+							);
+						})}
+					</section>
+				);
+			})}
+		</div>
+	);
+});
+
+jest.mock('@rocket.chat/fuselage', () => ({
+	Box: forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function Box({ children, ...props }, ref) {
+		return (
+			<div ref={ref} {...props}>
+				{children}
+			</div>
+		);
+	}),
+}));
+
+jest.mock('@rocket.chat/ui-contexts', () => ({
+	useUserId: () => 'user-id',
+	useUserPreference: () => 'extended',
+}));
+
+jest.mock('react-i18next', () => ({
+	useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+jest.mock('../components/SidebarVirtualList', () => ({
+	__esModule: true,
+	default: (props: MockSidebarVirtualListProps) => mockSidebarVirtualList(props),
+}));
+
+jest.mock('../../lib/RoomManager', () => ({
+	useOpenedRoom: () => 'GENERAL',
+}));
+
+jest.mock('../hooks/useAvatarTemplate', () => ({
+	useAvatarTemplate: () => 'AvatarTemplate',
+}));
+
+jest.mock('../hooks/useCollapsedGroups', () => ({
+	useCollapsedGroups: () => ({
+		collapsedGroups: mockCollapsedGroups,
+		handleClick: mockHandleClick,
+		handleKeyDown: mockHandleKeyDown,
+	}),
+}));
+
+jest.mock('../hooks/usePreventDefault', () => ({
+	usePreventDefault: (ref: unknown) => mockUsePreventDefault(ref),
+}));
+
+jest.mock('../hooks/useRoomList', () => ({
+	useRoomList: () => ({
+		groupsCount: [2, 1, 0],
+		groupsList: ['Channels', 'Direct Messages', 'Empty Group'],
+		roomList: rooms,
+		groupedUnreadInfo,
+	}),
+}));
+
+jest.mock('../hooks/useShortcutOpenMenu', () => ({
+	useShortcutOpenMenu: (ref: unknown) => mockUseShortcutOpenMenu(ref),
+}));
+
+jest.mock('../hooks/useTemplateByViewMode', () => ({
+	useTemplateByViewMode: () => 'SidebarItemTemplate',
+}));
+
+jest.mock('./RoomListCollapser', () => ({
+	__esModule: true,
+	default: ({ groupTitle, unreadCount }: { groupTitle: string; unreadCount: (typeof groupedUnreadInfo)[number] }) => (
+		<button type='button' data-testid='group-header'>{`${groupTitle}:${unreadCount.unread}`}</button>
+	),
+}));
+
+jest.mock('./RoomListRow', () => ({
+	__esModule: true,
+	default: ({ item }: { item: (typeof rooms)[number] }) => <div data-testid='room-row'>{item.name}</div>,
+}));
+
+jest.mock('./RoomListRowWrapper', () => ({
+	__esModule: true,
+	default: ({ children, ...props }: { children: ReactNode } & HTMLAttributes<HTMLDivElement>) => (
+		<div data-testid='room-row-wrapper' {...props}>
+			{children}
+		</div>
+	),
+}));
+
+describe('RoomList', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('passes grouped room data to SidebarVirtualList', () => {
+		render(<RoomList />);
+
+		expect(screen.getByTestId('sidebar-virtual-list')).toBeInTheDocument();
+		expect(mockSidebarVirtualList).toHaveBeenCalledWith(
+			expect.objectContaining({
+				groups: [
+					{
+						key: '0:Channels',
+						group: {
+							groupTitle: 'Channels',
+							unreadCount: groupedUnreadInfo[0],
+						},
+						items: [rooms[0], rooms[1]],
+					},
+					{
+						key: '1:Direct Messages',
+						group: {
+							groupTitle: 'Direct Messages',
+							unreadCount: groupedUnreadInfo[1],
+						},
+						items: [rooms[2]],
+					},
+					{
+						key: '2:Empty Group',
+						group: {
+							groupTitle: 'Empty Group',
+							unreadCount: groupedUnreadInfo[2],
+						},
+						items: [],
+					},
+				],
+				overscan: 25,
+			}),
+		);
+		expect(screen.getAllByTestId('group-header').map((element) => element.textContent)).toEqual([
+			'Channels:3',
+			'Direct Messages:1',
+			'Empty Group:0',
+		]);
+		expect(screen.getAllByTestId('room-row-wrapper')).toHaveLength(3);
+		expect(screen.getAllByTestId('room-row-wrapper').map((element) => element.getAttribute('data-index'))).toEqual(['1', '2', '4']);
+		expect(screen.getAllByTestId('room-row').map((element) => element.textContent)).toEqual(['general', 'support', 'alice']);
+	});
+});

apps/meteor/client/sidebar/RoomList/RoomList.tsx

@@ -1,16 +1,14 @@
 import { Box } from '@rocket.chat/fuselage';
-import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
-import { VirtualizedScrollbars } from '@rocket.chat/ui-client';
 import { useUserPreference, useUserId } from '@rocket.chat/ui-contexts';
-import { useMemo } from 'react';
+import { useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { GroupedVirtuoso } from 'react-virtuoso';
 
 import RoomListCollapser from './RoomListCollapser';
 import RoomListRow from './RoomListRow';
 import RoomListRowWrapper from './RoomListRowWrapper';
 import RoomListWrapper from './RoomListWrapper';
 import { useOpenedRoom } from '../../lib/RoomManager';
+import SidebarVirtualList from '../components/SidebarVirtualList';
 import { useAvatarTemplate } from '../hooks/useAvatarTemplate';
 import { useCollapsedGroups } from '../hooks/useCollapsedGroups';
 import { usePreventDefault } from '../hooks/usePreventDefault';
@@ -26,7 +24,7 @@ const RoomList = () => {
 	const { groupsCount, groupsList, roomList, groupedUnreadInfo } = useRoomList({ collapsedGroups });
 	const avatarTemplate = useAvatarTemplate();
 	const sideBarItemTemplate = useTemplateByViewMode();
-	const { ref } = useResizeObserver<HTMLElement>({ debounceDelay: 100 });
+	const ref = useRef<HTMLElement | null>(null);
 	const openedRoom = useOpenedRoom() ?? '';
 	const sidebarViewMode = useUserPreference<'extended' | 'medium' | 'condensed'>('sidebarViewMode') || 'extended';
 
@@ -44,29 +42,50 @@ const RoomList = () => {
 		[avatarTemplate, extended, isAnonymous, openedRoom, sideBarItemTemplate, sidebarViewMode, t],
 	);
 
+	const virtualGroups = useMemo(() => {
+		let roomOffset = 0;
+
+		return groupsList.map((groupTitle, groupIndex) => {
+			const count = groupsCount[groupIndex] ?? 0;
+			const items = roomList.slice(roomOffset, roomOffset + count);
+			roomOffset += count;
+
+			return {
+				key: `${groupIndex}:${groupTitle}`,
+				group: {
+					groupTitle,
+					unreadCount: groupedUnreadInfo[groupIndex],
+				},
+				items,
+			};
+		});
+	}, [groupedUnreadInfo, groupsCount, groupsList, roomList]);
+
 	usePreventDefault(ref);
 	useShortcutOpenMenu(ref);
 
 	return (
 		<Box position='relative' overflow='hidden' height='full' ref={ref}>
-			<VirtualizedScrollbars>
-				<GroupedVirtuoso
-					groupCounts={groupsCount}
-					groupContent={(index) => (
-						<RoomListCollapser
-							collapsedGroups={collapsedGroups}
-							onClick={() => handleClick(groupsList[index])}
-							onKeyDown={(e) => handleKeyDown(e, groupsList[index])}
-							groupTitle={groupsList[index]}
-							unreadCount={groupedUnreadInfo[index]}
-						/>
-					)}
-					{...(roomList.length > 0 && {
-						itemContent: (index) => roomList[index] && <RoomListRow data={itemData} item={roomList[index]} />,
-					})}
-					components={{ Item: RoomListRowWrapper, List: RoomListWrapper }}
-				/>
-			</VirtualizedScrollbars>
+			<SidebarVirtualList
+				groups={virtualGroups}
+				as={RoomListWrapper}
+				overscan={25}
+				getItemKey={(item) => item._id}
+				renderGroup={({ groupTitle, unreadCount }) => (
+					<RoomListCollapser
+						collapsedGroups={collapsedGroups}
+						onClick={() => handleClick(groupTitle)}
+						onKeyDown={(e) => handleKeyDown(e, groupTitle)}
+						groupTitle={groupTitle}
+						unreadCount={unreadCount}
+					/>
+				)}
+				renderItem={(item, _itemIndex, _group, _groupIndex, rowIndex) => (
+					<RoomListRowWrapper data-index={rowIndex}>
+						<RoomListRow data={itemData} item={item} />
+					</RoomListRowWrapper>
+				)}
+			/>
 		</Box>
 	);
 };

apps/meteor/client/sidebar/RoomList/RoomListWrapper.spec.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+
+import RoomListWrapper from './RoomListWrapper';
+
+jest.mock('react-i18next', () => ({
+	useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+jest.mock('./useSidebarListNavigation', () => ({
+	useSidebarListNavigation: () => ({
+		sidebarListRef: { current: null },
+	}),
+}));
+
+describe('RoomListWrapper', () => {
+	it('uses the legacy Virtuoso item list test id by default', () => {
+		render(
+			<RoomListWrapper style={{ height: '100%' }}>
+				<div>general</div>
+			</RoomListWrapper>,
+		);
+
+		expect(screen.getByTestId('virtuoso-item-list')).toHaveRole('list');
+		expect(screen.getByTestId('virtuoso-item-list')).toHaveAttribute('aria-label', 'Channels');
+	});
+
+	it('forwards Virtua container props', () => {
+		render(
+			<RoomListWrapper data-testid='room-list-wrapper' style={{ height: '100%' }}>
+				<div>general</div>
+			</RoomListWrapper>,
+		);
+
+		expect(screen.getByRole('list', { name: 'Channels' })).toBeInTheDocument();
+		expect(screen.getByTestId('room-list-wrapper')).toHaveStyle({ height: '100%' });
+		expect(screen.getByText('general')).toBeInTheDocument();
+	});
+});

apps/meteor/client/sidebar/RoomList/RoomListWrapper.tsx

@@ -2,17 +2,28 @@ import { useMergedRefs } from '@rocket.chat/fuselage-hooks';
 import type { ForwardedRef, HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import type { CustomContainerComponentProps } from 'virtua';
 
 import { useSidebarListNavigation } from './useSidebarListNavigation';
 
-type RoomListWrapperProps = HTMLAttributes<HTMLDivElement>;
+type RoomListWrapperProps = CustomContainerComponentProps &
+	Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style'> & {
+		'data-testid'?: string;
+	};
 
-const RoomListWrapper = forwardRef(function RoomListWrapper(props: RoomListWrapperProps, ref: ForwardedRef<HTMLDivElement>) {
+const RoomListWrapper = forwardRef(function RoomListWrapper(
+	{ children, style, 'data-testid': dataTestId, ...props }: RoomListWrapperProps,
+	ref: ForwardedRef<HTMLDivElement>,
+) {
 	const { t } = useTranslation();
 	const { sidebarListRef } = useSidebarListNavigation();
 	const mergedRefs = useMergedRefs(ref, sidebarListRef);
 
-	return <div role='list' aria-label={t('Channels')} ref={mergedRefs} {...props} />;
+	return (
+		<div {...props} data-testid={dataTestId ?? 'virtuoso-item-list'} role='list' aria-label={t('Channels')} ref={mergedRefs} style={style}>
+			{children}
+		</div>
+	);
 });
 
 export default RoomListWrapper;