Design

Implemented and prototyped in 1.10.0 QA session. Final design decisions:

Admin session

• Navbar background changes to amber (bg-amber-800/90)
• Shield + "Admin" pill appears to the left of the avatar in the navbar
• Amber shield icon + "Admin session" label appears in the sidebar above the About button
• All navbar text, icons and avatar adjust to amber palette

External user session

• Navbar background changes to teal (bg-teal-900/90)
• Shield + "External" pill appears to the left of the avatar in the navbar
• Teal shield icon + "External session" label appears in the sidebar above the About button

Regular internal user

• No change — normal dark navbar, no indicator

Work Log

Step 1 — Add userType to frontend User type

File: frontend/src/types/index.ts

• Add UserType type: "INTERNAL" | "CUSTOMER" | "PARTNER" | "GUEST" | "COMMUNITY"
• Add userType: UserType field to User interface
• UserDto on the backend already exposes userType — no backend change needed

Step 2 — Create useCurrentUser hook

File: frontend/src/hooks/useCurrentUser.ts

• Fetches current user via getCurrentUser() API call
• Derives isAdmin: boolean from user.roles.includes("ADMIN")
• Derives isExternal: boolean from user.userType !== "INTERNAL"
• Returns { user, isAdmin, isExternal }
• Single hook consumed by NavBar, UserMenu, and Sidebar — no duplicate fetches

Step 3 — Update UserMenu

File: frontend/src/components/layout/UserMenu.tsx

• Replace direct getCurrentUser() fetch + useState<User> with useCurrentUser() hook
• Remove now-unused imports (getCurrentUser, User type)

Step 4 — Update NavBar

File: frontend/src/components/layout/NavBar.tsx

• Consume useCurrentUser() — destructure isAdmin, isExternal
• Conditionally apply amber or teal background class to header element
• Render shield + label pill to the left of UserMenu when admin or external
• Admin pill: amber background, amber border, shield icon, "Admin" label
• External pill: teal background, teal border, shield icon, "External" label
• Pill uses ShieldCheckIcon from @heroicons/react/24/outline

Step 5 — Update Sidebar

File: frontend/src/components/layout/Sidebar.tsx

• Consume useCurrentUser() — destructure isAdmin, isExternal
• Render amber shield + "Admin session" label above About button when admin
• Render teal shield + "External session" label above About button when external
• Uses ShieldCheckIcon from @heroicons/react/24/outline
• Indicator persists on scroll — solves the "amber navbar scrolls out of view" problem

Implementation Notes

• Role check must be driven from useCurrentUser hook, not props — ensures indicator appears on every screen that uses the shared layout
• Verify dashboard screen inherits shared navbar component
• Mobile: pill label should collapse gracefully on narrow viewports — show shield icon only below a breakpoint
• Clicking the shield pill can optionally navigate to admin settings panel (post-MVP enhancement)
• useCurrentUser hook calls getCurrentUser() independently in each component — consider lifting to a React context in 1.12.0 to avoid duplicate API calls

Files Changed

• frontend/src/types/index.ts
• frontend/src/hooks/useCurrentUser.ts (new file)
• frontend/src/components/layout/NavBar.tsx
• frontend/src/components/layout/UserMenu.tsx
• frontend/src/components/layout/Sidebar.tsx

Testing

• Log in as admin => verify amber navbar, shield pill, sidebar indicator
• Log in as external user => verify teal navbar, shield pill, sidebar indicator
• Log in as regular internal user => verify no indicator, normal dark navbar
• Navigate to all main pages (dashboard, projects, issues, branches, PRs) and verify indicator persists on all screens
• Verify dropdown menu retains normal dark background regardless of session type

Developing n branch fix/SZ-127-external-user-project-visibility

Merged into branch release/1.10.0

Fix merged into wolsonsc