[CLEAN] Synthetic Benchmark PR #26556 - feat: limit badges to 2 with hover/click popover in UserListTable

[tomerqodo]

Benchmark PR calcom#26556

Type: Clean (correct implementation)

Original PR Title: feat: limit badges to 2 with hover/click popover in UserListTable
Original PR Description: ## What does this PR do?

Limits the number of badges displayed in the "teams" column and attribute columns in the UserListTable to a maximum of 2. When there are more than 2 badges, only the first 2 are shown with a "+N" badge that opens a popover to display all hidden items.

Changes

New Component: LimitedBadges

Created a reusable LimitedBadges component in apps/web/components/ui/LimitedBadges.tsx that:

• Accepts an array of BadgeItem objects (label, variant, onClick)
• Shows up to maxVisible badges (default: 2) with a "+N" indicator for overflow
• Opens a popover on hover for desktop and click for mobile (uses useMediaQuery to detect device type)
• Uses useMemo and useCallback for performance optimization
• Uses array index as the React key (simplified API - no id field required)

UserListTable Updates

• Teams column now uses LimitedBadges to limit displayed team badges
• Attribute columns now use LimitedBadges with a simplified label format showing value, weight percentage, and group indicator (e.g., "Value 100% (group)")
• Added explicit TypeScript types to callback parameters for Biome lint compliance
• Converted ternary operators to if-else statements for Biome noTernary compliance
• The "pending" status badge is rendered separately and not counted toward the limit

ResponseValueCell Updates

• Refactored to use the shared LimitedBadges component instead of inline badge rendering
• Removed rowId parameter (no longer needed since array index is used as key)

Demo

Updates since last revision

• Removed id field from BadgeItem type - component now uses array index as the React key for simplicity
• Removed unused rowId parameter from ResponseValueCell component
• Fixed Biome lint warnings by converting ternary operators to if-else statements
• Fixed import ordering issues

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• N/A - I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A - no documentation changes needed.
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

1. Navigate to the organization members page (Settings > Organizations > Members)
2. Find users that belong to more than 2 teams
3. Verify only 2 team badges are shown with a "+N" badge for remaining teams
4. On desktop: Hover over the "+N" badge to see the popover appear, move mouse away to close
5. On mobile (or with touch simulation): Tap the "+N" badge to toggle the popover
6. For attribute columns, verify the same behavior applies when a user has more than 2 attribute values
7. Verify the popover stays open when moving mouse from the trigger to the popover content

Human Review Checklist

• Verify hover opens/closes the popover correctly on desktop
• Verify click/tap opens/closes the popover on mobile devices
• Test edge cases: 0, 1, 2, and 3+ badges
• Confirm popover stays open when hovering over its content (not just the trigger)
• Verify using array index as key: Confirm no rendering issues when badge lists change
• Verify attribute column rendering: Weight and group indicator now appear in a single label format (e.g., "Value 100% (group)") instead of separate badges - confirm this looks acceptable
• Verify the existing ResponseValueCell in insights module still works correctly (rowId parameter was removed)

Checklist

• My code follows the style guidelines of this project
• I have checked if my changes generate no new warnings

---

Link to Devin run

https://app.devin.ai/sessions/f4de6199ef3841b884221abf6e69a62a

Requested by

@eunjae-lee ([email protected])
Original PR URL: calcom#26556

[github-actions]

Hey there and thank you for opening this pull request! 👋🏼

We require pull request titles to follow the Conventional Commits specification and it looks like your proposed title needs to be adjusted.

Details:

No release type found in pull request title "[CLEAN] Synthetic Benchmark PR #26556 - feat: limit badges to 2 with hover/click popover in UserListTable". Add a prefix to indicate what kind of release this pull request corresponds to. For reference, see https://www.conventionalcommits.org/

Available types:
 - feat: A new feature
 - fix: A bug fix
 - docs: Documentation only changes
 - style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 - refactor: A code change that neither fixes a bug nor adds a feature
 - perf: A code change that improves performance
 - test: Adding missing tests or correcting existing tests
 - build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
 - ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
 - chore: Other changes that don't modify src or test files
 - revert: Reverts a previous commit

[github-actions]

This PR has been marked as stale due to inactivity. If you're still working on it or need any help, please let us know or update the PR to keep it active.