diff --git a/client/package.json b/client/package.json
index 0245c5202944..2d49a330de2b 100644
--- a/client/package.json
+++ b/client/package.json
@@ -141,6 +141,7 @@
     "@babel/preset-typescript": "^7.18.6",
     "@cerner/duplicate-package-checker-webpack-plugin": "^2.3.0",
     "@testing-library/jest-dom": "^5.16.4",
+    "@types/markdown-it": "^12.2.3",
     "@typescript-eslint/eslint-plugin": "^5.51.0",
     "@typescript-eslint/parser": "^5.51.0",
     "@vue/test-utils": "^1.3.4",
diff --git a/client/src/components/History/CurrentHistory/SelectPreferredStore.vue b/client/src/components/History/CurrentHistory/SelectPreferredStore.vue
index 0fd3195918f4..367b88a2ff43 100644
--- a/client/src/components/History/CurrentHistory/SelectPreferredStore.vue
+++ b/client/src/components/History/CurrentHistory/SelectPreferredStore.vue
@@ -1,76 +1,71 @@
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import axios from "axios";
+import SelectObjectStore from "@/components/ObjectStore/SelectObjectStore.vue";
+import { prependPath } from "@/utils/redirect";
+import { errorMessageAsString } from "@/utils/simple-error";
+
+const props = defineProps({
+    userPreferredObjectStoreId: {
+        type: String,
+        default: null,
+    },
+    history: {
+        type: Object,
+        required: true,
+    },
+});
+
+const error = ref<string | null>(null);
+const selectedObjectStoreId = ref(props.history.preferred_object_store_id);
+
+const newDatasetsDescription = ref("New dataset outputs from tools and workflows executed in this history");
+const galaxySelectionDefaultTitle = ref("Use Galaxy Defaults");
+const galaxySelectionDefaultDescription = ref(
+    "Selecting this will reset Galaxy to default behaviors configured by your Galaxy administrator."
+);
+const userSelectionDefaultTitle = ref("Use Your User Preference Defaults");
+const userSelectionDefaultDescription = ref(
+    "Selecting this will cause the history to not set a default and to fallback to your user preference defined default."
+);
+
+const defaultOptionTitle = computed(() => {
+    if (props.userPreferredObjectStoreId) {
+        return userSelectionDefaultTitle.value;
+    } else {
+        return galaxySelectionDefaultTitle.value;
+    }
+});
+const defaultOptionDescription = computed(() => {
+    if (props.userPreferredObjectStoreId) {
+        return userSelectionDefaultDescription.value;
+    } else {
+        return galaxySelectionDefaultDescription.value;
+    }
+});
+
+const emit = defineEmits<{
+    (e: "updated", id: string | null): void;
+}>();
+
+async function handleSubmit(preferredObjectStoreId: string | null) {
+    const payload = { preferred_object_store_id: preferredObjectStoreId };
+    const url = prependPath(`api/histories/${props.history.id}`);
+    try {
+        await axios.put(url, payload);
+    } catch (e) {
+        error.value = errorMessageAsString(e);
+    }
+    selectedObjectStoreId.value = preferredObjectStoreId;
+    emit("updated", preferredObjectStoreId);
+}
+</script>
 <template>
     <SelectObjectStore
-        :parent-error="error"
+        :parent-error="error || undefined"
         :for-what="newDatasetsDescription"
         :selected-object-store-id="selectedObjectStoreId"
         :default-option-title="defaultOptionTitle"
         :default-option-description="defaultOptionDescription"
         @onSubmit="handleSubmit" />
 </template>
-
-<script>
-import axios from "axios";
-import SelectObjectStore from "components/ObjectStore/SelectObjectStore";
-import { prependPath } from "utils/redirect";
-import { errorMessageAsString } from "utils/simple-error";
-
-export default {
-    components: {
-        SelectObjectStore,
-    },
-    props: {
-        userPreferredObjectStoreId: {
-            type: String,
-            default: null,
-        },
-        history: {
-            type: Object,
-            required: true,
-        },
-    },
-    data() {
-        const selectedObjectStoreId = this.history.preferred_object_store_id;
-        return {
-            error: null,
-            selectedObjectStoreId: selectedObjectStoreId,
-            newDatasetsDescription: "New dataset outputs from tools and workflows executed in this history",
-            popoverPlacement: "left",
-            galaxySelectionDefaultTitle: "Use Galaxy Defaults",
-            galaxySelectionDefaultDescription:
-                "Selecting this will reset Galaxy to default behaviors configured by your Galaxy administrator.",
-            userSelectionDefaultTitle: "Use Your User Preference Defaults",
-            userSelectionDefaultDescription:
-                "Selecting this will cause the history to not set a default and to fallback to your user preference defined default.",
-        };
-    },
-    computed: {
-        defaultOptionTitle() {
-            if (this.userPreferredObjectStoreId) {
-                return this.userSelectionDefaultTitle;
-            } else {
-                return this.galaxySelectionDefaultTitle;
-            }
-        },
-        defaultOptionDescription() {
-            if (this.userPreferredObjectStoreId) {
-                return this.userSelectionDefaultDescription;
-            } else {
-                return this.galaxySelectionDefaultDescription;
-            }
-        },
-    },
-    methods: {
-        async handleSubmit(preferredObjectStoreId) {
-            const payload = { preferred_object_store_id: preferredObjectStoreId };
-            const url = prependPath(`api/histories/${this.history.id}`);
-            try {
-                await axios.put(url, payload);
-            } catch (e) {
-                this.error = errorMessageAsString(e);
-            }
-            this.selectedObjectStoreId = preferredObjectStoreId;
-            this.$emit("updated", preferredObjectStoreId);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/ObjectStore/DescribeObjectStore.vue b/client/src/components/ObjectStore/DescribeObjectStore.vue
index 475f583957e6..b36573c0e239 100644
--- a/client/src/components/ObjectStore/DescribeObjectStore.vue
+++ b/client/src/components/ObjectStore/DescribeObjectStore.vue
@@ -32,7 +32,7 @@ import ObjectStoreRestrictionSpan from "./ObjectStoreRestrictionSpan";
 import QuotaUsageBar from "components/User/DiskUsage/Quota/QuotaUsageBar";
 import { QuotaSourceUsageProvider } from "components/User/DiskUsage/Quota/QuotaUsageProvider";
 import ObjectStoreBadges from "./ObjectStoreBadges";
-import adminConfigMixin from "./adminConfigMixin";
+import { adminMarkup } from "./adminConfig";
 
 export default {
     components: {
@@ -41,7 +41,6 @@ export default {
         QuotaSourceUsageProvider,
         QuotaUsageBar,
     },
-    mixins: [adminConfigMixin],
     props: {
         storageInfo: {
             type: Object,
@@ -57,7 +56,7 @@ export default {
             return this.storageInfo.quota?.source;
         },
         descriptionRendered() {
-            return this.adminMarkup(this.storageInfo.description);
+            return adminMarkup(this.storageInfo.description);
         },
         isPrivate() {
             return this.storageInfo.private;
diff --git a/client/src/components/ObjectStore/ObjectStoreBadge.test.js b/client/src/components/ObjectStore/ObjectStoreBadge.test.js
index 366127991bad..20f1785a9556 100644
--- a/client/src/components/ObjectStore/ObjectStoreBadge.test.js
+++ b/client/src/components/ObjectStore/ObjectStoreBadge.test.js
@@ -23,8 +23,10 @@ describe("ObjectStoreBadge", () => {
         const selector = ROOT_COMPONENT.object_store_details.badge_of_type({ type: "more_secure" }).selector;
         const iconEl = wrapper.find(selector);
         expect(iconEl.exists()).toBeTruthy();
-        expect(wrapper.vm.message).toContain(TEST_MESSAGE);
-        expect(wrapper.vm.stockMessage).toContain("more secure by the Galaxy adminstrator");
+        const popoverStub = wrapper.find("b-popover-stub");
+        const popoverText = popoverStub.text();
+        expect(popoverText).toContain(TEST_MESSAGE);
+        expect(popoverText).toContain("more secure by the Galaxy adminstrator");
     });
 
     it("should render a valid badge for less_secure type", async () => {
@@ -32,7 +34,9 @@ describe("ObjectStoreBadge", () => {
         const selector = ROOT_COMPONENT.object_store_details.badge_of_type({ type: "less_secure" }).selector;
         const iconEl = wrapper.find(selector);
         expect(iconEl.exists()).toBeTruthy();
-        expect(wrapper.vm.message).toContain(TEST_MESSAGE);
-        expect(wrapper.vm.stockMessage).toContain("less secure by the Galaxy adminstrator");
+        const popoverStub = wrapper.find("b-popover-stub");
+        const popoverText = popoverStub.text();
+        expect(popoverText).toContain(TEST_MESSAGE);
+        expect(popoverText).toContain("less secure by the Galaxy adminstrator");
     });
 });
diff --git a/client/src/components/ObjectStore/ObjectStoreBadge.vue b/client/src/components/ObjectStore/ObjectStoreBadge.vue
index d6f7c086cd1b..b490cf6e2770 100644
--- a/client/src/components/ObjectStore/ObjectStoreBadge.vue
+++ b/client/src/components/ObjectStore/ObjectStoreBadge.vue
@@ -1,9 +1,79 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import { adminMarkup } from "./adminConfig";
+import { FontAwesomeIcon, FontAwesomeLayers } from "@fortawesome/vue-fontawesome";
+import type { components } from "@/schema";
+import "./badgeIcons";
+
+type BadgeType = components["schemas"]["BadgeDict"];
+
+const MESSAGES = {
+    restricted:
+        "This dataset is stored on storage restricted to a single user. It can not be shared, pubished, or added to Galaxy data libraries.",
+    user_defined: "This storage was user defined and is not managed by the Galaxy adminstrator.",
+    quota: "A Galaxy quota is enabled for this object store.",
+    no_quota: "No Galaxy quota is enabled for this object store.",
+    faster: "This storage has been marked as a faster option by the Galaxy adminstrator.",
+    slower: "This storage has been marked as a slower option by the Galaxy adminstrator.",
+    short_term: "This storage has been marked routinely purged by the Galaxy adminstrator.",
+    backed_up: "This storage has been marked as backed up by the Galaxy adminstrator.",
+    not_backed_up: "This storage has been marked as not backed up by the Galaxy adminstrator.",
+    more_secure:
+        "This storage has been marked as more secure by the Galaxy adminstrator. The Galaxy web application doesn't make any additional promises regarding security for this storage.",
+    less_secure:
+        "This storage has been marked as less secure by the Galaxy adminstrator. The Galaxy web application doesn't make any additional promises regarding security for this storage.",
+    more_stable:
+        "This storage has been marked as more stable by the Galaxy adminstrator - expect jobs to fail less because of storage issues for this storage.",
+    less_stable:
+        "This storage has been marked as less stable by the Galaxy adminstrator - expect jobs to fail more because of storage issues for this storage.",
+    cloud: "This is cloud storage.",
+};
+
+interface ObjectStoreBadgeProps {
+    badge: BadgeType;
+    size?: string;
+    moreOnHover?: boolean;
+}
+
+const props = withDefaults(defineProps<ObjectStoreBadgeProps>(), {
+    size: "3x",
+    moreOnHover: true,
+});
+
+const advantage = "storage-advantage";
+const disadvantage = "storage-disadvantage";
+const neutral = "storage-neutral";
+const transparent = "reduced-opacity";
+
+const stockMessage = computed(() => {
+    return MESSAGES[props.badge.type];
+});
+
+const layerClasses = computed(() => {
+    return [`fa-${props.size}`, "fa-fw"];
+});
+
+const badgeType = computed(() => {
+    return props.badge.type;
+});
+
+const shrink = computed(() => {
+    return { transform: "shrink-6" };
+});
+
+const message = computed(() => {
+    return adminMarkup(props.badge.message);
+});
+</script>
+
 <template>
     <span>
         <span ref="iconTarget" class="object-store-badge-wrapper">
             <FontAwesomeLayers :class="layerClasses" :data-badge-type="badgeType">
                 <FontAwesomeIcon v-if="badgeType == 'restricted'" icon="user-lock" :class="disadvantage" />
+                <!--
                 <FontAwesomeIcon v-if="badgeType == 'user_defined'" icon="plug" :class="neutral" />
+                -->
                 <FontAwesomeIcon v-if="badgeType == 'quota'" icon="chart-line" :class="disadvantage" />
                 <FontAwesomeIcon v-if="badgeType == 'no_quota'" icon="chart-line" :class="neutral" v-bind="shrink" />
                 <FontAwesomeIcon v-if="badgeType == 'no_quota'" icon="ban" :class="[transparent, advantage]" />
@@ -70,108 +140,6 @@
     </span>
 </template>
 
-<script>
-import adminConfigMixin from "./adminConfigMixin";
-import { FontAwesomeIcon, FontAwesomeLayers } from "@fortawesome/vue-fontawesome";
-import { library } from "@fortawesome/fontawesome-svg-core";
-import {
-    faUserLock,
-    faChartLine,
-    faBan,
-    faCircleNotch,
-    faPlug,
-    faTachometerAlt,
-    faArchive,
-    faRecycle,
-    faKey,
-    faShieldAlt,
-    faCloud,
-} from "@fortawesome/free-solid-svg-icons";
-
-library.add(
-    faUserLock,
-    faChartLine,
-    faBan,
-    faCircleNotch,
-    faPlug,
-    faTachometerAlt,
-    faArchive,
-    faRecycle,
-    faKey,
-    faShieldAlt,
-    faCloud
-);
-
-const MESSAGES = {
-    restricted:
-        "This dataset is stored on storage restricted to a single user. It can not be shared, pubished, or added to Galaxy data libraries.",
-    user_defined: "This storage was user defined and is not managed by the Galaxy adminstrator.",
-    quota: "A Galaxy quota is enabled for this object store.",
-    no_quota: "No Galaxy quota is enabled for this object store.",
-    faster: "This storage has been marked as a faster option by the Galaxy adminstrator.",
-    slower: "This storage has been marked as a slower option by the Galaxy adminstrator.",
-    short_term: "This storage has been marked routinely purged by the Galaxy adminstrator.",
-    backed_up: "This storage has been marked as backed up by the Galaxy adminstrator.",
-    not_backed_up: "This storage has been marked as not backed up by the Galaxy adminstrator.",
-    more_secure:
-        "This storage has been marked as more secure by the Galaxy adminstrator. The Galaxy web application doesn't make any additional promises regarding security for this storage.",
-    less_secure:
-        "This storage has been marked as less secure by the Galaxy adminstrator. The Galaxy web application doesn't make any additional promises regarding security for this storage.",
-    more_stable:
-        "This storage has been marked as more stable by the Galaxy adminstrator - expect jobs to fail less because of storage issues for this storage.",
-    less_stable:
-        "This storage has been marked as less stable by the Galaxy adminstrator - expect jobs to fail more because of storage issues for this storage.",
-    cloud: "This is cloud storage.",
-};
-
-export default {
-    components: {
-        FontAwesomeLayers,
-        FontAwesomeIcon,
-    },
-    mixins: [adminConfigMixin],
-    props: {
-        badge: {
-            type: Object,
-            required: true,
-        },
-        size: {
-            type: String,
-            default: "3x",
-        },
-        moreOnHover: {
-            type: Boolean,
-            default: true,
-        },
-    },
-    data() {
-        return {
-            advantage: "storage-advantage",
-            disadvantage: "storage-disadvantage",
-            neutral: "storage-neutral",
-            transparent: "reduced-opacity",
-        };
-    },
-    computed: {
-        stockMessage() {
-            return MESSAGES[this.badge.type];
-        },
-        layerClasses() {
-            return [`fa-${this.size}`, "fa-fw"];
-        },
-        badgeType() {
-            return this.badge.type;
-        },
-        shrink() {
-            return { transform: "shrink-6" };
-        },
-        message() {
-            return this.adminMarkup(this.badge.message);
-        },
-    },
-};
-</script>
-
 <style scoped>
 .reduced-opacity {
     opacity: 0.65;
diff --git a/client/src/components/ObjectStore/ObjectStoreRestrictionSpan.vue b/client/src/components/ObjectStore/ObjectStoreRestrictionSpan.vue
index 5f1bb689db60..748ad0eae58d 100644
--- a/client/src/components/ObjectStore/ObjectStoreRestrictionSpan.vue
+++ b/client/src/components/ObjectStore/ObjectStoreRestrictionSpan.vue
@@ -1,34 +1,28 @@
-<template>
-    <span v-b-tooltip.hover class="stored-how" :title="title">{{ text }}</span>
-</template>
-
-<script>
+<script lang="ts" setup>
 import Vue from "vue";
 import BootstrapVue from "bootstrap-vue";
+import { computed } from "vue";
+
 Vue.use(BootstrapVue);
 
-export default {
-    props: {
-        isPrivate: {
-            // private is reserved word
-            type: Boolean,
-        },
-    },
-    computed: {
-        text() {
-            return this.isPrivate ? "private" : "unrestricted";
-        },
-        title() {
-            if (this.isPrivate) {
-                return "This dataset is stored on storage restricted to a single user. It can not be shared, pubished, or added to Galaxy data libraries.";
-            } else {
-                return "This dataset is stored on unrestricted storage. With sufficient Galaxy permissions, this dataset can be published, shared, or added to Galaxy data libraries.";
-            }
-        },
-    },
-};
+const props = defineProps({
+    isPrivate: Boolean,
+});
+
+const text = computed(() => (props.isPrivate ? "private" : "unrestricted"));
+const title = computed(() => {
+    if (props.isPrivate) {
+        return "This dataset is stored on storage restricted to a single user. It can not be shared, published, or added to Galaxy data libraries.";
+    } else {
+        return "This dataset is stored on unrestricted storage. With sufficient Galaxy permissions, this dataset can be published, shared, or added to Galaxy data libraries.";
+    }
+});
 </script>
 
+<template>
+    <span v-b-tooltip.hover class="stored-how" :title="title">{{ text }}</span>
+</template>
+
 <style scoped>
 /* Give visual indication of mouseover info */
 .stored-how {
diff --git a/client/src/components/ObjectStore/adminConfig.ts b/client/src/components/ObjectStore/adminConfig.ts
new file mode 100644
index 000000000000..5230ef7c7aa3
--- /dev/null
+++ b/client/src/components/ObjectStore/adminConfig.ts
@@ -0,0 +1,11 @@
+import MarkdownIt from "markdown-it";
+
+export function adminMarkup(markup: string): string | null {
+    let markupHtml;
+    if (markup) {
+        markupHtml = MarkdownIt({ html: true }).render(markup);
+    } else {
+        markupHtml = null;
+    }
+    return markupHtml;
+}
diff --git a/client/src/components/ObjectStore/adminConfigMixin.js b/client/src/components/ObjectStore/adminConfigMixin.js
deleted file mode 100644
index 70f265a941ab..000000000000
--- a/client/src/components/ObjectStore/adminConfigMixin.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import MarkdownIt from "markdown-it";
-
-export default {
-    methods: {
-        adminMarkup(markup) {
-            let markupHtml;
-            if (markup) {
-                markupHtml = MarkdownIt({ html: true }).render(markup);
-            } else {
-                markupHtml = null;
-            }
-            return markupHtml;
-        },
-    },
-};
diff --git a/client/src/components/ObjectStore/badgeIcons.js b/client/src/components/ObjectStore/badgeIcons.js
new file mode 100644
index 000000000000..663433a0f523
--- /dev/null
+++ b/client/src/components/ObjectStore/badgeIcons.js
@@ -0,0 +1,33 @@
+/* I can't get this to type properly in type script, so
+   handling it here in JavaScript. I get a variant of this
+   error (https://github.com/FortAwesome/Font-Awesome/issues/12575).
+*/
+import { library } from "@fortawesome/fontawesome-svg-core";
+
+import {
+    faUserLock,
+    faChartLine,
+    faBan,
+    faCircleNotch,
+    faPlug,
+    faTachometerAlt,
+    faArchive,
+    faRecycle,
+    faKey,
+    faShieldAlt,
+    faCloud,
+} from "@fortawesome/free-solid-svg-icons";
+
+library.add(
+    faUserLock,
+    faChartLine,
+    faBan,
+    faCircleNotch,
+    faPlug,
+    faTachometerAlt,
+    faArchive,
+    faRecycle,
+    faKey,
+    faShieldAlt,
+    faCloud
+);
diff --git a/client/yarn.lock b/client/yarn.lock
index 78de84d57912..b64a1349fea0 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -2348,6 +2348,24 @@
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz"
   integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
 
+"@types/linkify-it@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.2.tgz#fd2cd2edbaa7eaac7e7f3c1748b52a19143846c9"
+  integrity sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==
+
+"@types/markdown-it@^12.2.3":
+  version "12.2.3"
+  resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-12.2.3.tgz#0d6f6e5e413f8daaa26522904597be3d6cd93b51"
+  integrity sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==
+  dependencies:
+    "@types/linkify-it" "*"
+    "@types/mdurl" "*"
+
+"@types/mdurl@*":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-1.0.2.tgz#e2ce9d83a613bacf284c7be7d491945e39e1f8e9"
+  integrity sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==
+
 "@types/mime@*":
   version "3.0.1"
   resolved "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz"