Path to React 19 / PatternFly 6 for the UI

blaipr

Hi all,

I've put together a roadmap to modernize the Ascender UI, and wanted to share it with the maintainers.

What React is

React is the JavaScript library the Ascender UI is written in, a component model where every screen is a tree of functions that render HTML and re-render when their data changes. Ascender was on 17.0.2 when this thread opened, and main is on 19.2.7 today, staged because each release in between changed how rendering and effects behave.

What PatternFly is

PatternFly is Red Hat's open source design system, and its React implementation supplies the buttons, tables, forms, wizards and page layout the UI is assembled from. Ascender was on @patternfly/react-core 4.278.1, the version AWX picked when it built the classic interface, and main is on 6.5.1 today, rebuilt on CSS design tokens.

The move

Four majors, all in one direction:

react                     17.0.2  ->  19
react-router               5.3.3  ->  7
@patternfly/react-core    4.278.1 ->  6
enzyme                    3.11.0  ->  React Testing Library

Upstream AWX chose to build a brand new interface rather than migrate the classic one. I prefer the classic UI, so this modernizes its components in place: incrementally, in small reviewable PRs that keep main shippable throughout.

The sequence

Some steps parallelize and others are hard blocked, so this is a dependency graph rather than a list:

styled-components 5 to 6
react-router 5 to 6, on the official v5 compat bridge
The route tree finale, <Switch> to <Routes>, screen by screen
Enzyme to React Testing Library, 547 test files
React 17 to 18
PatternFly 4 to 5
PatternFly 5 to 6
react-router 6 to 7
React 18 to 19

The critical path is 4, 5, 6, 7, 9: finish the Enzyme removal, then React 18, then PatternFly 6, then React 19.

Risks I'm tracking

formik, 175 files of forms, has no upgrade lever: 2.4.9, quiet since 2023.
The form heavy screens get validated hard at React 18, where it would break.
PatternFly 4 uses findDOMNode, which React 19 removes. PatternFly 6 lands first.
react-virtualized is dead: @tanstack/react-virtual or react-window replaces it.

Pull requests

Happy to re-sequence to your release cadence. Keeping this UI supported feels worth it to me.

Thanks for building Ascender.

fernandorocagonzalez

Brutal job, any functional feature that we could get from that?

blaipr

fernandorocagonzalez

Thanks! Honestly, most of it is invisible. The whole point is a modernization that keeps main shippable, so there's no big visible features. The real deliverable is a supported stack: maintained versions, the dead deps are gone, and we stop being stuck on things React 17 + PF4 can't do.

That said, a few user-facing wins do fall out of it:

Faster job output: react-virtualized is dead upstream, so replacing it (likely @tanstack/react-virtual) should make the long log views load and scroll noticeably smoother.
Snappier heavy screens: React 18's automatic batching and concurrent rendering help the form-dense and table-dense pages feel quicker.
PatternFly 6: a refreshed design system, better accessibility, and theming/dark mode, so the UI gets a visual lift more or less for free once we land there.

But I'd set expectations as: this is the foundation that makes new features cheap to build.

cigamit

Thanks for all the work you have been doing with this, it certainly is taking some load off my team. We had retooling all this on our roadmap, but it was far into the future as there were a bit more pressing things before that. I will say though, that we were not fond of the new UI in AWX, which is why we didn't immediately go that route. So we will need to see how the design elements changed in PF6 and whether we need to do some corrections once we get there. Most of it can be fixed with some CSS tweaks if I recall, so no big deal, and my team can handle that.

But keep up the good work. It may take me a bit to get everything in, as I have to thoroughly test each and every portion, but it is making it a lot easier with the chunks you are breaking things into.

blaipr

cigamit

Happy to help! ^^

blaipr

Update:

Merged:

✅ styled-components 5 → 6
✅ Lingui 5 → 6
✅ ESLint 8 → 9 (flat config)
✅ dagre → @dagrejs/dagre 3
✅ react-router 5 → 6 (v5-compat bridge)
✅ Enzyme → React Testing Library
✅ Enzyme removal
✅ Route tree (<Switch> → <Routes>)

In review:

⬆️ react-virtualized → @tanstack/react-virtual (PR #489) — just opened.

Up next:

⬆️ react-router-dom-v5-compat → v6 — just the package flip.
⬆️ React 17 → 18 — the next big milestone and critical-path gate.
⬆️ react-router 6 → 7 — after React 18.
⬆️ PatternFly 4 → 5 → 6 — after React 18.
⬆️ React 18 → 19

blaipr

Ascender is on react 18!!

Migrating now to PatternFly 5.

blaipr

PatternFly 5 is in place.

Now, onto PatternFly 6!

blaipr

Done:

✅ PatternFly 6
✅ React 19

Also, react-router 8 was released a couple of weeks ago, so:

✅ react-router 8