feat(ui): migrate projects and access-groups to path routes

ui/litellm-dashboard/e2e_tests/fixtures/migratedPages.ts

@@ -11,13 +11,15 @@
  * Keep this in lockstep with MIGRATED_PAGES in src/utils/migratedPages.ts.
  * Pending (add as each PR lands): the leaf-pages batch
  * (budgets, caching, cost-tracking, guardrails, guardrails-monitor, logs,
- * mcp-servers, memory, policies, projects, prompts, search-tools, skills,
+ * mcp-servers, memory, policies, prompts, search-tools, skills,
  * tag-management, tool-policies, transform-request, ui-theme, vector-stores,
- * workflows, access-groups).
+ * workflows).
  */
 export const MIGRATED_E2E_PAGES: Record<string, string> = {
   api_ref: "api-reference",
   "llm-playground": "playground",
+  projects: "projects",
+  "access-groups": "access-groups",
 };
 
 export const MIGRATED_E2E_SEGMENTS: string[] = [...new Set(Object.values(MIGRATED_E2E_PAGES))];

ui/litellm-dashboard/e2e_tests/globalSetup.ts

@@ -1,11 +1,26 @@
-import { chromium, expect } from "@playwright/test";
+import { chromium, expect, request } from "@playwright/test";
 import { users, Role, STORAGE_PATHS } from "./fixtures/users";
 import * as fs from "fs";
 
 async function globalSetup() {
   const browser = await chromium.launch();
   const rootPath = process.env.SERVER_ROOT_PATH ?? "";
 
+  // The Projects sidebar item is hidden unless the enterprise-gated
+  // enable_projects_ui setting is on, and the seeded DB starts with it off.
+  // The proxy runs with LITELLM_LICENSE in CI, so enable it the same way
+  // the admin UI toggle does; the projects migration smoke needs the link.
+  const masterKey = process.env.LITELLM_MASTER_KEY || "sk-1234";
+  const api = await request.newContext();
+  const settingsRes = await api.patch(`http://localhost:4000${rootPath}/update/ui_settings`, {
+    headers: { Authorization: `Bearer ${masterKey}` },
+    data: { enable_projects_ui: true },
+  });
+  if (!settingsRes.ok()) {
+    throw new Error(`Enabling enable_projects_ui failed (${settingsRes.status()}): ${await settingsRes.text()}`);
+  }
+  await api.dispose();
+
   for (const role of Object.values(Role)) {
     const { email, password } = users[role];
     const storagePath = STORAGE_PATHS[role];

ui/litellm-dashboard/eslint-suppressions.json

@@ -472,22 +472,22 @@
       "count": 4
     }
   },
-  "src/components/Projects/ProjectDetailsPage.tsx": {
+  "src/app/(dashboard)/projects/components/ProjectDetailsPage.tsx": {
     "no-restricted-imports": {
       "count": 1
     }
   },
-  "src/components/Projects/ProjectKeysSection.tsx": {
+  "src/app/(dashboard)/projects/components/ProjectKeysSection.tsx": {
     "react-hooks/set-state-in-effect": {
       "count": 1
     }
   },
-  "src/components/Projects/ProjectModals/ProjectBaseForm.tsx": {
+  "src/app/(dashboard)/projects/components/ProjectModals/ProjectBaseForm.tsx": {
     "react-hooks/set-state-in-effect": {
       "count": 2
     }
   },
-  "src/components/Projects/ProjectsPage.tsx": {
+  "src/app/(dashboard)/projects/components/ProjectsPage.tsx": {
     "react-hooks/set-state-in-effect": {
       "count": 1
     }

ui/litellm-dashboard/src/components/AccessGroups/AccessGroupsDetailsPage.test.tsx → ui/litellm-dashboard/src/app/(dashboard)/access-groups/components/AccessGroupsDetailsPage.test.tsx

@@ -3,7 +3,7 @@ import { AccessGroupResponse } from "@/app/(dashboard)/hooks/accessGroups/useAcc
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { renderWithProviders } from "../../../tests/test-utils";
+import { renderWithProviders } from "../../../../../tests/test-utils";
 import { AccessGroupDetail } from "./AccessGroupsDetailsPage";
 
 vi.mock("@/app/(dashboard)/hooks/accessGroups/useAccessGroupDetails");

ui/litellm-dashboard/src/components/AccessGroups/AccessGroupsDetailsPage.tsx → ui/litellm-dashboard/src/app/(dashboard)/access-groups/components/AccessGroupsDetailsPage.tsx

@@ -17,7 +17,7 @@
 } from "antd";
 import { ArrowLeftIcon, BotIcon, EditIcon, KeyIcon, LayersIcon, ServerIcon, UsersIcon } from "lucide-react";
 import { useState } from "react";
-import DefaultProxyAdminTag from "../common_components/DefaultProxyAdminTag";
+import DefaultProxyAdminTag from "@/components/common_components/DefaultProxyAdminTag";
 import { AccessGroupEditModal } from "./AccessGroupsModal/AccessGroupEditModal";
 
 const { Title, Text } = Typography;
@@ -28,7 +28,7 @@
   onBack: () => void;
 }
 
 export function AccessGroupDetail({ accessGroupId, onBack }: AccessGroupDetailProps) {
   const { data: accessGroup, isLoading } = useAccessGroupDetails(accessGroupId);
   const { token } = theme.useToken();
   const [isEditModalVisible, setIsEditModalVisible] = useState(false);

ui/litellm-dashboard/src/components/AccessGroups/AccessGroupsPage.test.tsx → ui/litellm-dashboard/src/app/(dashboard)/access-groups/components/AccessGroupsPage.test.tsx

@@ -65,7 +65,7 @@ vi.mock("./AccessGroupsModal/AccessGroupCreateModal", () => ({
     ) : null,
 }));
 
-vi.mock("../common_components/IconActionButton/TableIconActionButtons/TableIconActionButton", () => ({
+vi.mock("@/components/common_components/IconActionButton/TableIconActionButtons/TableIconActionButton", () => ({
   default: ({ variant, tooltipText, onClick }: { variant: string; tooltipText: string; onClick: () => void }) => (
     <button data-testid={`action-button-${variant.toLowerCase()}`} aria-label={tooltipText} onClick={onClick}>
       {variant}

ui/litellm-dashboard/src/components/AccessGroups/AccessGroupsPage.tsx → ui/litellm-dashboard/src/app/(dashboard)/access-groups/components/AccessGroupsPage.tsx

@@ -13,12 +13,12 @@ import {
 import { Button, Card, Flex, Input, Layout, Pagination, Space, Table, Tag, theme, Tooltip, Typography } from "antd";
 import { BotIcon, LayersIcon, SearchIcon, ServerIcon } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
-import DeleteResourceModal from "../common_components/DeleteResourceModal";
-import TableIconActionButton from "../common_components/IconActionButton/TableIconActionButtons/TableIconActionButton";
+import DeleteResourceModal from "@/components/common_components/DeleteResourceModal";
+import TableIconActionButton from "@/components/common_components/IconActionButton/TableIconActionButtons/TableIconActionButton";
 import {
   SortState,
   TableHeaderSortDropdown,
-} from "../common_components/TableHeaderSortDropdown/TableHeaderSortDropdown";
+} from "@/components/common_components/TableHeaderSortDropdown/TableHeaderSortDropdown";
 import { AccessGroupDetail } from "./AccessGroupsDetailsPage";
 import { AccessGroupCreateModal } from "./AccessGroupsModal/AccessGroupCreateModal";
 import { AccessGroup } from "./types";

ui/litellm-dashboard/src/app/(dashboard)/access-groups/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { AccessGroupsPage } from "./components/AccessGroupsPage";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+
+export default function AccessGroups() {
+  useAuthorized();
+  return <AccessGroupsPage />;
+}

ui/litellm-dashboard/src/app/(dashboard)/page.tsx

@@ -34,8 +34,6 @@
 import UIThemeSettings from "@/components/ui_theme_settings";
 import Usage from "@/components/usage";
 import UserDashboard from "@/components/user_dashboard";
-import { AccessGroupsPage } from "@/components/AccessGroups/AccessGroupsPage";
-import { ProjectsPage } from "@/components/Projects/ProjectsPage";
 import VectorStoreManagement from "@/components/vector_store_management";
 import ToolPoliciesView from "@/components/ToolPoliciesView";
 import { MemoryView } from "@/components/MemoryView";
@@ -55,19 +53,19 @@
 import { useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useEffect, useMemo, useRef, useState } from "react";
 
 function CreateKeyPageContent() {
   const { authLoading, token, userID, userRole, userEmail, accessToken, premiumUser, setUserRole, setUserEmail } =
     useAuth();
 
   const [teams, setTeams] = useState<Team[] | null>(null);
   const [keys, setKeys] = useState<null | any[]>([]);
   const [organizations, setOrganizations] = useState<Organization[]>([]);
   const [userModels, setUserModels] = useState<string[]>([]);
   const proxySettings = useProxySettings(accessToken);
 
   const router = useRouter();
   const searchParams = useSearchParams()!;
   const [modelData, setModelData] = useState<any>({ data: [] });
   const [createClicked, setCreateClicked] = useState<boolean>(false);
 
   const { data: uiSettingsData, isLoading: uiSettingsLoading } = useUISettings();
@@ -139,7 +137,7 @@
   // Track if we've already attempted a return URL redirect to prevent race conditions
   const hasAttemptedReturnRedirectRef = useRef(false);
 
   const addKey = (data: any) => {
     setKeys((prevData) => (prevData ? [...prevData, data] : [data]));
     setCreateClicked(() => !createClicked);
   };
@@ -448,10 +446,6 @@
             <TagManagement accessToken={accessToken} userRole={userRole} userID={userID} />
           ) : page == "skills" || page == "claude-code-plugins" ? (
             <ClaudeCodePluginsPanel accessToken={accessToken} userRole={userRole} />
-          ) : page == "access-groups" ? (
-            <AccessGroupsPage />
-          ) : page == "projects" ? (
-            <ProjectsPage />
           ) : page == "vector-stores" ? (
             <VectorStoreManagement accessToken={accessToken} userRole={userRole} userID={userID} />
           ) : page == "tool-policies" ? (

ui/litellm-dashboard/src/components/Projects/ProjectDetailsPage.test.tsx → ui/litellm-dashboard/src/app/(dashboard)/projects/components/ProjectDetailsPage.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import userEvent from "@testing-library/user-event";
-import { renderWithProviders, screen } from "../../../tests/test-utils";
+import { renderWithProviders, screen } from "../../../../../tests/test-utils";
 import { ProjectDetail } from "./ProjectDetailsPage";
 import { ProjectResponse } from "@/app/(dashboard)/hooks/projects/useProjects";
 

ui/litellm-dashboard/src/components/Projects/ProjectDetailsPage.tsx → ui/litellm-dashboard/src/app/(dashboard)/projects/components/ProjectDetailsPage.tsx

@@ -19,7 +19,7 @@
 import { BarChart } from "@tremor/react";
 import { ArrowLeftIcon, DollarSignIcon, EditIcon, KeyIcon, UsersIcon } from "lucide-react";
 import { useMemo, useState } from "react";
-import DefaultProxyAdminTag from "../common_components/DefaultProxyAdminTag";
+import DefaultProxyAdminTag from "@/components/common_components/DefaultProxyAdminTag";
 import { EditProjectModal } from "./ProjectModals/EditProjectModal";
 
 const { Title, Text } = Typography;
@@ -40,7 +40,7 @@
   onBack: () => void;
 }
 
 export function ProjectDetail({ projectId, onBack }: ProjectDetailProps) {
   const { data: project, isLoading } = useProjectDetails(projectId);
   const { data: teamData } = useTeam(project?.team_id ?? undefined);
   // teamInfoCall returns { team_id, team_info: {...}, keys, team_memberships }

ui/litellm-dashboard/src/components/Projects/ProjectKeysSection.test.tsx → ui/litellm-dashboard/src/app/(dashboard)/projects/components/ProjectKeysSection.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from "vitest";
-import { renderWithProviders, screen } from "../../../tests/test-utils";
+import { renderWithProviders, screen } from "../../../../../tests/test-utils";
 import { ProjectKeysSection } from "./ProjectKeysSection";
 
 const mockUseKeys = vi.fn();

ui/litellm-dashboard/src/components/Projects/ProjectKeysTable.test.tsx → ui/litellm-dashboard/src/app/(dashboard)/projects/components/ProjectKeysTable.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from "vitest";
-import { renderWithProviders, screen } from "../../../tests/test-utils";
+import { renderWithProviders, screen } from "../../../../../tests/test-utils";
 import { ProjectKeysTable } from "./ProjectKeysTable";
 import { KeyResponse } from "@/components/key_team_helpers/key_list";
 
@@ -19,7 +19,7 @@
     models: [],
     aliases: {},
     config: {},
     user_id: null as any,
     team_id: null,
     project_id: null,
     max_parallel_requests: 0,
@@ -86,7 +86,7 @@
 
   it("should display '—' when the key alias is null", () => {
     // Provide a user_id so only the alias column shows "—" (not the owner column too)
     renderWithProviders(<ProjectKeysTable keys={[makeKey({ key_alias: null as any, user_id: "owner-1" })]} />);
     expect(screen.getByText("—")).toBeInTheDocument();
   });
 

ui/litellm-dashboard/src/components/Projects/ProjectKeysTable.tsx → ui/litellm-dashboard/src/app/(dashboard)/projects/components/ProjectKeysTable.tsx

@@ -2,7 +2,7 @@ import { KeyResponse } from "@/components/key_team_helpers/key_list";
 import { Empty, Table, Tooltip } from "antd";
 import type { ColumnsType } from "antd/es/table";
 import type { SpinProps } from "antd";
-import DefaultProxyAdminTag from "../common_components/DefaultProxyAdminTag";
+import DefaultProxyAdminTag from "@/components/common_components/DefaultProxyAdminTag";
 
 interface ProjectKeysTableProps {
   keys: KeyResponse[];

ui/litellm-dashboard/src/components/Projects/ProjectModals/CreateProjectModal.test.tsx → ui/litellm-dashboard/src/app/(dashboard)/projects/components/ProjectModals/CreateProjectModal.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import userEvent from "@testing-library/user-event";
-import { renderWithProviders, screen } from "../../../../tests/test-utils";
+import { renderWithProviders, screen } from "../../../../../../tests/test-utils";
 import { CreateProjectModal } from "./CreateProjectModal";
 
 const mockMutate = vi.fn();

ui/litellm-dashboard/src/components/Projects/ProjectModals/EditProjectModal.test.tsx → ui/litellm-dashboard/src/app/(dashboard)/projects/components/ProjectModals/EditProjectModal.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import userEvent from "@testing-library/user-event";
-import { renderWithProviders, screen } from "../../../../tests/test-utils";
+import { renderWithProviders, screen } from "../../../../../../tests/test-utils";
 import { EditProjectModal } from "./EditProjectModal";
 import { ProjectResponse } from "@/app/(dashboard)/hooks/projects/useProjects";
 

ui/litellm-dashboard/src/components/Projects/ProjectModals/ProjectBaseForm.test.tsx → ui/litellm-dashboard/src/app/(dashboard)/projects/components/ProjectModals/ProjectBaseForm.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import userEvent from "@testing-library/user-event";
-import { renderWithProviders, screen, waitFor } from "../../../../tests/test-utils";
+import { renderWithProviders, screen, waitFor } from "../../../../../../tests/test-utils";
 import { Form } from "antd";
 import { ProjectBaseForm, ProjectFormValues } from "./ProjectBaseForm";
 

ui/litellm-dashboard/src/components/Projects/ProjectModals/ProjectBaseForm.tsx → ui/litellm-dashboard/src/app/(dashboard)/projects/components/ProjectModals/ProjectBaseForm.tsx

@@ -19,9 +19,9 @@ import type { FormInstance } from "antd";
 import { PlusOutlined, MinusCircleOutlined } from "@ant-design/icons";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import { useTeams } from "@/app/(dashboard)/hooks/teams/useTeams";
-import { Team } from "../../key_team_helpers/key_list";
-import { fetchTeamModels } from "../../organisms/create_key_button";
-import { getModelDisplayName } from "../../key_team_helpers/fetch_available_models_team_key";
+import { Team } from "@/components/key_team_helpers/key_list";
+import { fetchTeamModels } from "@/components/organisms/create_key_button";
+import { getModelDisplayName } from "@/components/key_team_helpers/fetch_available_models_team_key";
 import { getGuardrailsList } from "@/components/networking";
 
 export interface ProjectFormValues {

ui/litellm-dashboard/src/components/Projects/ProjectsPage.test.tsx → ui/litellm-dashboard/src/app/(dashboard)/projects/components/ProjectsPage.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import userEvent from "@testing-library/user-event";
-import { renderWithProviders, screen, waitFor } from "../../../tests/test-utils";
+import { renderWithProviders, screen, waitFor } from "../../../../../tests/test-utils";
 import { ProjectsPage } from "./ProjectsPage";
 import { ProjectResponse } from "@/app/(dashboard)/hooks/projects/useProjects";
 

ui/litellm-dashboard/src/app/(dashboard)/projects/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { ProjectsPage } from "./components/ProjectsPage";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+
+export default function Projects() {
+  useAuthorized();
+  return <ProjectsPage />;
+}

ui/litellm-dashboard/src/utils/migratedPages.test.ts

@@ -47,6 +47,14 @@ describe("migratedHref / legacyPageHref", () => {
 
     expect(MIGRATED_PAGES["llm-playground"]).toBe("playground");
   });
+
+  it("maps the projects and access-groups sidebar ids to their routes", async () => {
+    vi.doMock("@/components/networking", () => ({ serverRootPath: "/" }));
+    const { MIGRATED_PAGES } = await import("./migratedPages");
+
+    expect(MIGRATED_PAGES.projects).toBe("projects");
+    expect(MIGRATED_PAGES["access-groups"]).toBe("access-groups");
+  });
 });
 
 describe("dev server (NODE_ENV=development)", () => {

ui/litellm-dashboard/src/utils/migratedPages.ts

@@ -13,6 +13,8 @@ export const MIGRATED_PAGES: Record<string, string> = {
   // Legacy alias: older bookmarks used the hyphenated ?page=api-reference form.
   "api-reference": "api-reference",
   "llm-playground": "playground",
+  projects: "projects",
+  "access-groups": "access-groups",
 };
 
 function uiBase(): string {