Convert ManagementJob route tree to react-router v6 Routes - #423
Merged
Conversation
The shared Schedules/Schedule components are mounted at several different base paths (templates, projects, inventory sources, management jobs), so they can't hardcode an absolute base. Schedule.js already derived its base from the location (pathRoot = pathname up to 'schedules'); apply the same technique to Schedules.js and convert both from v5 <Switch>/<Redirect> to v6 <Routes>/<Navigate>. - Schedules.js: drop useRouteMatch; compute the base from useLocation and use it for the list/add/:scheduleId routes (the schedule detail delegates with /*). - Schedule.js: <Switch> -> <Routes>; the exact <Redirect> becomes a <Route> Navigate to details; edit/details kept on their computed pathRoot paths; not-found kept as path="*". Because the routes are computed-absolute, they resolve whether the parent screen is still on v5 <Switch> or already migrated to v6 - so this decouples the shared-component conversion from the Template / Project / ManagementJob / InventorySource / WorkflowJobTemplate screens, which can now be migrated independently afterward. Verified: components/Schedule (13 suites) and all five parent screens that mount <Schedules> pass unchanged.
Migrate the ManagementJob list and detail route trees from the react-router v5 <Switch>/<Route>/<Redirect> API to v6 <Routes>/<Route> via react-router-dom-v5-compat. Now unblocked by the shared Schedule component conversion. - ManagementJobs.js: <Switch> -> <Routes>; the detail route uses /management_jobs/:id/* so the nested <ManagementJob> tree matches. - ManagementJob.js: <Switch> -> <Routes>; useRouteMatch replaced with the id route param + an explicit detailUrl; the exact <Redirect> becomes a <Route> that <Navigate>s to schedules (the default tab); the schedules tab delegates with schedules/* to the shared <Schedules>; notifications uses the element prop. - ManagementJobs.test.js: mount at /management_jobs with a stubbed list so the route resolves without an API call. Depends on the shared Schedule component conversion (PR ctrliq#422), which is included in this branch until that PR merges.
Contributor
There was a problem hiding this comment.
Pull request overview
Migrates the ManagementJob screen and its embedded schedule subtree from react-router v5 route trees (<Switch>/<Redirect>) to react-router v6-style route trees (<Routes>/<Navigate>) using react-router-dom-v5-compat, while keeping URLs/panels the same and adjusting tests to mount the list route deterministically.
Changes:
- Convert
ManagementJobsandManagementJobroute trees to v6-style<Routes>/<Route>with wildcard (/*) delegation for nested subtrees. - Update shared
Schedules/Schedulecomponents to v6-style routing while remaining base-path agnostic via location-derived roots. - Update
ManagementJobs.test.jsto mount at/management_jobswith a stubbed list component to avoid API dependency.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| awx/ui/src/screens/ManagementJob/ManagementJobs.test.js | Mounts the screen at /management_jobs with a mocked list component to validate routing without API calls. |
| awx/ui/src/screens/ManagementJob/ManagementJobs.js | Converts list/detail routing to <Routes> and delegates detail subtree via :id/*. |
| awx/ui/src/screens/ManagementJob/ManagementJob.js | Converts detail routing to <Routes> and replaces redirect behavior with <Navigate> to the default tab. |
| awx/ui/src/components/Schedule/Schedules.js | Converts schedules list/add/detail routing to <Routes> and derives a base URL from location for reuse across mount points. |
| awx/ui/src/components/Schedule/Schedule.js | Converts schedule detail routing to <Routes> and replaces redirect with <Navigate> to details. |
- Schedule.js: import useParams/useLocation from react-router-dom-v5-compat (not v5) so scheduleId resolves under the v6 parent route. - Schedule.js: the edit route used :id while the component reads scheduleId; use :scheduleId consistently. - Schedules.js: derive baseUrl with substring and handle the 'schedules'- absent case explicitly so it never collapses to a relative path. - Drop the doubled '/* /*' nested-route comment in both files. (cherry picked from commit 4b0b609)
Contributor
Author
|
Thanks for the review. Addressed in |
cigamit
added
the
Needs triage
Contributor
|
Schedules fail to display details when clicked |
cigamit reported that opening a schedule's details fails. <Schedules> is mounted by the parent screens via a ".../schedules/*" route, so it is a v6 descendant; it (and <Schedule>) built absolute baseUrl/pathRoot-derived route paths, which do not match in that descendant context, so the add/detail/edit routes never resolved. Use relative route paths (add, :scheduleId/*, index in Schedules; index -> details, details, edit in Schedule). The pathRoot-derived absolute values are kept only for the tab/breadcrumb Links, not the route paths. Mount the Schedules test under its parent route. (cherry picked from commit 4dd8df0)
Contributor
|
Management jobs are listed under schedules, but when clicking, its just blank data |
ManagementJob is rendered as a descendant of the v6 ManagementJobs dispatcher (path management_jobs/:id/*), so its nested <Routes> resolves relative to management_jobs/:id. The child routes used absolute paths (management_jobs/:id/schedules/*), which do not match in a descendant route tree, so clicking a schedule rendered blank (the Schedule detail never mounted and never fetched the schedule). Use relative paths (index, notifications, schedules/*) so the nested Schedule route tree resolves.
Contributor
Author
|
Fixed the blank schedule detail. ManagementJob is rendered as a descendant of the v6 ManagementJobs dispatcher (path management_jobs/:id/), so its nested Routes resolves relative to management_jobs/:id. The child routes were using absolute paths (management_jobs/:id/schedules/), which do not match in a descendant route tree, so clicking a schedule never mounted the Schedule detail (and never fetched it). Switched them to relative paths (index, notifications, schedules/*). Verified in a local browser: the schedule list renders and clicking a schedule now loads /api/v2/schedules// and shows the full detail. |
cigamit
approved these changes
Jun 16, 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 ManagementJob screen's route trees from the v5
<Switch>/<Route>/<Redirect>API to v6<Routes>/<Route>viareact-router-dom-v5-compat.UI (no behavior change - same URLs, same panels):
ManagementJobs.js(list router):<Switch>→<Routes>; the detail route is/management_jobs/:id/*so the nested<ManagementJob>tree matches.ManagementJob.js(detail router):<Switch>→<Routes>;useRouteMatchis replaced with theidroute param + an explicitdetailUrl; the exact<Redirect>becomes a<Route>that<Navigate>s toschedules(the default tab); the schedules tab delegates withschedules/*to the shared<Schedules>; notifications uses theelementprop.ManagementJobs.test.js: mount at/management_jobswith a stubbed list so the route resolves without an API call.ISSUE TYPE
COMPONENT NAME
ADDITIONAL INFORMATION
Schedulesis still v5 would reintroduce thematch.pathbreak, so Convert the shared Schedule components to react-router v6 Routes #422's two component files are included in this branch until it merges (then this rebases onto main and they drop out).screens/ManagementJobdirectory passes (3 suites / 7 tests).npm --prefix awx/ui run lintclean on the changed source.