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. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughAdds event-type filtering to account history through a new popover, shared filter metadata, layout-owned selection state, filtered event rendering, tailored empty states, and updated infinite scrolling. Also adds an optional ChangesHistory event filtering feature
Horizontal scroll border option
Estimated code review effort: 3 (Moderate) | ~30 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant HistoryFilter
participant AccountLayout
participant HistoryView
User->>HistoryFilter: toggle event filter
HistoryFilter->>AccountLayout: onToggle(filterKey)
AccountLayout->>AccountLayout: update selectedHistoryFilters
AccountLayout->>HistoryView: pass selectedFilters
HistoryView->>HistoryView: compute visibleEvents
alt no events visible
HistoryView->>User: show tailored empty state
else events visible
HistoryView->>User: render filtered history
end
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install timed out. The project may have too many dependencies for the sandbox. 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
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@moudi-network thanks for the contribution. @mehrdadmms did an initial review, and everything looks good so far. The implementation works, and the code quality is high enough for the bounty to be paid out. I may request a few minor code and UI changes after Adam has reviewed it. |
Having a single toggle to either select all or none would be very user friendly. Also the unchecked checkbox outline is also very faint against the popover background. |
Added the toggle now on 
|
4 participants
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
hideBorderoption to horizontal scroll containers for cases where the bottom border should be removed.