BMC/OpenBmc/webui-vue.git/docs, branch master

Fix spelling mistakes using codespell

2026-02-24T09:08:33+00:00

Change-Id: Iefb20fbf212f11d104aa1cff4f050e9ce6c60200 Signed-off-by: George Liu

Migrate unit tests from Jest to Vitest

2026-01-23T20:01:27+00:00

Replace Jest test runner with Vitest for native ES modules support and faster test execution. This migration aligns the test tooling with the Vite build system and eliminates CommonJS compatibility issues. Why Vitest over Jest? While Jest is a mature ecosystem with broader adoption (45.5k GitHub stars vs Vitest's 15.7k), Vitest is the recommended testing framework for Vue 3 + Vite projects: 1. **Native ESM Support**: Vitest runs tests directly as ESM without transformation, while Jest requires Babel/transformation layers that add complexity and slow down test execution. 2. **Vite Integration**: Shares the same configuration, plugins, and resolvers as the Vite build system. This eliminates the dual-config maintenance burden (vite.config.js + jest.config.js). 3. **Vue 3 Ecosystem Alignment**: Vitest is created by the Vue team and is the official recommendation in Vue 3 documentation. It has first-class Vue component testing support via @vue/test-utils. 4. **Performance**: Cold start is significantly faster due to Vite's on-demand compilation. HMR for tests provides instant feedback during test-driven development. 5. **API Compatibility**: Vitest intentionally matches Jest's API, making migration straightforward and allowing developers to leverage existing Jest knowledge. ESLint 9 Upgrade: - Upgrade ESLint from 8.57.1 to 9.18.0 - Migrate from .eslintrc.cjs to eslint.config.js (flat config) - Upgrade eslint-plugin-vue from 9.2.0 to 10.0.0 - Replace eslint-plugin-vitest with @vitest/eslint-plugin@1.1.43 - Replace @vue/eslint-config-prettier with eslint-config-prettier - Add globals package for flat config environment definitions - Update lint-staged from 13.0.3 to 16.0.0 - Update prettier from 3.2.5 to 3.4.2 - Disable stricter vue rules for follow-up PR: vue/no-reserved-component-names, vue/no-unused-components, vue/no-deprecated-delete-set, vue/no-required-prop-with-default Pre-commit Hooks: - Add simple-git-hooks and lint-staged for automatic linting - Run eslint --fix on JS/Vue files before commit - Run prettier --write on markdown files before commit - Add .prettierrc.yaml matching CI configuration - Include .cjs/.mjs files in prettier JS override Documentation: - Update unit testing guide for Vitest - Update coding standards with pre-commit hook details References: - Vitest official comparison: https://vitest.dev/guide/comparisons.html#jest - Vue 3 testing guide: https://vuejs.org/guide/scaling-up/testing.html#unit-testing - Vite ecosystem recommendations: https://vitejs.dev/guide/features.html#testing Test Results: - 19 test files, 123 tests passing - No warnings or deprecation messages - Test execution: ~3.1s (on par with Jest) Changes: - Replace jest.config.js with Vitest config in vite.config.js - Create tests/vitest.setup.js with Vitest-compatible mocks - Update package.json scripts for Vitest - Add vue3-snapshot-serializer for cleaner snapshots - Use happy-dom and real i18n instance for faster tests Dependency Updates: - Remove @vue/cli-plugin-unit-jest, @vue/vue3-jest, babel-jest, jest - Add vitest, @vitest/coverage-v8, jsdom, happy-dom, vue3-snapshot-serializer Test File Migrations: - Replace jest.fn() with vi.fn() - Replace jest.spyOn() with vi.spyOn() - Replace jest.mock() with vi.mock() - Replace jest.resetModules() with vi.resetModules() - Replace jest.unmock() with vi.unmock() - Replace require() with dynamic import() for ESM compatibility - Add explicit Vitest imports (vi, describe, it, expect, etc.) Snapshot Improvements: - Use vue3-snapshot-serializer to strip data-v-* scoped style attributes from snapshots for cleaner, more stable output - Add SVG component stubs for logo assets to avoid verbose path data in snapshots (logo-header.svg, login-company-logo.svg, built-on-openbmc-logo.svg) - Updated all snapshot files for Vitest format - Removed obsolete Jest snapshot entries Performance Optimizations: - Use happy-dom instead of jsdom (17% faster environment setup) - Use real i18n instance instead of mock (eliminates redundant dynamic imports, 55% faster test execution) Tested: - npm run test:unit runs 19 test files, 123 tests, and passed them all with 0 warnings. Change-Id: Iaf04335db54a5ceeff09bcd43675a488828dc44f Signed-off-by: Jason Westover

Migrate build system from Vue-CLI to Vite

2026-01-20T00:21:36+00:00

"Vue CLI is in Maintenance Mode!" https://cli.vuejs.org/ Vite is created by Vue's creator and is the recommended build tool for Vue 3. It supports most of the configured conventions in Vue CLI. Dev Server startup is 60X faster and HMR is noticeably faster ~50ms. Better Tree-shaking support and modern ESM support. This migration preserves all existing functionality while eliminating Vue 2 legacy dependencies. Build Output Comparison (gzipped): Master (Webpack) Vite Delta CSS: 39 KB 45 KB +6 KB (+15%) JS: 505 KB 483 KB -22 KB (-4.4%) Total dist: 556 KB 544 KB -12 KB (-2.2%) Build time: ~29s ~7s ~4x faster Build System Changes: - Replace vue.config.js with vite.config.js - Remove babel.config.js (Vite uses esbuild) - Remove postcss.config.js (Vite handles PostCSS internally) - Add index.html to project root with ESM module entry point - Add custom Vite plugin for directory import resolution - Rename .eslintrc.js to .eslintrc.cjs (ESM compatibility) Dependency Updates: - Remove @vue/cli-* packages and webpack-related dependencies - Add vite, @vitejs/plugin-vue, @vitejs/plugin-basic-ssl - Add vite-svg-loader, vite-plugin-compression - Upgrade Bootstrap to 5.3.8 - Upgrade Sass to 1.97.2 (supports quietDeps option) - Upgrade xterm to @xterm/xterm v6 (new package name) - Upgrade xterm-addon-* to @xterm/addon-* packages - Upgrade vue-i18n to v11 - Upgrade eslint to 8.57.1 - Upgrade axios-cache-interceptor to latest Environment Variable Migration: - Change VUE_APP_* prefix to VITE_* (Vite convention) - Replace process.env with import.meta.env in source files - Update .env.ibm, .env.intel example files - Update documentation with new variable names ESM Module Compatibility: - Replace require('@/eventBus') with ESM imports (~23 files) - Ensure event bus listeners are registered/unregistered with stable handler references to prevent leaks - Replace require.context with import.meta.glob in i18n.js - Convert SVG inline loader to vite-svg-loader component imports SCSS/Sass Updates: - Remove tilde (~) prefix from node_modules imports - Add silenceDeprecations and quietDeps for Bootstrap warnings - Fix color() function syntax for Sass 2.0 compatibility xterm.js v6 Migration: - Update imports to @xterm/xterm, @xterm/addon-attach, @xterm/addon-fit - Replace deprecated setOption() with constructor options - Add CSS fix for helper textarea visibility Dev Server: - Configure HTTPS with @vitejs/plugin-basic-ssl - Preserve proxy configuration for BMC backend - Add WebSocket proxy auth token forwarding for /console, /kvm, /vm - Configure HMR on separate WebSocket path (/ws_hmr) X-Auth-Token Persistence (opt-in): - Add VITE_STORE_SESSION env flag for non-cookie auth backends - Persist X-Auth-Token to session cookie when enabled - Enables direct browser navigation to Redfish endpoints Follow-on: CI/testing updates (unit test runner + run-ci alignment) Some Jest config changes skipped here since this follow-on commit switches to Vitest. follow-up change is here: https://gerrit.openbmc.org/c/openbmc/webui-vue/+/86511 Tested: Sanity tested most navigational screens in the default UI, including many different types of API calls. Tested most build options. Tested the new i18n:report and it is working correctly. Change-Id: Ie84d1ed6121ffe7d2ddb379084d833b8d5a6fccf Signed-off-by: Jason Westover

Document all the Vue App environmental settings

2025-12-02T16:44:09+00:00

List all the vue app/env flags and add oneline description Fixes https://github.com/openbmc/webui-vue/issues/75 Change-Id: I0133645297588784f6589b234ad8ac1e0814e782 Signed-off-by: Hariharan Rangasamy

Add i18n vendor overlays and dynamic bundling

2025-08-22T11:41:39+00:00

- Add opt-in vendor overlays under src/env/locales/ (and optional variant), merged on top of base locales at runtime. - Auto-discover and bundle all base locale JSON files in src/locales/. - Example: move dump type labels under pageDumps.dumpTypes; read vendor-only dump labels from overlays. - Docs: update i18n guidelines and env README (formatting fixes). - Tests: add focused unit tests for overlays and locale aliases. Tested: - Unit: i18n.locale-alias.spec.js, i18n.vendor.spec.js (passing) - Manual: Verified dynamic locale discovery and overlay merge in UI Change-Id: I8eae2bfec0e9622bafdafac3168dbf96650e8ae8 Signed-off-by: jason westover

markdownlint: fixes

2025-06-12T17:10:20+00:00

Signed-off-by: Patrick Williams Change-Id: I5d07d550b9c483de6c4d5f64570ea8336564297a

i18n: fix global method in page-title guide

2025-05-01T20:19:19+00:00

The change from i18n.t method to i18n.global.t for vue3 support was missed in the page-title guide. I found this on the Intel router and am pushing this for completeness. Change-Id: I97c993e36caa07af6df7c1ae3124e4f9380c493b Signed-off-by: Jason M. Bills

Focus default action in modal windows

2024-04-18T16:45:03+00:00

Users of common WIMP GUIs (as opposed to interfaces primarily meant for touch input) expect dialog boxes to have keyboard focus set on the button for default action so that it can be executed by a single key press. Usually that is chosen to proceed with the operation but in cases where that leads to data loss the UI designers often pre-select Cancel as a precaution. This patch adds suitable property to all invocations of msgBoxConfirm() method of `this.$bvModal` BootstrapVue object. For regular actions the confirmation button is selected and can be activated by Enter or Space bar. For actions deemed dangerous Cancel is focused instead so it takes two key presses (first being Tab to shift the focus) to prooceed. This also improves accessibility following the Web Content Accessibility Guidelines (WCAG) published by W3C. Tested: manually verified that modals are consistently shown with the specified button focused, Enter and Space bar key presses produce the same effect as left pointer button click: when Cancel is focused it just closes the window, when OK is focused it sends the corresponding request to the Redfish endpoint. Change-Id: I66bfd02e48e08dc18994b11bbdd5d6b3ea27047f Signed-off-by: Paul Fertser

Fix CI fail

2023-07-11T15:02:33+00:00

Looks like a new bump of the tools caught us. Saw this fail on https://gerrit.openbmc.org/c/openbmc/webui-vue/+/63442 Fails like: ``` diff --git a/docs/guide/components/page-section/index.md b/docs/guide/components/page-section/index.md index 94113c5..a37d67c 100644 --- a/docs/guide/components/page-section/index.md +++ b/docs/guide/components/page-section/index.md @@ -6,7 +6,7 @@ string will be rendered in an `h2` header element. ```vue // Example: `src/views/AccessControl/Ldap/Ldap.vue` - + ``` ``` Change-Id: I1ada18a09050c5fbcc773a28ef20b8af1b7e84e4 Signed-off-by: Gunnar Mills

prettier: re-format

2022-12-08T12:13:13+00:00

Prettier is enabled in openbmc-build-scripts on Markdown, JSON, and YAML files to have consistent formatting for these file types. Re-run the formatter on the whole repository. Change-Id: I2804ee3ab5ff6bcbf986b028db2fafec8e616779 Signed-off-by: Patrick Williams