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>
diff --git a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
index af8903e..e86a2ec 100644
--- a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
+++ b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
@@ -1,13 +1,5 @@
<template>
- <b-modal id="modal-user" ref="modal" @hidden="resetForm">
- <template #modal-title>
- <template v-if="newUser">
- {{ $t('pageUserManagement.addUser') }}
- </template>
- <template v-else>
- {{ $t('pageUserManagement.editUser') }}
- </template>
- </template>
+ <b-modal id="modal-user" ref="modal" :title="modalTitle" @hidden="resetForm">
<b-form id="form-user" novalidate @submit.prevent="handleSubmit">
<b-container>
<!-- Manual unlock form control -->
@@ -15,10 +7,12 @@
<b-col sm="9">
<alert :show="true" variant="warning" small>
<template v-if="!v$.form.manualUnlock.$dirty">
- {{ $t('pageUserManagement.modal.accountLocked') }}
+ {{ i18n.t('pageUserManagement.modal.accountLocked') }}
</template>
<template v-else>
- {{ $t('pageUserManagement.modal.clickSaveToUnlockAccount') }}
+ {{
+ i18n.t('pageUserManagement.modal.clickSaveToUnlockAccount')
+ }}
</template>
</alert>
</b-col>
@@ -34,13 +28,15 @@
data-test-id="userManagement-button-manualUnlock"
@click="v$.form.manualUnlock.$touch()"
>
- {{ $t('pageUserManagement.modal.unlock') }}
+ {{ i18n.t('pageUserManagement.modal.unlock') }}
</b-button>
</b-col>
</b-row>
<b-row>
<b-col>
- <b-form-group :label="$t('pageUserManagement.modal.accountStatus')">
+ <b-form-group
+ :label="i18n.t('pageUserManagement.modal.accountStatus')"
+ >
<b-form-radio
v-model="form.status"
name="user-status"
@@ -48,7 +44,7 @@
data-test-id="userManagement-radioButton-statusEnabled"
@input="v$.form.status.$touch()"
>
- {{ $t('global.status.enabled') }}
+ {{ i18n.t('global.status.enabled') }}
</b-form-radio>
<b-form-radio
v-model="form.status"
@@ -58,18 +54,18 @@
:disabled="!newUser && originalUsername === disabled"
@input="v$.form.status.$touch()"
>
- {{ $t('global.status.disabled') }}
+ {{ i18n.t('global.status.disabled') }}
</b-form-radio>
</b-form-group>
<b-form-group
- :label="$t('pageUserManagement.modal.username')"
+ :label="i18n.t('pageUserManagement.modal.username')"
label-for="username"
>
<b-form-text id="username-help-block">
- {{ $t('pageUserManagement.modal.cannotStartWithANumber') }}
+ {{ i18n.t('pageUserManagement.modal.cannotStartWithANumber') }}
<br />
{{
- $t(
+ i18n.t(
'pageUserManagement.modal.noSpecialCharactersExceptUnderscore',
)
}}
@@ -86,20 +82,23 @@
/>
<b-form-invalid-feedback role="alert">
<template v-if="v$.form.username.required.$invalid">
- {{ $t('global.form.fieldRequired') }}
+ {{ i18n.t('global.form.fieldRequired') }}
</template>
<template v-else-if="v$.form.username.maxLength.$invalid">
{{
- $t('global.form.lengthMustBeBetween', { min: 1, max: 16 })
+ i18n.t('global.form.lengthMustBeBetween', {
+ min: 1,
+ max: 16,
+ })
}}
</template>
<template v-else-if="v$.form.username.pattern.$invalid">
- {{ $t('global.form.invalidFormat') }}
+ {{ i18n.t('global.form.invalidFormat') }}
</template>
</b-form-invalid-feedback>
</b-form-group>
<b-form-group
- :label="$t('pageUserManagement.modal.privilege')"
+ :label="i18n.t('pageUserManagement.modal.privilege')"
label-for="privilege"
>
<b-form-select
@@ -113,25 +112,25 @@
>
<template #first>
<b-form-select-option :value="null" disabled>
- {{ $t('global.form.selectAnOption') }}
+ {{ i18n.t('global.form.selectAnOption') }}
</b-form-select-option>
</template>
</b-form-select>
<b-form-invalid-feedback role="alert">
<template v-if="v$.form.privilege.required.$invalid">
- {{ $t('global.form.fieldRequired') }}
+ {{ i18n.t('global.form.fieldRequired') }}
</template>
</b-form-invalid-feedback>
</b-form-group>
</b-col>
<b-col>
<b-form-group
- :label="$t('pageUserManagement.modal.userPassword')"
+ :label="i18n.t('pageUserManagement.modal.userPassword')"
label-for="password"
>
<b-form-text id="password-help-block">
{{
- $t('pageUserManagement.modal.passwordMustBeBetween', {
+ i18n.t('pageUserManagement.modal.passwordMustBeBetween', {
min: passwordRequirements.minLength,
max: passwordRequirements.maxLength,
})
@@ -142,6 +141,7 @@
id="password"
v-model="form.password"
type="password"
+ autocomplete="new-password"
data-test-id="userManagement-input-password"
aria-describedby="password-help-block"
:state="getValidationState(v$.form.password)"
@@ -150,7 +150,7 @@
/>
<b-form-invalid-feedback role="alert">
<template v-if="v$.form.password.required.$invalid">
- {{ $t('global.form.fieldRequired') }}
+ {{ i18n.t('global.form.fieldRequired') }}
</template>
<template
v-if="
@@ -159,7 +159,7 @@
"
>
{{
- $t('pageUserManagement.modal.passwordMustBeBetween', {
+ i18n.t('pageUserManagement.modal.passwordMustBeBetween', {
min: passwordRequirements.minLength,
max: passwordRequirements.maxLength,
})
@@ -169,7 +169,7 @@
</input-password-toggle>
</b-form-group>
<b-form-group
- :label="$t('pageUserManagement.modal.confirmUserPassword')"
+ :label="i18n.t('pageUserManagement.modal.confirmUserPassword')"
label-for="password-confirmation"
>
<input-password-toggle>
@@ -178,6 +178,7 @@
v-model="form.passwordConfirmation"
data-test-id="userManagement-input-passwordConfirmation"
type="password"
+ autocomplete="new-password"
:state="getValidationState(v$.form.passwordConfirmation)"
class="form-control-with-button"
@input="v$.form.passwordConfirmation.$touch()"
@@ -186,14 +187,14 @@
<template
v-if="v$.form.passwordConfirmation.required.$invalid"
>
- {{ $t('global.form.fieldRequired') }}
+ {{ i18n.t('global.form.fieldRequired') }}
</template>
<template
v-else-if="
v$.form.passwordConfirmation.sameAsPassword.$invalid
"
>
- {{ $t('pageUserManagement.modal.passwordsDoNotMatch') }}
+ {{ i18n.t('pageUserManagement.modal.passwordsDoNotMatch') }}
</template>
</b-form-invalid-feedback>
</input-password-toggle>
@@ -202,13 +203,13 @@
</b-row>
</b-container>
</b-form>
- <template #modal-footer="{ cancel }">
+ <template #footer="{ cancel }">
<b-button
variant="secondary"
data-test-id="userManagement-button-cancel"
@click="cancel()"
>
- {{ $t('global.action.cancel') }}
+ {{ i18n.t('global.action.cancel') }}
</b-button>
<b-button
form="form-user"
@@ -218,10 +219,10 @@
@click="onOk"
>
<template v-if="newUser">
- {{ $t('pageUserManagement.addUser') }}
+ {{ i18n.t('pageUserManagement.addUser') }}
</template>
<template v-else>
- {{ $t('global.action.save') }}
+ {{ i18n.t('global.action.save') }}
</template>
</b-button>
</template>
@@ -258,13 +259,14 @@
},
emits: ['ok', 'hidden'],
setup() {
+ const i18n = useI18n();
return {
v$: useVuelidate(),
+ i18n,
};
},
data() {
return {
- $t: useI18n().t,
originalUsername: '',
form: {
status: true,
@@ -278,6 +280,11 @@
};
},
computed: {
+ modalTitle() {
+ return this.newUser
+ ? this.i18n.t('pageUserManagement.addUser')
+ : this.i18n.t('pageUserManagement.editUser');
+ },
newUser() {
return this.user ? false : true;
},