Skip to content

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

Open
DoDiODev wants to merge 1 commit into
apache:mainfrom
DoDiODev:pr/frontend-modernization
Open

chore(config-ui): modernize frontend toolchain and framework stack#9006
DoDiODev wants to merge 1 commit 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>
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.

1 participant