Convert the Templates route tree to react-router v6 (the last Switch)#484
Open
blaipr wants to merge 2 commits into
Open
Convert the Templates route tree to react-router v6 (the last Switch)#484blaipr wants to merge 2 commits into
blaipr wants to merge 2 commits into
Conversation
App.js is now v6 (ctrliq#425) and mounts Templates as a descendant at /templates/*, so Templates.js becomes v6 <Routes> with relative children (job_template/add, workflow_job_template/add, job_template/:id/*, workflow_job_template/:id/*, index list). Template.js and WorkflowJobTemplate.js move their internal <Routes> to relative paths and read useParams from react-router-dom-v5-compat (v5 useParams returns {} as a v6 descendant). Tests remount these under the real v6 parent route. This removes the last <Switch> from main, unblocking the eventual react-router-dom-v5-compat bridge removal.
These three files were the only overlap between this PR and the screens/Template RTL conversion (ctrliq#483). Make this PR own them outright: convert them from enzyme to React Testing Library, mounted under the real v6 parent route so useParams resolves :id. ctrliq#483 drops these three so the two PRs become independently mergeable in either order, with all three landing as RTL.
blaipr
added a commit
to blaipr/ascender
that referenced
this pull request
Jun 17, 2026
Templates.test.js, Template.test.js and WorkflowJobTemplate.test.js are the only files this PR shared with ctrliq#484 (Templates route tree -> v6). ctrliq#484 now owns and RTL-converts those three (mounted for v6). Revert them here so the two PRs touch disjoint files and are independently mergeable in either order; this PR still converts the rest of screens/Template to RTL.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR completes the react-router v6 migration for the Templates route subtree by replacing the remaining v5 <Switch>/absolute-path routing with v6 <Routes> and relative child routes, aligning behavior with the v6 App.js parent mount at /templates/*.
Changes:
- Convert
Templates.jsto v6-style<Routes>with relative paths and an index route for the list view. - Update
Template.jsandWorkflowJobTemplate.jsto use relative nested routes anduseParamsfromreact-router-dom-v5-compatso:idresolves correctly as v6 descendants. - Rework affected test suites to mount components under the real v6 parent route using RTL helpers so params and nested routing resolve as in the app.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| awx/ui/src/screens/Template/Templates.js | Switches Templates subtree routing from v5 <Switch> to v6 <Routes> with relative child routes. |
| awx/ui/src/screens/Template/Template.js | Makes Template detail tab routes relative and updates param sourcing for v6-descendant correctness. |
| awx/ui/src/screens/Template/WorkflowJobTemplate.js | Makes WorkflowJobTemplate tab routes relative and updates param sourcing for v6-descendant correctness. |
| awx/ui/src/screens/Template/Templates.test.js | Updates the Templates smoke test to mount under /templates/* using RTL contexts. |
| awx/ui/src/screens/Template/Template.test.js | Updates Template tests to mount under the v6 parent route and use RTL assertions. |
| awx/ui/src/screens/Template/WorkflowJobTemplate.test.js | Updates WorkflowJobTemplate tests to mount under the v6 parent route and use RTL assertions. |
Comment on lines
+82
to
+92
| <Route | ||
| index | ||
| element={ | ||
| <PageSection> | ||
| <PersistentFilters pageKey="templates"> | ||
| <TemplateList /> | ||
| </PersistentFilters> | ||
| </PageSection> | ||
| } | ||
| /> | ||
| </Routes> |
Comment on lines
+23
to
+34
| function renderTemplate(entry = '/templates/job_template/1/foobar') { | ||
| const history = createMemoryHistory({ initialEntries: [entry] }); | ||
| return renderWithContexts( | ||
| <Routes> | ||
| <Route | ||
| path="/templates/job_template/:id/*" | ||
| element={<Template setBreadcrumb={() => {}} me={mockMe} />} | ||
| /> | ||
| </Routes>, | ||
| { context: { router: { history } } } | ||
| ); | ||
| } |
Comment on lines
+25
to
+36
| function renderWFJT(entry = '/templates/workflow_job_template/1/foobar', me = mockMe) { | ||
| const history = createMemoryHistory({ initialEntries: [entry] }); | ||
| return renderWithContexts( | ||
| <Routes> | ||
| <Route | ||
| path="/templates/workflow_job_template/:id/*" | ||
| element={<WorkflowJobTemplate setBreadcrumb={() => {}} me={me} />} | ||
| /> | ||
| </Routes>, | ||
| { context: { router: { history } } } | ||
| ); | ||
| } |
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
Converts the
Templatesroute tree to react-router v6, which removes the last<Switch>left on main.Now that App.js is v6 (#425), it mounts
Templatesas a descendant at/templates/*.Templates.jswas still a v5-compat<Switch>with absolute paths, kept that way deliberately while the rest of the migration landed. It kept working because<Switch>prefix-matches the full path, but it has to become v6<Routes>before thereact-router-dom-v5-compatbridge can be removed.What changed:
Templates.js:<Switch>becomes<Routes>with relative children (job_template/add,workflow_job_template/add,job_template/:id/*,workflow_job_template/:id/*, and an index route for the list).Template.jsandWorkflowJobTemplate.js: their internal<Routes>move to relative paths (dropping the:templateType/:id/prefix that assumed a/templatesbase), anduseParamsnow comes fromreact-router-dom-v5-compat. A v5useParamsreturns{}for a v6 descendant, which would have made the template id come through asundefined.useParamsresolves the id, matching howTemplates.jsmounts them.ISSUE TYPE
COMPONENT NAME
ASCENDER VERSION
ADDITIONAL INFORMATION
Verified locally:
npm --prefix awx/ui run testfor the four Template suites: 23 of 23 tests pass. ESLint clean on the three production files./api/v2/.../undefined/...requests. The one 4xx seen was/api/v2/projects/null/on a job template whoseprojectfield is genuinely null, which is a property of that template's edit form and not related to routing. Re-running edit on a job template that has a project was clean.