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/UserManagement.vue b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
index cb057a7..e59ffbc 100644
--- a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
+++ b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
@@ -2,7 +2,7 @@
<b-container fluid="xl">
<page-title />
<b-row>
- <b-col xl="9" class="text-right">
+ <b-col xl="9" class="text-end">
<b-button variant="link" @click="initModalSettings">
<icon-settings />
{{ $t('pageUserManagement.accountPolicySettings') }}
@@ -21,7 +21,9 @@
<b-col xl="9">
<table-toolbar
ref="toolbar"
- :selected-items-count="selectedRows.length"
+ :selected-items-count="
+ Array.isArray(selectedRows) ? selectedRows.length : 0
+ "
:actions="tableToolbarActions"
@clear-selected="clearSelectedRows($refs.table)"
@batch-action="onBatchAction"
@@ -33,6 +35,7 @@
show-empty
no-select-on-click
hover
+ thead-class="table-light"
:busy="isBusy"
:fields="fields"
:items="tableItems"
@@ -45,9 +48,11 @@
v-model="tableHeaderCheckboxModel"
data-test-id="userManagement-checkbox-tableHeaderCheckbox"
:indeterminate="tableHeaderCheckboxIndeterminate"
- @change="onChangeHeaderCheckbox($refs.table)"
+ @change="onChangeHeaderCheckbox($refs.table, $event)"
>
- <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+ <span class="visually-hidden-focusable">
+ {{ $t('global.table.selectAll') }}
+ </span>
</b-form-checkbox>
</template>
<template #cell(checkbox)="row">
@@ -56,7 +61,9 @@
data-test-id="userManagement-checkbox-toggleSelectRow"
@change="toggleSelectRow($refs.table, row.index)"
>
- <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+ <span class="visually-hidden-focusable">
+ {{ $t('global.table.selectItem') }}
+ </span>
</b-form-checkbox>
</template>
@@ -88,22 +95,27 @@
<b-row>
<b-col xl="8">
<b-button
- v-b-toggle.collapse-role-table
data-test-id="userManagement-button-viewPrivilegeRoleDescriptions"
variant="link"
class="mt-3"
+ @click="showRoles = !showRoles"
>
<icon-chevron />
{{ $t('pageUserManagement.viewPrivilegeRoleDescriptions') }}
</b-button>
- <b-collapse id="collapse-role-table" class="mt-3">
+ <b-collapse id="collapse-role-table" :visible="showRoles" class="mt-3">
<table-roles />
</b-collapse>
</b-col>
</b-row>
<!-- Modals -->
- <modal-settings :settings="setting" @ok="saveAccountSettings" />
+ <modal-settings
+ v-model="showSettingsModal"
+ :settings="setting"
+ @ok="saveAccountSettings"
+ />
<modal-user
+ v-model="showUserModal"
:user="activeUser"
:password-requirements="passwordRequirements"
@ok="saveUser"
@@ -135,6 +147,7 @@
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
import { useI18n } from 'vue-i18n';
import i18n from '@/i18n';
+import { useModal } from 'bootstrap-vue-next';
export default {
name: 'UserManagement',
@@ -156,6 +169,10 @@
this.hideLoader();
next();
},
+ setup() {
+ const bvModal = useModal();
+ return { bvModal };
+ },
data() {
return {
$t: useI18n().t,
@@ -181,7 +198,7 @@
{
key: 'actions',
label: '',
- tdClass: 'text-right text-nowrap',
+ tdClass: 'text-end text-nowrap',
},
],
tableToolbarActions: [
@@ -201,6 +218,9 @@
selectedRows: selectedRows,
tableHeaderCheckboxModel: tableHeaderCheckboxModel,
tableHeaderCheckboxIndeterminate: tableHeaderCheckboxIndeterminate,
+ showUserModal: false,
+ showSettingsModal: false,
+ showRoles: false,
};
},
computed: {
@@ -265,30 +285,28 @@
},
initModalUser(user) {
this.activeUser = user;
- this.$bvModal.show('modal-user');
+ this.showUserModal = true;
},
initModalDelete(user) {
- this.$bvModal
- .msgBoxConfirm(
- i18n.global.t('pageUserManagement.modal.deleteConfirmMessage', {
- user: user.username,
- }),
- {
- title: i18n.global.t('pageUserManagement.deleteUser'),
- okTitle: i18n.global.t('pageUserManagement.deleteUser'),
- cancelTitle: i18n.global.t('global.action.cancel'),
- autoFocusButton: 'ok',
- },
- )
- .then((deleteConfirmed) => {
- if (deleteConfirmed) {
- this.deleteUser(user);
- }
- });
+ this.confirmDialog(
+ i18n.global.t('pageUserManagement.modal.deleteConfirmMessage', {
+ user: user.username,
+ }),
+ {
+ title: i18n.global.t('pageUserManagement.deleteUser'),
+ okTitle: i18n.global.t('pageUserManagement.deleteUser'),
+ cancelTitle: i18n.global.t('global.action.cancel'),
+ autoFocusButton: 'ok',
+ },
+ ).then((deleteConfirmed) => {
+ if (deleteConfirmed) {
+ this.deleteUser(user);
+ }
+ });
},
initModalSettings() {
this.setting = this.settings;
- this.$bvModal.show('modal-settings');
+ this.showSettingsModal = true;
},
saveUser({ isNewUser, userData }) {
this.startLoader();
@@ -315,41 +333,34 @@
.finally(() => this.endLoader());
},
onBatchAction(action) {
+ const count = this.selectedRows.length;
switch (action) {
case 'delete':
- this.$bvModal
- .msgBoxConfirm(
- i18n.global.t(
- 'pageUserManagement.modal.batchDeleteConfirmMessage',
- this.selectedRows.length,
- ),
- {
- title: i18n.global.t(
- 'pageUserManagement.deleteUser',
- this.selectedRows.length,
- ),
- okTitle: i18n.global.t(
- 'pageUserManagement.deleteUser',
- this.selectedRows.length,
- ),
- cancelTitle: i18n.global.t('global.action.cancel'),
- autoFocusButton: 'ok',
- },
- )
- .then((deleteConfirmed) => {
- if (deleteConfirmed) {
- this.startLoader();
- this.$store
- .dispatch('userManagement/deleteUsers', this.selectedRows)
- .then((messages) => {
- messages.forEach(({ type, message }) => {
- if (type === 'success') this.successToast(message);
- if (type === 'error') this.errorToast(message);
- });
- })
- .finally(() => this.endLoader());
- }
- });
+ this.confirmDialog(
+ i18n.global.t(
+ 'pageUserManagement.modal.batchDeleteConfirmMessage',
+ count,
+ ),
+ {
+ title: i18n.global.t('pageUserManagement.deleteUser', count),
+ okTitle: i18n.global.t('pageUserManagement.deleteUser', count),
+ cancelTitle: i18n.global.t('global.action.cancel'),
+ autoFocusButton: 'ok',
+ },
+ ).then((deleteConfirmed) => {
+ if (deleteConfirmed) {
+ this.startLoader();
+ this.$store
+ .dispatch('userManagement/deleteUsers', this.selectedRows)
+ .then((messages) => {
+ messages.forEach(({ type, message }) => {
+ if (type === 'success') this.successToast(message);
+ if (type === 'error') this.errorToast(message);
+ });
+ })
+ .finally(() => this.endLoader());
+ }
+ });
break;
case 'enable':
this.startLoader();
@@ -364,42 +375,37 @@
.finally(() => this.endLoader());
break;
case 'disable':
- this.$bvModal
- .msgBoxConfirm(
- i18n.global.t(
- 'pageUserManagement.modal.batchDisableConfirmMessage',
- this.selectedRows.length,
- ),
- {
- title: i18n.global.t(
- 'pageUserManagement.disableUser',
- this.selectedRows.length,
- ),
- okTitle: i18n.global.t(
- 'pageUserManagement.disableUser',
- this.selectedRows.length,
- ),
- cancelTitle: i18n.global.t('global.action.cancel'),
- autoFocusButton: 'ok',
- },
- )
- .then((disableConfirmed) => {
- if (disableConfirmed) {
- this.startLoader();
- this.$store
- .dispatch('userManagement/disableUsers', this.selectedRows)
- .then((messages) => {
- messages.forEach(({ type, message }) => {
- if (type === 'success') this.successToast(message);
- if (type === 'error') this.errorToast(message);
- });
- })
- .finally(() => this.endLoader());
- }
- });
+ this.confirmDialog(
+ i18n.global.t(
+ 'pageUserManagement.modal.batchDisableConfirmMessage',
+ count,
+ ),
+ {
+ title: i18n.global.t('pageUserManagement.disableUser', count),
+ okTitle: i18n.global.t('pageUserManagement.disableUser', count),
+ cancelTitle: i18n.global.t('global.action.cancel'),
+ autoFocusButton: 'ok',
+ },
+ ).then((disableConfirmed) => {
+ if (disableConfirmed) {
+ this.startLoader();
+ this.$store
+ .dispatch('userManagement/disableUsers', this.selectedRows)
+ .then((messages) => {
+ messages.forEach(({ type, message }) => {
+ if (type === 'success') this.successToast(message);
+ if (type === 'error') this.errorToast(message);
+ });
+ })
+ .finally(() => this.endLoader());
+ }
+ });
break;
}
},
+ confirmDialog(message, options = {}) {
+ return this.$confirm({ message, ...options });
+ },
onTableRowAction(action, row) {
switch (action) {
case 'edit':