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/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 45a95f5..aa8598b 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -5,32 +5,47 @@
<b-nav vertical class="mb-4">
<template v-for="navItem in navigationItems">
<!-- Navigation items with no children -->
- <b-nav-item
+ <li
v-if="!navItem.children"
- :key="navItem.index"
- :to="navItem.route"
- :data-test-id="`nav-item-${navItem.id}`"
+ :key="`nav-${navItem.index}`"
+ class="nav-item"
>
- <component :is="navItem.icon" />
- {{ navItem.label }}
- </b-nav-item>
+ <router-link
+ :to="navItem.route"
+ :data-test-id="`nav-item-${navItem.id}`"
+ class="nav-link"
+ >
+ <component :is="navItem.icon" />
+ {{ navItem.label }}
+ </router-link>
+ </li>
<!-- Navigation items with children -->
- <li v-else :key="navItem.index" class="nav-item">
+ <li v-else :key="`nav-group-${navItem.index}`" class="nav-item">
<b-button
- v-b-toggle="`${navItem.id}`"
+ :class="{ collapsed: !isItemOpen(navItem.id) }"
variant="link"
:data-test-id="`nav-button-${navItem.id}`"
+ :aria-controls="navItem.id"
+ :aria-expanded="isItemOpen(navItem.id) ? 'true' : 'false'"
+ @click="toggleCollapse(navItem.id)"
>
<component :is="navItem.icon" />
{{ navItem.label }}
<icon-expand class="icon-expand" />
</b-button>
- <b-collapse :id="navItem.id" tag="ul" class="nav-item__nav">
- <li class="nav-item">
+ <b-collapse
+ :id="navItem.id"
+ v-model="openSections[navItem.id]"
+ tag="ul"
+ class="nav-item__nav"
+ >
+ <li
+ v-for="(subNavItem, i) in filteredNavItem(navItem.children)"
+ :key="i"
+ class="nav-item"
+ >
<router-link
- v-for="(subNavItem, i) of filteredNavItem(navItem.children)"
- :key="i"
:to="subNavItem.route"
:data-test-id="`nav-item-${subNavItem.id}`"
class="nav-link"
@@ -70,21 +85,50 @@
$t: useI18n().t,
isNavigationOpen: false,
currentUserRole: null,
+ openSections: {},
};
},
watch: {
$route: function () {
this.isNavigationOpen = false;
+ // Ensure the parent section of the current route is expanded
+ this.initializeOpenSectionsFromRoute();
},
isNavigationOpen: function (isNavigationOpen) {
- this.$root.$emit('change-is-navigation-open', isNavigationOpen);
+ require('@/eventBus').default.$emit(
+ 'change-is-navigation-open',
+ isNavigationOpen,
+ );
},
},
mounted() {
this.getPrivilege();
- this.$root.$on('toggle-navigation', () => this.toggleIsOpen());
+ require('@/eventBus').default.$on('toggle-navigation', () =>
+ this.toggleIsOpen(),
+ );
+ // Expand the parent section for the current route on initial load/refresh
+ this.initializeOpenSectionsFromRoute();
+ },
+ beforeUnmount() {
+ require('@/eventBus').default.$off(
+ 'toggle-navigation',
+ this.handleToggleNavigation,
+ );
},
methods: {
+ isItemOpen(id) {
+ return !!this.openSections[id];
+ },
+ toggleCollapse(id) {
+ if (this.$set) {
+ this.$set(this.openSections, id, !this.openSections[id]);
+ } else {
+ this.openSections = {
+ ...this.openSections,
+ [id]: !this.openSections[id],
+ };
+ }
+ },
toggleIsOpen() {
this.isNavigationOpen = !this.isNavigationOpen;
},
@@ -99,6 +143,20 @@
});
} else return navItem;
},
+ initializeOpenSectionsFromRoute() {
+ const currentPath = this.$route?.path;
+ if (!currentPath) return;
+ const sectionsToOpen = {};
+ for (const item of this.navigationItems) {
+ if (
+ item.children &&
+ item.children.some((child) => child.route === currentPath)
+ ) {
+ sectionsToOpen[item.id] = true;
+ }
+ }
+ this.openSections = { ...this.openSections, ...sectionsToOpen };
+ },
},
};
</script>
@@ -108,15 +166,15 @@
fill: currentColor;
height: 1.2rem;
width: 1.2rem;
- margin-left: 0 !important; //!important overriding button specificity
+ margin-inline-start: 0 !important; //!important overriding button specificity
vertical-align: text-bottom;
&:not(.icon-expand) {
- margin-right: $spacer;
+ margin-inline-end: $spacer;
}
}
.nav {
- padding-top: $spacer / 4;
+ padding-top: calc(#{$spacer} / 4);
@include media-breakpoint-up($responsive-layout-bp) {
padding-top: $spacer;
}
@@ -124,15 +182,16 @@
.nav-item__nav {
list-style: none;
- padding-left: 0;
- margin-left: 0;
+ padding-inline-start: 0;
+ margin-inline-start: 0;
.nav-item {
outline: none;
+ list-style: none;
}
.nav-link {
- padding-left: $spacer * 4;
+ padding-inline-start: $spacer * 4;
outline: none;
&:not(.nav-link--current) {
@@ -144,7 +203,7 @@
.btn-link {
display: inline-block;
width: 100%;
- text-align: left;
+ text-align: start;
text-decoration: none !important;
border-radius: 0;
@@ -156,16 +215,16 @@
}
.icon-expand {
- float: right;
- margin-top: $spacer / 4;
+ float: inline-end;
+ margin-top: calc(#{$spacer} / 4);
}
.btn-link,
.nav-link {
position: relative;
font-weight: $headings-font-weight;
- padding-left: $spacer; // defining consistent padding for links and buttons
- padding-right: $spacer;
+ padding-inline-start: $spacer; // defining consistent padding for links and buttons
+ padding-inline-end: $spacer;
color: theme-color('secondary');
&:hover {
@@ -198,7 +257,7 @@
position: absolute;
top: 0;
bottom: 0;
- left: 0;
+ inset-inline-start: 0;
width: 4px;
background-color: theme-color('primary');
}
@@ -221,7 +280,7 @@
background-color: theme-color('light');
transform: translateX(-$navigation-width);
transition: transform $exit-easing--productive $duration--moderate-02;
- border-right: 1px solid theme-color-level('light', 2.85);
+ border-inline-end: 1px solid theme-color-level('light', 2.85);
@include media-breakpoint-down(md) {
z-index: $zindex-fixed + 2;