Added hover tooltip for long repo names in filter panel #338
Conversation
|
Warning Rate limit exceeded@msukkari has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 28 minutes and 13 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (2)
WalkthroughThe changes introduce a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UIComponent
participant RepositoryName
participant RepositoryDisplayUtils
User->>UIComponent: View repository list/filter
UIComponent->>RepositoryName: Render repository name with props
RepositoryName->>RepositoryDisplayUtils: Format/truncate repository name
RepositoryDisplayUtils-->>RepositoryName: Return formatted name/parts
RepositoryName-->>UIComponent: Render formatted/truncated name (with optional tooltip)
UIComponent-->>User: Display improved repository name
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
🧹 Nitpick comments (3)
packages/web/src/lib/repositoryDisplayUtils.ts (2)
162-164: Consider consistency in truncation direction.The group path truncation here uses left-truncation (keeping the end), while the parent path truncation in
createTruncatedRepoDisplayuses right-truncation (keeping the beginning). Consider standardizing the approach for consistency.For group paths in compact display, left-truncation makes sense to show the immediate parent group. Document this intentional difference:
+ // Truncate from the left to show the most relevant (closest) group const truncatedGroup = groupPath.length > availableForGroup ? '…' + groupPath.substring(groupPath.length - availableForGroup + 1) : groupPath;
24-83: Add unit tests for the utility functions.These utility functions handle complex logic with multiple edge cases and would benefit from comprehensive unit tests to ensure correctness across different input scenarios.
Would you like me to generate unit test cases covering:
- Empty/single-part repository names
- Various length combinations
- Edge cases with very short maxLength values
- Unicode character handling
- Proportional allocation edge cases
Also applies to: 91-118, 124-127, 133-183
packages/web/src/components/ui/repositoryName.tsx (1)
83-87: Remove redundant case clause.The static analysis tool correctly identifies that the
'truncate'case is redundant since thedefaultcase handles the same logic.- case 'truncate': - default: { + default: { const { displayText } = createTruncatedRepoDisplay(repoName, maxLength); return <span className="font-mono text-sm">{displayText}</span>; }🧰 Tools
🪛 Biome (1.9.4)
[error] 83-84: Useless case clause.
because the default clause is present:
Unsafe fix: Remove the useless case.
(lint/complexity/noUselessSwitchCase)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
CHANGELOG.md(1 hunks)packages/web/src/app/[domain]/components/repositoryCarousel.tsx(2 hunks)packages/web/src/app/[domain]/search/components/filterPanel/entry.tsx(2 hunks)packages/web/src/app/[domain]/search/components/filterPanel/index.tsx(2 hunks)packages/web/src/components/ui/repositoryName.tsx(1 hunks)packages/web/src/lib/repositoryDisplayUtils.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/web/src/components/ui/repositoryName.tsx (1)
packages/web/src/lib/repositoryDisplayUtils.ts (4)
createBreadcrumbRepoDisplay(91-118)getProjectName(124-127)createCompactRepoDisplay(133-183)createTruncatedRepoDisplay(24-83)
🪛 Biome (1.9.4)
packages/web/src/components/ui/repositoryName.tsx
[error] 83-84: Useless case clause.
because the default clause is present:
Unsafe fix: Remove the useless case.
(lint/complexity/noUselessSwitchCase)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (13)
packages/web/src/lib/repositoryDisplayUtils.ts (2)
6-11: LGTM! Well-defined interface.The
TruncatedRepoDisplayinterface clearly defines the contract for repository display utilities with appropriate optional properties.
53-54:⚠️ Potential issueFix the reserved characters calculation.
The
reservedChars = 3calculation assumes only one slash and one ellipsis, but when both parent and project are truncated, you'll have two ellipses plus one slash, requiring 4 characters total.- // Reserve space for the slash and ellipsis characters - const reservedChars = 3; // "/" + "…" for each truncated part + // Reserve space for the slash and potential ellipsis characters + const reservedChars = 4; // "/" + "…" for parent + "…" for projectLikely an incorrect or invalid review comment.
CHANGELOG.md (1)
15-16: LGTM! Proper changelog documentation.The changelog entry correctly documents the UI improvement for handling long repository names with appropriate PR reference.
packages/web/src/app/[domain]/components/repositoryCarousel.tsx (2)
14-14: LGTM! Proper import of the new component.The import statement correctly brings in the
RepositoryNamecomponent.
99-105: LGTM! Appropriate component configuration for carousel context.The
RepositoryNamecomponent is well-configured for the carousel:
displayMode="project-only"is appropriate for limited spacemaxLength={25}fits carousel item constraintsshowTooltip={false}prevents UI conflicts in carousel- Responsive classes ensure proper layout behavior
packages/web/src/app/[domain]/search/components/filterPanel/index.tsx (2)
14-14: LGTM! Proper import addition.The import statement correctly adds the
RepositoryNamecomponent.
80-88: LGTM! Well-configured component for filter panel context.The
RepositoryNamecomponent is appropriately configured:
displayMode="truncate"provides intelligent truncation for filter entriesmaxLength={50}balances information visibility with space constraintstooltipSide="right"prevents tooltip clipping in the panel- Proper fallback with
info?.displayName ?? repository- Responsive layout classes ensure proper text overflow handling
packages/web/src/app/[domain]/search/components/filterPanel/entry.tsx (3)
8-8: LGTM! Type flexibility enables React component integration.The type change from
stringtostring | React.ReactNodemaintains backward compatibility while enabling the integration of the newRepositoryNamecomponent.
47-57: Excellent layout improvements for text truncation.The addition of
min-w-0classes and conditional rendering logic properly handles both string and React node display names. The flex layout ensures proper text truncation behavior for long repository names.
59-59: Good use of flex-shrink-0 to preserve count badge.Preventing the count badge from shrinking ensures it remains visible and properly sized regardless of the displayName length.
packages/web/src/components/ui/repositoryName.tsx (3)
9-17: Well-designed component interface.The props interface provides excellent flexibility with sensible defaults. The different display modes address various UI needs effectively.
19-28: Excellent documentation.The JSDoc comments clearly explain the component's purpose and the different display modes, making it easy for other developers to understand and use correctly.
42-89: Solid implementation of display modes.The switch statement cleanly handles different display modes, and the integration with utility functions from
repositoryDisplayUtilspromotes code reuse and maintainability.🧰 Tools
🪛 Biome (1.9.4)
[error] 83-84: Useless case clause.
because the default clause is present:
Unsafe fix: Remove the useless case.
(lint/complexity/noUselessSwitchCase)
msukkari
changed the title
Summary by CodeRabbit
New Features
Bug Fixes
Documentation