fix: truncate long permission names with ellipses #2071
Conversation
|
|
@DeepaPrasanna is attempting to deploy a commit to the Unkey Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughWalkthroughThe changes involve enhancements to the Changes
Assessment against linked issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
|
Thank you for following the naming conventions for pull request titles! 🙏 |
![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
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- apps/dashboard/app/(app)/@breadcrumb/authorization/permissions/[permissionId]/page.tsx (1 hunks)
- apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx (2 hunks)
Files skipped from review due to trivial changes (1)
- apps/dashboard/app/(app)/@breadcrumb/authorization/permissions/[permissionId]/page.tsx
Additional comments not posted (2)
apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx (2)
1-1: Imports are appropriate for the new functionality.The imports of
Tooltip,TooltipContent, andTooltipTriggerare correctly aligned with the PR's objectives to handle long permission names with a tooltip.
Line range hint
183-197: SubcomponentMetricis well-implemented.The
Metricsubcomponent is straightforward and effectively displays various metrics about the permission. It is not directly affected by the PR changes but continues to function as expected within the context of the page.
| className="w-40 font-mono font-medium ph-no-capture" | ||
| > | ||
| {permission.name} | ||
| <CopyButton value={permission.name} /> | ||
| <Tooltip> | ||
| <TooltipTrigger className="flex items-center justify-between gap-2 truncate"> | ||
| <span className="truncate">{permission.name}</span> | ||
| <div> | ||
| <CopyButton value={permission.name} /> | ||
| </div> | ||
| </TooltipTrigger> | ||
| <TooltipContent> | ||
| <span className="text-xs font-medium">{permission.name}</span> | ||
| </TooltipContent> | ||
| </Tooltip> |
There was a problem hiding this comment.
Tooltip implementation enhances usability.
The integration of the Tooltip component within the Badge for the permission name is well-implemented. It addresses the issue of long permission names by truncating them and providing a full view on hover, which aligns with the PR objectives.
However, consider adding a conditional rendering for the tooltip to only appear when the permission name exceeds a certain length. This would prevent unnecessary tooltip triggers for shorter names.
Consider adding a conditional rendering for the tooltip:
+ const shouldShowTooltip = permission.name.length > 20;
+
<Tooltip>
<TooltipTrigger className="flex items-center justify-between gap-2 truncate">
<span className="truncate">{permission.name}</span>
<div>
<CopyButton value={permission.name} />
</div>
</TooltipTrigger>
+ {shouldShowTooltip && (
<TooltipContent>
<span className="text-xs font-medium">{permission.name}</span>
</TooltipContent>
+ )}
</Tooltip>Committable suggestion was skipped due to low confidence.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx (2 hunks)
Files skipped from review as they are similar to previous changes (1)
- apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx
…unkey into fix/long-permission-names
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range, codebase verification and nitpick comments (1)
apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx (1)
84-98: Tooltip Implementation for Long Permission NamesThe integration of the
Tooltipcomponent within theBadgefor the permission name is well-implemented. It addresses the issue of long permission names by truncating them and providing a full view on hover, which aligns with the PR objectives.Suggestion:
Consider using a more descriptive class name for the tooltip trigger to enhance code readability and maintainability.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx (3 hunks)
Additional comments not posted (1)
apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx (1)
73-73: Conditional Tooltip Rendering ImplementedThe implementation of conditional rendering for the tooltip based on the length of the permission name is a good practice. It ensures that tooltips are only used when necessary, which enhances performance and user experience.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
What does this PR do?
Truncates long permission names with ellipses so that elements are not pushed off the screen.
Before:
As the permission name in the breadcrumbs seemed a bit weird, I have truncated the text with ellipses there too. Hope that's fine!
After:
Tooltip provided for full length name
Fixes #1976
Type of change
How should this be tested?
Checklist
Required
pnpm buildpnpm fmtconsole.logsgit pull origin mainAppreciated
Summary by CodeRabbit
New Features
Bug Fixes