Skip to content

Convert Organization route tree to react-router v6 Routes - #411

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

Convert Organization route tree to react-router v6 Routes#411
cigamit merged 3 commits into
ctrliq:mainfrom
blaipr:feature/react-router-organization

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 Organization 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 Application, CredentialType, NotificationTemplate, Team and ExecutionEnvironment route trees.

UI (no behavior change — same URLs, same panels):

  • Organizations.js (list router): <Switch><Routes>; child routes use the element prop; the detail route is /organizations/:id/* so the nested <Organization> tree can match the rest of the path; the unused useRouteMatch match.path is replaced by explicit paths.
  • Organization.js (detail router): <Switch><Routes> with relative child paths (details, edit, access, teams, notifications, execution_environments); 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 organizationId route param; a stray , text node after the not-found route is removed.
  • Tests: both suites rewritten with renderWithContexts (RTL) to assert real v6 route resolution — each tab panel, the notifications tab for an auditor, 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/Organization directory passes (12 suites / 66 tests).
  • npm --prefix awx/ui run lint clean on the changed source.

blaipr added 2 commits June 14, 2026 05:28
Migrate the Organization 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
Application, CredentialType, NotificationTemplate, Team and
ExecutionEnvironment route trees.

- Organizations.js: <Switch> -> <Routes>; child routes use the element
  prop; the detail route uses /organizations/:id/* so the nested
  <Organization> tree matches the rest of the path; the unused
  useRouteMatch match.path is replaced by explicit paths.
- Organization.js: <Switch> -> <Routes> with relative child paths
  (details, edit, access, teams, notifications, execution_environments);
  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 organizationId route
  param; a stray ',' text node after the not-found route is removed.
- Rewrite both test suites with renderWithContexts (RTL) to assert real
  v6 route resolution, including each tab panel, the notifications tab
  for an auditor, the index redirect, the unknown sub-route not-found
  error, and the 404 detail error.
Under the v6 route tree, v5 router hooks in descendants no longer see the
route match: OrganizationList's useRouteMatch() returned match.url='/'
(links to //add, //:id) and OrganizationDetail read the org id from
useRouteMatch().params, which was empty (undefined id). Build the list
links from the literal /organizations base, and read the detail id from
react-router-dom-v5-compat useParams.

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

Continues the incremental UI migration from react-router v5 route trees (<Switch>/<Route>/<Redirect>) to v6-style route trees (<Routes>/<Route>/<Navigate>) using react-router-dom-v5-compat, specifically for the Organizations screen (list + detail), and updates the associated tests to assert real v6 route resolution.

Changes:

  • Converted Organizations (list router) to v6 <Routes> and updated the detail route to /organizations/:id/* for nested matching.
  • Converted Organization (detail router) to v6 <Routes> with relative child paths and an index redirect to details.
  • Rewrote Organizations/Organization route-resolution tests using renderWithContexts (RTL) and memory history.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
awx/ui/src/screens/Organization/Organizations.js Migrates the Organizations list-level router to v6 <Routes> and wires the nested detail subtree via /organizations/:id/*.
awx/ui/src/screens/Organization/Organization.js Migrates the Organization detail router to v6 <Routes> with relative paths and an index redirect to details.
awx/ui/src/screens/Organization/OrganizationDetail/OrganizationDetail.js Replaces useRouteMatch with useParams for v6-compatible route param access.
awx/ui/src/screens/Organization/OrganizationList/OrganizationList.js Removes useRouteMatch usage and switches to explicit Organizations URLs for add/detail links.
awx/ui/src/screens/Organization/Organizations.test.js Rewrites list-router tests to RTL and asserts which <Routes> branch resolves for each URL.
awx/ui/src/screens/Organization/Organization.test.js Rewrites detail-router tests to RTL and validates nested v6 route resolution (tabs, index redirect, not-found cases).

Comment thread awx/ui/src/screens/Organization/Organizations.js Outdated
@blaipr

blaipr commented Jun 14, 2026

Copy link
Copy Markdown
Contributor Author

Thanks for the review. Fixed the doubled /* /* in the nested-route comment in af9a898187.

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