Convert Instances route tree to react-router v6 Routes - #413
Conversation
Migrate the Instances 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 earlier screen conversions. - Instances.js: <Switch> -> <Routes>; child routes use the element prop; the detail route uses /instances/:id/* so the nested <Instance> tree matches the rest of the path. The /instances/:id/edit route stays a sibling of the detail route — v6 route ranking keeps the static edit segment ahead of the :id/* splat. - Instance.js: <Switch> -> <Routes> with relative child paths (details, and the K8s-only listener_addresses / peers); 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 id route param. - Add Instance and Instances route-resolution test suites with renderWithContexts (RTL): each tab panel, the K8s-gated peers/listener tabs, the index redirect, the edit sibling route, and the not-found error.
InstanceDetail, InstanceEdit, InstanceListenerAddressList and
InstancePeerList read the instance id via v5 useParams(), which returns
{} under the v6 route tree (no v5 Route ancestor) - so the id was
undefined. Read useParams from react-router-dom-v5-compat instead. The
InstanceDetail and InstanceEdit tests mocked useParams on
react-router-dom; point those mocks at react-router-dom-v5-compat.
There was a problem hiding this comment.
Pull request overview
Migrates the Instances screen route trees from react-router v5’s <Switch>/<Route>/<Redirect> API to v6-style <Routes>/<Route> (via react-router-dom-v5-compat), and adds focused route-resolution tests to ensure URL → panel behavior stays consistent during the incremental router upgrade.
Changes:
- Converted
Instances.js(list routes) andInstance.js(detail tab routes) to v6<Routes>withelementprops, index redirect via<Navigate>, and nested splat routing for the detail subtree. - Updated affected Instances sub-screens to source route params from
react-router-dom-v5-compatwhere needed. - Added new RTL route-resolution test suites for both the list and detail route trees.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| awx/ui/src/screens/Instances/Instances.js | Converts the Instances list route tree to v6 <Routes> and nests the detail subtree under /instances/:id/*. |
| awx/ui/src/screens/Instances/Instance.js | Converts the Instance detail route tree to v6 nested routes with an index redirect and K8s-gated routes. |
| awx/ui/src/screens/Instances/Instances.test.js | Adds RTL route-resolution coverage for list/add/edit/detail subtree routing. |
| awx/ui/src/screens/Instances/Instance.test.js | Adds RTL route-resolution coverage for detail tabs, index redirect, and not-found behavior. |
| awx/ui/src/screens/Instances/InstancePeers/InstancePeerList.js | Switches useParams to v5-compat to align with the migrated route tree. |
| awx/ui/src/screens/Instances/InstanceListenerAddressList/InstanceListenerAddressList.js | Switches useParams to v5-compat to align with the migrated route tree. |
| awx/ui/src/screens/Instances/InstanceEdit/InstanceEdit.js | Updates router hook imports to use v5-compat where appropriate. |
| awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.js | Updates router hook imports to use v5-compat where appropriate. |
| awx/ui/src/screens/Instances/InstanceEdit/InstanceEdit.test.js | Adjusts hook mocking to mock useParams from v5-compat. |
| awx/ui/src/screens/Instances/InstanceDetail/InstanceDetail.test.js | Adjusts hook mocking to mock useParams from v5-compat. |
- Fix the doubled '/* /*' in the nested-route JSX comment. - Rename the peers test so its name matches what it asserts (listener addresses are covered by a separate test).
|
Thanks for the review. Addressed in |
cigamit
left a comment
There was a problem hiding this comment.
Tested what I could with this in my dev environment. Since I am unable to create instances there, will approve and let the image build, and will test the resulting image in my demo environment to verify all the instance routes are working.
SUMMARY
Continues the react-router v5 → v6 route-tree migration. Converts the Instances 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 earlier screen conversions.UI (no behavior change — same URLs, same panels):
Instances.js(list router):<Switch>→<Routes>; child routes use theelementprop; the detail route is/instances/:id/*so the nested<Instance>tree can match the rest of the path. The/instances/:id/editroute stays a sibling of the detail route — v6 route ranking keeps the staticeditsegment ahead of the:id/*splat.Instance.js(detail router):<Switch>→<Routes>with relative child paths (details, and the K8s-onlylistener_addresses/peers); 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 theidroute param.InstanceandInstancesroute-resolution suites withrenderWithContexts(RTL) — each tab panel, the K8s-gated peers/listener tabs, the index redirect, the edit sibling route, and the not-found error.ISSUE TYPE
COMPONENT NAME
ADDITIONAL INFORMATION
main.screens/Instancesdirectory passes (9 suites / 44 tests).npm --prefix awx/ui run lintclean on the changed source.