Summary
This PR migrates the admin-ui build toolchain from Webpack 5 to Vite 8, replacing all Webpack-specific configuration, loaders, and plugins with Vite equivalents. Alongside the build migration, several runtime and dev dependencies are upgraded, ESLint is modernised to flat config, and the Jest test setup is updated to match.
Build Toolchain — Webpack → Vite
Removed:
webpack, webpack-dev-server, @webpack-cli/serve
babel-loader, css-loader, css-minimizer-webpack-plugin, extract-css-chunks-webpack-plugin, mini-css-extract-plugin, postcss-loader, sass-loader
html-webpack-plugin, circular-dependency-plugin, webpack-bundle-analyzer (and their @types/*)
config/webpack.config.client.dev.ts, config/webpack.config.client.prod.ts
config/tsconfig.webpack.json, config/circular-dependency-plugin.d.ts, config/types/
env-config.js, build/cli-tools.js, build/plugin-cli.js
Added:
vite ^8.0.10, @vitejs/plugin-react ^5.0.4, vite-plugin-wasm ^3.6.0
vite.config.ts — path aliases, SCSS, WASM, HMR, and dev proxy configuration
index.html moved to project root (Vite convention); app/index.html removed
app/types/vite-env.d.ts — Vite client type declarations
app/config/site.ts — centralised runtime config (replaces env-config.js)
postcss.config.cjs — standalone PostCSS config
npm scripts updated:
| Before |
After |
webpack serve --config ... |
vite --mode development |
webpack --config ... |
vite build --mode <mode> |
node ./build/plugin-cli.js |
ts-node --files ./build/plugin-cli.ts |
CSS Modules
Three component stylesheets renamed from .scss to .module.scss for Vite CSS Modules compatibility:
AccordionHeader.scss → AccordionHeader.module.scss
Card.scss → Card.module.scss
CardHeader.scss → CardHeader.module.scss
All import sites updated accordingly.
ESLint — v8 Legacy Config → v9 Flat Config
- Removed
.eslintrc.js (legacy format)
- Added
eslint.config.cjs (flat config format)
- Removed
eslint-config-airbnb, @babel/eslint-parser, eslint-plugin-jsx-a11y, eslint-plugin-import, eslint-import-resolver-alias
- Added
@eslint/js ^10.0.1
- Updated
@typescript-eslint/eslint-plugin and @typescript-eslint/parser from ^8.51.0 → ^8.59.1
Test Infrastructure — Jest
__mocks__/fileMock.js → fileMock.ts
__mocks__/styleMock.js → styleMock.ts
- Added
__mocks__/hmr.ts, __mocks__/utilities.ts
babel.config.js → babel.config.cjs; updated presets for Jest/Vite coexistence
jest.config.ts updated: moduleNameMapper for CSS modules and path aliases, setupFilesAfterFramework
__tests__/setup.ts and __tests__/setup-tests.ts updated
- Added
__tests__/orval-mutator.test.ts
- Upgraded:
jest-environment-jsdom ^29 → ^30, babel-jest ^29 → ^30, @types/jest ^29 → ^30, @testing-library/jest-dom ^5 → ^6
Runtime: orval-mutator.ts Rewritten
The orval mutator was a thin Axios wrapper. It now:
- Guards against the
%(hostname)s Python placeholder in window.configApiBaseUrl (fixes TypeError: Invalid URL in Vite dev mode)
- Injects auth headers (
issuer, jans-client, User-inum) via request interceptor using Redux state
- Handles 403 responses: fetches a fresh token, deletes the admin-ui session, then redirects to
/logout
app/redux/api/axios.ts receives the same placeholder guard for the secondary Axios instance.
Dependency Upgrades
| Package |
From |
To |
react-tooltip |
^5.28.0 |
^6.0.0 |
react-error-boundary |
^4.0.3 |
^6.1.1 |
react-i18next |
^14.1.0 |
^17.0.6 |
sass |
~1.67.0 |
^1.70.0 |
@types/node |
^20 |
^25 |
react-error-boundary v6: FallbackProps.error changed from Error to unknown. Updated GluuErrorFallBack.tsx to import FallbackProps from the library and narrow with instanceof Error.
react-tooltip v6: Updated TooltipDesign.tsx prop types (TooltipProps → TooltipContentProps from recharts).
react-i18next v17: No application code changes required — only useTranslation, I18nextProvider, and initReactI18next are used, all of which are stable across v14→v17.
Miscellaneous
app/utilities.tsx — path alias and import cleanup
app/utils/AppAuthProvider.tsx, RouteLoader.tsx, hmr.ts — Vite HMR and lazy-load compatibility
app/utils/hooks/useWebhookDialogAction.tsx — import path fixes
app/utils/regex.ts — added REGEX_PYTHON_PLACEHOLDER used by the mutator guard
plugins/PluginMenuResolver.ts — updated for Vite dynamic import syntax
- All
plugin-metadata.ts files — updated lazy import paths for Vite compatibility
- Various plugin page components — import alias and module resolution updates
Not Included (deferred to follow-up PRs)
- orval v7 → v8: Deferred. Requires
unsafeDisableValidation: true for upstream Janssen spec and type fixes across 8 files. Will be a standalone PR.
- animejs v3 → v4: Deferred. API rewrite across 4 animation helpers. Will be a standalone PR.
- react-router v6 → v7: Significant scope — routing used throughout the app.
- @mui v5 → v9 / @material-table v6 → v7: Blocked on React 19.
Testing
npm run check:all — Lint: PASS, Type check: PASS
npm run build:prod — builds successfully
Summary
This PR migrates the admin-ui build toolchain from Webpack 5 to Vite 8, replacing all Webpack-specific configuration, loaders, and plugins with Vite equivalents. Alongside the build migration, several runtime and dev dependencies are upgraded, ESLint is modernised to flat config, and the Jest test setup is updated to match.
Build Toolchain — Webpack → Vite
Removed:
webpack,webpack-dev-server,@webpack-cli/servebabel-loader,css-loader,css-minimizer-webpack-plugin,extract-css-chunks-webpack-plugin,mini-css-extract-plugin,postcss-loader,sass-loaderhtml-webpack-plugin,circular-dependency-plugin,webpack-bundle-analyzer(and their@types/*)config/webpack.config.client.dev.ts,config/webpack.config.client.prod.tsconfig/tsconfig.webpack.json,config/circular-dependency-plugin.d.ts,config/types/env-config.js,build/cli-tools.js,build/plugin-cli.jsAdded:
vite ^8.0.10,@vitejs/plugin-react ^5.0.4,vite-plugin-wasm ^3.6.0vite.config.ts— path aliases, SCSS, WASM, HMR, and dev proxy configurationindex.htmlmoved to project root (Vite convention);app/index.htmlremovedapp/types/vite-env.d.ts— Vite client type declarationsapp/config/site.ts— centralised runtime config (replacesenv-config.js)postcss.config.cjs— standalone PostCSS confignpm scripts updated:
webpack serve --config ...vite --mode developmentwebpack --config ...vite build --mode <mode>node ./build/plugin-cli.jsts-node --files ./build/plugin-cli.tsCSS Modules
Three component stylesheets renamed from
.scssto.module.scssfor Vite CSS Modules compatibility:AccordionHeader.scss→AccordionHeader.module.scssCard.scss→Card.module.scssCardHeader.scss→CardHeader.module.scssAll import sites updated accordingly.
ESLint — v8 Legacy Config → v9 Flat Config
.eslintrc.js(legacy format)eslint.config.cjs(flat config format)eslint-config-airbnb,@babel/eslint-parser,eslint-plugin-jsx-a11y,eslint-plugin-import,eslint-import-resolver-alias@eslint/js ^10.0.1@typescript-eslint/eslint-pluginand@typescript-eslint/parserfrom^8.51.0→^8.59.1Test Infrastructure — Jest
__mocks__/fileMock.js→fileMock.ts__mocks__/styleMock.js→styleMock.ts__mocks__/hmr.ts,__mocks__/utilities.tsbabel.config.js→babel.config.cjs; updated presets for Jest/Vite coexistencejest.config.tsupdated:moduleNameMapperfor CSS modules and path aliases,setupFilesAfterFramework__tests__/setup.tsand__tests__/setup-tests.tsupdated__tests__/orval-mutator.test.tsjest-environment-jsdom^29→^30,babel-jest^29→^30,@types/jest^29→^30,@testing-library/jest-dom^5→^6Runtime:
orval-mutator.tsRewrittenThe orval mutator was a thin Axios wrapper. It now:
%(hostname)sPython placeholder inwindow.configApiBaseUrl(fixesTypeError: Invalid URLin Vite dev mode)issuer,jans-client,User-inum) via request interceptor using Redux state/logoutapp/redux/api/axios.tsreceives the same placeholder guard for the secondary Axios instance.Dependency Upgrades
react-tooltip^5.28.0^6.0.0react-error-boundary^4.0.3^6.1.1react-i18next^14.1.0^17.0.6sass~1.67.0^1.70.0@types/node^20^25react-error-boundaryv6:FallbackProps.errorchanged fromErrortounknown. UpdatedGluuErrorFallBack.tsxto importFallbackPropsfrom the library and narrow withinstanceof Error.react-tooltipv6: UpdatedTooltipDesign.tsxprop types (TooltipProps→TooltipContentPropsfrom recharts).react-i18nextv17: No application code changes required — onlyuseTranslation,I18nextProvider, andinitReactI18nextare used, all of which are stable across v14→v17.Miscellaneous
app/utilities.tsx— path alias and import cleanupapp/utils/AppAuthProvider.tsx,RouteLoader.tsx,hmr.ts— Vite HMR and lazy-load compatibilityapp/utils/hooks/useWebhookDialogAction.tsx— import path fixesapp/utils/regex.ts— addedREGEX_PYTHON_PLACEHOLDERused by the mutator guardplugins/PluginMenuResolver.ts— updated for Vite dynamic import syntaxplugin-metadata.tsfiles — updated lazy import paths for Vite compatibilityNot Included (deferred to follow-up PRs)
unsafeDisableValidation: truefor upstream Janssen spec and type fixes across 8 files. Will be a standalone PR.Testing
npm run check:all— Lint: PASS, Type check: PASSnpm run build:prod— builds successfully