Skip to content

Convert Credential route tree to react-router v6 Routes - #414

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

Convert Credential route tree to react-router v6 Routes#414
cigamit merged 4 commits into
ctrliq:mainfrom
blaipr:feature/react-router-credential

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 Credential 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):

  • Credentials.js (list router): <Switch><Routes>; child routes use the element prop; the detail route is /credentials/:id/* so the nested <Credential> tree can match the rest of the path.
  • Credential.js (detail router): <Switch><Routes> with relative child paths (details, edit, access, job_templates); the exact <Redirect> becomes an index route that <Navigate replace>s to details; the two duplicated v5 catch-all not-found routes collapse to a single path="*" route, and the useRouteMatch({path}) match.params.id is replaced with the id route param from useParams.
  • Tests: both suites rewritten with renderWithContexts (RTL) to assert real v6 route resolution — each tab panel, the kind-gated Job Templates tab, the index redirect, the unknown-sub-route not-found error, and the 404 detail 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.
  • Tests: 12 route-resolution tests across the two converted suites; full screens/Credential directory passes (23 suites / 121 tests).
  • npm --prefix awx/ui run lint clean on the changed source.

blaipr added 2 commits June 14, 2026 05:44
Migrate the Credential 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.

- Credentials.js: <Switch> -> <Routes>; child routes use the element
  prop; the detail route uses /credentials/:id/* so the nested
  <Credential> tree matches the rest of the path.
- Credential.js: <Switch> -> <Routes> with relative child paths
  (details, edit, access, job_templates); the exact <Redirect> becomes
  an index route that <Navigate>s to details; the duplicated v5
  catch-all not-found routes collapse to a single path="*" route, and
  the useRouteMatch({path}) match.params.id is replaced with the id
  route param from useParams.
- Rewrite both test suites with renderWithContexts (RTL) to assert real
  v6 route resolution, including the kind-gated Job Templates tab, the
  index redirect, the unknown sub-route not-found error, and the 404
  detail error.
CredentialEdit read the credential id via v5 useParams(), which returns
{} under the v6 route tree (no v5 Route ancestor), leaving the id
undefined on update/cancel. Read useParams from
react-router-dom-v5-compat instead, and point the test's useParams mock
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 Credential screen’s routing from react-router v5 Switch/Route/Redirect to v6-style Routes/Route/Navigate via react-router-dom-v5-compat, and updates the associated UI tests to assert actual v6 route resolution.

Changes:

  • Converted the Credentials list router to <Routes> and updated the detail route to /credentials/:id/* to support nested matching.
  • Converted the Credential detail router to v6 nested, relative child routes with an index redirect to details.
  • Rewrote the Credentials/Credential routing tests to use RTL renderWithContexts + memory history for real route resolution.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
awx/ui/src/screens/Credential/Credentials.js Switch→Routes conversion and detail route updated to include /* for nested matching.
awx/ui/src/screens/Credential/Credential.js Detail route tree converted to nested v6 <Routes> with relative paths and index redirect.
awx/ui/src/screens/Credential/Credentials.test.js Converted to RTL route-resolution tests for the list/add/detail route branches.
awx/ui/src/screens/Credential/Credential.test.js Converted to RTL tests for nested route resolution, redirect, and not-found cases.
awx/ui/src/screens/Credential/CredentialEdit/CredentialEdit.js Aligns useParams usage with react-router-dom-v5-compat for v6 route tree.
awx/ui/src/screens/Credential/CredentialEdit/CredentialEdit.test.js Updates router hook mocking to target react-router-dom-v5-compat.

Comment thread awx/ui/src/screens/Credential/Credentials.js Outdated
Comment thread awx/ui/src/screens/Credential/Credentials.test.js
blaipr added 2 commits June 14, 2026 22:44
The enzyme suite asserted the Credentials ScreenHeader breadcrumb/title
mapping; the RTL route-resolution tests had dropped it. Capture the
ScreenHeader props and assert the stream type and breadcrumb config so a
regression in breadcrumbConfig is caught again.
@blaipr

blaipr commented Jun 14, 2026

Copy link
Copy Markdown
Contributor Author

Thanks for the review. Addressed in f9b0e03690 and a6824d4acb: fixed the doubled /* /* comment and added back a ScreenHeader assertion (stream type and breadcrumb config) so the breadcrumb/title coverage the enzyme suite had is restored.

@cigamit
cigamit merged commit 232bb81 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