From 373c1894a594b9ec509c305ac39e277dd84eb4d7 Mon Sep 17 00:00:00 2001
From: root <root@AhmedPC>
Date: Tue, 20 Feb 2024 11:48:44 -0600
Subject: [PATCH] refactor changes to use explicit bootstrap components etc

Also, use imported icons instead of string icons for `FontAwesomeIcon`s
---
 .../History/CurrentHistory/HistoryCounter.vue |  9 +++
 .../History/CurrentHistory/HistoryDetails.vue |  6 +-
 .../History/CurrentHistory/HistoryPanel.vue   | 70 ++++++++-----------
 .../components/History/HistoryScrollList.vue  | 56 +++++++++------
 .../History/Layout/DetailsLayout.vue          |  1 +
 .../History/Modals/SelectorModal.vue          | 26 ++++---
 .../History/Multiple/MultipleView.vue         | 27 +++----
 .../History/Multiple/MultipleViewList.vue     |  6 +-
 .../src/components/Panels/MultiviewPanel.vue  | 25 +++----
 9 files changed, 123 insertions(+), 103 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/HistoryCounter.vue b/client/src/components/History/CurrentHistory/HistoryCounter.vue
index e44b174a8433..c70ec3a91e6b 100644
--- a/client/src/components/History/CurrentHistory/HistoryCounter.vue
+++ b/client/src/components/History/CurrentHistory/HistoryCounter.vue
@@ -28,12 +28,14 @@ const props = withDefaults(
         lastChecked: Date;
         filterText?: string;
         showControls?: boolean;
+        hideReload?: boolean;
     }>(),
     {
         isWatching: false,
         lastChecked: () => new Date(),
         filterText: "",
         showControls: false,
+        hideReload: false,
     }
 );
 
@@ -191,6 +193,7 @@ onMounted(() => {
                 </BButton>
 
                 <BButton
+                    v-if="!hideReload"
                     v-b-tooltip.hover
                     :title="reloadButtonTitle"
                     :variant="reloadButtonVariant"
@@ -216,3 +219,9 @@ onMounted(() => {
         </BButtonGroup>
     </div>
 </template>
+
+<style lang="scss" scoped>
+.btn {
+    white-space: nowrap;
+}
+</style>
diff --git a/client/src/components/History/CurrentHistory/HistoryDetails.vue b/client/src/components/History/CurrentHistory/HistoryDetails.vue
index d125b74850d2..52619647dd25 100644
--- a/client/src/components/History/CurrentHistory/HistoryDetails.vue
+++ b/client/src/components/History/CurrentHistory/HistoryDetails.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { BBadge } from "bootstrap-vue";
+
 import type { HistorySummary } from "@/api";
 import { useHistoryStore } from "@/stores/historyStore";
 
@@ -47,10 +49,10 @@ function onSave(newDetails: HistorySummary) {
                 no-expand />
         </template>
         <template v-if="summarized" v-slot:update-time>
-            <b-badge v-b-tooltip pill>
+            <BBadge v-b-tooltip pill>
                 <span v-localize>last edited </span>
                 <UtcDate v-if="history.update_time" :date="history.update_time" mode="elapsed" />
-            </b-badge>
+            </BBadge>
         </template>
     </DetailsLayout>
 </template>
diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 467a83c94835..6060e60b40fa 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
+import { BAlert } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { GetComponentPropTypes } from "types/utilityTypes";
-import { computed, onMounted, PropType, ref, set as VueSet, unref, watch } from "vue";
+import { computed, onMounted, ref, set as VueSet, unref, watch } from "vue";
 
 import { copyDataset } from "@/api/datasets";
 import ExpandedItems from "@/components/History/Content/ExpandedItems";
@@ -41,35 +42,23 @@ interface BackendFilterError {
     ValueError?: string;
 }
 
-const props = defineProps({
-    listOffset: {
-        type: Number,
-        default: 0,
-    },
-    history: {
-        type: Object as PropType<Record<string, any> & GetComponentPropTypes<typeof HistoryCounter>["history"]>,
-        required: true,
-    },
-    filter: {
-        type: String,
-        default: "",
-    },
-    canEditHistory: {
-        type: Boolean,
-        default: true,
-    },
-    shouldShowControls: {
-        type: Boolean,
-        default: true,
-    },
-    filterable: {
-        type: Boolean,
-        default: false,
-    },
-    isMultiViewItem: {
-        type: Boolean,
-        default: false,
-    },
+interface Props {
+    listOffset?: number;
+    history: Record<string, any> & GetComponentPropTypes<typeof HistoryCounter>["history"];
+    filter?: string;
+    canEditHistory?: boolean;
+    shouldShowControls?: boolean;
+    filterable?: boolean;
+    isMultiViewItem?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    listOffset: 0,
+    filter: "",
+    canEditHistory: true,
+    shouldShowControls: true,
+    filterable: false,
+    isMultiViewItem: false,
 });
 
 const filterClass = HistoryFilters;
@@ -80,7 +69,7 @@ const offsetQueryParam = ref(0);
 const searchError = ref<BackendFilterError | undefined>(undefined);
 const showAdvanced = ref(false);
 const showDropZone = ref(false);
-const operationRunning = ref(null);
+const operationRunning = ref<string | null>(null);
 const operationError = ref(null);
 const querySelectionBreak = ref(false);
 const dragTarget = ref<EventTarget | null>(null);
@@ -92,7 +81,7 @@ const historyStore = useHistoryStore();
 const historyItemsStore = useHistoryItemsStore();
 
 const historyUpdateTime = computed(() => {
-    return props.history.update_time as Date;
+    return props.history.update_time;
 });
 
 const queryKey = computed(() => {
@@ -412,6 +401,7 @@ onMounted(async () => {
                         :last-checked="lastCheckedTime"
                         :show-controls="shouldShowControls"
                         :filter-text.sync="filterText"
+                        :hide-reload="isMultiViewItem"
                         @reloadContents="reloadContents" />
 
                     <HistoryOperations
@@ -457,25 +447,23 @@ onMounted(async () => {
                     <HistoryDropZone v-if="showDropZone" />
                     <div>
                         <div v-if="isLoading && historyItems && historyItems.length === 0">
-                            <b-alert class="m-2" variant="info" show>
+                            <BAlert class="m-2" variant="info" show>
                                 <LoadingSpan message="Loading History" />
-                            </b-alert>
+                            </BAlert>
                         </div>
-                        <b-alert v-else-if="isProcessing" class="m-2" variant="info" show>
+                        <BAlert v-else-if="isProcessing" class="m-2" variant="info" show>
                             <LoadingSpan message="Processing operation" />
-                        </b-alert>
+                        </BAlert>
                         <div v-else-if="historyItems.length === 0">
                             <HistoryEmpty v-if="queryDefault" :writable="canEditHistory" class="m-2" />
 
-                            <b-alert v-else-if="formattedSearchError" class="m-2" variant="danger" show>
+                            <BAlert v-else-if="formattedSearchError" class="m-2" variant="danger" show>
                                 Error in filter:
                                 <a href="javascript:void(0)" @click="showAdvanced = true">
                                     {{ formattedSearchError.filter }}'{{ formattedSearchError.value }}'
                                 </a>
-                            </b-alert>
-                            <b-alert v-else class="m-2" variant="info" show>
-                                No data found for selected filter.
-                            </b-alert>
+                            </BAlert>
+                            <BAlert v-else class="m-2" variant="info" show> No data found for selected filter. </BAlert>
                         </div>
                         <ListingLayout
                             v-else
diff --git a/client/src/components/History/HistoryScrollList.vue b/client/src/components/History/HistoryScrollList.vue
index 0ecf471bf318..8198d3d7ebd4 100644
--- a/client/src/components/History/HistoryScrollList.vue
+++ b/client/src/components/History/HistoryScrollList.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faListAlt } from "@fortawesome/free-regular-svg-icons";
-import { faArrowDown, faCheckSquare, faColumns, faSignInAlt, faSquare } from "@fortawesome/free-solid-svg-icons";
+import { faCheckSquare, faListAlt, faSquare } from "@fortawesome/free-regular-svg-icons";
+import { faArrowDown, faColumns, faSignInAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useInfiniteScroll } from "@vueuse/core";
-import { BBadge, BButton, BButtonGroup, BListGroup, BListGroupItem } from "bootstrap-vue";
+import { BAlert, BBadge, BButton, BButtonGroup, BListGroup, BListGroupItem, BOverlay } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed, onMounted, onUnmounted, type PropType, type Ref, ref, watch } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
 
 import type { HistoryDetailed, HistorySummary } from "@/api";
@@ -27,14 +27,24 @@ import UtcDate from "@/components/UtcDate.vue";
 type AdditionalOptions = "set-current" | "multi" | "center";
 type PinnedHistory = { id: string };
 
-const props = defineProps({
-    multiple: { type: Boolean, default: false },
-    selectedHistories: { type: Array as PropType<PinnedHistory[]>, default: () => [] },
-    additionalOptions: { type: Array as PropType<AdditionalOptions[]>, default: () => [] },
-    showModal: { type: Boolean, default: false },
-    inModal: { type: Boolean, default: false },
-    filter: { type: String, default: "" },
-    loading: { type: Boolean, default: false },
+interface Props {
+    multiple?: boolean;
+    selectedHistories?: PinnedHistory[];
+    additionalOptions?: AdditionalOptions[];
+    showModal?: boolean;
+    inModal?: boolean;
+    filter: string;
+    loading: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    multiple: false,
+    selectedHistories: () => [],
+    additionalOptions: () => [],
+    showModal: false,
+    inModal: false,
+    filter: "",
+    loading: false,
 });
 
 const emit = defineEmits<{
@@ -48,7 +58,7 @@ library.add(faColumns, faSignInAlt, faListAlt, faArrowDown, faCheckSquare, faSqu
 
 const busy = ref(false);
 const showAdvanced = ref(false);
-const scrollableDiv: Ref<HTMLElement | null> = ref(null);
+const scrollableDiv = ref<HTMLElement | null>(null);
 
 const historyStore = useHistoryStore();
 const { currentHistoryId, histories, totalHistoryCount, pinnedHistories } = storeToRefs(historyStore);
@@ -109,7 +119,7 @@ watch(
 );
 
 /** `historyStore` histories for current user */
-const historiesProxy: Ref<HistorySummary[]> = ref([]);
+const historiesProxy = ref<HistorySummary[]>([]);
 watch(
     () => histories.value as HistoryDetailed[],
     (h: HistoryDetailed[]) => {
@@ -122,7 +132,7 @@ watch(
     }
 );
 
-const filtered: Ref<HistorySummary[]> = computed(() => {
+const filtered = computed<HistorySummary[]>(() => {
     let filteredHistories: HistorySummary[] = [];
     if (!validFilter.value) {
         filteredHistories = historiesProxy.value;
@@ -215,7 +225,7 @@ async function loadMore(noScroll = false) {
             <BBadge v-if="props.filter && !validFilter" class="alert-danger w-100 mb-2">
                 Search string too short!
             </BBadge>
-            <b-alert v-else-if="!busy && hasNoResults" class="mb-2" variant="danger" show>No histories found.</b-alert>
+            <BAlert v-else-if="!busy && hasNoResults" class="mb-2" variant="danger" show>No histories found.</BAlert>
         </div>
 
         <div
@@ -303,7 +313,7 @@ async function loadMore(noScroll = false) {
                                         variant="link"
                                         class="p-0 px-1"
                                         @click.stop="() => setCurrentHistory(history)">
-                                        <FontAwesomeIcon icon="fa-sign-in-alt" />
+                                        <FontAwesomeIcon :icon="faSignInAlt" />
                                     </BButton>
 
                                     <BButton
@@ -313,7 +323,7 @@ async function loadMore(noScroll = false) {
                                         variant="link"
                                         class="p-0 px-1"
                                         @click.stop="() => openInMulti(history)">
-                                        <FontAwesomeIcon icon="fa-columns" />
+                                        <FontAwesomeIcon :icon="faColumns" />
                                     </BButton>
 
                                     <BButton
@@ -323,14 +333,14 @@ async function loadMore(noScroll = false) {
                                         variant="link"
                                         class="p-0 px-1"
                                         @click.stop="() => setCenterPanelHistory(history)">
-                                        <FontAwesomeIcon icon="far fa-list-alt" />
+                                        <FontAwesomeIcon :icon="faListAlt" />
                                     </BButton>
                                 </BButtonGroup>
                             </div>
                         </div>
                         <div v-if="isMultiviewPanel">
-                            <FontAwesomeIcon v-if="isActiveItem(history)" :icon="['far', 'check-square']" size="lg" />
-                            <FontAwesomeIcon v-else :icon="['far', 'square']" size="lg" />
+                            <FontAwesomeIcon v-if="isActiveItem(history)" :icon="faCheckSquare" size="lg" />
+                            <FontAwesomeIcon v-else :icon="faSquare" size="lg" />
                         </div>
                     </BListGroupItem>
                     <div>
@@ -338,7 +348,7 @@ async function loadMore(noScroll = false) {
                             <span v-if="filtered.length == 1">- {{ filtered.length }} history loaded -</span>
                             <span v-else-if="filtered.length > 1">- All {{ filtered.length }} histories loaded -</span>
                         </div>
-                        <b-overlay :show="busy" opacity="0.5" />
+                        <BOverlay :show="busy" opacity="0.5" />
                     </div>
                 </BListGroup>
             </div>
@@ -359,7 +369,7 @@ async function loadMore(noScroll = false) {
                     :title="localize('Load More')"
                     variant="link"
                     @click="loadMore()">
-                    <FontAwesomeIcon icon="fa-arrow-down" />
+                    <FontAwesomeIcon :icon="faArrowDown" />
                 </BButton>
             </div>
 
diff --git a/client/src/components/History/Layout/DetailsLayout.vue b/client/src/components/History/Layout/DetailsLayout.vue
index 2af7f399d88a..ef49938ca9f3 100644
--- a/client/src/components/History/Layout/DetailsLayout.vue
+++ b/client/src/components/History/Layout/DetailsLayout.vue
@@ -186,6 +186,7 @@ function selectText() {
 .summarized-details {
     min-height: 8.5em;
     margin: 1rem 1rem 0 1rem;
+    max-width: 15rem;
 
     .tags {
         min-height: 2rem;
diff --git a/client/src/components/History/Modals/SelectorModal.vue b/client/src/components/History/Modals/SelectorModal.vue
index 6feb1c535f7b..a15aedf55295 100644
--- a/client/src/components/History/Modals/SelectorModal.vue
+++ b/client/src/components/History/Modals/SelectorModal.vue
@@ -3,7 +3,7 @@ import { BButton, BFormGroup, BModal } from "bootstrap-vue";
 import { orderBy } from "lodash";
 import isEqual from "lodash.isequal";
 import { storeToRefs } from "pinia";
-import { computed, type PropType, type Ref, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 
 import type { HistorySummary } from "@/api";
 import { HistoriesFilters } from "@/components/History/HistoriesFilters";
@@ -17,12 +17,20 @@ import HistoryList from "@/components/History/HistoryScrollList.vue";
 type AdditionalOptions = "set-current" | "multi" | "center";
 type PinnedHistory = { id: string };
 
-const props = defineProps({
-    multiple: { type: Boolean, default: false },
-    title: { type: String, default: "Switch to history" },
-    histories: { type: Array as PropType<HistorySummary[]>, default: () => [] },
-    additionalOptions: { type: Array as PropType<AdditionalOptions[]>, default: () => [] },
-    showModal: { type: Boolean, default: false },
+interface Props {
+    multiple?: boolean;
+    title?: string;
+    histories: HistorySummary[];
+    additionalOptions?: AdditionalOptions[];
+    showModal: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    multiple: false,
+    title: "Switch to history",
+    histories: () => [],
+    additionalOptions: () => [],
+    showModal: false,
 });
 
 const emit = defineEmits<{
@@ -40,11 +48,11 @@ const propShowModal = computed({
     },
 });
 
-const selectedHistories: Ref<PinnedHistory[]> = ref([]);
+const selectedHistories = ref<PinnedHistory[]>([]);
 const filter = ref("");
 const busy = ref(false);
 const showAdvanced = ref(false);
-const modal: Ref<BModal | null> = ref(null);
+const modal = ref<BModal | null>(null);
 
 const { pinnedHistories } = storeToRefs(useHistoryStore());
 
diff --git a/client/src/components/History/Multiple/MultipleView.vue b/client/src/components/History/Multiple/MultipleView.vue
index 8ac7cabafe5c..20b6e2773542 100644
--- a/client/src/components/History/Multiple/MultipleView.vue
+++ b/client/src/components/History/Multiple/MultipleView.vue
@@ -2,6 +2,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheckSquare, faClock, faTimes, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton, BButtonGroup } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
@@ -115,34 +116,34 @@ function showRecent() {
 
             <div class="d-flex justify-content-between">
                 <div>
-                    <b-button-group v-b-tooltip.hover.noninteractive :title="showRecentTitle">
-                        <b-button
+                    <BButtonGroup v-b-tooltip.hover.noninteractive :title="showRecentTitle">
+                        <BButton
                             size="sm"
                             data-description="show recent histories"
                             variant="outline-primary"
                             :disabled="!hasPinnedHistories"
                             @click="showRecent">
-                            <FontAwesomeIcon v-if="hasPinnedHistories" icon="undo" />
-                            <FontAwesomeIcon v-else icon="clock" />
+                            <FontAwesomeIcon v-if="hasPinnedHistories" :icon="faUndo" />
+                            <FontAwesomeIcon v-else :icon="faClock" />
                             <span v-localize>Recent</span>
-                        </b-button>
-                    </b-button-group>
-                    <b-button
+                        </BButton>
+                    </BButtonGroup>
+                    <BButton
                         v-b-tooltip.hover.noninteractive
                         :title="localize('Open modal to select/deselect histories')"
                         size="sm"
                         data-description="open select histories modal"
                         variant="outline-primary"
                         @click="showSelectModal = true">
-                        <FontAwesomeIcon icon="fa-check-square" />
+                        <FontAwesomeIcon :icon="faCheckSquare" />
                         <span v-localize>Select</span>
-                    </b-button>
+                    </BButton>
                 </div>
             </div>
         </div>
-        <b-alert v-if="!initialLoaded && historiesLoading" class="m-2" variant="info" show>
+        <BAlert v-if="!initialLoaded && historiesLoading" class="m-2" variant="info" show>
             <LoadingSpan message="Loading Histories" />
-        </b-alert>
+        </BAlert>
         <div v-else-if="histories.length" class="multi-history-panel d-flex flex-column h-100">
             <FilterMenu
                 name="History Multiview"
@@ -158,9 +159,9 @@ function showRecent() {
                 :selected-histories="selectedHistories"
                 :show-modal.sync="showSelectModal" />
         </div>
-        <b-alert v-else-if="!histories.length" class="m-2" variant="danger" show>
+        <BAlert v-else-if="!histories.length" class="m-2" variant="danger" show>
             <span v-localize class="font-weight-bold">No History found.</span>
-        </b-alert>
+        </BAlert>
         <SelectorModal
             v-show="showSelectModal"
             :multiple="true"
diff --git a/client/src/components/History/Multiple/MultipleViewList.vue b/client/src/components/History/Multiple/MultipleViewList.vue
index 5eae471dbf18..99af2b246265 100644
--- a/client/src/components/History/Multiple/MultipleViewList.vue
+++ b/client/src/components/History/Multiple/MultipleViewList.vue
@@ -127,7 +127,7 @@ async function onKeyDown(evt: KeyboardEvent) {
                 :data-sources="props.selectedHistories"
                 :direction="'horizontal'"
                 :extra-props="{ filter }"
-                :item-style="{ width: '15rem' }"
+                :item-style="{ width: '100%', minWidth: '15rem' }"
                 item-class="d-flex mx-1 mt-1"
                 class="d-flex"
                 wrap-class="row flex-nowrap m-0">
@@ -145,7 +145,7 @@ async function onKeyDown(evt: KeyboardEvent) {
                         tabindex="0"
                         @keydown="onKeyDown"
                         @click.stop="createAndPin">
-                        <FontAwesomeIcon icon="plus" class="mr-1" />
+                        <FontAwesomeIcon :icon="faPlus" class="mr-1" />
                         {{ localize("Create and pin new history") }}
                     </div>
                     <div
@@ -153,7 +153,7 @@ async function onKeyDown(evt: KeyboardEvent) {
                         tabindex="0"
                         @keydown="onKeyDown"
                         @click.stop="emit('update:show-modal', true)">
-                        <FontAwesomeIcon icon="check-square" class="mr-1" />
+                        <FontAwesomeIcon :icon="faCheckSquare" class="mr-1" />
                         {{ localize("Select histories") }}
                     </div>
                 </span>
diff --git a/client/src/components/Panels/MultiviewPanel.vue b/client/src/components/Panels/MultiviewPanel.vue
index cbb911603368..207250346c15 100644
--- a/client/src/components/Panels/MultiviewPanel.vue
+++ b/client/src/components/Panels/MultiviewPanel.vue
@@ -2,6 +2,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faColumns, faPlus, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BBadge, BButton, BButtonGroup } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 import { useRoute, useRouter } from "vue-router/composables";
@@ -97,8 +98,8 @@ function userTitle(title: string) {
 <template>
     <ActivityPanel title="Select Histories">
         <template v-slot:header-buttons>
-            <b-button-group>
-                <b-button
+            <BButtonGroup>
+                <BButton
                     v-b-tooltip.bottom.hover
                     data-description="create new history for multiview"
                     size="sm"
@@ -107,8 +108,8 @@ function userTitle(title: string) {
                     :disabled="isAnonymous"
                     @click="createAndPin">
                     <FontAwesomeIcon :icon="faPlus" fixed-width />
-                </b-button>
-            </b-button-group>
+                </BButton>
+            </BButtonGroup>
         </template>
 
         <template v-slot:header>
@@ -121,7 +122,7 @@ function userTitle(title: string) {
                 :loading="historiesLoading || loading"
                 :show-advanced.sync="showAdvanced" />
             <section v-if="!showAdvanced">
-                <b-button
+                <BButton
                     v-if="route.path !== '/histories/view_multiple'"
                     v-b-tooltip.hover.noninteractive.bottom
                     :aria-label="userTitle('Open History Multiview in center panel')"
@@ -132,27 +133,27 @@ function userTitle(title: string) {
                     @click="router.push('/histories/view_multiple')">
                     <FontAwesomeIcon :icon="faColumns" class="mr-1" />
                     <span v-localize>Open History Multiview</span>
-                </b-button>
-                <b-button-group
+                </BButton>
+                <BButtonGroup
                     v-else
                     v-b-tooltip.hover.noninteractive.bottom
                     class="w-100"
                     :aria-label="pinRecentTitle"
                     :title="pinRecentTitle">
-                    <b-button size="sm" :disabled="!pinnedHistoryCount" @click="pinRecent">
+                    <BButton size="sm" :disabled="!pinnedHistoryCount" @click="pinRecent">
                         <span class="position-relative">
                             <FontAwesomeIcon v-if="pinnedHistoryCount" :icon="faUndo" class="mr-1" />
                             <b>{{ pinRecentText }}</b>
                         </span>
-                    </b-button>
-                </b-button-group>
+                    </BButton>
+                </BButtonGroup>
             </section>
         </template>
 
         <div v-if="isAnonymous">
-            <b-badge class="alert-info w-100 mx-2">
+            <BBadge class="alert-info w-100 mx-2">
                 Please <a :href="withPrefix('/login')">log in or register</a> to create multiple histories.
-            </b-badge>
+            </BBadge>
         </div>
 
         <HistoryList v-show="!showAdvanced" multiple :filter="filter" :loading.sync="loading" @setFilter="setFilter" />