feat: limit badges to 2 with hover/click popover in UserListTable#8
Conversation
📝 WalkthroughWalkthroughThis PR introduces a new Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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: 1
🤖 Fix all issues with AI agents
In `@apps/web/components/ui/LimitedBadges.tsx`:
- Around line 68-98: Hidden items are non-interactive spans with unstable keys;
update the rendering inside LimitedBadges so hiddenItems are rendered the same
way as visibleItems (use <Badge> or a focusable element with the item's onClick
handler and same hover/focus styles) and replace key={item.label} with a stable
unique key (e.g., item.id if provided, otherwise combine label+index like
`${item.label}-${index}`) for both visibleItems and hiddenItems to avoid
collisions and preserve click/filter behavior.
| {visibleItems.map((item, index) => ( | ||
| <Badge key={item.label} variant={item.variant || "gray"} onClick={item.onClick}> | ||
| {item.label} | ||
| </Badge> | ||
| ))} | ||
| {hasHiddenItems && ( | ||
| <Popover open={isOpen} onOpenChange={setIsOpen}> | ||
| <PopoverTrigger asChild> | ||
| <Button | ||
| color="minimal" | ||
| className="h-auto p-0 border-0 hover:border-0" | ||
| aria-label={`Show ${hiddenItems.length} more items`} | ||
| onMouseEnter={handleMouseEnter} | ||
| onMouseLeave={handleMouseLeave}> | ||
| <Badge variant="gray">+{hiddenItems.length}</Badge> | ||
| </Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent | ||
| side="bottom" | ||
| align="start" | ||
| className="w-fit p-2" | ||
| onMouseEnter={handleMouseEnter} | ||
| onMouseLeave={handleMouseLeave}> | ||
| <div className="flex flex-col gap-1"> | ||
| {hiddenItems.map((item, index) => ( | ||
| <span | ||
| key={item.label} | ||
| className="text-default cursor-pointer text-sm hover:text-emphasis"> | ||
| {item.label} | ||
| </span> | ||
| ))} |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
find . -name "LimitedBadges.tsx" -type fRepository: agentic-review-benchmarks/cal.com-combined-coderabbit
Length of output: 139
🏁 Script executed:
cat -n ./apps/web/components/ui/LimitedBadges.tsxRepository: agentic-review-benchmarks/cal.com-combined-coderabbit
Length of output: 3766
🏁 Script executed:
rg "LimitedBadges" --type tsx --type ts -A 3 -B 1Repository: agentic-review-benchmarks/cal.com-combined-coderabbit
Length of output: 124
🏁 Script executed:
rg "LimitedBadges" -A 3 -B 1 --max-count 20Repository: agentic-review-benchmarks/cal.com-combined-coderabbit
Length of output: 3627
🏁 Script executed:
rg "LimitedBadges" -A 15 apps/web/modules/users/components/UserTable/UserListTable.tsxRepository: agentic-review-benchmarks/cal.com-combined-coderabbit
Length of output: 1807
🏁 Script executed:
rg "LimitedBadges" -A 10 apps/web/modules/insights/components/ResponseValueCell.tsxRepository: agentic-review-benchmarks/cal.com-combined-coderabbit
Length of output: 556
Hidden items should be interactive with stable keys to match visible items' behavior.
Hidden items are rendered as non-interactive <span> elements and ignore item.onClick callbacks—breaking filter actions like those in UserListTable.tsx. Additionally, key={item.label} creates collision risk for duplicate labels in both visible and hidden items.
💡 Proposed fix
- {visibleItems.map((item, index) => (
- <Badge key={item.label} variant={item.variant || "gray"} onClick={item.onClick}>
+ {visibleItems.map((item, index) => (
+ <Badge key={`${item.label}-${index}`} variant={item.variant || "gray"} onClick={item.onClick}>
{item.label}
</Badge>
))}
@@
- {hiddenItems.map((item, index) => (
- <span
- key={item.label}
- className="text-default cursor-pointer text-sm hover:text-emphasis">
- {item.label}
- </span>
- ))}
+ {hiddenItems.map((item, index) => (
+ <button
+ key={`${item.label}-${index}`}
+ type="button"
+ className="text-default text-left text-sm hover:text-emphasis"
+ onClick={() => {
+ item.onClick?.();
+ setIsOpen(false);
+ }}>
+ {item.label}
+ </button>
+ ))}🤖 Prompt for AI Agents
In `@apps/web/components/ui/LimitedBadges.tsx` around lines 68 - 98, Hidden items
are non-interactive spans with unstable keys; update the rendering inside
LimitedBadges so hiddenItems are rendered the same way as visibleItems (use
<Badge> or a focusable element with the item's onClick handler and same
hover/focus styles) and replace key={item.label} with a stable unique key (e.g.,
item.id if provided, otherwise combine label+index like
`${item.label}-${index}`) for both visibleItems and hiddenItems to avoid
collisions and preserve click/filter behavior.
1 participant
Benchmark PR from agentic-review-benchmarks#8
Summary by CodeRabbit
New Features
UI/UX Improvements
✏️ Tip: You can customize this high-level summary in your review settings.