feat(ui): migrate projects and access-groups to path routes by ryan-crabbe-berri · Pull Request #30226 · BerriAI/litellm

ryan-crabbe-berri · 2026-06-11T19:21:36Z

Summary

Cuts the Projects and Access Groups pages over from the legacy ?page= switch to App Router path routes at /ui/projects and /ui/access-groups, the next two pages in the (dashboard) migration plan after playground (#30185). Both legacy switch arms rendered zero-prop, self-fetching components, so the cutover is the minimal recipe: a thin route wrapper each, two MIGRATED_PAGES entries (sidebar links, deep links, and ?page= redirects all key off it), switch arms deleted, e2e fixture entries added.

A second commit colocates the component folders (src/components/{Projects,AccessGroups} -> (dashboard)/{projects,access-groups}/components) since the legacy switch was their only importer; all moves are git renames. Their React Query hooks (useProjects, useAccessGroups, useTeams) stay in the shared (dashboard)/hooks layer.

Test plan

src/utils/migratedPages.test.ts — new case mapping both sidebar ids to their routes
vitest on the moved suites + routing tests — 138 tests / 11 files pass from the new locations
prettier --check clean on all 31 touched files; eslint 0 errors (suppressions re-keyed for the move)
tsc --noEmit — no new errors (the one error in ProjectKeysTable.test.tsx pre-exists on the base branch at the old path)
e2e: navigation/sidebar.spec.ts and the migration smoke are fixture-driven since feat(ui): migrate playground to path routing and colocate its files #30185, so both pages are exercised by CI automatically

Refs LIT-3687

Same recipe as playground (#30185): MIGRATED_PAGES entries route the sidebar and redirect the legacy ?page= URLs, the switch arms are deleted, and the e2e fixture grows two entries. Both components were already zero-prop and self-fetching via React Query hooks, so the route wrappers are trivial.

…ute folders Both folders were imported only by the legacy switch, so they colocate wholesale under (dashboard)/{projects,access-groups}/components. Their React Query hooks stay in the shared (dashboard)/hooks layer. eslint suppressions are re-keyed to the new paths.

codecov · 2026-06-11T19:24:45Z

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

greptile-apps · 2026-06-11T19:25:01Z

Greptile Summary

Migrates the Projects and Access Groups dashboard pages from the legacy ?page= switch to Next.js App Router path routes at /ui/projects and /ui/access-groups, following the same pattern established by the playground migration. A second commit colocates the component folders from src/components/{Projects,AccessGroups} into the new route directories, updating relative imports to @/components/* aliases.

Two thin page.tsx route wrappers are added, MIGRATED_PAGES receives both new entries, and the matching legacy switch arms and imports are removed from (dashboard)/page.tsx.
All moved test files have their renderWithProviders import paths depth-adjusted, and the e2e fixture and ESLint suppressions are re-keyed to the new locations.
The access-groups/page.tsx wrapper calls useAuthorized() redundantly — AccessGroupsPage already calls it internally to obtain userRole; projects/page.tsx has no such duplication.

Confidence Score: 4/5

This PR is safe to merge; it is a mechanical file migration with no logic changes to business logic or auth flow.

The change is a straightforward page migration that follows an already-established pattern. The only notable issue is that access-groups/page.tsx calls useAuthorized() while the inner AccessGroupsPage component also calls it, producing a redundant hook instance. This is an inefficiency but won't cause incorrect behavior. Everything else — import re-aliasing, MIGRATED_PAGES registration, legacy switch removal, test path updates — looks correct and consistent.

ui/litellm-dashboard/src/app/(dashboard)/access-groups/page.tsx — double useAuthorized() call worth cleaning up before the pattern spreads to future migrations.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/app/(dashboard)/projects/page.tsx	New thin route wrapper for the Projects page; calls useAuthorized() for auth guard and renders ProjectsPage
ui/litellm-dashboard/src/app/(dashboard)/access-groups/page.tsx	New thin route wrapper for Access Groups; calls useAuthorized() but AccessGroupsPage also calls it internally, creating a redundant double invocation
ui/litellm-dashboard/src/utils/migratedPages.ts	Adds projects and access-groups to MIGRATED_PAGES registry; keys and values are unique so the reverse-lookup works correctly
ui/litellm-dashboard/src/app/(dashboard)/page.tsx	Removes the legacy page=="access-groups" and page=="projects" switch arms; unused imports for both components dropped cleanly
ui/litellm-dashboard/src/utils/migratedPages.test.ts	Adds a test case that verifies both new sidebar IDs map to their expected route segments
ui/litellm-dashboard/e2e_tests/fixtures/migratedPages.ts	Adds projects and access-groups to the e2e fixture and removes them from the pending comment; kept in lockstep with MIGRATED_PAGES
ui/litellm-dashboard/eslint-suppressions.json	ESLint suppression keys re-mapped to new file paths; suppression counts unchanged

_{Reviews (1): Last reviewed commit: "refactor(ui): move Projects and AccessGr..." | Re-trigger Greptile}

greptile-apps · 2026-06-11T19:25:04Z

+import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
+
+export default function AccessGroups() {
+  useAuthorized();


useAuthorized() is called twice when this route renders — once here in the wrapper and again inside AccessGroupsPage (line 106 of AccessGroupsPage.tsx), where it's needed for userRole. That doubles the useUIConfig subscription, the cookie read, and the useEffect redirect registration, with no benefit. The Projects route wrapper doesn't have this duplication because ProjectsPage doesn't call useAuthorized internally. Consider either removing the wrapper call (the inner call already handles the redirect guard) or removing the inner call and accepting userRole as a prop from the wrapper.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

defensive check im leaving in for the migration

The projects migration smoke clicks the Projects sidebar link, which only renders when the enterprise-gated enable_projects_ui setting is on; the seeded e2e database starts with it off, so the locator timed out in both e2e_ui_testing jobs. CI already launches the proxy with LITELLM_LICENSE for premium UI coverage, so flip the setting in globalSetup via the same /update/ui_settings call the admin UI toggle makes, failing loudly if the PATCH is rejected.

…al setup The frontend lint bans raw fetch() outside src/lib/http/; the e2e convention for proxy API calls is Playwright's APIRequestContext, as in routerSettings.spec.ts.

…routes (#30236) * feat(ui): cut budgets, workflows, and guardrails-monitor over to path routes Continues the page-by-page App Router migration (#30185, #30226). All three legacy switch arms passed only accessToken, so each route wrapper is a thin useAuthorized() + render. MIGRATED_PAGES routes the sidebar and redirects the legacy ?page= URLs; the e2e fixture picks all three up in the migration smoke and sidebar specs automatically. * refactor(ui): colocate budgets, workflows, and guardrails-monitor components budgets and workflow_runs were imported only by the legacy switch, so they move wholesale into their route folders; the budgetItem type hoists into the shared useBudgets hook, which owns the API response shape, so the hooks layer no longer imports from a page folder. GuardrailsMonitor keeps LogViewer, mockData, and MetricCard at the shared src/components home because ToolDetail and ToolPolicies import them; the rest moves. eslint suppressions are re-keyed accordingly. * fix(ui): restore MetricCard test-utils path and merge duplicate import MetricCard.test.tsx got the moved-tree depth rewrite before being moved back to src/components/GuardrailsMonitor, leaving a five-level path that escapes the project root; the suite failed at import. Also merge the two imports from useBudgets in budget_panel.tsx. Both flagged by Greptile.

…30226) * feat(ui): cut projects and access-groups over to path routes Same recipe as playground (BerriAI#30185): MIGRATED_PAGES entries route the sidebar and redirect the legacy ?page= URLs, the switch arms are deleted, and the e2e fixture grows two entries. Both components were already zero-prop and self-fetching via React Query hooks, so the route wrappers are trivial. * refactor(ui): move Projects and AccessGroups components into their route folders Both folders were imported only by the legacy switch, so they colocate wholesale under (dashboard)/{projects,access-groups}/components. Their React Query hooks stay in the shared (dashboard)/hooks layer. eslint suppressions are re-keyed to the new paths. * test(ui): enable enable_projects_ui in e2e global setup The projects migration smoke clicks the Projects sidebar link, which only renders when the enterprise-gated enable_projects_ui setting is on; the seeded e2e database starts with it off, so the locator timed out in both e2e_ui_testing jobs. CI already launches the proxy with LITELLM_LICENSE for premium UI coverage, so flip the setting in globalSetup via the same /update/ui_settings call the admin UI toggle makes, failing loudly if the PATCH is rejected. * test(ui): use Playwright request context instead of raw fetch in global setup The frontend lint bans raw fetch() outside src/lib/http/; the e2e convention for proxy API calls is Playwright's APIRequestContext, as in routerSettings.spec.ts.

…routes (BerriAI#30236) * feat(ui): cut budgets, workflows, and guardrails-monitor over to path routes Continues the page-by-page App Router migration (BerriAI#30185, BerriAI#30226). All three legacy switch arms passed only accessToken, so each route wrapper is a thin useAuthorized() + render. MIGRATED_PAGES routes the sidebar and redirects the legacy ?page= URLs; the e2e fixture picks all three up in the migration smoke and sidebar specs automatically. * refactor(ui): colocate budgets, workflows, and guardrails-monitor components budgets and workflow_runs were imported only by the legacy switch, so they move wholesale into their route folders; the budgetItem type hoists into the shared useBudgets hook, which owns the API response shape, so the hooks layer no longer imports from a page folder. GuardrailsMonitor keeps LogViewer, mockData, and MetricCard at the shared src/components home because ToolDetail and ToolPolicies import them; the rest moves. eslint suppressions are re-keyed accordingly. * fix(ui): restore MetricCard test-utils path and merge duplicate import MetricCard.test.tsx got the moved-tree depth rewrite before being moved back to src/components/GuardrailsMonitor, leaving a five-level path that escapes the project root; the suite failed at import. Also merge the two imports from useBudgets in budget_panel.tsx. Both flagged by Greptile.