| 75b02039 | 21-Dec-2025 |
Jason Westover <jwestover@nvidia.com> |
Migrate Vuelidate from v1 to v2 API
Complete the migration from Vuelidate v1 (vuelidate 0.7.7) to v2 (@vuelidate/core 2.0.3 and @vuelidate/validators 2.0.4).
Changes include: - Replace imports from
Migrate Vuelidate from v1 to v2 API
Complete the migration from Vuelidate v1 (vuelidate 0.7.7) to v2 (@vuelidate/core 2.0.3 and @vuelidate/validators 2.0.4).
Changes include: - Replace imports from 'vuelidate/lib/validators' with '@vuelidate/validators' - Convert static 'validations:' objects to 'validations()' methods which return the validation rules object - Update helpers.regex() syntax from v1 two-arg format helpers.regex('name', pattern) to v2 single-arg helpers.regex(pattern) - Create custom macAddress validator using regex since macAddress is not included in @vuelidate/validators v2 - Remove deprecated vuelidate 0.7.7 package from dependencies - Add unit tests for Vuelidate v2 migration verification - Fix DateTime store to continue with DateTime update even if NTP settings update fails - Fix Network Table components (IPv4, IPv6, DNS) missing @ok event handlers for Add modal dialogs - Fix CSR country dropdown by restoring COUNTRY_LIST data and moving useI18n() call to setup() function - Fix disconnected modals in Network page by using eventBus to communicate between child components and parent (hostname, MAC address, default gateway edit buttons)
Tested: - npm run build completes successfully - npm run test:unit passes 66 new Vuelidate validation tests: - VuelidateMixin.spec.js: getValidationState method tests - TableDateFilter.spec.js: Date range validation tests - ModalHostname.spec.js: Hostname validation tests - ModalMacAddress.spec.js: MAC address validation tests - ModalUser.spec.js: User form validation tests - Manual testing performed: - User Management: Create/edit user with password confirmation - LDAP: Enable/disable with conditional field requirements - Date/Time: Switch between NTP and manual modes - Factory Reset: Confirm checkbox validation when server is on - Network Settings: Add IPv4, IPv6, DNS addresses via modals - Network Settings: Edit hostname, MAC address, default gateway - Certificates: Generate CSR with country dropdown working
Change-Id: I0f6b5d89d1791b36977f1a3c16cbd10bca6a484a Signed-off-by: Jason Westover <jwestover@nvidia.com>
show more ...
|
| 741a3f30 | 11-Dec-2025 |
Jason Westover <jwestover@nvidia.com> |
Fix Vue 3 v-model and form event handling
Add proper Vue 3 v-model support to components that are used with v-model bindings from parent components:
- FormFile: Add modelValue prop with computed ge
Fix Vue 3 v-model and form event handling
Add proper Vue 3 v-model support to components that are used with v-model bindings from parent components:
- FormFile: Add modelValue prop with computed getter/setter, emit both update:modelValue and input events for backward compatibility, maintain internal state when parent uses @input instead of v-model
- Modal components: Add modelValue prop and isModalVisible computed property for proper two-way binding with bootstrap-vue-next
Fix form validation event handling by changing @input to @change for select, radio, and checkbox elements. In Vue 3 with bootstrap-vue-next, these elements do not fire @input correctly on first selection.
Components updated: - FormFile.vue - ModalConfigureConnection.vue - ModalAddDestination.vue - ModalUser.vue - ModalSettings.vue - ModalAddRoleGroup.vue - FirmwareModalUpdateFirmware.vue - FactoryResetModal.vue - ModalGenerateCsr.vue - ModalUploadCertificate.vue - DumpsModalConfirmation.vue
Change-Id: Ib7376fdff8e9ab5e764f5fae80ac05a761b70312 Signed-off-by: Jason Westover <jwestover@nvidia.com>
show more ...
|
| d36ac8a8 | 03-Nov-2025 |
jason westover <jwestover@nvidia.com> |
Migrate to Bootstrap 5 and remove Vue compat plugin
Complete migration from Bootstrap 4 (bootstrap-vue) to Bootstrap 5 (bootstrap-vue-next) and remove the @vue/compat plugin to finalize the Vue 3 mi
Migrate to Bootstrap 5 and remove Vue compat plugin
Complete migration from Bootstrap 4 (bootstrap-vue) to Bootstrap 5 (bootstrap-vue-next) and remove the @vue/compat plugin to finalize the Vue 3 migration.
Bundle size impact: - Before (Bootstrap 4 + bootstrap-vue): 535 KiB gzipped - After (Bootstrap 5 + bootstrap-vue-next): 511 KiB gzipped - Reduction: 24 KiB (4.5% smaller)
Package updates: - Update bootstrap 4.6.2 -> 5.3.8 - Update bootstrap-vue 2.23.1 -> bootstrap-vue-next 0.40.8 - Remove @vue/compat plugin - Update vue 3.4.29 -> 3.5.24 and related packages - Add mitt 3.0.1 for global event bus - Add vue-demi 0.14.10 for library compatibility
Bootstrap 5 CSS updates: - Replace directional classes: ml/mr/pl/pr -> ms/me/ps/pe - Replace text-left/right -> text-start/end - Replace sr-only -> visually-hidden / visually-hidden-focusable - Update media breakpoint xs -> sm (Bootstrap 5 removed xs) - Update color functions: gray("700") -> $gray-700 - Add form-switch border-radius for curved toggles - Update alert, table, toast, form, and button styles
Bootstrap-Vue-Next API changes: - Use createBootstrap() for plugin registration - Update modal footer slots: #modal-footer -> #footer - Fix form select events: @change -> @update:model-value - Add v-model bindings to modals instead of manual show()/hide() - Update toast system with custom plugin wrapping useToast() - Register components and directives explicitly
Vue 3 specific updates: - Replace $root.$emit with mitt event bus (eventBus.js) - Update render function from h(App) to createApp(App) - Add emits option to components - Use h() instead of $createElement in mixins - Add Vue 3 compile-time feature flags with documentation - Update event listeners: $on/$off to eventBus methods - Add beforeUnmount cleanup for event listeners
New components and significant additions: - src/plugins/toast.js - Custom toast plugin wrapping useToast() for Options API compatibility - src/components/Global/ConfirmModal.vue - Global confirmation dialog shim to replace Bootstrap 4's removed bvModal.msgBoxConfirm - src/eventBus.js - mitt-based event bus with Vue 2-compatible API - Navigation state preservation on page refresh implemented
Critical fixes: - Add global API interceptor to strip Vue reactivity from payloads - Preserve binary data (File, Blob, FormData) in API requests - Fix Generate CSR modal v-model binding for proper open/close - Remove debug logging and fix jest configuration - Fix responsive text visibility in AppHeader - Update BVTableSelectableMixin for proper row selection - Fix BVToastMixin VNode rendering for Vue 3
Vue 3 modal fixes (lazy-loaded components): - Add v-model support to network modals (ModalIpv4, ModalIpv6, ModalDns, ModalHostname, ModalMacAddress, ModalDefaultGateway) by adding modelValue prop, watcher on modelValue that triggers show(), and update:modelValue emit in resetForm - Remove lazy loading from TableIpv4, TableIpv6, TableDns to ensure modal component refs are available when v-model triggers - Fix modal title accessibility by adding title prop to modals (ModalAddDestination, ModalUser, ModalAddRoleGroup, etc.)
i18n fixes (computed properties): - Fix computed properties using i18n translations in ModalAddRoleGroup, ModalUser, and ModalUploadCertificate - Move useI18n() call from data() to setup() and return i18n object - Use i18n.t() instead of $t in computed properties and templates - Prevents "this.$t is not a function" and "_ctx.$t is not a function" errors in Vue 3
Toast notification fixes: - Fix toast progress bar visibility by setting progressProps to undefined (documented way to opt-out) instead of false - Change modelValue prop to interval for auto-dismiss timing - Remove temporary CSS display:none hack from _toasts.scss
Network settings fixes: - Fix checkbox @change event sending Vue reactive proxy object instead of boolean by casting with !! operator in changeDomainNameState and related methods in NetworkGlobalSettings.vue - Ensures API receives plain boolean values in PATCH requests
Navigation fixes: - Fix nav-link styling for navigation items without children by replacing b-nav-item with router-link in AppNavigation.vue - Prevents blue font color from .nav-link CSS class
Configuration updates: - Remove vue-compat webpack configuration - Add Vue 3 feature flags (__VUE_OPTIONS_API__, etc.) - Add .cursor to .gitignore
Accessibility improvements: - Add autocomplete attributes to password and credential inputs - Add modal title props for screen reader support
Build completes successfully and UI behavior matches pre-migration.
Extracted features (to be submitted in follow-up PRs): The following features were removed from this migration PR to keep it focused on the Bootstrap 5 upgrade. They will be submitted separately: 1. UnresponsiveModal - Server connectivity watchdog with auto-retry 2. Auth token persistence - sessionStorage support for X-Auth-Token 3. Hardware store error handling - try/catch, dynamic discovery 4. Login page connecting indicator - Backend polling with spinner 5. Test updates - Jest setup and snapshot updates for Bootstrap-Vue-Next 6. Documentation updates - Vue 3 and Vue I18n v9+ API documentation 7. Enhanced ConfirmModal - Feature-rich confirmation dialog with custom actions
Change-Id: Ib76a58f324b3c926cf536e6e4626e4271639de38 Signed-off-by: Jason Westover <jwestover@nvidia.com>
show more ...
|