feat(ui): cut the users page over to the /ui/users path route (#30334)

ViewUserDashboard renders from app/(dashboard)/users/page.tsx via useAuthorized
and useTeams instead of the legacy ?page=users switch arm. The keys and setKeys
props were declared but never destructured by the component, so they are removed
from the interface rather than wired into the wrapper.

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

@@ -39,6 +39,7 @@ export const MIGRATED_E2E_PAGES: Record<string, string> = {
   new_usage: "usage",
   agents: "agents",
   "router-settings": "router-settings",
+  users: "users",
 };
 
 export const MIGRATED_E2E_SEGMENTS: string[] = [...new Set(Object.values(MIGRATED_E2E_PAGES))];

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

@@ -13,7 +13,6 @@ import PassThroughSettings from "@/components/pass_through_settings";
 import { SurveyPrompt, SurveyModal, ClaudeCodePrompt, ClaudeCodeModal } from "@/components/survey";
 import Usage from "@/components/usage";
 import UserDashboard from "@/components/user_dashboard";
-import ViewUserDashboard from "@/components/view_users";
 import { useAuth } from "@/contexts/AuthContext";
 import {
   buildLoginUrlWithReturn,
@@ -323,16 +322,6 @@ function CreateKeyPageContent() {
               premiumUser={premiumUser}
               teams={teams}
             />
-          ) : page == "users" ? (
-            <ViewUserDashboard
-              userID={userID}
-              userRole={userRole}
-              token={token}
-              keys={keys}
-              teams={teams}
-              accessToken={accessToken}
-              setKeys={setKeys}
-            />
           ) : page == "teams" ? (
             <OldTeams
               teams={teams}

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

@@ -0,0 +1,19 @@
+"use client";
+
+import ViewUserDashboard from "@/components/view_users";
+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+import { useTeams } from "@/app/(dashboard)/hooks/teams/useTeams";
+
+export default function UsersPage() {
+  const { accessToken, token, userRole, userId } = useAuthorized();
+  const { data: teams } = useTeams();
+  return (
+    <ViewUserDashboard
+      userID={userId}
+      userRole={userRole}
+      token={token}
+      teams={teams ?? null}
+      accessToken={accessToken}
+    />
+  );
+}

ui/litellm-dashboard/src/components/view_users.test.tsx

@@ -66,11 +66,9 @@ describe("ViewUserDashboard", () => {
   const defaultProps = {
     accessToken: "test-token",
     token: "test-token",
-    keys: null,
     userRole: "Admin",
     userID: "admin-user-id",
     teams: [],
-    setKeys: vi.fn(),
   };
 
   beforeEach(() => {

ui/litellm-dashboard/src/components/view_users.tsx

@@ -34,11 +34,9 @@ const { Text, Title } = Typography;
 interface ViewUserDashboardProps {
   accessToken: string | null;
   token: string | null;
-  keys: any[] | null;
   userRole: string | null;
   userID: string | null;
   teams: any[] | null;
-  setKeys: React.Dispatch<React.SetStateAction<object[] | null>>;
   orgAdminOrgIds?: Array<{ organization_id: string; organization_alias: string }> | null;
 }
 

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

@@ -119,6 +119,13 @@ describe("migratedHref / legacyPageHref", () => {
     expect(MIGRATED_PAGES.agents).toBe("agents");
     expect(MIGRATED_PAGES["router-settings"]).toBe("router-settings");
   });
+
+  it("maps the users id to its route", async () => {
+    vi.doMock("@/components/networking", () => ({ serverRootPath: "/" }));
+    const { MIGRATED_PAGES } = await import("./migratedPages");
+
+    expect(MIGRATED_PAGES.users).toBe("users");
+  });
 });
 
 describe("dev server (NODE_ENV=development)", () => {

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

@@ -42,6 +42,7 @@ export const MIGRATED_PAGES: Record<string, string> = {
   new_usage: "usage",
   agents: "agents",
   "router-settings": "router-settings",
+  users: "users",
 };
 
 function uiBase(): string {