Convert the Setting screen route trees to react-router v6 Routes - #420
Merged
Conversation
Migrate the single-form authentication Setting sub-screens (TACACS,
RADIUS, OIDC, SAML, GoogleOAuth2) from the react-router v5 <Switch> API
to v6 <Routes> via react-router-dom-v5-compat. These follow an identical
detail/edit toggle pattern under a fixed baseURL.
- <Switch> -> <Routes>; details/edit routes use the element prop.
- The exact base <Redirect> becomes a <Route path={baseURL}> that
<Navigate>s to {baseURL}/details.
- The catch-all not-found route is kept as {baseURL}/*.
- Routes keep their absolute baseURL paths, so they resolve correctly
whether or not the Settings.js dispatcher has been migrated yet.
The existing enzyme tests mount each sub-screen at an absolute
/settings/<name>/(details|edit|foo) URL, which v6 <Routes> resolve
unchanged, so no test changes are needed.
Migrate the remaining single-form system Setting sub-screens (Jobs, UI,
Troubleshooting, MiscSystem, MiscAuthentication, Logging, Subscription)
to v6 <Routes>, same pattern as the auth sub-screens.
- <Switch> -> <Routes>; details/edit use the element prop; the base
<Redirect> becomes a <Route path={baseURL}> that <Navigate>s to
details; not-found kept as {baseURL}/*.
- MiscSystem/MiscAuthentication/Logging gate their edit route on
me?.is_superuser; the fallback inner <Redirect> becomes <Navigate>.
- Subscription folded its useRouteMatch base-redirect into a
<Route path={baseURL}> Navigate, dropping useRouteMatch.
- Routes keep absolute baseURL paths, so they resolve under the still-v5
Settings.js dispatcher; existing enzyme tests pass unchanged.
Finish the Setting screen migration to react-router v6 <Routes>.
- LDAP, AzureAD, GitHub: category-based screens. Their useRouteMatch
base/category redirects become a <Route path={baseURL}> Navigate to the
default category plus a small CategoryRedirect helper (useParams) on
the /:category route; detail/edit routes use the element prop.
- Settings.js: <Switch> -> <Routes>; each sub-screen route gets a
trailing /* so its own nested <Routes> resolves; the non-superuser
<Redirect to="/"> and the open-license subscription <Redirect>
become <Navigate>. v6 allows the sub-screens' absolute child paths
because they extend the parent /settings/<name> path.
- Settings.test.js: assert the non-superuser case redirects to / via the
history location instead of finding a <Redirect> component.
blaipr
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
Continues the UI’s incremental react-router migration by converting the full Settings screen routing from react-router v5 (<Switch>/<Redirect>) to v6-style (<Routes>/<Navigate>) using react-router-dom-v5-compat, while preserving existing URLs and screen structure.
Changes:
- Migrated Settings dispatcher routing (
Settings.js) to v6-style<Routes>and added/*to sub-screen routes to enable nested route matching. - Migrated individual Settings sub-screens’ route trees (details/edit/not-found + base redirects) from v5 to v6-style routing.
- Updated the Settings screen test to assert redirect behavior via
history.locationrather than presence of a<Redirect>component.
Reviewed changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| awx/ui/src/screens/Setting/Settings.js | Converts Settings dispatcher to <Routes> and updates redirects to <Navigate>. |
| awx/ui/src/screens/Setting/Settings.test.js | Updates redirect assertion to check history location (v6-style). |
| awx/ui/src/screens/Setting/UI/UI.js | Converts UI settings route tree to <Routes> + <Navigate> base redirect. |
| awx/ui/src/screens/Setting/Troubleshooting/Troubleshooting.js | Converts Troubleshooting route tree to <Routes> + <Navigate>. |
| awx/ui/src/screens/Setting/TACACS/TACACS.js | Converts TACACS route tree to <Routes> + <Navigate>. |
| awx/ui/src/screens/Setting/Subscription/Subscription.js | Converts Subscription route tree to <Routes> + <Navigate> and removes useRouteMatch redirect logic. |
| awx/ui/src/screens/Setting/SAML/SAML.js | Converts SAML route tree to <Routes> + <Navigate>. |
| awx/ui/src/screens/Setting/RADIUS/RADIUS.js | Converts RADIUS route tree to <Routes> + <Navigate>. |
| awx/ui/src/screens/Setting/OIDC/OIDC.js | Converts OIDC route tree to <Routes> + <Navigate>. |
| awx/ui/src/screens/Setting/MiscSystem/MiscSystem.js | Converts MiscSystem route tree and preserves superuser-gated edit navigation via <Navigate>. |
| awx/ui/src/screens/Setting/MiscAuthentication/MiscAuthentication.js | Converts MiscAuthentication route tree and preserves superuser-gated edit navigation via <Navigate>. |
| awx/ui/src/screens/Setting/Logging/Logging.js | Converts Logging route tree and preserves superuser-gated edit navigation via <Navigate>. |
| awx/ui/src/screens/Setting/LDAP/LDAP.js | Converts LDAP category-based routing to <Routes> and introduces CategoryRedirect using useParams. |
| awx/ui/src/screens/Setting/Jobs/Jobs.js | Converts Jobs route tree to <Routes> + <Navigate>. |
| awx/ui/src/screens/Setting/GoogleOAuth2/GoogleOAuth2.js | Converts Google OAuth2 route tree to <Routes> + <Navigate>. |
| awx/ui/src/screens/Setting/GitHub/GitHub.js | Converts GitHub category-based routing to <Routes> and introduces CategoryRedirect using useParams. |
| awx/ui/src/screens/Setting/AzureAD/AzureAD.js | Converts AzureAD category-based routing to <Routes> and introduces CategoryRedirect using useParams. |
The test asserts a redirect via history after a <Navigate>, not a v5 <Redirect> component; rename it so the name matches the assertion.
Contributor
Author
|
Thanks for the review. Renamed the redirect test in |
cigamit
added
the
Needs triage
Contributor
|
There seems to be an issue with this one. For some reason all settings pages are no longer displaying the actual settings. Verified not a caching issue. It is no longer making the API call to pull the setting for that page. For example, clicking on the Logging Settings no longer creates a query for /api/v2/settings/logging/ 
|
cigamit reported that the settings pages no longer render or fetch (e.g. clicking Logging no longer calls /api/v2/settings/logging/). Settings.js was converted to a v6 dispatcher (path "/settings/<category>/*"), making each category screen's <Routes> a descendant; the category screens still used absolute baseURL-prefixed paths, so nothing matched and the category content (and its fetch) never rendered. - Convert every category screen (incl. the LDAP/GitHub/Azure/etc. category redirects) to relative route paths; bare-baseURL redirects become index routes. - Update the isolated category tests to mount each screen under its v6 parent route (they mounted top-level, which masked the regression), and fix the Troubleshooting test that mounted the screen under a stale 'Jobs' alias.
cigamit
approved these changes
Jun 15, 2026
cigamit
left a comment
cigamit
left a comment
Contributor
There was a problem hiding this comment.
Settings pages now properly display
cigamit
removed
the
Needs triage
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 entire Setting screen - all 16 route trees - from the v5
<Switch>/<Route>/<Redirect>API to v6<Routes>/<Route>viareact-router-dom-v5-compat.UI (no behavior change - same URLs, same panels):
<Switch>→<Routes>; details/edit use theelementprop; the base<Redirect>becomes a<Route path={baseURL}>that<Navigate>s to details; not-found kept as{baseURL}/*. MiscSystem/MiscAuthentication/Logging keep their superuser-gated edit route (the fallback inner<Redirect>becomes<Navigate>); Subscription folds itsuseRouteMatchbase-redirect into a<Route path={baseURL}>.useRouteMatchbase/category redirects become a<Route path={baseURL}>Navigate plus a smallCategoryRedirecthelper (useParams) on the/:categoryroute; detail/edit routes use theelementprop.Settings.jsdispatcher:<Switch>→<Routes>; each sub-screen route gets a trailing/*so its own nested<Routes>resolves; the non-superuser<Redirect to="/">and the open-license subscription<Redirect>become<Navigate>.ISSUE TYPE
COMPONENT NAME
ADDITIONAL INFORMATION
main. This PR covers the whole Setting screen.baseURLpaths. Under the now-v6Settings.jsdispatcher they nest as/settings/<name>/*→ the sub-screen's own<Routes>; v6 permits those absolute child paths because they extend the parent/settings/<name>path./settings/<name>/...URLs, which v6<Routes>resolve unchanged - so the only test change isSettings.test.jsasserting the non-superuser redirect via the history location instead of finding a<Redirect>component.screens/Settingdirectory passes (61 suites / 344 tests).npm --prefix awx/ui run lintclean on the changed source.