Add GLink wrapper for BLink

client/src/component-library/GLink.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { BLink } from "bootstrap-vue";
+</script>
+
+<template>
+    <BLink v-bind="$attrs" v-on="$listeners"> </BLink>
+</template>

client/src/components/Common/ExportRecordTable.vue

@@ -9,9 +9,11 @@ import {
     faSpinner,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BButtonGroup, BButtonToolbar, BCard, BCollapse, BLink, BTable } from "bootstrap-vue";
+import { BButton, BButtonGroup, BButtonToolbar, BCard, BCollapse, BTable } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
+import GLink from "@/component-library/GLink.vue";
+
 library.add(faExclamationCircle, faCheckCircle, faDownload, faFileImport, faSpinner, faLink);
 
 const props = defineProps({
@@ -50,13 +52,13 @@ function copyDownloadLink(record) {
 
 <template>
     <div>
-        <b-link
+        <GLink
             :class="isExpanded ? null : 'collapsed'"
             :aria-expanded="isExpanded ? 'true' : 'false'"
             aria-controls="collapse-previous"
             @click="isExpanded = !isExpanded">
             {{ title }}
-        </b-link>
+        </GLink>
         <b-collapse id="collapse-previous" v-model="isExpanded">
             <b-card>
                 <b-table :items="props.records" :fields="fields">

client/src/components/Dataset/DatasetName.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <b-link
+        <GLink
             id="dataset-dropdown"
             class="workflow-dropdown font-weight-bold p-2"
             data-toggle="dropdown"
@@ -18,7 +18,7 @@
                 title="The creation of this dataset has been paused." />
             <span v-else class="dataset-icon fa fa-caret-down" />
             <span class="name">{{ getName }}</span>
-        </b-link>
+        </GLink>
         <div class="dropdown-menu" aria-labelledby="dataset-dropdown">
             <a class="dropdown-item" href="#" @click.prevent="showDataset">
                 <span class="fa fa-eye fa-fw mr-1" />
@@ -35,9 +35,14 @@
 import BootstrapVue from "bootstrap-vue";
 import Vue from "vue";
 
+import GLink from "@/component-library/GLink.vue";
+
 Vue.use(BootstrapVue);
 
 export default {
+    components: {
+        GLink,
+    },
     props: {
         item: Object,
     },

client/src/components/History/Content/Dataset/DatasetDetails.vue

@@ -13,9 +13,9 @@
                     </span>
                     <span v-if="result.genome_build" class="dbkey">
                         <label v-localize class="prompt">database</label>
-                        <b-link class="value" data-label="Database/Build" @click.stop="$emit('edit')">{{
-                            result.genome_build
-                        }}</b-link>
+                        <GLink class="value" data-label="Database/Build" @click.stop="$emit('edit')">
+                            {{ result.genome_build }}
+                        </GLink>
                     </span>
                     <div v-if="result.misc_info" class="info">
                         <span class="value">{{ result.misc_info }}</span>
@@ -85,17 +85,18 @@
 </template>
 
 <script>
-import { BLink } from "bootstrap-vue";
 import { STATES } from "components/History/Content/model/states";
 import { DatasetProvider } from "components/providers/storeProviders";
 
 import DatasetActions from "./DatasetActions";
 
+import GLink from "@/component-library/GLink.vue";
+
 export default {
     components: {
+        GLink,
         DatasetActions,
         DatasetProvider,
-        BLink,
     },
     props: {
         dataset: { type: Object, required: true },

client/src/components/History/CurrentHistory/HistoryOperations/SelectionChangeWarning.vue

@@ -10,22 +10,23 @@
         <b>Please notice your selection has changed.</b> Manually unselecting items or adding new ones will disable the
         `select all` status.
         <b-progress variant="info" :max="dismissSecs" :value="dismissCountDown" height="4px" />
-        <b-link @click="onDoNotShowAgain">Do not show again</b-link>
+        <GLink @click="onDoNotShowAgain">Do not show again</GLink>
     </GAlert>
 </template>
 
 <script>
-import { BLink, BProgress } from "bootstrap-vue";
+import { BProgress } from "bootstrap-vue";
 import { mapActions, mapState } from "pinia";
 
 import { useUserFlagsStore } from "@/stores/userFlagsStore";
 
 import GAlert from "@/component-library/GAlert.vue";
+import GLink from "@/component-library/GLink.vue";
 
 export default {
     components: {
         GAlert,
-        BLink,
+        GLink,
         BProgress,
     },
     props: {

client/src/components/History/Export/ExportOptions.vue

@@ -1,10 +1,12 @@
 <script setup>
-import { BCard, BCollapse, BFormCheckbox, BFormGroup, BFormSelect, BLink } from "bootstrap-vue";
+import { BCard, BCollapse, BFormCheckbox, BFormGroup, BFormSelect } from "bootstrap-vue";
 import { ExportParamsModel } from "components/Common/models/exportRecordModel";
 import { computed, reactive, ref } from "vue";
 
 import { AVAILABLE_EXPORT_FORMATS } from "./services";
 
+import GLink from "@/component-library/GLink.vue";
+
 const props = defineProps({
     exportParams: {
         type: ExportParamsModel,
@@ -30,14 +32,14 @@ function onValueChanged() {
 
 <template>
     <div>
-        <b-link
+        <GLink
             id="toggle-options-link"
             :class="isExpanded ? null : 'collapsed'"
             :aria-expanded="isExpanded ? 'true' : 'false'"
             aria-controls="collapse-options"
             @click="isExpanded = !isExpanded">
             {{ title }}
-        </b-link>
+        </GLink>
         <b-collapse id="collapse-options" v-model="isExpanded">
             <b-card>
                 <b-form-group label="Export Format:" label-for="format">

client/src/components/HistoryExport/ExportLink.vue

@@ -8,7 +8,7 @@
         </span>
         <i
             title="Information about when the history export was generated is included in the job details. Additionally, if there are issues with export, the job details may help figure out the underlying problem or communicate issues to your Galaxy administrator.">
-            (<b-link class="show-job-link" href="#" @click="showDetails">view job details</b-link>)
+            (<GLink class="show-job-link" href="#" @click="showDetails">view job details</GLink>)
         </i>
         <b-modal v-model="details" modal-class="job-information-modal" scrollable ok-only hide-header>
             <job-information :job_id="historyExport.job_id" :include-times="true" />
@@ -23,12 +23,18 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BModal } from "bootstrap-vue";
 import { copy } from "utils/clipboard";
 
+import GLink from "@/component-library/GLink.vue";
 import JobInformation from "components/JobInformation/JobInformation.vue";
 
 library.add(faLink);
 
 export default {
-    components: { BModal, JobInformation, FontAwesomeIcon },
+    components: {
+        GLink,
+        BModal,
+        JobInformation,
+        FontAwesomeIcon,
+    },
     props: {
         historyExport: {
             type: Object,

client/src/components/Libraries/LibrariesList.vue

@@ -66,9 +66,9 @@
                     rows="3" />
 
                 <div v-else-if="row.item.deleted && includeDeleted" class="deleted-item">{{ row.item.name }}</div>
-                <b-link v-else :to="{ path: `/libraries/folders/${row.item.root_folder_id}` }">
+                <GLink v-else :to="{ path: `/libraries/folders/${row.item.root_folder_id}` }">
                     {{ row.item.name }}
-                </b-link>
+                </GLink>
             </template>
             <template v-slot:cell(description)="{ item }">
                 <LibraryEditField
@@ -198,12 +198,15 @@ import { useUserStore } from "@/stores/userStore";
 import { Services } from "./services";
 import { fields } from "./table-fields";
 
+import GLink from "@/component-library/GLink.vue";
+
 initLibrariesIcons();
 
 Vue.use(BootstrapVue);
 
 export default {
     components: {
+        GLink,
         FontAwesomeIcon,
         LibraryEditField,
         SearchField,

client/src/components/Libraries/LibraryFolder/LibraryFolder.vue

@@ -78,20 +78,20 @@
                     <textarea v-else :ref="'name' + row.item.id" class="form-control" :value="row.item.name" rows="3" />
                 </div>
                 <div v-else-if="!row.item.deleted">
-                    <b-link
+                    <GLink
                         v-if="row.item.type === 'folder'"
                         :to="{ name: `LibraryFolder`, params: { folder_id: `${row.item.id}` } }">
                         {{ row.item.name }}
-                    </b-link>
+                    </GLink>
 
-                    <b-link
+                    <GLink
                         v-else
                         :to="{
                             name: `LibraryDataset`,
                             params: { folder_id: folder_id, dataset_id: `${row.item.id}` },
                         }">
                         {{ row.item.name }}
-                    </b-link>
+                    </GLink>
                 </div>
                 <!-- Deleted Item-->
                 <div v-else>
@@ -279,6 +279,8 @@ import { Services } from "./services";
 import { fields } from "./table-fields";
 import FolderTopBar from "./TopToolbar/FolderTopBar";
 
+import GLink from "@/component-library/GLink.vue";
+
 initFolderTableIcons();
 
 Vue.use(BootstrapVue);
@@ -295,6 +297,7 @@ function initialFolderState() {
 }
 export default {
     components: {
+        GLink,
         FolderTopBar,
         UtcDate,
         FontAwesomeIcon,

client/src/components/Markdown/Elements/HistoryDatasetDisplay.vue

@@ -85,7 +85,7 @@
                                 </pre>
                         </div>
                         <div v-else>No content found.</div>
-                        <b-link v-if="itemContent.truncated" :href="itemContent.item_url"> Show More... </b-link>
+                        <GLink v-if="itemContent.truncated" :href="itemContent.item_url"> Show More... </GLink>
                     </div>
                 </UrlDataProvider>
             </UrlDataProvider>
@@ -99,8 +99,11 @@ import LoadingSpan from "components/LoadingSpan";
 import { UrlDataProvider } from "components/providers/UrlDataProvider";
 import { getAppRoot } from "onload/loadConfig";
 
+import GLink from "@/component-library/GLink.vue";
+
 export default {
     components: {
+        GLink,
         LoadingSpan,
         UrlDataProvider,
     },

client/src/components/Markdown/Elements/HistoryLink.vue

@@ -1,12 +1,12 @@
 <template>
     <div>
-        <b-link
+        <GLink
             v-if="showLink"
             data-description="history import link"
             :data-history-id="args.history_id"
-            @click="onClick"
-            >Click to Import History: {{ name }}.</b-link
-        >
+            @click="onClick">
+            Click to Import History: {{ name }}.
+        </GLink>
         <div v-if="imported" class="text-success">
             <font-awesome-icon icon="check" class="mr-1" />
             <span>Successfully Imported History: {{ name }}!</span>
@@ -27,10 +27,13 @@ import { withPrefix } from "utils/redirect";
 import { errorMessageAsString } from "utils/simple-error";
 import Vue from "vue";
 
+import GLink from "@/component-library/GLink.vue";
+
 Vue.use(BootstrapVue);
 
 export default {
     components: {
+        GLink,
         FontAwesomeIcon,
     },
     props: {

client/src/components/Markdown/MarkdownContainer.vue

@@ -14,6 +14,7 @@ import JobParameters from "./Elements/JobParameters.vue";
 import ToolStd from "./Elements/ToolStd.vue";
 import Visualization from "./Elements/Visualization.vue";
 import WorkflowDisplay from "./Elements/Workflow/WorkflowDisplay.vue";
+import GLink from "@/component-library/GLink.vue";
 
 const toggle = ref(false);
 const props = defineProps({
@@ -65,9 +66,9 @@ const isVisible = computed(() => !isCollapsible.value || toggle.value);
 
 <template>
     <div>
-        <b-link v-if="isCollapsible" class="font-weight-bold" @click="toggle = !toggle">
+        <GLink v-if="isCollapsible" class="font-weight-bold" @click="toggle = !toggle">
             {{ args.collapse }}
-        </b-link>
+        </GLink>
         <b-collapse :visible="isVisible">
             <div v-if="name == 'generate_galaxy_version'" class="galaxy-version">
                 <pre><code>{{ version }}</code></pre>

client/src/components/Masthead/QuotaMeter.vue

@@ -1,18 +1,18 @@
 <template>
     <div>
         <div v-if="!hasQuota" class="quota-text d-flex align-items-center">
-            <b-link
+            <GLink
                 v-b-tooltip.hover.left
                 to="/storage"
                 :disabled="isAnonymous"
                 class="ml-auto"
                 :title="title"
                 data-description="storage dashboard link">
                 {{ usingString + " " + totalUsageString }}
-            </b-link>
+            </GLink>
         </div>
         <div v-else class="quota-meter d-flex align-items-center">
-            <b-link
+            <GLink
                 v-b-tooltip.hover.left
                 class="quota-progress"
                 :disabled="isAnonymous"
@@ -23,7 +23,7 @@
                     <b-progress-bar aria-label="Quota usage" :value="usage" :variant="variant" />
                 </b-progress>
                 <span>{{ usingString + " " + usage.toFixed(0) }}%</span>
-            </b-link>
+            </GLink>
         </div>
     </div>
 </template>
@@ -35,8 +35,13 @@ import { mapGetters } from "vuex";
 
 import { useUserStore } from "@/stores/userStore";
 
+import GLink from "@/component-library/GLink.vue";
+
 export default {
     name: "QuotaMeter",
+    components: {
+        GLink,
+    },
     data() {
         return {
             usingString: this.l("Using"),