fix(ui): show team projects to internal users on key creation

ui/litellm-dashboard/src/app/(dashboard)/hooks/projects/useProjects.test.ts

@@ -7,7 +7,7 @@
 vi.mock("@/components/networking", () => ({
   getProxyBaseUrl: vi.fn(() => ""),
   getGlobalLitellmHeaderName: vi.fn(() => "Authorization"),
   deriveErrorMessage: vi.fn((data: any) => data?.error || "Error"),
   handleError: vi.fn(),
 }));
 
@@ -77,29 +77,29 @@
   });
 
   it("should render", () => {
     (global.fetch as any).mockResolvedValue({ ok: true, json: async () => mockProjects });
     const { result } = renderHook(() => useProjects(), { wrapper: makeWrapper(queryClient) });
     expect(result.current).toBeDefined();
   });
 
   it("should return projects when the request succeeds", async () => {
     (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));
     expect(result.current.data).toEqual(mockProjects);
   });
 
   it("should call GET /project/list with the auth header", async () => {
     (global.fetch as any).mockResolvedValue({ ok: true, json: async () => mockProjects });
     renderHook(() => useProjects(), { wrapper: makeWrapper(queryClient) });
     await waitFor(() => expect(global.fetch).toHaveBeenCalled());
     const [url, init] = (global.fetch as any).mock.calls[0];
     expect(url).toContain("/project/list");
     expect(init.headers["Authorization"]).toBe("Bearer test-token");
   });
 
   it("should set isError when the request fails", async () => {
     (global.fetch as any).mockResolvedValue({
       ok: false,
       json: async () => ({ error: "Not authorized" }),
     });
@@ -115,8 +115,16 @@
     expect(global.fetch).not.toHaveBeenCalled();
   });
 
-  it("should not fetch when userRole is not an admin role", () => {
+  it("should fetch when userRole is an internal user role", async () => {
     mockUseAuthorized.mockReturnValue({ accessToken: "test-token", userRole: "Internal User" });
+    (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));
+    expect(global.fetch).toHaveBeenCalled();
+  });
+
+  it("should not fetch when userRole cannot read projects", () => {
+    mockUseAuthorized.mockReturnValue({ accessToken: "test-token", userRole: "regular_user" });
     const { result } = renderHook(() => useProjects(), { wrapper: makeWrapper(queryClient) });
     expect(result.current.isFetched).toBe(false);
     expect(global.fetch).not.toHaveBeenCalled();

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 } from "@/utils/roles";
+import { all_admin_roles, internalUserRoles } from "@/utils/roles";
 
 // ── Types ────────────────────────────────────────────────────────────────────
 
@@ -42,6 +42,8 @@ export interface ProjectResponse {
 
 export const projectKeys = createQueryKeys("projects");
 
+const projectReaderRoles = [...all_admin_roles, ...internalUserRoles];
+
 // ── Fetch function ───────────────────────────────────────────────────────────
 
 const fetchProjects = async (accessToken: string): Promise<ProjectResponse[]> => {
@@ -74,6 +76,6 @@ export const useProjects = () => {
   return useQuery<ProjectResponse[]>({
     queryKey: projectKeys.list({}),
     queryFn: async () => fetchProjects(accessToken!),
-    enabled: Boolean(accessToken) && all_admin_roles.includes(userRole!),
+    enabled: Boolean(accessToken) && projectReaderRoles.includes(userRole!),
   });
 };