From 7fa5be53173e7c167b93e3cb30aa6ece578cde50 Mon Sep 17 00:00:00 2001
From: jnsdls <jonas.daniels@outlook.com>
Date: Fri, 6 Jun 2025 21:42:16 +0000
Subject: [PATCH] [Dashboard] Add staff mode for viewing teams without
 membership (#7299)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- 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 -->
---
 .../(app)/team/[team_slug]/(team)/layout.tsx  | 32 +++++++++-----
 .../[project_slug]/(sidebar)/layout.tsx       | 44 ++++++++++++-------
 .../components/TeamHeader/TeamHeaderUI.tsx    | 29 ++++++------
 3 files changed, 65 insertions(+), 40 deletions(-)

diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/layout.tsx
index 4780484b081..d30dcdd5391 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/layout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/layout.tsx
@@ -1,9 +1,11 @@
 import { getProjects } from "@/api/projects";
-import { getTeams } from "@/api/team";
+import { getTeamBySlug, getTeams } from "@/api/team";
 import { AppFooter } from "@/components/blocks/app-footer";
+import { Button } from "@/components/ui/button";
 import { TabPathLinks } from "@/components/ui/tabs";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { AnnouncementBanner } from "components/notices/AnnouncementBanner";
+import Link from "next/link";
 import { redirect } from "next/navigation";
 import { siwaExamplePrompts } from "../../../(dashboard)/support/page";
 import { CustomChatButton } from "../../../../nebula-app/(app)/components/CustomChat/CustomChatButton";
@@ -20,25 +22,18 @@ export default async function TeamLayout(props: {
 }) {
   const params = await props.params;
 
-  const [accountAddress, account, teams, authToken] = await Promise.all([
+  const [accountAddress, account, teams, authToken, team] = await Promise.all([
     getAuthTokenWalletAddress(),
     getValidAccount(`/team/${params.team_slug}`),
     getTeams(),
     getAuthToken(),
+    getTeamBySlug(params.team_slug),
   ]);
 
-  if (!teams || !accountAddress || !authToken) {
+  if (!teams || !accountAddress || !authToken || !team) {
     redirect("/login");
   }
 
-  const team = teams.find(
-    (t) => t.slug === decodeURIComponent(params.team_slug),
-  );
-
-  if (!team) {
-    redirect("/team");
-  }
-
   const teamsAndProjects = await Promise.all(
     teams.map(async (team) => ({
       team,
@@ -53,6 +48,21 @@ export default async function TeamLayout(props: {
 
   return (
     <div className="flex h-full grow flex-col">
+      {!teams.some((t) => t.slug === team.slug) && (
+        <div className="bg-warning-text">
+          <div className="container flex items-center justify-between py-4">
+            <div className="flex flex-col gap-2">
+              <p className="font-bold text-white text-xl">👀 STAFF MODE 👀</p>
+              <p className="text-sm text-white">
+                You can only view this team, not take any actions.
+              </p>
+            </div>
+            <Button variant="default" asChild>
+              <Link href="/team/~">Leave Staff Mode</Link>
+            </Button>
+          </div>
+        </div>
+      )}
       <AnnouncementBanner />
       <div className="bg-card">
         <TeamHeaderLoggedIn
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/layout.tsx
index d6a6b78eb8e..b1870470da2 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/layout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/layout.tsx
@@ -1,8 +1,10 @@
-import { getProjects } from "@/api/projects";
-import { getTeams } from "@/api/team";
+import { getProject, getProjects } from "@/api/projects";
+import { getTeamBySlug, getTeams } from "@/api/team";
+import { Button } from "@/components/ui/button";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { AnnouncementBanner } from "components/notices/AnnouncementBanner";
+import Link from "next/link";
 import { redirect } from "next/navigation";
 import { siwaExamplePrompts } from "../../../../(dashboard)/support/page";
 import { CustomChatButton } from "../../../../../nebula-app/(app)/components/CustomChat/CustomChatButton";
@@ -21,21 +23,20 @@ export default async function ProjectLayout(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;
 }) {
   const params = await props.params;
-  const [accountAddress, teams, account, authToken] = await Promise.all([
-    getAuthTokenWalletAddress(),
-    getTeams(),
-    getValidAccount(`/team/${params.team_slug}/${params.project_slug}`),
-    getAuthToken(),
-  ]);
+  const [accountAddress, teams, account, authToken, team, project] =
+    await Promise.all([
+      getAuthTokenWalletAddress(),
+      getTeams(),
+      getValidAccount(`/team/${params.team_slug}/${params.project_slug}`),
+      getAuthToken(),
+      getTeamBySlug(params.team_slug),
+      getProject(params.team_slug, params.project_slug),
+    ]);
 
   if (!teams || !accountAddress || !authToken) {
     redirect("/login");
   }
 
-  const team = teams.find(
-    (t) => t.slug === decodeURIComponent(params.team_slug),
-  );
-
   if (!team) {
     redirect("/team");
   }
@@ -47,10 +48,6 @@ export default async function ProjectLayout(props: {
     })),
   );
 
-  const project = teamsAndProjects
-    .find((t) => t.team.slug === decodeURIComponent(params.team_slug))
-    ?.projects.find((p) => p.slug === params.project_slug);
-
   if (!project) {
     // not a valid project, redirect back to team page
     redirect(`/team/${params.team_slug}`);
@@ -65,6 +62,21 @@ export default async function ProjectLayout(props: {
   return (
     <SidebarProvider>
       <div className="flex h-dvh min-w-0 grow flex-col">
+        {!teams.some((t) => t.slug === team.slug) && (
+          <div className="bg-warning-text">
+            <div className="container flex items-center justify-between py-4">
+              <div className="flex flex-col gap-2">
+                <p className="font-bold text-white text-xl">👀 STAFF MODE 👀</p>
+                <p className="text-sm text-white">
+                  You can only view this team, not take any actions.
+                </p>
+              </div>
+              <Button variant="default" asChild>
+                <Link href="/team/~">Leave Staff Mode</Link>
+              </Button>
+            </div>
+          </div>
+        )}
         <div className="sticky top-0 z-10 border-border border-b bg-card">
           <AnnouncementBanner />
           <TeamHeaderLoggedIn
diff --git a/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx b/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx
index 97649a1775d..f46a562b834 100644
--- a/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx
+++ b/apps/dashboard/src/app/(app)/team/components/TeamHeader/TeamHeaderUI.tsx
@@ -54,20 +54,23 @@ export function TeamHeaderDesktopUI(props: TeamHeaderCompProps) {
         <SlashSeparator />
 
         <div className="flex items-center gap-1">
-          <Link
-            href={`/team/${currentTeam.slug}`}
-            className="flex flex-row items-center gap-2 font-normal text-sm"
-          >
-            <GradientAvatar
-              id={currentTeam.id}
-              src={currentTeam.image || ""}
-              className="size-6"
-              client={props.client}
-            />
-            <span> {currentTeam.name} </span>
-            <TeamVerifiedIcon domain={currentTeam.verifiedDomain} />
+          <span className="flex flex-row items-center gap-2 font-normal text-sm">
+            <Link
+              href={`/team/${currentTeam.slug}`}
+              className="flex flex-row items-center gap-2 font-normal text-sm"
+            >
+              <GradientAvatar
+                id={currentTeam.id}
+                src={currentTeam.image || ""}
+                className="size-6"
+                client={props.client}
+              />
+              <span> {currentTeam.name} </span>
+              <TeamVerifiedIcon domain={currentTeam.verifiedDomain} />
+            </Link>
+            {/* may render its own link so has to be outside of the link */}
             <TeamPlanBadge plan={teamPlan} teamSlug={currentTeam.slug} />
-          </Link>
+          </span>
 
           <TeamAndProjectSelectorPopoverButton
             currentProject={props.currentProject}