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/Settings/Network/Network.vue b/src/views/Settings/Network/Network.vue
index 7a2e014..73118c8 100644
--- a/src/views/Settings/Network/Network.vue
+++ b/src/views/Settings/Network/Network.vue
@@ -4,20 +4,22 @@
<!-- Global settings for all interfaces -->
<network-global-settings />
<!-- Interface tabs -->
- <page-section v-show="ethernetData">
+ <page-section v-if="ethernetData && ethernetData.length">
<b-row>
<b-col>
<b-card no-body>
<b-tabs
- active-nav-item-class="font-weight-bold"
+ :key="tabsRenderKey"
+ v-model:index="tabIndex"
+ active-nav-item-class="fw-bold"
card
content-class="mt-3"
+ :lazy="false"
>
<b-tab
- v-for="(data, index) in ethernetData"
+ v-for="data in ethernetData"
:key="data.Id"
:title="data.Id"
- @click="getTabIndex(index)"
>
<!-- Interface settings -->
<network-interface-settings :tab-index="tabIndex" />
@@ -37,9 +39,18 @@
<modal-ipv4 :default-gateway="defaultGateway" @ok="saveIpv4Address" />
<modal-ipv6 @ok="saveIpv6Address" />
<modal-dns @ok="saveDnsAddress" />
- <modal-hostname :hostname="currentHostname" @ok="saveSettings" />
- <modal-mac-address :mac-address="currentMacAddress" @ok="saveSettings" />
+ <modal-hostname
+ v-model="showHostnameModal"
+ :hostname="currentHostname"
+ @ok="saveSettings"
+ />
+ <modal-mac-address
+ v-model="showMacAddressModal"
+ :mac-address="currentMacAddress"
+ @ok="saveSettings"
+ />
<modal-default-gateway
+ v-model="showDefaultGatewayModal"
:default-gateway="ipv6DefaultGateway"
@ok="saveSettings"
/>
@@ -97,6 +108,11 @@
ipv6DefaultGateway: '',
loading,
tabIndex: 0,
+ tabsReady: false,
+ tabsRenderKey: 0,
+ showHostnameModal: false,
+ showDefaultGatewayModal: false,
+ showMacAddressModal: false,
};
},
computed: {
@@ -106,23 +122,32 @@
ethernetData() {
this.getModalInfo();
},
+ tabIndex(newIndex) {
+ this.$store.dispatch('network/setSelectedTabIndex', newIndex);
+ this.$store.dispatch(
+ 'network/setSelectedTabId',
+ this.ethernetData?.[newIndex]?.Id,
+ );
+ this.getModalInfo();
+ },
},
created() {
this.startLoader();
+ const eventBus = require('@/eventBus').default;
const globalSettings = new Promise((resolve) => {
- this.$root.$on('network-global-settings-complete', () => resolve());
+ eventBus.$once('network-global-settings-complete', resolve);
});
const interfaceSettings = new Promise((resolve) => {
- this.$root.$on('network-interface-settings-complete', () => resolve());
+ eventBus.$once('network-interface-settings-complete', resolve);
});
const networkTableDns = new Promise((resolve) => {
- this.$root.$on('network-table-dns-complete', () => resolve());
+ eventBus.$once('network-table-dns-complete', resolve);
});
const networkTableIpv4 = new Promise((resolve) => {
- this.$root.$on('network-table-ipv4-complete', () => resolve());
+ eventBus.$once('network-table-ipv4-complete', resolve);
});
const networkTableIpv6 = new Promise((resolve) => {
- this.$root.$on('network-table-ipv6-complete', () => resolve());
+ eventBus.$once('network-table-ipv6-complete', resolve);
});
// Combine all child component Promises to indicate
// when page data load complete
@@ -133,28 +158,36 @@
networkTableDns,
networkTableIpv4,
networkTableIpv6,
- ]).finally(() => this.endLoader());
+ ])
+ .then(() => {
+ // ensure first tab is selected and expanded (index 0). Force a change
+ // cycle to trigger BTabs to render the pane content immediately.
+ const count = this.ethernetData?.length || 0;
+ if (count > 0) {
+ // set initial selection directly to index 0
+ this.tabIndex = 0;
+ this.$store.dispatch('network/setSelectedTabIndex', 0);
+ const firstId = this.ethernetData?.[0]?.Id;
+ if (firstId)
+ this.$store.dispatch('network/setSelectedTabId', firstId);
+ this.tabsRenderKey += 1;
+ }
+ })
+ .finally(() => this.endLoader());
},
methods: {
getModalInfo() {
- this.defaultGateway =
- this.$store.getters['network/globalNetworkSettings'][
- this.tabIndex
- ].defaultGateway;
+ const settingsArray =
+ this.$store.getters['network/globalNetworkSettings'];
+ const settings = Array.isArray(settingsArray)
+ ? settingsArray[this.tabIndex]
+ : undefined;
- this.currentHostname =
- this.$store.getters['network/globalNetworkSettings'][
- this.tabIndex
- ].hostname;
-
- this.currentMacAddress =
- this.$store.getters['network/globalNetworkSettings'][
- this.tabIndex
- ].macAddress;
- this.ipv6DefaultGateway =
- this.$store.getters['network/globalNetworkSettings'][
- this.tabIndex
- ].ipv6DefaultGateway;
+ if (!settings) return;
+ this.defaultGateway = settings.defaultGateway;
+ this.currentHostname = settings.hostname;
+ this.currentMacAddress = settings.macAddress;
+ this.ipv6DefaultGateway = settings.ipv6DefaultGateway;
},
getTabIndex(selectedIndex) {
this.tabIndex = selectedIndex;