Convert Organization route tree to react-router v6 Routes - #411
Merged
Conversation
Migrate the Organization 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, NotificationTemplate, Team and ExecutionEnvironment route trees. - Organizations.js: <Switch> -> <Routes>; child routes use the element prop; the detail route uses /organizations/:id/* so the nested <Organization> tree matches the rest of the path; the unused useRouteMatch match.path is replaced by explicit paths. - Organization.js: <Switch> -> <Routes> with relative child paths (details, edit, access, teams, notifications, execution_environments); the exact <Redirect> becomes an index route that <Navigate>s to details; the catch-all not-found route is kept as path="*"; match.url / match.params.id are replaced with the organizationId route param; a stray ',' text node after the not-found route is removed. - Rewrite both test suites with renderWithContexts (RTL) to assert real v6 route resolution, including each tab panel, the notifications tab for an auditor, 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: OrganizationList's useRouteMatch() returned match.url='/' (links to //add, //:id) and OrganizationDetail read the org id from useRouteMatch().params, which was empty (undefined id). Build the list links from the literal /organizations base, and read the detail id from react-router-dom-v5-compat useParams.
Contributor
There was a problem hiding this comment.
Pull request overview
Continues the incremental UI migration from react-router v5 route trees (<Switch>/<Route>/<Redirect>) to v6-style route trees (<Routes>/<Route>/<Navigate>) using react-router-dom-v5-compat, specifically for the Organizations screen (list + detail), and updates the associated tests to assert real v6 route resolution.
Changes:
- Converted
Organizations(list router) to v6<Routes>and updated the detail route to/organizations/:id/*for nested matching. - Converted
Organization(detail router) to v6<Routes>with relative child paths and an index redirect todetails. - Rewrote Organizations/Organization route-resolution tests using
renderWithContexts(RTL) and memory history.
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/Organization/Organizations.js | Migrates the Organizations list-level router to v6 <Routes> and wires the nested detail subtree via /organizations/:id/*. |
| awx/ui/src/screens/Organization/Organization.js | Migrates the Organization detail router to v6 <Routes> with relative paths and an index redirect to details. |
| awx/ui/src/screens/Organization/OrganizationDetail/OrganizationDetail.js | Replaces useRouteMatch with useParams for v6-compatible route param access. |
| awx/ui/src/screens/Organization/OrganizationList/OrganizationList.js | Removes useRouteMatch usage and switches to explicit Organizations URLs for add/detail links. |
| awx/ui/src/screens/Organization/Organizations.test.js | Rewrites list-router tests to RTL and asserts which <Routes> branch resolves for each URL. |
| awx/ui/src/screens/Organization/Organization.test.js | Rewrites detail-router tests to RTL and validates nested v6 route resolution (tabs, index redirect, not-found cases). |
Contributor
Author
|
Thanks for the review. Fixed the doubled |
cigamit
approved these changes
Jun 15, 2026
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 Organization 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, NotificationTemplate, Team and ExecutionEnvironment route trees.UI (no behavior change — same URLs, same panels):
Organizations.js(list router):<Switch>→<Routes>; child routes use theelementprop; the detail route is/organizations/:id/*so the nested<Organization>tree can match the rest of the path; the unuseduseRouteMatchmatch.pathis replaced by explicit paths.Organization.js(detail router):<Switch>→<Routes>with relative child paths (details,edit,access,teams,notifications,execution_environments); theexact<Redirect>becomes an index route that<Navigate replace>s todetails; the catch-all not-found route stays aspath="*";match.url/match.params.idare replaced with theorganizationIdroute param; a stray,text node after the not-found route is removed.renderWithContexts(RTL) to assert real v6 route resolution — each tab panel, the notifications tab for an auditor, the index redirect, the unknown-sub-route not-found error, and the 404 detail error.ISSUE TYPE
COMPONENT NAME
ADDITIONAL INFORMATION
main.screens/Organizationdirectory passes (12 suites / 66 tests).npm --prefix awx/ui run lintclean on the changed source.