feat(ui): migrate models page to App Router path route#30677
Conversation
Cut the Models + Endpoints page over from the legacy ?page=models switch in (dashboard)/page.tsx to a path route at (dashboard)/models-and-endpoints. Adding the MIGRATED_PAGES entry repoints the sidebar link and redirects old ?page=models bookmarks to /ui/models-and-endpoints. ModelsAndEndpointsView already sourced identity from useAuthorized() and its own data via useModelsInfo(), so the token/keys/modelData/setModelData props were dead; drop them from ModelDashboardProps (and the parent's now-unused setModelData state) to sever the last of the shared-state coupling.
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
Greptile SummaryThis PR migrates the Models + Endpoints page from the legacy
Confidence Score: 5/5Purely a UI routing refactor with no backend changes; the new route reuses existing hooks and follows the established migration pattern exactly. All changes are confined to the dashboard UI layer. The new page component is minimal and mirrors the agents route verbatim. Dead props are cleanly removed, the legacy redirect is wired through the single shared MIGRATED_PAGES mechanism, and the retained modelData stub in page.tsx is an acknowledged placeholder for the not-yet-migrated pass-through-settings consumer. No logic changes, no backend impact, tests updated correctly. No files require special attention.
|
| Filename | Overview |
|---|---|
| ui/litellm-dashboard/src/utils/migratedPages.ts | Added models: "models-and-endpoints" to MIGRATED_PAGES, wiring the sidebar link and legacy redirect in one place — consistent with every prior migration. |
| ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.tsx | New App Router page component; derives premiumUser from useAuthorized() and teams from useTeams(), matching the pattern used by the agents route. |
| ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView.tsx | Removed four dead props (token, modelData, keys, setModelData) from ModelDashboardProps; component already sourced its data from useAuthorized() and useModelsInfo() internally. |
| ui/litellm-dashboard/src/app/(dashboard)/page.tsx | Removed the page == "models" switch arm and dropped setModelData from state; modelData is retained as a { data: [] } stub for the not-yet-migrated pass-through-settings consumer. |
| ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/ModelsAndEndpointsView.test.tsx | Dropped dead prop arguments from all render calls; the one test that needed specific model data now injects it via mockUseModelsInfo, which is the real code path the component uses. |
| ui/litellm-dashboard/src/utils/migratedPages.test.ts | Added a focused unit test asserting MIGRATED_PAGES.models maps to "models-and-endpoints" and that migratedHref builds the correct /ui/models-and-endpoints href. |
| ui/litellm-dashboard/e2e_tests/fixtures/migratedPages.ts | Added models: "models-and-endpoints" to the e2e fixture, keeping it in lockstep with the source-of-truth MIGRATED_PAGES. |
| ui/litellm-dashboard/e2e_tests/tests/migration/migratedPages.spec.ts | Tightened the legacyAnchor locator to getByRole("link", { name: "Virtual Keys", exact: true }) — more precise and avoids false positives from partial text matches. |
Reviews (2): Last reviewed commit: "test(ui): scope migration smoke's shell ..." | Re-trigger Greptile
The migration smoke used a loose `locator("a", { hasText: "Virtual Keys" })`
to assert the dashboard shell rendered. The Models + Endpoints page content
itself links to the "Virtual Keys page", so on that route the substring filter
matched two anchors and tripped Playwright strict mode. Match the sidebar link
by its exact accessible name instead, which resolves to just the nav item.
|
@greptileai re review |
d97b17b
into
litellm_internal_staging
Relevant issues
Linear ticket
Refs LIT-3687
Pre-Submission checklist
Please complete all items before asking a LiteLLM maintainer to review your PR
make test-unit@greptileaiand received a Confidence Score of at least 4/5 before requesting a maintainer reviewCI (LiteLLM team)
Branch creation CI run
Link:
CI run for the last commit
Link:
Merge / cherry-pick CI run
Links:
Screenshots / Proof of Fix
This is a UI routing change with no backend component, so the proof is the rendered page reachable at its new path plus the legacy redirect. To verify locally:
/ui/models-and-endpoints(not/ui/?page=models)/ui/models-and-endpointsType
🧹 Refactoring
Changes
Continues the dashboard App Router migration by cutting the Models + Endpoints page over from the legacy
?page=modelsswitch in(dashboard)/page.tsxto a path route at(dashboard)/models-and-endpoints/page.tsx. Adding themodels -> models-and-endpointsentry toMIGRATED_PAGESis the single switch that repoints the sidebar link and redirects existing?page=modelsdeep links to/ui/models-and-endpoints, matching the mechanism every already-migrated page uses.ModelsAndEndpointsViewalready pulled identity fromuseAuthorized()and its model data fromuseModelsInfo(), so thetoken,keys,modelData, andsetModelDataprops it still declared were dead. I removed them fromModelDashboardProps(which also drops threeanys), updated the view's test renders accordingly, and dropped the parent's now-unusedsetModelDatastate;modelDatastays only becausepass-through-settingsstill reads it (that page is the next migration). The new route'spage.tsxsuppliespremiumUserfromuseAuthorized()andteamsfromuseTeams(), the same pattern the agents route uses.Added a unit test asserting
MIGRATED_PAGES.modelsmaps tomodels-and-endpointsand thatmigratedHrefbuilds/ui/models-and-endpoints, and added the page to the e2e migration fixture so the sidebar/navigation smoke covers it.