Convert Credential route tree to react-router v6 Routes - #414
Merged
Conversation
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.
Contributor
There was a problem hiding this comment.
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. |
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.
Contributor
Author
|
Thanks for the review. Addressed in |
cigamit
approved these changes
Jun 15, 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 Credential 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):
Credentials.js(list router):<Switch>→<Routes>; child routes use theelementprop; 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); theexact<Redirect>becomes an index route that<Navigate replace>s todetails; the two duplicated v5 catch-all not-found routes collapse to a singlepath="*"route, and theuseRouteMatch({path})match.params.idis replaced with theidroute param fromuseParams.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
COMPONENT NAME
ADDITIONAL INFORMATION
main.screens/Credentialdirectory passes (23 suites / 121 tests).npm --prefix awx/ui run lintclean on the changed source.