Skip to content

chore(config-ui): modernize frontend toolchain and framework stack - #9006

Open
DoDiODev wants to merge 3 commits into
apache:mainfrom
DoDiODev:pr/frontend-modernization
Open

chore(config-ui): modernize frontend toolchain and framework stack#9006
DoDiODev wants to merge 3 commits into
apache:mainfrom
DoDiODev:pr/frontend-modernization

Conversation

@DoDiODev

Copy link
Copy Markdown
Contributor

Motivation

Modernizes the config-ui frontend toolchain and framework stack to current
supported versions. This unblocks security updates, removes end-of-life runtimes
and keeps the UI buildable on current Node LTS.

Scope

Coupled framework/runtime upgrade (must land together to keep the build green):

  • Runtime/tooling: Node 18 → 24, Yarn 3.4.1 → 4.17.0 (Corepack, vendored
    release swap, .yarnrc.yml), nginx base image bump in config-ui/Dockerfile.
  • Build/lint chain: Vite 8, TypeScript config update, migration from
    .eslintrc.js/.eslintignore to ESLint flat config (eslint.config.mjs),
    Vitest setup (vitest.config.ts, vitest.setup.ts) replacing the old
    .file-headerrc.
  • UI frameworks: React 18 → 19 and antd 5 → 6, including the resulting
    component/ref/hook fixes and a small miller-columns-select compatibility
    patch (.yarn/patches/...).
  • Tests: new src/__tests__/main-entry.test.ts and
    src/plugins/components/__tests__/miller-columns-select.test.tsx.

All changes are limited to config-ui/.

Note on diff size (please read before reviewing)

The raw diff is 42 files, +6,535 / −6,546 lines, but ~96% of that is
generated or vendored
and requires no line-by-line review:

Artifact ~Lines Nature
yarn.lock ~10,621 generated (Yarn 3→4 lockfile migration)
.yarn/releases/yarn-3.4.1.cjsyarn-4.17.0.cjs −911 / +944 vendored Yarn binary

The actual hand-written review surface is ~700–900 lines across ~40 small
files: package.json (dependency bumps), eslint.config.mjs (+87, new flat
config), vite.config.ts, vitest.config.ts/setup, Dockerfile (+4), the
antd patch (+34), plus ~25 .tsx/.ts files with 2–37 lines each of
React-19/antd-6 ref/hook/type fixes, and two new test files.

git diff --check flags trailing whitespace only in the two generated/vendored
artifacts above (Yarn binary + patch file); this is expected.

Note on the q-dev connection-field changes

Three files under config-ui/src/plugins/register/q-dev/connection-fields/ are
modified (aws-credentials.tsx, identity-center-config.tsx, s3-config.tsx).
These are required by the React 19 upgrade: React 19 removed the zero-argument
useRef overload, so useRef<string>() must become useRef<string>(undefined),
otherwise tsc --noEmit fails. One file (aws-credentials.tsx) additionally
carries two Prettier-only reformatting hunks (parentheses around ??, JSX
line-wrapping) required for a green eslint .. No behavioral changes.

Automated tests

All run on Node 24.18.0 / Yarn 4.17.0:

  • yarn install --immutable → clean (lockfile unchanged)
  • yarn exec tsc --noEmit → pass
  • yarn exec eslint . → pass (0 errors, 17 pre-existing unused-var warnings)
  • yarn build (Vite 8) → pass (1879 modules)
  • yarn test (Vitest) → 4/4 passed

Manual test

Rollback

Revert this single commit; no data migrations or backend coupling involved.

Known follow-ups

  • Chunk-size warning from Vite (bundle > 500 kB) — pre-existing, out of scope.
  • Peer-dependency warnings (React 19 vs. deps still requesting ^18) are benign
    and resolved via the vendored patch / overrides.

Upgrade the config-ui frontend to current supported versions as one coupled
change so the build stays green:

- Node 18 -> 24, Yarn 3.4.1 -> 4.17.0 (Corepack, vendored release, .yarnrc.yml),
  nginx base image bump in config-ui/Dockerfile
- Vite 8, TypeScript config update, ESLint flat config (eslint.config.mjs)
  replacing .eslintrc.js/.eslintignore, Vitest setup replacing .file-headerrc
- React 18 -> 19 and antd 5 -> 6 with the resulting ref/hook/type fixes and a
  miller-columns-select compatibility patch
- Add main-entry and miller-columns-select tests

The q-dev connection-field files are touched only for the mandatory React 19
useRef(undefined) fix and Prettier formatting; no q-dev logic changes.

Verified on Node 24.18.0 / Yarn 4.17.0: install --immutable clean, tsc --noEmit,
eslint . (0 errors), yarn build (Vite 8), yarn test (4/4) all pass.

Signed-off-by: DoDiODev <DoDiDev@proton.me>
@klesh

klesh commented Jul 26, 2026

Copy link
Copy Markdown
Contributor

Thanks for your contribution. Please fix the linting before we can proceed to review the code.

DoDiODev added 2 commits July 27, 2026 14:07
The modernized config-ui toolchain (ESLint 10.5.0) uses util.styleText in
its stylish formatter, which is only available on Node >= 20.12. The lint
workflow still pinned Node 18, causing 'TypeError: util.styleText is not a
function'. Align CI with the volta-pinned Node 24.17.0.
@DoDiODev

Copy link
Copy Markdown
Contributor Author

@klesh should work now

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants