feat: add history events filter#720
Conversation
Adds an event-type filter to the account History tab. The filter button sits on the nav row beside the tabs; HistoryView consumes the selection to decide which events to display. HorizontalScrollContainer gains a hideBorder prop so the parent can draw a divider spanning the filter.
|
@moudi-network is attempting to deploy a commit to the Livepeer Foundation Team on Vercel. A member of the Team first needs to authorize it. |
|
Warning Review limit reached
Next review available in: 56 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughAdds a new HistoryFilter popover component with event-type filter constants and lookup maps, wires filter state into the account layout with toggle/select-all/clear handlers, updates HistoryView to filter displayed events and refactor infinite scrolling, and adds a hideBorder option to HorizontalScrollContainer. ChangesHistory event filtering feature
Estimated code review effort: 3 (Moderate) | ~25 minutes HorizontalScrollContainer border option
Estimated code review effort: 1 (Trivial) | ~5 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant HistoryFilter
participant AccountLayout
participant HistoryView
User->>HistoryFilter: toggle filter checkbox
HistoryFilter->>AccountLayout: onToggle(filterKey)
AccountLayout->>AccountLayout: update selectedHistoryFilters Set
AccountLayout->>HistoryView: selectedFilters prop
HistoryView->>HistoryView: compute visibleEvents via TYPENAME_TO_FILTER
alt no events visible
HistoryView->>User: show tailored EmptyState message
else events visible
HistoryView->>User: render filtered event list
end
Related issues: Suggested labels: enhancement, frontend Suggested reviewers: livepeer/explorer maintainers 🐰 A rabbit hops through history's stream, 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/HistoryView/HistoryFilter.tsx`:
- Around line 159-186: The All and None controls in HistoryFilter are
duplicating the same inline button styles, which should be centralized to
prevent drift. Extract the shared css object or a small reusable button
component for the two Box as="button" elements in HistoryFilter, and update
onSelectAll/onClear usage to reference that shared styling so both buttons stay
consistent as the popover changes.
- Around line 190-215: The filter rows in HistoryFilter are mouse-only because
the Flex wrapper handles onClick but is not focusable or keyboard-operable,
while the Checkbox is removed from the tab order. Update the row interaction in
EVENT_FILTERS.map so each row can receive focus and toggle via keyboard, using
the existing onToggle(filter.key) behavior. Ensure the clickable row has
appropriate accessibility semantics and key handling so users can activate it
without a mouse.
In `@layouts/account.tsx`:
- Around line 301-306: The tab anchor list in the tabs.map render is using the
array index as the React key, which is unstable. Update the key on the A/Link
element in the tab rendering logic to use the stable unique tab.href value
instead of i, keeping the rest of the tab mapping behavior unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: e40da406-9ca3-44ab-8de7-134bdfc2bf7d
📒 Files selected for processing (4)
components/HistoryView/HistoryFilter.tsxcomponents/HistoryView/index.tsxcomponents/HorizontalScrollContainer/index.tsxlayouts/account.tsx
1 participant
Description
Adds an event-type filter to the account History tab. A "Filter" popover on the nav row lets you show/hide history by event type (12 categories: Delegated, Reward calls, Reward cut & fee changes, Winning tickets, Votes, etc.), with All/None shortcuts and an active-count badge. Filter state is lifted to
AccountLayoutso the button sits beside the tabs whileHistoryViewconsumes it.Filtering is purely display-side: paging/loading is filter-agnostic, so the filter only changes what's shown, never what's fetched.
Type of Change
Related Issue(s)
Related: #711
Closes: #511
Changes Made
Filter
components/HistoryView/HistoryFilter.tsx. A popover that filters history events by type.EVENT_FILTERSmaps each human-readable label to one or more event__typenames, with a reverseTYPENAME_TO_FILTERlookup; includes All/None shortcuts and an active-count badgeselectedHistoryFilters) intolayouts/account.tsxso the Filter button renders on the nav row beside the tabs;HistoryViewtakes aselectedFiltersprop and renders only matching events (visibleEvents)hideBorderprop tocomponents/HorizontalScrollContainerso the parent can draw a divider that spans both the tabs and the filter button on the nav rowIntersectionObserverthat attaches once on sentinel mount, so paging never self-retriggers (a re-created observer would re-fire on the in-view sentinel and crawl the entire history on a short filtered list)EmptyStatecard (matching Gateway/Delegator lists) with contextual messagesTesting
How to test (optional unless test is not trivial)
Filter
pnpm typecheck,pnpm exec eslint … --max-warnings 0,prettierall clean.Impact / Risk
Risk level: Low
Impacted areas: UI only (History tab nav row + filter popover). Display-only filtering. No DB, infra, config, API, or server code.
User impact: The History tab gains a Filter popover to narrow events by type. Default shows all events (current behavior), so the change is purely additive. Nothing existing is altered.
Rollback plan: Plain PR revert. The change is additive (new
HistoryFiltercomponent + aselectedFiltersprop + ahideBorderprop), so reverting removes the filter with no migration or config cleanup.Screenshots / Recordings (if applicable)
Additional Notes
fetchNextno-ops at the end); the filter never changes what's fetched, only what's rendered.Summary by CodeRabbit