[Dashboard][UI] - User's teams on profile page#885
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds a UserTeamsSection component and prop type to the user detail page; it uses Changes
Sequence Diagram(s)sequenceDiagram
actor Viewer as User
participant UserPage
participant UserTeamsSection
participant Hook as user.useTeams()
participant Router as Router/Links
Viewer->>UserPage: Open user detail page
UserPage->>UserTeamsSection: Render with { user }
UserTeamsSection->>Hook: Fetch teams for user
alt Teams found
Hook-->>UserTeamsSection: teams[]
UserTeamsSection-->>Viewer: Render table rows
Viewer->>Router: Click "View Team"
Router-->>Viewer: Open /projects/{projectId}/teams/{teamId} (new tab)
else No teams
Hook-->>UserTeamsSection: []
UserTeamsSection-->>Viewer: Render "No teams found" placeholder
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Pre-merge checks (2 passed, 1 warning)❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
✨ Finishing touches
🧪 Generate unit tests
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 |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Greptile Summary
This PR adds a new UserTeamsSection component to the user profile page in the dashboard, displaying teams that a user belongs to in a table format. The component is integrated into the existing UserPage component between the ContactChannelsSection and MetadataSection.
The new section follows the established design patterns of other profile sections, displaying team information including:
- Team ID (truncated for display)
- Team display name
- Creation date
- A "View Team" action that opens the team page in a new tab
The implementation includes proper empty state handling when a user has no team memberships and maintains consistency with the existing UI components and styling patterns used throughout the dashboard. This enhancement provides administrators with direct visibility into a user's team associations without requiring navigation away from the user profile, improving the overall user management workflow.
The change integrates seamlessly with the existing codebase structure, utilizing the same UI components (Table, TableBody, TableCell, etc.) and following the same architectural patterns as other sections on the page.
Confidence score: 5/5
- This PR is safe to merge with minimal risk as it only adds read-only functionality without modifying existing behavior
- Score reflects a simple, well-structured addition that follows established patterns and doesn't introduce any breaking changes or complex logic
- No files require special attention as the implementation is straightforward and follows existing conventions
1 file reviewed, no comments
![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 (2)
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/users/[userId]/page-client.tsx (2)
875-877: Prefer consistent, readable date formattingUse the existing
fromNowhelper with a tooltip for the exact timestamp to align with the rest of the page.- {team.createdAt.toLocaleDateString()} + <span title={team.createdAt.toLocaleString()}> + {fromNow(team.createdAt)} + </span>
879-889: Single action in dropdown adds frictionWith only “View Team”, consider rendering a small inline “View” button/link to reduce clicks. Keep dropdown if you expect more actions soon.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/users/[userId]/page-client.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
{apps/dashboard,apps/dev-launchpad,packages/stack-ui,packages/react}/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
For blocking alerts and errors in UI, do not use toast notifications; use alerts instead
Files:
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/users/[userId]/page-client.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer ES6 Map over Record when representing key–value collections
Files:
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/users/[userId]/page-client.tsx
{apps/dashboard,apps/dev-launchpad,packages/stack-ui,packages/react}/**/*.{tsx,jsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
Keep hover/click animations snappy; avoid pre-transition delays on hover and apply transitions after the action (e.g., fade-out on hover end)
Files:
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/users/[userId]/page-client.tsx
🧬 Code graph analysis (1)
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/users/[userId]/page-client.tsx (2)
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/use-admin-app.tsx (1)
useAdminApp(27-34)packages/stack-ui/src/components/data-table/cells.tsx (1)
ActionCell(72-123)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (9)
- GitHub Check: all-good
- GitHub Check: docker
- GitHub Check: setup-tests
- GitHub Check: lint_and_build (latest)
- GitHub Check: build (22.x)
- GitHub Check: build (22.x)
- GitHub Check: docker
- GitHub Check: restart-dev-and-test
- GitHub Check: Security Check
🔇 Additional comments (3)
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/users/[userId]/page-client.tsx (3)
827-897: LGTM: Clear section structure and integrationGood use of existing table/ActionCell patterns and empty state copy. Overall, the section reads well and matches surrounding UX.
950-950: LGTM: Section placementPlacing Teams after Contact Channels is sensible and consistent with the page’s information hierarchy.
833-845: ConfirmuseTeams()loading and error states
I couldn’t locate its definition in the codebase—please verify its return shape (including any loading or error cases) and wrap the teams list render with a loading placeholder and an alert for blocking errors.
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
N2D4
left a comment
N2D4
left a comment
There was a problem hiding this comment.
can you add a screenshot or loom to the PR description?
I have added a loom video to the description. |
2 participants
Adds new team section on user profile pages in the dashboard.
Important
Adds a new
UserTeamsSectionto display user's teams on the profile page inpage-client.tsx.UserTeamsSectioncomponent inpage-client.tsxto display user's teams on profile page.ContactChannelsSectionon the user page.This description was created by
for e3080a9. You can customize this summary. It will automatically update as commits are pushed.
Review by RecurseML
🔍 Review performed on 9318e2b..7b9e098
✨ No bugs found, your code is sparkling clean
✅ Files analyzed, no issues (1)
•
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/users/[userId]/page-client.tsxSummary by CodeRabbit