feat: add shared VirtualList component; migrate DiscussionsList from Virtuoso to TanStack Virtual#39394
Open
srijnabhargav wants to merge 4 commits intoRocketChat:developfrom
Open
Conversation
Contributor
|
Looks like this PR is not ready to merge, because of the following issues:
Please fix the issues and try again If you have any trouble, please check the PR guidelines |
|
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📜 Recent review details⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
WalkthroughAdds a new generic VirtualList component using Changes
Sequence DiagramsequenceDiagram
participant DiscussionsList
participant VirtualList
participant Virtualizer as "@tanstack/react-virtual"
participant ScrollContainer as CustomScrollbars
DiscussionsList->>VirtualList: render(items, totalCount, renderItem, onEndReached)
VirtualList->>Virtualizer: init useVirtualizer(count, estimateSize, overscan)
Virtualizer->>VirtualList: provide virtual items & totalSize
VirtualList->>ScrollContainer: attach/observe scroll element
ScrollContainer->>VirtualList: scroll events
VirtualList->>Virtualizer: update scroll offset / measure
VirtualList->>DiscussionsList: invoke renderItem for visible virtual items
alt last virtual index >= loaded items and totalCount > loaded
VirtualList->>DiscussionsList: call onEndReached()
DiscussionsList->>DiscussionsList: loadMoreItems()
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
coderabbitai
bot
added
the
type: feature
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.spec.tsx (1)
80-106: Add one regression test for pagination callback behavior.Please add coverage that
loadMoreItemsis triggered when end is reached and suppressed whenloadingis true, since this is part of the migration’s critical behavior.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.spec.tsx` around lines 80 - 106, Tests for DiscussionsList lack coverage for pagination callback behavior; add a regression test that renders <DiscussionsList> with a mock loadMoreItems function and asserts that calling the component's end-reached trigger (e.g., simulate the virtualized list reaching the end or invoke the prop/handler that the component uses to detect end) calls loadMoreItems once when loading is false, and does not call it when loading is true. Use the DiscussionsList component, the loadMoreItems prop, and the loading prop to create two cases: one where loading=false and you assert the mock was called after simulating end reached, and one where loading=true and you assert the mock was not called.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/meteor/client/components/VirtualList/VirtualList.tsx`:
- Around line 44-48: The effect currently calls onEndReached whenever the
onEndReached reference changes even if lastVirtualItemIndex, items.length, and
totalCount are unchanged; fix by tracking the items.length value that last
triggered onEndReached with a ref (e.g., lastTriggeredItemsLengthRef) inside the
component, and in the useEffect (where lastVirtualItemIndex, items.length,
totalCount, onEndReached are dependencies) only invoke onEndReached when the
conditions match AND lastTriggeredItemsLengthRef.current !== items.length; after
calling, set lastTriggeredItemsLengthRef.current = items.length, and reset the
ref (set to undefined or 0) when items.length decreases or when totalCount
changes if you want to allow re-triggering.
---
Nitpick comments:
In
`@apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.spec.tsx`:
- Around line 80-106: Tests for DiscussionsList lack coverage for pagination
callback behavior; add a regression test that renders <DiscussionsList> with a
mock loadMoreItems function and asserts that calling the component's end-reached
trigger (e.g., simulate the virtualized list reaching the end or invoke the
prop/handler that the component uses to detect end) calls loadMoreItems once
when loading is false, and does not call it when loading is true. Use the
DiscussionsList component, the loadMoreItems prop, and the loading prop to
create two cases: one where loading=false and you assert the mock was called
after simulating end reached, and one where loading=true and you assert the mock
was not called.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 5c29b315-f7cd-40c5-b784-2aa068136b9a
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (5)
apps/meteor/client/components/VirtualList/VirtualList.tsxapps/meteor/client/components/VirtualList/index.tsapps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.spec.tsxapps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.tsxapps/meteor/package.json
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: cubic · AI code reviewer
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)
**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation
Files:
apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.tsxapps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.spec.tsxapps/meteor/client/components/VirtualList/VirtualList.tsxapps/meteor/client/components/VirtualList/index.ts
🧠 Learnings (14)
📚 Learning: 2026-02-25T20:10:16.987Z
Learnt from: ahmed-n-abdeltwab
Repo: RocketChat/Rocket.Chat PR: 38913
File: packages/ddp-client/src/legacy/types/SDKLegacy.ts:34-34
Timestamp: 2026-02-25T20:10:16.987Z
Learning: In the RocketChat/Rocket.Chat monorepo, packages/ddp-client and apps/meteor do not use TypeScript project references. Module augmentations in apps/meteor (e.g., declare module 'rocket.chat/rest-typings') are not visible when compiling packages/ddp-client in isolation, which is why legacy SDK methods that depend on OperationResult types for OpenAPI-migrated endpoints must remain commented out.
Applied to files:
apps/meteor/package.json
📚 Learning: 2025-11-24T17:08:17.065Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat PR: 0
File: .cursor/rules/playwright.mdc:0-0
Timestamp: 2025-11-24T17:08:17.065Z
Learning: Applies to apps/meteor/tests/e2e/**/*.spec.ts : Utilize Playwright fixtures (`test`, `page`, `expect`) for consistency in test files
Applied to files:
apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.spec.tsx
📚 Learning: 2025-11-24T17:08:17.065Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat PR: 0
File: .cursor/rules/playwright.mdc:0-0
Timestamp: 2025-11-24T17:08:17.065Z
Learning: Applies to apps/meteor/tests/e2e/**/*.spec.ts : Group related tests in the same file
Applied to files:
apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.spec.tsx
📚 Learning: 2025-12-10T21:00:54.909Z
Learnt from: KevLehman
Repo: RocketChat/Rocket.Chat PR: 37091
File: ee/packages/abac/jest.config.ts:4-7
Timestamp: 2025-12-10T21:00:54.909Z
Learning: Rocket.Chat monorepo: Jest testMatch pattern '<rootDir>/src/**/*.spec.(ts|js|mjs)' is valid in this repo and used across multiple packages (e.g., packages/tools, ee/packages/omnichannel-services). Do not flag it as invalid in future reviews.
Applied to files:
apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.spec.tsx
📚 Learning: 2026-02-24T19:36:55.089Z
Learnt from: juliajforesti
Repo: RocketChat/Rocket.Chat PR: 38493
File: apps/meteor/tests/e2e/page-objects/fragments/home-content.ts:60-82
Timestamp: 2026-02-24T19:36:55.089Z
Learning: In RocketChat/Rocket.Chat e2e tests (apps/meteor/tests/e2e/page-objects/fragments/home-content.ts), thread message preview listitems do not have aria-roledescription="message", so lastThreadMessagePreview locator cannot be scoped to messageListItems (which filters for aria-roledescription="message"). It should remain scoped to page.getByRole('listitem') or mainMessageList.getByRole('listitem').
Applied to files:
apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.spec.tsx
📚 Learning: 2025-11-24T17:08:17.065Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat PR: 0
File: .cursor/rules/playwright.mdc:0-0
Timestamp: 2025-11-24T17:08:17.065Z
Learning: Applies to apps/meteor/tests/e2e/**/*.spec.ts : Maintain test isolation between test cases in Playwright tests
Applied to files:
apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.spec.tsx
📚 Learning: 2025-11-24T17:08:17.065Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat PR: 0
File: .cursor/rules/playwright.mdc:0-0
Timestamp: 2025-11-24T17:08:17.065Z
Learning: Applies to apps/meteor/tests/e2e/**/*.spec.ts : Ensure tests run reliably in parallel without shared state conflicts
Applied to files:
apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.spec.tsx
📚 Learning: 2025-11-24T17:08:17.065Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat PR: 0
File: .cursor/rules/playwright.mdc:0-0
Timestamp: 2025-11-24T17:08:17.065Z
Learning: Applies to apps/meteor/tests/e2e/**/*.spec.ts : All test files must be created in `apps/meteor/tests/e2e/` directory
Applied to files:
apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.spec.tsx
📚 Learning: 2025-11-24T17:08:17.065Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat PR: 0
File: .cursor/rules/playwright.mdc:0-0
Timestamp: 2025-11-24T17:08:17.065Z
Learning: Applies to **/*.spec.ts : Use descriptive test names that clearly communicate expected behavior in Playwright tests
Applied to files:
apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.spec.tsx
📚 Learning: 2025-11-24T17:08:17.065Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat PR: 0
File: .cursor/rules/playwright.mdc:0-0
Timestamp: 2025-11-24T17:08:17.065Z
Learning: Applies to apps/meteor/tests/e2e/**/*.spec.ts : Use `expect` matchers for assertions (`toEqual`, `toContain`, `toBeTruthy`, `toHaveLength`, etc.) instead of `assert` statements in Playwright tests
Applied to files:
apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.spec.tsx
📚 Learning: 2025-11-24T17:08:17.065Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat PR: 0
File: .cursor/rules/playwright.mdc:0-0
Timestamp: 2025-11-24T17:08:17.065Z
Learning: Applies to apps/meteor/tests/e2e/**/*.spec.ts : Use `test.step()` for complex test scenarios to improve organization in Playwright tests
Applied to files:
apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.spec.tsx
📚 Learning: 2026-02-10T16:32:42.586Z
Learnt from: tassoevan
Repo: RocketChat/Rocket.Chat PR: 38528
File: apps/meteor/client/startup/roles.ts:14-14
Timestamp: 2026-02-10T16:32:42.586Z
Learning: In Rocket.Chat's Meteor client code, DDP streams use EJSON and Date fields arrive as Date objects; do not manually construct new Date() in stream handlers (for example, in sdk.stream()). Only REST API responses return plain JSON where dates are strings, so implement explicit conversion there if needed. Apply this guidance to all TypeScript files under apps/meteor/client to ensure consistent date handling in DDP streams and REST responses.
Applied to files:
apps/meteor/client/components/VirtualList/index.ts
📚 Learning: 2026-02-26T19:25:44.063Z
Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 38778
File: packages/ui-voip/src/providers/useMediaSession.ts:192-192
Timestamp: 2026-02-26T19:25:44.063Z
Learning: In the Rocket.Chat repository, do not reference Biome lint rules in code review feedback. Biome is not used even if biome.json exists; only reference Biome rules if there is explicit, project-wide usage documented. For TypeScript files, review lint implications without Biome guidance unless the project enables Biome rules.
Applied to files:
apps/meteor/client/components/VirtualList/index.ts
📚 Learning: 2026-02-26T19:25:44.063Z
Learnt from: gabriellsh
Repo: RocketChat/Rocket.Chat PR: 38778
File: packages/ui-voip/src/providers/useMediaSession.ts:192-192
Timestamp: 2026-02-26T19:25:44.063Z
Learning: In this repository (RocketChat/Rocket.Chat), Biome lint rules are not used even if a biome.json exists. When reviewing TypeScript files (e.g., packages/ui-voip/src/providers/useMediaSession.ts), ensure lint suggestions do not reference Biome-specific rules. Rely on general ESLint/TypeScript lint rules and project conventions instead.
Applied to files:
apps/meteor/client/components/VirtualList/index.ts
🔇 Additional comments (3)
apps/meteor/package.json (1)
160-160: Reviewed this dependency addition; no actionable issue in this segment.apps/meteor/client/components/VirtualList/index.ts (1)
1-1: Barrel export looks correct.This cleanly exposes the shared VirtualList entrypoint for consumers.
apps/meteor/client/views/room/contextualBar/Discussions/DiscussionsList.tsx (1)
26-26: Migration wiring is consistent.The
loadMoreItems: () => voidcontract andVirtualListintegration are aligned with the new shared virtual list API.Also applies to: 86-94
Author
|
@KevLehman @MartinSchoeler Could you please review and let me know if any changes are needed? |
KevLehman
added
the
valid
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Proposed changes (including videos or screenshots)
This is a POC for migrating the codebase from react-virtuoso to @tanstack/react-virtual. The goal, as discussed in the channel, is to replace the scattered Virtuoso + VirtualizedScrollbars + useResizeObserver pattern with a single shared headless component.
What's in this PR
New
VirtualListcomponent (apps/meteor/client/components/VirtualList/)A generic
VirtualList<T>built onuseVirtualizerfrom@tanstack/react-virtual.It wraps
CustomScrollbars, handles the absolute-positioning pattern, dynamic row measurement viameasureElement, and infinite scroll viaonEndReached.It exposes the following options directly from the TanStack Virtual API:
estimateSizeoverscangappaddingStartpaddingEndDiscussionsListmigratedChosen as the first target because it is a pure presentational component with a clean, representative pattern (search + infinite scroll) without the additional complexity of real-time updates or grouped views.
Changes:
Virtuoso,VirtualizedScrollbars, anduseResizeObserverloadMoreItemsprop type from:to:
()=>voidsince the parent component already passes it this way.
Tests added for DiscussionsList
Added 4 unit tests covering:
Demo - UI looks unchanged! No Regression
Screen.Recording.2026-03-06.at.12.39.44.AM.mov
Issue(s)
Part of the TanStack Virtual migration discussed in the GSoC channel.
Summary by CodeRabbit
New Features
Refactor
Tests
Chores