[Dashboard] Add staff mode for viewing teams without membership #7299
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
## Walkthrough
The updates modify how a team is fetched by slug in the dashboard app, replacing manual searching with a direct API call. A "STAFF MODE" warning banner is introduced for users viewing teams they do not belong to. Additionally, the structure of the team header is adjusted to separate the team badge from the team link.
## Changes
| File(s) | Change Summary |
|----------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------|
| apps/dashboard/src/app/(app)/team/[team_slug]/(team)/layout.tsx | Uses `getTeamBySlug` API for direct team fetching, adds "STAFF MODE" banner for non-member views, updates login redirect logic. |
| apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/layout.tsx | Uses `getTeamBySlug` and `getProject` APIs for direct fetching, removes manual team/project search, adds "STAFF MODE" banner for non-member views. |
| apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx | Refactors structure to move `TeamPlanBadge` outside the team link and adds explanatory comment. |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant User
participant Layout
participant API
participant UI
User->>Layout: Access team page by slug
Layout->>API: getTeamBySlug(slug)
API-->>Layout: Return team or null
Layout->>API: getTeams() (fetch user teams)
API-->>Layout: Return list of teams
Layout->>UI: Render team layout
alt Team not in user's teams
UI->>User: Show "STAFF MODE" banner with "Leave Staff Mode" button
end
UI->>User: Show team header and contentPossibly related PRs
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7299 +/- ##
==========================================
- Coverage 55.57% 55.57% -0.01%
==========================================
Files 909 909
Lines 58673 58673
Branches 4158 4158
==========================================
- Hits 32609 32607 -2
- Misses 25957 25959 +2
Partials 107 107
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/layout.tsx (1)
51-65: Well-implemented staff mode banner with clear UX.The implementation correctly identifies when a user is viewing a team they don't belong to and provides:
- Clear visual indication with warning styling and emoji
- Informative message about read-only access
- Easy exit via "Leave Staff Mode" button
The condition
!teams.some((t) => t.slug === team.slug)properly checks if the current team is not in the user's teams list.However, consider adding error boundary handling for edge cases where the staff mode might cause unexpected behavior in downstream components that assume team membership.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/layout.tsx(3 hunks)apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx (1)
apps/dashboard/src/app/(app)/components/TeamPlanBadge.tsx (1)
TeamPlanBadge(35-70)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/layout.tsx (4)
apps/dashboard/src/app/(app)/api/lib/getAuthToken.ts (2)
getAuthTokenWalletAddress(16-30)getAuthToken(6-14)apps/dashboard/src/app/(app)/account/settings/getAccount.ts (1)
getValidAccount(44-53)apps/dashboard/src/@/api/team.ts (2)
getTeams(53-68)getTeamBySlug(11-30)apps/dashboard/src/@/components/ui/button.tsx (1)
Button(85-85)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx (1)
57-73: Good fix for HTML validity and accessibility.The restructuring correctly addresses the nested link issue.
TeamPlanBadgeconditionally renders its own<Link>when the plan is "free" (as shown in the relevant code snippets), so moving it outside the main team link prevents invalid nested<a>elements while maintaining the desired layout.apps/dashboard/src/app/(app)/team/[team_slug]/(team)/layout.tsx (3)
2-8: Imports look appropriate.The added imports (
getTeamBySlug,Button,Link) are all used in the implementation and necessary for the staff mode functionality.
25-31: Good performance improvement with direct API call.Fetching the team directly by slug using
getTeamBySlugis more efficient than the previous approach of fetching all teams and searching through them. This also enables the staff mode functionality by allowing access to teams the user doesn't belong to.
33-35: Proper error handling for team existence.The updated redirect condition correctly handles the case where the team doesn't exist, ensuring users are redirected to login when the team cannot be fetched.
size-limit report 📦
|
jnsdls
force-pushed
the
_Dashboard_Add_staff_mode_for_viewing_teams_without_membership
branch
from
c548282 to
972ef13
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/layout.tsx (1)
47-49:⚠️ Potential issueCritical: Staff mode users cannot access projects due to faulty search logic.
The project finding logic searches within
teamsAndProjectswhich is built fromteams(user's accessible teams). When a user views a team in staff mode (not a member), that team won't exist inteams, causing this search to always fail and redirect to the team page, breaking the staff mode functionality for project access.Consider this fix to handle staff mode project access:
- const project = teamsAndProjects - .find((t) => t.team.slug === decodeURIComponent(params.team_slug)) - ?.projects.find((p) => p.slug === params.project_slug); + // For staff mode: if team is not in user's teams, fetch projects directly + let project; + const userTeamProjects = teamsAndProjects + .find((t) => t.team.slug === decodeURIComponent(params.team_slug)) + ?.projects; + + if (userTeamProjects) { + project = userTeamProjects.find((p) => p.slug === params.project_slug); + } else { + // Staff mode: fetch projects for the team directly + const staffModeProjects = await getProjects(team.slug); + project = staffModeProjects?.find((p) => p.slug === params.project_slug); + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/layout.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/layout.tsx(2 hunks)apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx
- apps/dashboard/src/app/(app)/team/[team_slug]/(team)/layout.tsx
🧰 Additional context used
🧠 Learnings (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/layout.tsx (1)
Learnt from: jnsdls
PR: thirdweb-dev/js#6929
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx:14-19
Timestamp: 2025-05-21T05:17:31.283Z
Learning: In Next.js server components, the `params` object can sometimes be a Promise that needs to be awaited, despite type annotations suggesting otherwise. In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx, it's necessary to await the params object before accessing its properties.
🧬 Code Graph Analysis (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/layout.tsx (3)
apps/dashboard/src/app/(app)/api/lib/getAuthToken.ts (2)
getAuthTokenWalletAddress(16-30)getAuthToken(6-14)apps/dashboard/src/@/api/team.ts (2)
getTeams(53-68)getTeamBySlug(11-30)apps/dashboard/src/app/(app)/account/settings/getAccount.ts (1)
getValidAccount(44-53)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Build Packages
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/layout.tsx (1)
2-2: LGTM! Import addition is correct.The import of
getTeamBySlugis properly added to support direct team fetching by slug.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/layout.tsx
Outdated
Show resolved
Hide resolved
MananTank
approved these changes
Jun 6, 2025
jnsdls
force-pushed
the
_Dashboard_Add_staff_mode_for_viewing_teams_without_membership
branch
from
972ef13 to
f305c2d
Compare
Merge activity
|
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added a "STAFF MODE" warning banner for users viewing a team they do not belong to, with a button to leave staff mode.
- **User Interface**
- Adjusted the team header layout for improved accessibility, ensuring the team badge is no longer nested inside the team link.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR primarily focuses on updating the `TeamHeaderUI` component and enhancing the `TeamLayout` and `ProjectLayout` components to incorporate a "Staff Mode" feature, which restricts user actions based on team membership.
### Detailed summary
- Modified the structure of the `TeamHeaderUI` component to wrap the `Link` inside a `span`.
- Added a "Staff Mode" warning message in `TeamLayout` if the user is not part of the team.
- Implemented the same "Staff Mode" warning in `ProjectLayout`.
- Updated API calls to include `getTeamBySlug` and `getProject`.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
graphite-app
bot
force-pushed
the
_Dashboard_Add_staff_mode_for_viewing_teams_without_membership
branch
from
f305c2d to
7fa5be5
Compare
graphite-app
bot
deleted the
_Dashboard_Add_staff_mode_for_viewing_teams_without_membership
branch
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
PR-Codex overview
This PR focuses on enhancing the team management interface by updating the
TeamHeaderUIcomponent and modifying the layout for team and project pages. It introduces a "Staff Mode" feature to restrict actions for certain users.Detailed summary
TeamHeaderUIto wrap content in aspanfor better structure.TeamLayoutandProjectLayoutif the user is restricted from actions.getTeamBySlugin both layouts.