From ce2f7a60d1ebe2d835925f4e729371e0562f1b7c Mon Sep 17 00:00:00 2001 From: ryan-crabbe-berri Date: Fri, 2 Oct 2026 16:49:19 -0700 Subject: [PATCH] fix(ui): one shared Projects access rule for nav, data and actions The Projects query skipped global org_admin users, the page-visibility picker could never offer Projects, and New/Edit showed to users the backend would reject. Nav and queries now share one rule, Projects is selectable in the allowlist, New/Edit follow team_admin_editable_team_fields, and the project modal only lists teams the user administers. --- .../hooks/projects/projectAccess.ts | 46 ++++++++++++++++++ .../hooks/projects/useProjectDetails.test.ts | 14 +++++- .../hooks/projects/useProjectDetails.ts | 4 +- .../hooks/projects/useProjects.test.ts | 4 +- .../(dashboard)/hooks/projects/useProjects.ts | 6 +-- .../_components/ProjectDetailsPage.test.tsx | 46 ++++++++++++++++++ .../_components/ProjectDetailsPage.tsx | 17 +++++-- .../ProjectModals/ProjectBaseForm.test.tsx | 32 +++++++++++++ .../ProjectModals/ProjectBaseForm.tsx | 3 +- .../_components/ProjectsPage.test.tsx | 47 +++++++++++++++++++ .../projects/_components/ProjectsPage.tsx | 15 ++++-- .../src/components/leftnav.test.tsx | 17 +++++-- .../src/components/leftnav.tsx | 17 ++++--- .../src/components/page_utils.test.ts | 7 +++ .../src/components/page_utils.ts | 10 ++-- 15 files changed, 248 insertions(+), 37 deletions(-) create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/projectAccess.ts diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/projectAccess.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/projectAccess.ts new file mode 100644 index 00000000000..5cc144c94d3 --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/projectAccess.ts @@ -0,0 +1,46 @@ +import { useUISettings } from "@/app/(dashboard)/hooks/uiSettings/useUISettings"; +import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; +import { parseTeamAdminEditableFields } from "@/components/team/teamAdminEditAccess"; +import { all_admin_roles, internalUserRoles, isAdminRole, isProxyAdminRole } from "@/utils/roles"; + +const TEAM_ADMIN_PROJECTS_PERMISSION = "projects"; + +export const projectReaderRoles: readonly string[] = [...all_admin_roles, "Org Admin", ...internalUserRoles]; + +export const canReadProjects = (userRole: string | null): boolean => projectReaderRoles.includes(userRole ?? ""); + +export interface ProjectsPageViewer { + readonly userRole: string; + readonly isOrgAdmin: boolean; + readonly isTeamAdmin: boolean; +} + +export const canViewProjectsPage = ({ userRole, isOrgAdmin, isTeamAdmin }: ProjectsPageViewer): boolean => + canReadProjects(userRole) && (isAdminRole(userRole) || isOrgAdmin || isTeamAdmin); + +export interface ProjectManager { + readonly userRole: string; + readonly isViewOnly: boolean; + readonly isTeamAdmin: boolean; + readonly teamAdminEditableFields: readonly string[]; +} + +export const canManageProjects = ({ + userRole, + isViewOnly, + isTeamAdmin, + teamAdminEditableFields, +}: ProjectManager): boolean => + !isViewOnly && + (isProxyAdminRole(userRole) || (isTeamAdmin && teamAdminEditableFields.includes(TEAM_ADMIN_PROJECTS_PERMISSION))); + +export const useCanManageProjects = (isTeamAdmin: boolean): boolean => { + const { userRole, isViewOnly } = useAuthorized(); + const { data: uiSettings } = useUISettings(); + return canManageProjects({ + userRole, + isViewOnly, + isTeamAdmin, + teamAdminEditableFields: parseTeamAdminEditableFields(uiSettings?.values), + }); +}; diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/useProjectDetails.test.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/useProjectDetails.test.ts index 426abfe9bb6..cdaba106586 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/useProjectDetails.test.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/useProjectDetails.test.ts @@ -103,8 +103,18 @@ describe("useProjectDetails", () => { expect(global.fetch).not.toHaveBeenCalled(); }); - it("should not fetch when userRole is not an admin role", () => { - mockUseAuthorized.mockReturnValue({ accessToken: "test-token", userRole: "Internal User" }); + it.each(["Internal User", "Org Admin"])("should fetch when userRole is %s", async (userRole) => { + mockUseAuthorized.mockReturnValue({ accessToken: "test-token", userRole }); + (global.fetch as any).mockResolvedValue({ ok: true, json: async () => mockProject }); + const { result } = renderHook(() => useProjectDetails("proj-1"), { + wrapper: makeWrapper(queryClient), + }); + await waitFor(() => expect(result.current.isSuccess).toBe(true)); + expect(global.fetch).toHaveBeenCalled(); + }); + + it("should not fetch when userRole cannot read projects", () => { + mockUseAuthorized.mockReturnValue({ accessToken: "test-token", userRole: "regular_user" }); const { result } = renderHook(() => useProjectDetails("proj-1"), { wrapper: makeWrapper(queryClient), }); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/useProjectDetails.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/useProjectDetails.ts index 037baa18692..637e56d2dfe 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/useProjectDetails.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/useProjectDetails.ts @@ -1,7 +1,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query"; import { getProxyBaseUrl, getGlobalLitellmHeaderName, deriveErrorMessage, handleError } from "@/components/networking"; -import { all_admin_roles } from "@/utils/roles"; import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; +import { canReadProjects } from "./projectAccess"; import { ProjectResponse, projectKeys } from "./useProjects"; // ── Fetch function ─────────────────────────────────────────────────────────── @@ -37,7 +37,7 @@ export const useProjectDetails = (projectId?: string) => { return useQuery({ queryKey: projectKeys.detail(projectId!), queryFn: async () => fetchProjectDetails(accessToken!, projectId!), - enabled: Boolean(accessToken && projectId) && all_admin_roles.includes(userRole || ""), + enabled: Boolean(accessToken && projectId) && canReadProjects(userRole), // Seed from the list cache when available initialData: () => { diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/useProjects.test.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/useProjects.test.ts index 39d1b28303d..a0238ea2121 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/useProjects.test.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/useProjects.test.ts @@ -115,8 +115,8 @@ describe("useProjects", () => { expect(global.fetch).not.toHaveBeenCalled(); }); - it("should fetch when userRole is an internal user role", async () => { - mockUseAuthorized.mockReturnValue({ accessToken: "test-token", userRole: "Internal User" }); + it.each(["Internal User", "Org Admin"])("should fetch when userRole is %s", async (userRole) => { + mockUseAuthorized.mockReturnValue({ accessToken: "test-token", userRole }); (global.fetch as any).mockResolvedValue({ ok: true, json: async () => mockProjects }); const { result } = renderHook(() => useProjects(), { wrapper: makeWrapper(queryClient) }); await waitFor(() => expect(result.current.isSuccess).toBe(true)); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/useProjects.ts b/ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/useProjects.ts index c240dbb0170..7327e934680 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/useProjects.ts +++ b/ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/useProjects.ts @@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query"; import { createQueryKeys } from "../common/queryKeysFactory"; import { getProxyBaseUrl, getGlobalLitellmHeaderName, deriveErrorMessage, handleError } from "@/components/networking"; import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; -import { all_admin_roles, internalUserRoles } from "@/utils/roles"; +import { canReadProjects } from "./projectAccess"; // ── Types ──────────────────────────────────────────────────────────────────── @@ -42,8 +42,6 @@ export interface ProjectResponse { export const projectKeys = createQueryKeys("projects"); -const projectReaderRoles = [...all_admin_roles, ...internalUserRoles]; - // ── Fetch function ─────────────────────────────────────────────────────────── const fetchProjects = async (accessToken: string): Promise => { @@ -76,6 +74,6 @@ export const useProjects = () => { return useQuery({ queryKey: projectKeys.list({}), queryFn: async () => fetchProjects(accessToken!), - enabled: Boolean(accessToken) && projectReaderRoles.includes(userRole!), + enabled: Boolean(accessToken) && canReadProjects(userRole), }); }; diff --git a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectDetailsPage.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectDetailsPage.test.tsx index d22ac0d8742..5d84488d739 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectDetailsPage.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectDetailsPage.test.tsx @@ -14,6 +14,16 @@ vi.mock("@/app/(dashboard)/hooks/teams/useTeams", () => ({ useTeam: (id?: string) => mockUseTeam(id), })); +const mockUseAuthorized = vi.fn(); +vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({ + default: () => mockUseAuthorized(), +})); + +const mockUseUISettings = vi.fn(); +vi.mock("@/app/(dashboard)/hooks/uiSettings/useUISettings", () => ({ + useUISettings: () => mockUseUISettings(), +})); + vi.mock("./ProjectModals/EditProjectModal", () => ({ EditProjectModal: ({ isOpen }: { isOpen: boolean }) => (isOpen ?
: null), })); @@ -63,6 +73,8 @@ describe("ProjectDetail", () => { beforeEach(() => { vi.clearAllMocks(); mockUseTeam.mockReturnValue({ data: undefined, isLoading: false }); + mockUseAuthorized.mockReturnValue({ userId: "admin-user", userRole: "Admin", isViewOnly: false }); + mockUseUISettings.mockReturnValue({ data: { values: {} } }); }); describe("when loading", () => { @@ -171,6 +183,40 @@ describe("ProjectDetail", () => { expect(screen.getByTestId("edit-modal")).toBeInTheDocument(); }); + it.each([ + { who: "a proxy admin without the setting", role: "Admin", teamRole: "user", fields: [], visible: true }, + { + who: "the project team's admin without the setting", + role: "Internal User", + teamRole: "admin", + fields: [], + visible: false, + }, + { + who: "the project team's admin when the setting grants projects", + role: "Internal User", + teamRole: "admin", + fields: ["projects"], + visible: true, + }, + { + who: "a plain member of the project team when the setting grants projects", + role: "Internal User", + teamRole: "user", + fields: ["projects"], + visible: false, + }, + ])("should gate 'Edit Project' for $who", ({ role, teamRole, fields, visible }) => { + mockUseAuthorized.mockReturnValue({ userId: "caller", userRole: role, isViewOnly: false }); + mockUseUISettings.mockReturnValue({ data: { values: { team_admin_editable_team_fields: fields } } }); + mockUseTeam.mockReturnValue({ + data: { team_id: "team-1", members_with_roles: [{ user_id: "caller", role: teamRole }] }, + isLoading: false, + }); + renderWithProviders(); + expect(screen.queryByRole("button", { name: /edit project/i }) !== null).toBe(visible); + }); + it("should show 'No team assigned' when the project has no team", () => { mockUseProjectDetails.mockReturnValue({ data: { ...mockProject, team_id: null }, diff --git a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectDetailsPage.tsx b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectDetailsPage.tsx index 2585b67c81b..b9d8ef94cb4 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectDetailsPage.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectDetailsPage.tsx @@ -1,5 +1,8 @@ +import { useCanManageProjects } from "@/app/(dashboard)/hooks/projects/projectAccess"; import { useProjectDetails } from "@/app/(dashboard)/hooks/projects/useProjectDetails"; import { useTeam } from "@/app/(dashboard)/hooks/teams/useTeams"; +import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; +import { isUserTeamAdminForSingleTeam } from "@/utils/roles"; import { BarChart } from "@/components/shared/charts"; import { ArrowLeftIcon, DollarSignIcon, EditIcon, UsersIcon } from "lucide-react"; import { useMemo, useState } from "react"; @@ -24,6 +27,10 @@ const utilisationTone = (percent: number) => (percent >= 90 ? "over" : percent > export function ProjectDetail({ projectId, onBack }: ProjectDetailProps) { const { data: project, isLoading } = useProjectDetails(projectId); const { data: teamInfo } = useTeam(project?.team_id ?? undefined); + const { userId } = useAuthorized(); + const canEditProject = useCanManageProjects( + isUserTeamAdminForSingleTeam(teamInfo?.members_with_roles ?? null, userId ?? ""), + ); const [isEditModalVisible, setIsEditModalVisible] = useState(false); const spend = project?.spend ?? 0; @@ -87,10 +94,12 @@ export function ProjectDetail({ projectId, onBack }: ProjectDetailProps) {
- + {canEditProject && ( + + )} diff --git a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectModals/ProjectBaseForm.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectModals/ProjectBaseForm.test.tsx index 85201e2acd2..70530973c1d 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectModals/ProjectBaseForm.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectModals/ProjectBaseForm.test.tsx @@ -11,6 +11,11 @@ vi.mock("@/app/(dashboard)/hooks/teams/useTeams", () => ({ useTeams: () => mockUseTeams(), })); +const mockUseAuthorized = vi.fn(); +vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({ + default: () => mockUseAuthorized(), +})); + vi.mock("@/components/organisms/create_key_button", () => ({ fetchTeamModels: vi.fn().mockResolvedValue([]), })); @@ -32,6 +37,7 @@ function FormWrapper() { describe("ProjectBaseForm", () => { beforeEach(() => { mockUseTeams.mockReturnValue({ data: [], isLoading: false }); + mockUseAuthorized.mockReturnValue({ accessToken: "token", userId: "admin-user", userRole: "Admin" }); }); it("should render", () => { @@ -83,6 +89,32 @@ describe("ProjectBaseForm", () => { expect(screen.getByText("Sales")).toBeInTheDocument(); }); + it("should offer a team admin only the teams they administer", async () => { + const user = userEvent.setup(); + mockUseAuthorized.mockReturnValue({ accessToken: "token", userId: "team-admin", userRole: "Internal User" }); + mockUseTeams.mockReturnValue({ + data: [ + { + team_id: "team-1", + team_alias: "Engineering", + models: [], + members_with_roles: [{ user_id: "team-admin", role: "admin" }], + }, + { + team_id: "team-2", + team_alias: "Sales", + models: [], + members_with_roles: [{ user_id: "team-admin", role: "user" }], + }, + ], + isLoading: false, + }); + renderWithProviders(); + await user.click(screen.getByLabelText("Team")); + expect(await screen.findByText("Engineering")).toBeInTheDocument(); + expect(screen.queryByText("Sales")).not.toBeInTheDocument(); + }); + it("should show the Max Budget field", () => { renderWithProviders(); expect(screen.getByPlaceholderText("0.00")).toBeInTheDocument(); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectModals/ProjectBaseForm.tsx b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectModals/ProjectBaseForm.tsx index b5603ba184c..c5d30e8490e 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectModals/ProjectBaseForm.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectModals/ProjectBaseForm.tsx @@ -24,6 +24,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@ import { Separator } from "@/components/ui/separator"; import { Switch } from "@/components/ui/switch"; import { Textarea } from "@/components/ui/textarea"; +import { teamsUserCanAssign } from "@/utils/roles"; const toOptionalNumber = (raw: string): number | undefined => { if (raw.trim() === "") return undefined; @@ -100,7 +101,7 @@ export function ProjectBaseForm({ form, advancedOpen, onAdvancedOpenChange }: Pr form.setValue("models", []); }; - const teamOptions = (teams ?? []).map((team) => ({ + const teamOptions = (teamsUserCanAssign(teams ?? null, userRole, userId) ?? []).map((team) => ({ value: team.team_id, label: team.team_alias || team.team_id, sublabel: team.team_id, diff --git a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectsPage.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectsPage.test.tsx index 309da01b295..f23589d1993 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectsPage.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectsPage.test.tsx @@ -15,6 +15,16 @@ vi.mock("@/app/(dashboard)/hooks/teams/useTeams", () => ({ useTeams: () => mockUseTeams(), })); +const mockUseAuthorized = vi.fn(); +vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({ + default: () => mockUseAuthorized(), +})); + +const mockUseUISettings = vi.fn(); +vi.mock("@/app/(dashboard)/hooks/uiSettings/useUISettings", () => ({ + useUISettings: () => mockUseUISettings(), +})); + // Stub modals and the detail page to keep tests focused on the list page vi.mock("./ProjectModals/CreateProjectModal", () => ({ CreateProjectModal: ({ isOpen }: { isOpen: boolean }) => (isOpen ?
: null), @@ -76,6 +86,8 @@ describe("ProjectsPage", () => { beforeEach(() => { vi.clearAllMocks(); mockUseTeams.mockReturnValue({ data: [], isLoading: false }); + mockUseAuthorized.mockReturnValue({ userId: "admin-user", userRole: "Admin", isViewOnly: false }); + mockUseUISettings.mockReturnValue({ data: { values: {} } }); }); it("should render the Projects heading", () => { @@ -92,6 +104,41 @@ describe("ProjectsPage", () => { expect(screen.getByRole("button", { name: /create project/i })).toBeInTheDocument(); }); + it.each([ + { who: "a proxy admin without the setting", role: "Admin", isViewOnly: false, fields: [], visible: true }, + { who: "a proxy admin viewer", role: "Admin", isViewOnly: true, fields: ["projects"], visible: false }, + { who: "a team admin without the setting", role: "Internal User", isViewOnly: false, fields: [], visible: false }, + { + who: "a team admin when the setting grants projects", + role: "Internal User", + isViewOnly: false, + fields: ["projects"], + visible: true, + }, + ])("should gate 'Create Project' for $who", ({ role, isViewOnly, fields, visible }) => { + mockUseAuthorized.mockReturnValue({ userId: "team-admin", userRole: role, isViewOnly }); + mockUseUISettings.mockReturnValue({ data: { values: { team_admin_editable_team_fields: fields } } }); + mockUseTeams.mockReturnValue({ + data: [{ team_id: "team-1", members_with_roles: [{ user_id: "team-admin", role: "admin" }] }], + isLoading: false, + }); + mockUseProjects.mockReturnValue({ data: [], isLoading: false }); + renderWithProviders(); + expect(screen.queryByRole("button", { name: /create project/i }) !== null).toBe(visible); + }); + + it("should hide 'Create Project' from a team member who administers no team even when the setting grants projects", () => { + mockUseAuthorized.mockReturnValue({ userId: "member", userRole: "Internal User", isViewOnly: false }); + mockUseUISettings.mockReturnValue({ data: { values: { team_admin_editable_team_fields: ["projects"] } } }); + mockUseTeams.mockReturnValue({ + data: [{ team_id: "team-1", members_with_roles: [{ user_id: "member", role: "user" }] }], + isLoading: false, + }); + mockUseProjects.mockReturnValue({ data: [], isLoading: false }); + renderWithProviders(); + expect(screen.queryByRole("button", { name: /create project/i })).not.toBeInTheDocument(); + }); + it("should render the projects table", () => { mockUseProjects.mockReturnValue({ data: mockProjects, isLoading: false }); renderWithProviders(); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectsPage.tsx b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectsPage.tsx index 2d3c1acf75e..206d10f4ca2 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectsPage.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/projects/_components/ProjectsPage.tsx @@ -1,5 +1,8 @@ +import { useCanManageProjects } from "@/app/(dashboard)/hooks/projects/projectAccess"; import { useProjects } from "@/app/(dashboard)/hooks/projects/useProjects"; import { useTeams } from "@/app/(dashboard)/hooks/teams/useTeams"; +import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; +import { isUserTeamAdminForAnyTeam } from "@/utils/roles"; import { Folder, Plus, SearchIcon, X } from "lucide-react"; import { parseAsString, useQueryState } from "nuqs"; import { useMemo, useState } from "react"; @@ -14,6 +17,8 @@ import { useClearProjectKeysTableState, useProjectsTableState } from "./useProje export function ProjectsPage() { const { data: projects, isLoading } = useProjects(); const { data: teams, isLoading: isTeamsLoading } = useTeams(); + const { userId } = useAuthorized(); + const canCreateProject = useCanManageProjects(isUserTeamAdminForAnyTeam(teams ?? null, userId ?? "")); const [selectedProjectId, setSelectedProjectId] = useQueryState( "project", @@ -62,10 +67,12 @@ export function ProjectsPage() { title="Projects" subtitle="Manage projects within your teams" primaryAction={ - + canCreateProject && ( + + ) } /> diff --git a/ui/litellm-dashboard/src/components/leftnav.test.tsx b/ui/litellm-dashboard/src/components/leftnav.test.tsx index 85bf4f05dfc..cdb74c73a80 100644 --- a/ui/litellm-dashboard/src/components/leftnav.test.tsx +++ b/ui/litellm-dashboard/src/components/leftnav.test.tsx @@ -625,7 +625,10 @@ describe("Sidebar (leftnav)", () => { expect(screen.queryByRole("link", { name: /Projects/ })).not.toBeInTheDocument(); }); - it("applies the internal-user page allowlist to Projects for team admins", () => { + it.each([ + { allowlist: ["teams"], visible: false }, + { allowlist: ["teams", "projects"], visible: true }, + ])("applies the internal-user page allowlist $allowlist to Projects for team admins", ({ allowlist, visible }) => { mockUseAuthorized.mockReturnValue(teamAdminAuthorization); mockUseTeams.mockReturnValue({ data: [ @@ -637,9 +640,17 @@ describe("Sidebar (leftnav)", () => { error: null, }); - renderWithProviders(); + renderWithProviders(); - expect(screen.queryByRole("link", { name: /Projects/ })).not.toBeInTheDocument(); + expect(screen.queryByRole("link", { name: /Projects/ }) !== null).toBe(visible); + }); + + it("shows Projects to a user whose global role is org admin", () => { + mockUseAuthorized.mockReturnValue({ ...teamMemberAuthorization, userRole: "Org Admin" }); + + renderWithProviders(); + + expect(screen.getByRole("link", { name: /Projects/ })).toHaveAttribute("href", "/ui/projects"); }); it("marks the nav item for the current route active", () => { diff --git a/ui/litellm-dashboard/src/components/leftnav.tsx b/ui/litellm-dashboard/src/components/leftnav.tsx index 0a25300a376..ee6dd850072 100644 --- a/ui/litellm-dashboard/src/components/leftnav.tsx +++ b/ui/litellm-dashboard/src/components/leftnav.tsx @@ -1,3 +1,4 @@ +import { canViewProjectsPage, projectReaderRoles } from "@/app/(dashboard)/hooks/projects/projectAccess"; import { useTeams } from "@/app/(dashboard)/hooks/teams/useTeams"; import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized"; import useIsOrgAdmin from "@/app/(dashboard)/hooks/useIsOrgAdmin"; @@ -275,7 +276,7 @@ const menuGroups: MenuGroup[] = [ ), icon: , - roles: all_admin_roles, + roles: [...projectReaderRoles], }, { key: "users", page: "users", label: "Internal Users", icon: , roles: all_admin_roles }, { @@ -439,7 +440,7 @@ const prettify = (key: string): string => .map((w) => w.charAt(0).toUpperCase() + w.slice(1)) .join(" "); -const labelText = (item: MenuItem): string => (typeof item.label === "string" ? item.label : prettify(item.key)); +export const labelText = (item: MenuItem): string => (typeof item.label === "string" ? item.label : prettify(item.key)); // Breadcrumb ("Section" / "Page") for the top bar, derived from the same nav config. export const getBreadcrumb = (pathname: string): { section: string | null; title: string } => { @@ -512,13 +513,11 @@ const Sidebar_: React.FC = ({ if (!isAdmin && enabledPagesInternalUsers != null) return enabledPagesInternalUsers.includes(item.page); return true; } - if (item.key === "projects") { - if (!enableProjectsUI) return false; - const hasRoleAccess = isAdmin || isOrgAdmin || isTeamAdmin; - if (!hasRoleAccess) return false; - if (!isAdmin && enabledPagesInternalUsers != null) return enabledPagesInternalUsers.includes(item.page); - return true; - } + if ( + item.key === "projects" && + !(enableProjectsUI && canViewProjectsPage({ userRole, isOrgAdmin, isTeamAdmin })) + ) + return false; if ( !isAdmin && item.key === "agents" && diff --git a/ui/litellm-dashboard/src/components/page_utils.test.ts b/ui/litellm-dashboard/src/components/page_utils.test.ts index a38c56d8681..6f55326a5be 100644 --- a/ui/litellm-dashboard/src/components/page_utils.test.ts +++ b/ui/litellm-dashboard/src/components/page_utils.test.ts @@ -195,6 +195,13 @@ describe("Page Utils - LeftNav Sync", () => { expect(pageKeys.length, "All page keys should be unique (no duplicates)").toBe(uniquePageKeys.size); }); + it("offers Projects in the internal-user page picker so team admins can be granted it", () => { + expect(getAvailablePages().find((page) => page.page === "projects")).toMatchObject({ + label: "Projects", + group: "ACCESS CONTROL", + }); + }); + it("should match the structure expected by PageVisibilitySettings component", () => { const availablePages = getAvailablePages(); diff --git a/ui/litellm-dashboard/src/components/page_utils.ts b/ui/litellm-dashboard/src/components/page_utils.ts index c682b2db089..2339ffc4006 100644 --- a/ui/litellm-dashboard/src/components/page_utils.ts +++ b/ui/litellm-dashboard/src/components/page_utils.ts @@ -2,7 +2,7 @@ * Utility functions for working with navigation pages */ -import { menuGroups } from "./leftnav"; +import { labelText, menuGroups } from "./leftnav"; import { pageDescriptions, PageMetadata } from "./page_metadata"; import { internalUserRoles } from "@/utils/roles"; @@ -43,10 +43,9 @@ export const getAvailablePages = (): PageMetadata[] => { item.page !== "settings" && isPageAccessibleToInternalUsers(item.roles) ) { - const label = typeof item.label === "string" ? item.label : item.key; pages.push({ page: item.page, - label: label, + label: labelText(item), group: group.groupLabel, description: pageDescriptions[item.page] || "No description available", }); @@ -54,14 +53,13 @@ export const getAvailablePages = (): PageMetadata[] => { // Add children items (also skip those internal users cannot access) if (item.children) { - const parentLabel = typeof item.label === "string" ? item.label : item.key; + const parentLabel = labelText(item); item.children.forEach((child) => { // Include if internal users can access if (isPageAccessibleToInternalUsers(child.roles)) { - const childLabel = typeof child.label === "string" ? child.label : child.key; pages.push({ page: child.page, - label: childLabel, + label: labelText(child), group: `${group.groupLabel} > ${parentLabel}`, description: pageDescriptions[child.page] || "No description available", });