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/Mixins/BVPaginationMixin.js b/src/components/Mixins/BVPaginationMixin.js
index 1aa20a5..0834ae7 100644
--- a/src/components/Mixins/BVPaginationMixin.js
+++ b/src/components/Mixins/BVPaginationMixin.js
@@ -24,6 +24,15 @@
},
];
const BVPaginationMixin = {
+ watch: {
+ perPage(newPerPage) {
+ // When switching to "View all" (perPage === 0), reset to first page
+ // to avoid empty views when previously on a later page.
+ if (newPerPage === 0) {
+ this.currentPage = 1;
+ }
+ },
+ },
methods: {
getTotalRowCount(count) {
return this.perPage === 0 ? 0 : count;
diff --git a/src/components/Mixins/BVTableSelectableMixin.js b/src/components/Mixins/BVTableSelectableMixin.js
index b4f0b95..48f5073 100644
--- a/src/components/Mixins/BVTableSelectableMixin.js
+++ b/src/components/Mixins/BVTableSelectableMixin.js
@@ -3,38 +3,123 @@
export const tableHeaderCheckboxIndeterminate = false;
const BVTableSelectableMixin = {
+ data() {
+ return {
+ selectedRows: [],
+ tableHeaderCheckboxModel: false,
+ tableHeaderCheckboxIndeterminate: false,
+ };
+ },
+ watch: {
+ currentPage() {
+ // Bootstrap Vue 2 behavior: Clear selections when page changes
+ // This prevents confusion with checkboxes appearing checked on the new page
+ const table = this.$refs.table;
+ if (table) {
+ table.clearSelected();
+ this.selectedRows = [];
+ this.tableHeaderCheckboxModel = false;
+ this.tableHeaderCheckboxIndeterminate = false;
+ }
+ },
+ },
methods: {
clearSelectedRows(tableRef) {
- if (tableRef) tableRef.clearSelected();
+ if (tableRef) {
+ tableRef.clearSelected();
+ this.selectedRows = [];
+ this.tableHeaderCheckboxModel = false;
+ this.tableHeaderCheckboxIndeterminate = false;
+ }
},
toggleSelectRow(tableRef, rowIndex) {
if (tableRef && rowIndex !== undefined) {
- tableRef.isRowSelected(rowIndex)
- ? tableRef.unselectRow(rowIndex)
- : tableRef.selectRow(rowIndex);
- }
- },
- onRowSelected(selectedRows, totalRowsCount) {
- if (selectedRows && totalRowsCount !== undefined) {
- this.selectedRows = selectedRows;
- if (selectedRows.length === 0) {
- this.tableHeaderCheckboxIndeterminate = false;
- this.tableHeaderCheckboxModel = false;
- } else if (selectedRows.length === totalRowsCount) {
- this.tableHeaderCheckboxIndeterminate = false;
- this.tableHeaderCheckboxModel = true;
+ const wasSelected = tableRef.isRowSelected(rowIndex);
+
+ if (wasSelected) {
+ tableRef.unselectRow(rowIndex);
} else {
- this.tableHeaderCheckboxIndeterminate = true;
- this.tableHeaderCheckboxModel = true;
+ tableRef.selectRow(rowIndex);
}
+
+ // Manually trigger onRowSelected after toggle since unselectRow might not fire event
+ this.$nextTick(() => {
+ this.onRowSelected();
+ });
}
},
- onChangeHeaderCheckbox(tableRef) {
- if (tableRef) {
- if (this.tableHeaderCheckboxModel) tableRef.selectAllRows();
- else tableRef.clearSelected();
+ onRowSelected() {
+ /*
+ * Bootstrap Vue Next fires @row-selected for each individual row change.
+ * Query the table's internal state to get ALL currently selected rows.
+ */
+ const table = this.$refs.table;
+ if (!table) return;
+
+ const allItems = table.filteredItems || table.items || [];
+ const selectedItems = allItems.filter((item, index) => {
+ return table.isRowSelected(index);
+ });
+
+ this.selectedRows = selectedItems;
+
+ // Update header checkbox state
+ const currentPage = this.currentPage || 1;
+ const perPage = this.perPage || 10;
+ const startIndex = (currentPage - 1) * perPage;
+ const endIndex = Math.min(startIndex + perPage, allItems.length);
+ const pageItemsCount = endIndex - startIndex;
+
+ const selectedOnPageCount = selectedItems.filter((item) =>
+ allItems
+ .slice(startIndex, endIndex)
+ .some((pageItem) => pageItem === item),
+ ).length;
+
+ if (selectedOnPageCount === 0) {
+ this.tableHeaderCheckboxIndeterminate = false;
+ this.tableHeaderCheckboxModel = false;
+ } else if (selectedOnPageCount === pageItemsCount) {
+ this.tableHeaderCheckboxIndeterminate = false;
+ this.tableHeaderCheckboxModel = true;
+ } else {
+ this.tableHeaderCheckboxIndeterminate = true;
+ this.tableHeaderCheckboxModel = true;
}
},
+ onChangeHeaderCheckbox(tableRef, event) {
+ /*
+ * Bootstrap Vue Next Migration:
+ * Handle header checkbox to select/deselect all rows on current page.
+ */
+ if (!tableRef) return;
+
+ // Extract checked state from event (could be boolean or Event object)
+ const isChecked =
+ typeof event === 'boolean' ? event : event?.target?.checked;
+
+ if (isChecked) {
+ // Select all rows on the current page
+ const currentPage = this.currentPage || 1;
+ const perPage = this.perPage || 10;
+ const startIndex = (currentPage - 1) * perPage;
+ const allItems = tableRef.filteredItems || tableRef.items || [];
+ const endIndex = Math.min(startIndex + perPage, allItems.length);
+
+ for (let i = startIndex; i < endIndex; i++) {
+ tableRef.selectRow(i);
+ }
+ } else {
+ // Deselect all rows
+ tableRef.clearSelected();
+ // Manually trigger update since clearSelected might not fire @row-selected
+ this.selectedRows = [];
+ this.tableHeaderCheckboxModel = false;
+ this.tableHeaderCheckboxIndeterminate = false;
+ }
+
+ // onRowSelected will be triggered automatically for selections
+ },
},
};
diff --git a/src/components/Mixins/BVToastMixin.js b/src/components/Mixins/BVToastMixin.js
index c8b58da..0d9fff5 100644
--- a/src/components/Mixins/BVToastMixin.js
+++ b/src/components/Mixins/BVToastMixin.js
@@ -1,58 +1,86 @@
+import { h } from 'vue';
import StatusIcon from '../Global/StatusIcon';
import i18n from '@/i18n';
-
const BVToastMixin = {
components: {
StatusIcon,
},
methods: {
$_BVToastMixin_createTitle(title, status) {
- const statusIcon = this.$createElement('StatusIcon', {
- props: { status },
- });
- const titleWithIcon = this.$createElement(
- 'strong',
- { class: 'toast-icon' },
- [statusIcon, title],
- );
- return titleWithIcon;
+ const statusIcon = h(StatusIcon, { status });
+ return h('strong', { class: 'toast-icon' }, [statusIcon, title]);
},
$_BVToastMixin_createBody(messageBody) {
if (Array.isArray(messageBody)) {
- return messageBody.map((message) =>
- this.$createElement('p', { class: 'mb-0' }, message),
- );
+ return messageBody.map((message) => h('p', { class: 'mb-0' }, message));
} else {
- return [this.$createElement('p', { class: 'mb-0' }, messageBody)];
+ return [h('p', { class: 'mb-0' }, messageBody)];
}
},
$_BVToastMixin_createTimestamp() {
const timestamp = this.$filters.formatTime(new Date());
- return this.$createElement('p', { class: 'mt-3 mb-0' }, timestamp);
+ return h('p', { class: 'mt-3 mb-0' }, timestamp);
},
$_BVToastMixin_createRefreshAction() {
- return this.$createElement(
+ return h(
'BLink',
{
class: 'd-inline-block mt-3',
- on: {
- click: () => {
- this.$root.$emit('refresh-application');
- },
+ onClick: () => {
+ require('@/eventBus').default.$emit('refresh-application');
},
},
i18n.global.t('global.action.refresh'),
);
},
$_BVToastMixin_initToast(body, title, variant) {
- this.$root.$bvToast.toast(body, {
- title,
- variant,
- autoHideDelay: 10000, //auto hide in milliseconds
- noAutoHide: variant !== 'success',
- isStatus: true,
- solid: true,
- });
+ // Use global toast plugin (works with Options API)
+ // Extract text content from VNodes for display
+
+ // Extract title text from VNode
+ const titleText =
+ typeof title === 'string'
+ ? title
+ : title?.children?.[1] || title?.children || '';
+
+ // Extract body text from VNode array
+ // Each VNode (paragraph) should be on its own line
+ const bodyLines = Array.isArray(body)
+ ? body.map((node) => {
+ if (typeof node === 'string') return node;
+ // Extract text from VNode children
+ const text = node?.children || node?.props?.children || '';
+ // Ensure timestamps and other paragraphs are on separate lines
+ return text;
+ })
+ : [typeof body === 'string' ? body : body?.children || ''];
+
+ // Join with newlines to ensure timestamps appear on their own line
+ const bodyText = bodyLines.filter(Boolean).join('\n');
+
+ // Show toast via global plugin
+ if (this.$toast) {
+ this.$toast.show({
+ body: bodyText,
+ props: {
+ title: titleText,
+ variant,
+ isStatus: true,
+ solid: false, // Use light backgrounds with dark text (not solid colors)
+ // Success toasts auto-dismiss after 10s, others stay until closed
+ interval: variant === 'success' ? 10000 : 0,
+ // Note: Progress bar hidden via CSS in _toasts.scss (JS props to hide progress bar don't work as documented in Bootstrap Vue Next 0.40.8)
+ },
+ });
+ } else {
+ // Fallback: log to console
+ /* eslint-disable no-console */
+ console[variant === 'danger' ? 'error' : 'log'](
+ `[toast:${variant}]`,
+ bodyText,
+ );
+ /* eslint-enable no-console */
+ }
},
successToast(
message,
@@ -65,7 +93,10 @@
const body = this.$_BVToastMixin_createBody(message);
const title = this.$_BVToastMixin_createTitle(t, 'success');
if (refreshAction) body.push(this.$_BVToastMixin_createRefreshAction());
- if (timestamp) body.push(this.$_BVToastMixin_createTimestamp());
+ if (timestamp) {
+ body.push(' '); // Extra newline for spacing above timestamp
+ body.push(this.$_BVToastMixin_createTimestamp());
+ }
this.$_BVToastMixin_initToast(body, title, 'success');
},
errorToast(
@@ -79,7 +110,10 @@
const body = this.$_BVToastMixin_createBody(message);
const title = this.$_BVToastMixin_createTitle(t, 'danger');
if (refreshAction) body.push(this.$_BVToastMixin_createRefreshAction());
- if (timestamp) body.push(this.$_BVToastMixin_createTimestamp());
+ if (timestamp) {
+ body.push(' '); // Extra newline for spacing above timestamp
+ body.push(this.$_BVToastMixin_createTimestamp());
+ }
this.$_BVToastMixin_initToast(body, title, 'danger');
},
warningToast(
@@ -93,7 +127,10 @@
const body = this.$_BVToastMixin_createBody(message);
const title = this.$_BVToastMixin_createTitle(t, 'warning');
if (refreshAction) body.push(this.$_BVToastMixin_createRefreshAction());
- if (timestamp) body.push(this.$_BVToastMixin_createTimestamp());
+ if (timestamp) {
+ body.push(' '); // Extra newline for spacing above timestamp
+ body.push(this.$_BVToastMixin_createTimestamp());
+ }
this.$_BVToastMixin_initToast(body, title, 'warning');
},
infoToast(
@@ -107,7 +144,10 @@
const body = this.$_BVToastMixin_createBody(message);
const title = this.$_BVToastMixin_createTitle(t, 'info');
if (refreshAction) body.push(this.$_BVToastMixin_createRefreshAction());
- if (timestamp) body.push(this.$_BVToastMixin_createTimestamp());
+ if (timestamp) {
+ body.push(' '); // Extra newline for spacing above timestamp
+ body.push(this.$_BVToastMixin_createTimestamp());
+ }
this.$_BVToastMixin_initToast(body, title, 'info');
},
},
diff --git a/src/components/Mixins/LoadingBarMixin.js b/src/components/Mixins/LoadingBarMixin.js
index d115270..b1adc78 100644
--- a/src/components/Mixins/LoadingBarMixin.js
+++ b/src/components/Mixins/LoadingBarMixin.js
@@ -3,15 +3,15 @@
const LoadingBarMixin = {
methods: {
startLoader() {
- this.$root.$emit('loader-start');
+ require('@/eventBus').default.$emit('loader-start');
this.loading = true;
},
endLoader() {
- this.$root.$emit('loader-end');
+ require('@/eventBus').default.$emit('loader-end');
this.loading = false;
},
hideLoader() {
- this.$root.$emit('loader-hide');
+ require('@/eventBus').default.$emit('loader-hide');
},
},
};
diff --git a/src/components/Mixins/TableRowExpandMixin.js b/src/components/Mixins/TableRowExpandMixin.js
index 0450877..5f56968 100644
--- a/src/components/Mixins/TableRowExpandMixin.js
+++ b/src/components/Mixins/TableRowExpandMixin.js
@@ -5,11 +5,10 @@
methods: {
toggleRowDetails(row) {
row.toggleDetails();
- row.detailsShowing
- ? (this.expandRowLabel = i18n.global.t('global.table.expandTableRow'))
- : (this.expandRowLabel = i18n.global.t(
- 'global.table.collapseTableRow',
- ));
+ // When details are shown, label should instruct to collapse; otherwise, expand
+ this.expandRowLabel = row.detailsShowing
+ ? i18n.global.t('global.table.collapseTableRow')
+ : i18n.global.t('global.table.expandTableRow');
},
},
};
diff --git a/src/components/Mixins/VuelidateMixin.js b/src/components/Mixins/VuelidateMixin.js
index fec8525..8274df6 100644
--- a/src/components/Mixins/VuelidateMixin.js
+++ b/src/components/Mixins/VuelidateMixin.js
@@ -1,6 +1,7 @@
const VuelidateMixin = {
methods: {
getValidationState(model) {
+ if (!model) return null;
const { $dirty, $error } = model;
return $dirty ? !$error : null;
},