diff --git a/ui/litellm-dashboard/src/components/leftnav.test.tsx b/ui/litellm-dashboard/src/components/leftnav.test.tsx index 5fa6e9728cf..5f02a8468a4 100644 --- a/ui/litellm-dashboard/src/components/leftnav.test.tsx +++ b/ui/litellm-dashboard/src/components/leftnav.test.tsx @@ -13,7 +13,7 @@ vi.mock("../utils/roles", async (importOriginal) => { rolesWithWriteAccess: ["admin", "internal"], rolesAllowedToViewWriteScopedPages: ["admin", "internal", "admin_viewer"], isAdminRole: (role: string) => role === "admin" || role === "admin_viewer", - isUserTeamAdminForAnyTeam: () => false, + isUserTeamAdminForAnyTeam: actual.isUserTeamAdminForAnyTeam, }; }); @@ -24,7 +24,7 @@ vi.mock("next/navigation", () => ({ useRouter: () => ({ push: vi.fn() }), })); -const { mockUseAuthorized, mockUseOrganizations } = vi.hoisted(() => { +const { mockUseAuthorized, mockUseOrganizations, mockUseTeams } = vi.hoisted(() => { const mockUseAuthorized = vi.fn(() => ({ userId: "test-user-id", accessToken: "test-access-token", @@ -43,7 +43,13 @@ const { mockUseAuthorized, mockUseOrganizations } = vi.hoisted(() => { error: null, })); - return { mockUseAuthorized, mockUseOrganizations }; + const mockUseTeams = vi.fn(() => ({ + data: [] as Array<{ members_with_roles: Array<{ user_id: string; role: string }> }>, + isLoading: false, + error: null, + })); + + return { mockUseAuthorized, mockUseOrganizations, mockUseTeams }; }); vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({ @@ -55,7 +61,7 @@ vi.mock("@/app/(dashboard)/hooks/organizations/useOrganizations", () => ({ })); vi.mock("@/app/(dashboard)/hooks/teams/useTeams", () => ({ - useTeams: () => ({ data: [], isLoading: false, error: null }), + useTeams: mockUseTeams, })); vi.mock("@/app/(dashboard)/hooks/uiConfig/useUIConfig", () => { @@ -103,6 +109,30 @@ const placementsOf = (page: string): string[] => ), ]); +const teamAdminAuthorization = { + userId: "team-admin-user-id", + accessToken: "test-access-token", + userRole: "internal", + isViewOnly: false, + token: "test-token", + userEmail: "teamadmin@example.com", + premiumUser: false, + disabledPersonalKeyCreation: false, + showSSOBanner: false, +}; + +const teamMemberAuthorization = { + userId: "team-member-user-id", + accessToken: "test-access-token", + userRole: "internal", + isViewOnly: false, + token: "test-token", + userEmail: "teamuser@example.com", + premiumUser: false, + disabledPersonalKeyCreation: false, + showSSOBanner: false, +}; + describe("Sidebar (leftnav)", () => { const defaultProps = { collapsed: false, @@ -111,6 +141,12 @@ describe("Sidebar (leftnav)", () => { afterEach(() => { mockUseAuthorized.mockReset(); mockUseOrganizations.mockReset(); + mockUseTeams.mockReset(); + mockUseTeams.mockReturnValue({ + data: [], + isLoading: false, + error: null, + }); mockUseThemeImpl = unbrandedTheme; navState.pathname = "/ui/api-keys"; }); @@ -515,6 +551,65 @@ describe("Sidebar (leftnav)", () => { expect(screen.getByText("Organizations")).toBeInTheDocument(); }); + it("shows Projects to an internal user who administers a team", () => { + mockUseAuthorized.mockReturnValue(teamAdminAuthorization); + mockUseTeams.mockReturnValue({ + data: [ + { + members_with_roles: [{ user_id: "team-admin-user-id", role: "admin" }], + }, + ], + isLoading: false, + error: null, + }); + + renderWithProviders(); + + expect(screen.getByRole("link", { name: /Projects/ })).toBeInTheDocument(); + }); + + it("hides Projects when the feature flag is disabled for a team admin", () => { + mockUseAuthorized.mockReturnValue(teamAdminAuthorization); + mockUseTeams.mockReturnValue({ + data: [ + { + members_with_roles: [{ user_id: "team-admin-user-id", role: "admin" }], + }, + ], + isLoading: false, + error: null, + }); + + renderWithProviders(); + + expect(screen.queryByRole("link", { name: /Projects/ })).not.toBeInTheDocument(); + }); + + it("hides Projects from an internal user who is not a team admin", () => { + mockUseAuthorized.mockReturnValue(teamMemberAuthorization); + + renderWithProviders(); + + expect(screen.queryByRole("link", { name: /Projects/ })).not.toBeInTheDocument(); + }); + + it("applies the internal-user page allowlist to Projects for team admins", () => { + mockUseAuthorized.mockReturnValue(teamAdminAuthorization); + mockUseTeams.mockReturnValue({ + data: [ + { + members_with_roles: [{ user_id: "team-admin-user-id", role: "admin" }], + }, + ], + isLoading: false, + error: null, + }); + + renderWithProviders(); + + expect(screen.queryByRole("link", { name: /Projects/ })).not.toBeInTheDocument(); + }); + it("marks the nav item for the current route active", () => { navState.pathname = "/ui/logs"; renderWithProviders(); diff --git a/ui/litellm-dashboard/src/components/leftnav.tsx b/ui/litellm-dashboard/src/components/leftnav.tsx index 9d772f45153..e0b43c9aad9 100644 --- a/ui/litellm-dashboard/src/components/leftnav.tsx +++ b/ui/litellm-dashboard/src/components/leftnav.tsx @@ -475,7 +475,13 @@ const Sidebar_: React.FC = ({ if (!isAdmin && enabledPagesInternalUsers != null) return enabledPagesInternalUsers.includes(item.page); return true; } - if (item.key === "projects" && !enableProjectsUI) return false; + 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 ( !isAdmin && item.key === "agents" &&