Convert Team route tree to react-router v6 Routes - #409
Merged
Conversation
Migrate the Team list and detail route trees from the react-router v5 <Switch>/<Route>/<Redirect> API to v6 <Routes>/<Route> via react-router-dom-v5-compat, following the pattern used for the Application, CredentialType and NotificationTemplate route trees. - Teams.js: <Switch> -> <Routes>; child routes use the element prop; the detail route uses /teams/:id/* so the nested <Team> tree matches the rest of the path. - Team.js: <Switch> -> <Routes> with relative child paths (details, edit, access, roles); the exact <Redirect> becomes an index route that <Navigate>s to details; the catch-all not-found route is kept as path="*". - Rewrite both test suites with renderWithContexts (RTL) to assert real v6 route resolution, including the index redirect, the unknown sub-route not-found error, and the 404 detail error.
Under the v6 route tree, v5 router hooks in descendants no longer see the
route match: TeamList's useRouteMatch() returned match.url='/' (links to
//add, //:id) and TeamDetail's v5 useParams() returned {} (undefined id).
Build TeamList links from the literal /teams base, and read TeamDetail's
useParams from react-router-dom-v5-compat.
Contributor
There was a problem hiding this comment.
Pull request overview
Continues the incremental react-router v5 → v6 migration for the Team screen by converting both the list and detail route trees to v6-style <Routes>/<Route> (via react-router-dom-v5-compat), and updating tests to assert real v6 route resolution.
Changes:
- Converted
Teams.jsrouting from<Switch>to<Routes>, including handing off/teams/:id/*to the nested Team route tree. - Converted
Team.jsnested routing to v6 relative child paths with an index redirect (<Navigate replace>→details) and a*not-found route. - Rewrote
Teams.test.jsandTeam.test.jsusing RTLrenderWithContextsto validate route matching, redirect behavior, and not-found cases.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| awx/ui/src/screens/Team/Teams.js | Migrates Teams route tree to v6 <Routes> and hands off to nested Team subtree via /teams/:id/*. |
| awx/ui/src/screens/Team/Team.js | Migrates nested Team routes to v6 relative paths + index redirect and not-found handling. |
| awx/ui/src/screens/Team/TeamList/TeamList.js | Removes useRouteMatch usage and updates links to explicit /teams/... URLs. |
| awx/ui/src/screens/Team/TeamDetail/TeamDetail.js | Adjusts router hook imports to align with v5-compat usage. |
| awx/ui/src/screens/Team/Teams.test.js | Rewrites tests to RTL and asserts v6 route resolution for Teams routes. |
| awx/ui/src/screens/Team/Team.test.js | Rewrites tests to RTL and asserts v6 nested route resolution, redirects, and not-found behavior. |
Contributor
Author
|
Thanks for the review. Fixed the doubled |
Contributor
|
When adding a role to a Team |
cigamit
added
the
Needs triage
UserAndTeamAccessAdd read the resource id from react-router v5 useParams. On the v6-converted Team screen, TeamRolesList renders as a descendant of a v6 route tree, so the v5 useParams returns no :id and the associate request went to /api/v2/teams/undefined/roles/. Pass the resource id explicitly from both consumers (team.id, user.id) so it no longer depends on the parent screen's router version; keep the v5 route param as a fallback.
cigamit
approved these changes
Jun 15, 2026
cigamit
left a comment
cigamit
left a comment
Contributor
There was a problem hiding this comment.
Role association appears to be working now
cigamit
removed
the
Needs triage
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
SUMMARY
Continues the react-router v5 → v6 route-tree migration. Converts the Team screen's route trees from the v5
<Switch>/<Route>/<Redirect>API to v6<Routes>/<Route>viareact-router-dom-v5-compat, following the pattern used for the Application, CredentialType and NotificationTemplate route trees.UI (no behavior change — same URLs, same panels):
Teams.js(list router):<Switch>→<Routes>; child routes use theelementprop; the detail route is/teams/:id/*so the nested<Team>tree can match the rest of the path.Team.js(detail router):<Switch>→<Routes>with relative child paths (details,edit,access,roles); theexact<Redirect>becomes an index route that<Navigate replace>s todetails; the catch-all not-found route stays aspath="*".renderWithContexts(RTL) to assert real v6 route resolution — which panel renders per URL, the index redirect, the unknown-sub-route not-found error, and the 404 detail error.ISSUE TYPE
COMPONENT NAME
ADDITIONAL INFORMATION
main.screens/Teamdirectory passes (10 suites / 45 tests).npm --prefix awx/ui run lintclean on the changed source.