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/Global/FormFile.vue b/src/components/Global/FormFile.vue
index c337bf1..57eface 100644
--- a/src/components/Global/FormFile.vue
+++ b/src/components/Global/FormFile.vue
@@ -1,37 +1,39 @@
<template>
<div class="custom-form-file-container">
- <label>
- <b-form-file
- :id="id"
- v-model="file"
- :accept="accept"
- :disabled="disabled"
- :state="state"
- plain
- @input="$emit('input', $event)"
- >
- </b-form-file>
- <span
- class="add-file-btn btn"
- :class="{
- disabled,
- 'btn-secondary': isSecondary,
- 'btn-primary': !isSecondary,
- }"
- >
- {{ $t('global.fileUpload.browseText') }}
- </span>
- <slot name="invalid"></slot>
- </label>
+ <b-form-file
+ :id="id"
+ ref="fileInput"
+ v-model="file"
+ :accept="accept"
+ :disabled="disabled"
+ :state="state"
+ plain
+ @input="$emit('input', $event)"
+ >
+ </b-form-file>
+ <button
+ type="button"
+ class="add-file-btn btn mt-2"
+ :class="{
+ disabled,
+ 'btn-secondary': isSecondary,
+ 'btn-primary': !isSecondary,
+ }"
+ :disabled="disabled"
+ @click="openFilePicker"
+ >
+ {{ $t('global.fileUpload.browseText') }}
+ </button>
+ <slot name="invalid"></slot>
<div v-if="file" class="clear-selected-file px-3 py-2 mt-2">
{{ file ? file.name : '' }}
<b-button
variant="light"
- class="px-2 ml-auto"
+ class="px-2 ms-auto"
:disabled="disabled"
@click="file = null"
><icon-close :title="$t('global.fileUpload.clearSelectedFile')" /><span
- class="sr-only"
+ class="visually-hidden-focusable"
>{{ $t('global.fileUpload.clearSelectedFile') }}</span
>
</b-button>
@@ -40,7 +42,7 @@
</template>
<script>
-import { BFormFile } from 'bootstrap-vue';
+import { BFormFile } from 'bootstrap-vue-next';
import IconClose from '@carbon/icons-vue/es/close/20';
import { useI18n } from 'vue-i18n';
@@ -81,36 +83,48 @@
return this.variant === 'secondary';
},
},
+ methods: {
+ openFilePicker() {
+ // Access the native input element within the BFormFile component
+ const fileInput = document.getElementById(this.id);
+ if (fileInput) {
+ fileInput.click();
+ }
+ },
+ },
};
</script>
<style lang="scss" scoped>
-.form-control-file {
+// Hide the native file input but keep it accessible
+:deep(.form-control),
+:deep(input[type='file']) {
opacity: 0;
height: 0;
- &:focus + span {
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+}
+
+.add-file-btn {
+ &.disabled {
+ border-color: $gray-400;
+ background-color: $gray-400;
+ color: $gray-600;
+ box-shadow: none !important;
+ }
+ &:focus {
box-shadow:
inset 0 0 0 3px theme-color('primary'),
inset 0 0 0 5px $white;
}
}
-// Get mouse pointer on complete element
-.add-file-btn {
- position: relative;
- &.disabled {
- border-color: gray('400');
- background-color: gray('400');
- color: gray('600');
- box-shadow: none !important;
- }
-}
-
.clear-selected-file {
display: flex;
align-items: center;
background-color: theme-color('light');
- word-break: break-all; // break long file name into multiple lines
+ word-break: break-all;
.btn {
width: 36px;
height: 36px;