Skip to content

feat(admin-ui): migrate build toolchain from Webpack to Vite with dependency upgrades #2799

@faisalsiddique4400

Description

@faisalsiddique4400

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.scssAccordionHeader.module.scss
  • Card.scssCard.module.scss
  • CardHeader.scssCardHeader.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.jsfileMock.ts
  • __mocks__/styleMock.jsstyleMock.ts
  • Added __mocks__/hmr.ts, __mocks__/utilities.ts
  • babel.config.jsbabel.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 (TooltipPropsTooltipContentProps 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

Metadata

Metadata

Labels

comp-admin-uiComponent affected by issue or PRenhancementNew feature or requestkind-featureIssue or PR is a new feature request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions