Convert NotificationTemplate route tree to react-router v6 Routes - #408
Conversation
Migrate the NotificationTemplate 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 same pattern used for the Application and CredentialType route trees. - NotificationTemplates.js: <Switch> -> <Routes>, child routes use the element prop, the detail route uses /notification_templates/:id/* so the nested <NotificationTemplate> tree matches the rest of the path, and the unused useRouteMatch match.url is dropped for explicit paths. - NotificationTemplate.js: <Switch> -> <Routes> with relative child paths (edit, details); the exact <Redirect> becomes an index route that <Navigate>s to details; the Details tab link is built from the route id instead of match.url. - Convert the list test and add a detail test, both with renderWithContexts (RTL) to assert real v6 route resolution.
Under the v6 route tree the list's v5 useRouteMatch() returns match.url='/', so the add/detail links resolved to //add and //:id. Build them from the literal /notification_templates base instead.
There was a problem hiding this comment.
Pull request overview
Migrates the NotificationTemplate screen’s routing from react-router v5 (Switch/Redirect) to v6-style route resolution (Routes/Navigate) via react-router-dom-v5-compat, and updates tests to assert v6 route matching behavior.
Changes:
- Converted the NotificationTemplates (list) and NotificationTemplate (detail) route trees to v6
<Routes>patterns, including nested:id/*matching and an index redirect todetails. - Updated NotificationTemplate list URL construction to use explicit
/notification_templates/...paths instead ofmatch.url. - Converted/added RTL route-resolution tests for list, add, detail, edit, index redirect, and 404 behavior.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| awx/ui/src/screens/NotificationTemplate/NotificationTemplates.js | Converts list-level routing to v6 <Routes> and uses explicit absolute paths. |
| awx/ui/src/screens/NotificationTemplate/NotificationTemplate.js | Converts detail-level routing to nested v6 <Routes> with relative child paths and index redirect. |
| awx/ui/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateList.js | Removes useRouteMatch usage and switches to explicit add/detail URL strings. |
| awx/ui/src/screens/NotificationTemplate/NotificationTemplates.test.js | Converts list routing tests to RTL and validates which route branch resolves per URL. |
| awx/ui/src/screens/NotificationTemplate/NotificationTemplate.test.js | Adds RTL tests for nested detail routing (details/edit/index redirect) and 404 handling. |
- Fix the doubled '/* /*' in the nested-route JSX comment. - Drop the unused NotificationTemplates API mock from the dispatcher test.
Landing on /notification_templates/:id fetched the template, then the index redirect changed the pathname to /details and the pathname-keyed effect fetched again. Skip the fetch on the bare /:id (it only redirects), render the index <Navigate> unconditionally so the redirect still fires, and give the details/edit routes a loading fallback so /:id/details always matches while the template loads. Real navigation (edit -> details) still re-fetches, so saved changes are reflected.
|
Thanks for the review. Addressed in |
SUMMARY
Continues the react-router v5 → v6 route-tree migration. Converts the NotificationTemplate screen's route trees from the v5
<Switch>/<Route>/<Redirect>API to v6<Routes>/<Route>viareact-router-dom-v5-compat, following the same pattern used for the Application and CredentialType route trees.UI (no behavior change — same URLs, same panels):
NotificationTemplates.js(list router):<Switch>→<Routes>; child routes use theelementprop; the detail route is/notification_templates/:id/*so the nested<NotificationTemplate>tree can match the rest of the path; the unuseduseRouteMatchmatch.urlis replaced by explicit paths.NotificationTemplate.js(detail router):<Switch>→<Routes>with relative child paths (edit,details); theexact<Redirect>becomes an index route that<Navigate replace>s todetails; the Details tab link is built from the route id instead ofmatch.url.renderWithContextsto assert real v6 route resolution (which panel renders per URL, index redirect, 404 error).ISSUE TYPE
COMPONENT NAME
ADDITIONAL INFORMATION
main.screens/NotificationTemplatedirectory passes (6 suites / 31 tests).npm --prefix awx/ui run lintclean on the changed source.