Skip to content

Convert Instances route tree to react-router v6 Routes - #413

Merged
cigamit merged 3 commits into
ctrliq:mainfrom
blaipr:feature/react-router-instances
Jun 15, 2026
Merged

Convert Instances route tree to react-router v6 Routes#413
cigamit merged 3 commits into
ctrliq:mainfrom
blaipr:feature/react-router-instances

Conversation

@blaipr

@blaipr blaipr commented Jun 14, 2026

Copy link
Copy Markdown
Contributor
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> via react-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 the element prop; the detail route is /instances/:id/* so the nested <Instance> tree can match 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 (detail router): <Switch><Routes> with relative child paths (details, and the K8s-only listener_addresses / peers); the exact <Redirect> becomes an index route that <Navigate replace>s to details; the catch-all not-found route stays as path="*"; match.url / match.params.id are replaced with the id route param.
  • Tests: new Instance and Instances route-resolution 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.
ISSUE TYPE
  • Bug, Docs Fix or other nominal change
COMPONENT NAME
  • UI
ADDITIONAL INFORMATION
  • Part of the incremental react-router v6 migration; each screen's route tree is independent and converted on its own branch off main.
  • These two route trees had no top-level test files before; this adds 9 route-resolution tests. Full screens/Instances directory passes (9 suites / 44 tests).
  • npm --prefix awx/ui run lint clean on the changed source.

blaipr added 2 commits June 14, 2026 05:40
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.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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) and Instance.js (detail tab routes) to v6 <Routes> with element props, 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-compat where 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.

Comment thread awx/ui/src/screens/Instances/Instances.js Outdated
Comment thread awx/ui/src/screens/Instances/Instance.test.js Outdated
- 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).
@blaipr

blaipr commented Jun 14, 2026

Copy link
Copy Markdown
Contributor Author

Thanks for the review. Addressed in ea6ecf4b46: fixed the doubled /* /* comment and renamed the peers test to match what it asserts (listener addresses are covered by their own test).

@cigamit cigamit left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@cigamit
cigamit merged commit 245b1e6 into ctrliq:main Jun 15, 2026
@cigamit cigamit self-assigned this Jun 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

3 participants