diff --git a/client/src/api/datasets.ts b/client/src/api/datasets.ts
index 63b8b5714d9c..47ee27b2b6a7 100644
--- a/client/src/api/datasets.ts
+++ b/client/src/api/datasets.ts
@@ -6,12 +6,14 @@ import { withPrefix } from "@/utils/redirect";
 
 export const datasetsFetcher = fetcher.path("/api/datasets").method("get").create();
 
+export type HDASummary = components["schemas"]["HDASummary"];
+
 type GetDatasetsApiOptions = FetchArgType<typeof datasetsFetcher>;
 type GetDatasetsQuery = Pick<GetDatasetsApiOptions, "limit" | "offset">;
 // custom interface for how we use getDatasets
 interface GetDatasetsOptions extends GetDatasetsQuery {
     sortBy?: string;
-    sortDesc?: string;
+    sortDesc?: boolean;
     query?: string;
 }
 
diff --git a/client/src/components/Dataset/DatasetHistory.vue b/client/src/components/Dataset/DatasetHistory.vue
index 14fc8ac349dc..20605fac0298 100644
--- a/client/src/components/Dataset/DatasetHistory.vue
+++ b/client/src/components/Dataset/DatasetHistory.vue
@@ -1,21 +1,24 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { HDASummary } from "@/api/datasets";
+import { useHistoryStore } from "@/stores/historyStore";
+
+interface Props {
+    item: HDASummary;
+}
+
+const props = defineProps<Props>();
+
+const historyStore = useHistoryStore();
+
+const historyName = computed(() => {
+    return historyStore.getHistoryNameById(props.item.history_id);
+});
+</script>
+
 <template>
     <div>
         {{ historyName }}
     </div>
 </template>
-<script>
-import { mapState } from "pinia";
-import { useHistoryStore } from "stores/historyStore";
-
-export default {
-    props: {
-        item: Object,
-    },
-    computed: {
-        ...mapState(useHistoryStore, ["getHistoryNameById"]),
-        historyName() {
-            return this.getHistoryNameById(this.item.history_id);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Dataset/DatasetList.vue b/client/src/components/Dataset/DatasetList.vue
index b418d488e914..bc3560ba5793 100644
--- a/client/src/components/Dataset/DatasetList.vue
+++ b/client/src/components/Dataset/DatasetList.vue
@@ -1,202 +1,211 @@
-<template>
-    <div class="overflow-auto h-100" @scroll="onScroll">
-        <div v-if="error" class="alert alert-danger" show>{{ error }}</div>
-        <div v-else>
-            <b-alert :variant="messageVariant" :show="showMessage">{{ message }}</b-alert>
-            <DelayedInput class="m-1 mb-3" placeholder="Search Datasets" @change="onQuery" />
-            <b-table
-                id="dataset-table"
-                striped
-                no-sort-reset
-                no-local-sorting
-                :fields="fields"
-                :items="rows"
-                @sort-changed="onSort">
-                <template v-slot:cell(name)="row">
-                    <DatasetName :item="row.item" @showDataset="onShowDataset" @copyDataset="onCopyDataset" />
-                </template>
-                <template v-slot:cell(history_id)="row">
-                    <DatasetHistory :item="row.item" />
-                </template>
-                <template v-slot:cell(tags)="row">
-                    <StatelessTags
-                        :value="row.item.tags"
-                        :disabled="row.item.deleted"
-                        @input="(tags) => onTags(tags, row.index)" />
-                </template>
-                <template v-slot:cell(update_time)="data">
-                    <UtcDate :date="data.value" mode="elapsed" />
-                </template>
-            </b-table>
-            <LoadingSpan v-if="loading" message="Loading datasets" />
-            <div v-if="showNotFound">
-                No matching entries found for: <span class="font-weight-bold">{{ query }}</span
-                >.
-            </div>
-            <div v-if="showNotAvailable">No datasets found.</div>
-        </div>
-    </div>
-</template>
-<script>
-import { getGalaxyInstance } from "app";
-import DelayedInput from "components/Common/DelayedInput";
-import LoadingSpan from "components/LoadingSpan";
-import StatelessTags from "components/TagsMultiselect/StatelessTags";
-import UtcDate from "components/UtcDate";
-import { mapActions } from "pinia";
-
-import { copyDataset, getDatasets } from "@/api/datasets";
+<script setup lang="ts">
+import { BAlert, BTable } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed, onMounted, ref } from "vue";
+
+import { copyDataset, getDatasets, HDASummary } from "@/api/datasets";
 import { updateTags } from "@/api/tags";
 import { useHistoryStore } from "@/stores/historyStore";
 
-import DatasetHistory from "./DatasetHistory";
-import DatasetName from "./DatasetName";
-
-export default {
-    components: {
-        DatasetHistory,
-        DatasetName,
-        LoadingSpan,
-        DelayedInput,
-        UtcDate,
-        StatelessTags,
+import DelayedInput from "@/components/Common/DelayedInput.vue";
+import DatasetHistory from "@/components/Dataset/DatasetHistory.vue";
+import DatasetName from "@/components/Dataset/DatasetName.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
+import UtcDate from "@/components/UtcDate.vue";
+
+const historyStore = useHistoryStore();
+const { currentHistoryId } = storeToRefs(historyStore);
+
+const query = ref("");
+const limit = ref(50);
+const offset = ref(0);
+const message = ref("");
+const loading = ref(true);
+const sortDesc = ref(true);
+const sortBy = ref("update_time");
+const rows = ref<HDASummary[]>([]);
+const messageVariant = ref("danger");
+const fields = ref([
+    {
+        key: "name",
+        sortable: true,
+    },
+    {
+        key: "tags",
+        sortable: false,
     },
-    data() {
-        return {
-            error: null,
-            scrolled: false,
-            fields: [
-                {
-                    key: "name",
-                    sortable: true,
-                },
-                {
-                    key: "tags",
-                    sortable: false,
-                },
-                {
-                    label: "History",
-                    key: "history_id",
-                    sortable: true,
-                },
-                {
-                    key: "extension",
-                    sortable: true,
-                },
-                {
-                    label: "Updated",
-                    key: "update_time",
-                    sortable: true,
-                },
-                {
-                    key: "context",
-                    label: "",
-                    sortable: false,
-                },
-            ],
-            query: "",
-            limit: 50,
-            offset: 0,
-            sortBy: "update_time",
-            sortDesc: true,
-            loading: true,
-            message: null,
-            messageVariant: "danger",
-            rows: [],
-        };
+    {
+        label: "History",
+        key: "history_id",
+        sortable: true,
     },
-    computed: {
-        showNotFound() {
-            return !this.loading && this.rows.length === 0 && this.query;
-        },
-        showNotAvailable() {
-            return !this.loading && this.rows.length === 0 && !this.query;
-        },
-        showMessage() {
-            return !!this.message;
-        },
+    {
+        key: "extension",
+        sortable: true,
     },
-    created() {
-        this.load();
+    {
+        label: "Updated",
+        key: "update_time",
+        sortable: true,
     },
-    methods: {
-        ...mapActions(useHistoryStore, ["applyFilters"]),
-        load(concat = false) {
-            this.loading = true;
-            getDatasets({
-                query: this.query,
-                sortBy: this.sortBy,
-                sortDesc: this.sortDesc,
-                offset: this.offset,
-                limit: this.limit,
-            })
-                .then((datasets) => {
-                    if (concat) {
-                        this.rows = this.rows.concat(datasets);
-                    } else {
-                        this.rows = datasets;
-                    }
-                    this.loading = false;
-                })
-                .catch((error) => {
-                    this.error = error;
-                });
-        },
-        onCopyDataset(item) {
-            const Galaxy = getGalaxyInstance();
-            const history = Galaxy.currHistoryPanel;
-            const dataset_id = item.id;
-            const history_id = history.model.id;
-            copyDataset(dataset_id, history_id)
-                .then((response) => {
-                    history.loadCurrentHistory();
-                })
-                .catch((error) => {
-                    this.onError(error);
-                });
-        },
-        async onShowDataset(item) {
-            const { history_id } = item;
-            const filters = {
-                deleted: item.deleted,
-                visible: item.visible,
-                hid: item.hid,
-            };
-            try {
-                await this.applyFilters(history_id, filters);
-            } catch (error) {
-                this.onError(error);
-            }
-        },
-        onTags(tags, index) {
-            const item = this.rows[index];
-            item.tags = tags;
-            updateTags(item.id, "HistoryDatasetAssociation", tags).catch((error) => {
-                this.onError(error);
-            });
-        },
-        onQuery(query) {
-            this.query = query;
-            this.offset = 0;
-            this.load();
-        },
-        onSort(props) {
-            this.sortBy = props.sortBy;
-            this.sortDesc = props.sortDesc;
-            this.offset = 0;
-            this.load();
-        },
-        onScroll({ target: { scrollTop, clientHeight, scrollHeight } }) {
-            if (scrollTop + clientHeight >= scrollHeight) {
-                if (this.offset + this.limit <= this.rows.length) {
-                    this.offset += this.limit;
-                    this.load(true);
-                }
-            }
-        },
-        onError(message) {
-            this.message = message;
-        },
+    {
+        key: "context",
+        label: "",
+        sortable: false,
     },
-};
+]);
+
+const showNotFound = computed(() => {
+    return !loading.value && rows.value.length === 0 && query;
+});
+const showNotAvailable = computed(() => {
+    return !loading.value && rows.value.length === 0 && !query.value;
+});
+
+async function load(concat = false) {
+    loading.value = true;
+
+    try {
+        const datasets = await getDatasets({
+            query: query.value,
+            sortBy: sortBy.value,
+            sortDesc: sortDesc.value,
+            offset: offset.value,
+            limit: limit.value,
+        });
+
+        if (concat) {
+            rows.value = rows.value.concat(datasets as HDASummary[]);
+        } else {
+            rows.value = datasets as HDASummary[];
+        }
+    } catch (error: any) {
+        onError(error);
+    } finally {
+        loading.value = false;
+    }
+}
+
+async function onCopyDataset(item: HDASummary) {
+    const dataset_id = item.id;
+
+    try {
+        await copyDataset(dataset_id, currentHistoryId.value as string);
+
+        historyStore.loadCurrentHistory();
+    } catch (error: any) {
+        onError(error);
+    }
+}
+
+async function onShowDataset(item: HDASummary) {
+    const { history_id } = item;
+    const filters = {
+        deleted: item.deleted,
+        visible: item.visible,
+        hid: item.hid,
+    };
+
+    try {
+        await historyStore.applyFilters(history_id, filters);
+    } catch (error: any) {
+        onError(error);
+    }
+}
+
+async function onTags(tags: string[], index: number) {
+    const item = rows.value[index];
+
+    if (item) {
+        item.tags = tags;
+    }
+
+    try {
+        await updateTags(item?.id as string, "HistoryDatasetAssociation", tags);
+    } catch (error: any) {
+        onError(error);
+    }
+}
+
+function onQuery(q: string) {
+    query.value = q;
+    offset.value = 0;
+
+    load();
+}
+
+function onSort(props: { sortBy: string; sortDesc: boolean }) {
+    offset.value = 0;
+    sortBy.value = props.sortBy;
+    sortDesc.value = props.sortDesc;
+
+    load();
+}
+
+function onScroll(scroll: Event) {
+    const { scrollTop, clientHeight, scrollHeight } = scroll.target as HTMLElement;
+
+    if (scrollTop + clientHeight >= scrollHeight) {
+        if (offset.value + limit.value <= rows.value.length) {
+            offset.value += limit.value;
+
+            load(true);
+        }
+    }
+}
+
+function onError(msg: string) {
+    message.value = msg;
+}
+
+onMounted(() => {
+    load();
+});
 </script>
+
+<template>
+    <div class="overflow-auto h-100" @scroll="onScroll">
+        <BAlert v-if="message" :variant="messageVariant" show>
+            {{ message }}
+        </BAlert>
+
+        <DelayedInput class="m-1 mb-3" placeholder="Search Datasets" @change="onQuery" />
+
+        <BTable
+            id="dataset-table"
+            striped
+            no-sort-reset
+            no-local-sorting
+            :fields="fields"
+            :items="rows"
+            @sort-changed="onSort">
+            <template v-slot:cell(name)="row">
+                <DatasetName :item="row.item" @showDataset="onShowDataset" @copyDataset="onCopyDataset" />
+            </template>
+
+            <template v-slot:cell(history_id)="row">
+                <DatasetHistory :item="row.item" />
+            </template>
+
+            <template v-slot:cell(tags)="row">
+                <StatelessTags
+                    :value="row.item.tags"
+                    :disabled="row.item.deleted"
+                    @input="(tags) => onTags(tags, row.index)" />
+            </template>
+
+            <template v-slot:cell(update_time)="data">
+                <UtcDate :date="data.value" mode="elapsed" />
+            </template>
+        </BTable>
+
+        <LoadingSpan v-if="loading" message="Loading datasets" />
+
+        <BAlert v-if="showNotFound" variant="info" show>
+            No matching entries found for: <span class="font-weight-bold">{{ query }}</span>
+        </BAlert>
+
+        <BAlert v-if="showNotAvailable" variant="info" show> No datasets found. </BAlert>
+    </div>
+</template>
diff --git a/client/src/components/Dataset/DatasetName.test.js b/client/src/components/Dataset/DatasetName.test.ts
similarity index 71%
rename from client/src/components/Dataset/DatasetName.test.js
rename to client/src/components/Dataset/DatasetName.test.ts
index f56bd1a55e93..2de4470470f3 100644
--- a/client/src/components/Dataset/DatasetName.test.js
+++ b/client/src/components/Dataset/DatasetName.test.ts
@@ -1,46 +1,57 @@
+import { getLocalVue } from "@tests/jest/helpers";
 import { shallowMount } from "@vue/test-utils";
-import { getLocalVue } from "tests/jest/helpers";
 
-import DatasetName from "./DatasetName";
+import DatasetName from "./DatasetName.vue";
 
 const localVue = getLocalVue();
 
+async function mountComponent(propsData: { item: { name: string; state: string } }) {
+    return shallowMount(DatasetName as object, {
+        propsData,
+        localVue,
+    });
+}
+
 describe("Dataset Name", () => {
     it("test dataset default", async () => {
-        const wrapper = shallowMount(DatasetName, {
-            propsData: { item: { name: "name", state: "success" } },
-            localVue,
-        });
+        const wrapper = await mountComponent({ item: { name: "name", state: "success" } });
+
         const state = wrapper.findAll(".name");
         expect(state.length).toBe(1);
         expect(state.at(0).text()).toBe("name");
+
         const $linkShow = wrapper.find(".dropdown-item:first-child");
+
         $linkShow.trigger("click");
+
         expect(Array.isArray(wrapper.emitted().showDataset)).toBe(true);
+
         const $linkCopy = wrapper.find(".dropdown-item:last-child");
+
         $linkCopy.trigger("click");
+
         expect(Array.isArray(wrapper.emitted().copyDataset)).toBe(true);
     });
+
     it("test dataset error", async () => {
-        const wrapper = shallowMount(DatasetName, {
-            propsData: { item: { name: "name", state: "error" } },
-            localVue,
-        });
+        const wrapper = await mountComponent({ item: { name: "name", state: "error" } });
+
         const state = wrapper.findAll(".name");
         expect(state.length).toBe(1);
         expect(state.at(0).text()).toBe("name");
+
         const errorstate = wrapper.findAll(".error");
         expect(errorstate.length).toBe(1);
         expect(errorstate.at(0).classes()).toEqual(expect.arrayContaining(["text-danger"]));
     });
+
     it("test dataset paused", async () => {
-        const wrapper = shallowMount(DatasetName, {
-            propsData: { item: { name: "name", state: "paused" } },
-            localVue,
-        });
+        const wrapper = await mountComponent({ item: { name: "name", state: "paused" } });
+
         const state = wrapper.findAll(".name");
         expect(state.length).toBe(1);
         expect(state.at(0).text()).toBe("name");
+
         const pausestate = wrapper.findAll(".pause");
         expect(pausestate.length).toBe(1);
         expect(pausestate.at(0).classes()).toEqual(expect.arrayContaining(["text-info"]));
diff --git a/client/src/components/Dataset/DatasetName.vue b/client/src/components/Dataset/DatasetName.vue
index be8e5382a9c3..22fe48c8b883 100644
--- a/client/src/components/Dataset/DatasetName.vue
+++ b/client/src/components/Dataset/DatasetName.vue
@@ -1,67 +1,84 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCaretDown, faCopy, faEye, faPause, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BLink } from "bootstrap-vue";
+import { computed } from "vue";
+
+import { HDASummary } from "@/api/datasets";
+
+library.add(faCaretDown, faCopy, faEye, faTimesCircle, faPause);
+
+interface Props {
+    item: HDASummary;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "copyDataset", item: Props["item"]): void;
+    (e: "showDataset", item: Props["item"]): void;
+}>();
+
+const getName = computed(() => {
+    return props.item.name || "Unavailable";
+});
+const isError = computed(() => {
+    return props.item.state === "error";
+});
+const isPaused = computed(() => {
+    return props.item.state === "paused";
+});
+
+function copyDataset() {
+    emit("copyDataset", props.item);
+}
+
+function showDataset() {
+    emit("showDataset", props.item);
+}
+</script>
+
 <template>
     <div>
-        <b-link
+        <BLink
             id="dataset-dropdown"
             class="workflow-dropdown p-2"
             data-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="false">
-            <span
+            <FontAwesomeIcon
                 v-if="isError"
                 v-b-tooltip.hover
-                class="dataset-icon error fa fa-times-circle text-danger"
+                :icon="faTimesCircle"
+                class="dataset-icon error text-danger"
                 title="An error occurred for this dataset." />
-            <span
+            <FontAwesomeIcon
                 v-else-if="isPaused"
                 v-b-tooltip.hover
-                class="dataset-icon pause fa fa-pause text-info"
+                :icon="faPause"
+                class="dataset-icon pause text-info"
                 title="The creation of this dataset has been paused." />
-            <span v-else class="dataset-icon fa fa-caret-down" />
+            <FontAwesomeIcon v-else :icon="faCaretDown" class="dataset-icon" />
+
             <span class="name">{{ getName }}</span>
-        </b-link>
+        </BLink>
+
         <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" />
+                <FontAwesomeIcon :icon="faEye" class="mr-1" />
+
                 <span>Show in History containing dataset</span>
             </a>
+
             <a class="dropdown-item" href="#" @click.prevent="copyDataset">
-                <span class="fa fa-copy fa-fw mr-1" />
+                <FontAwesomeIcon :icon="faCopy" class="mr-1" />
+
                 <span>Copy to current History</span>
             </a>
         </div>
     </div>
 </template>
-<script>
-import BootstrapVue from "bootstrap-vue";
-import Vue from "vue";
-
-Vue.use(BootstrapVue);
-
-export default {
-    props: {
-        item: Object,
-    },
-    computed: {
-        getName() {
-            return this.item.name || "Unavailable";
-        },
-        isError() {
-            return this.item.state === "error";
-        },
-        isPaused() {
-            return this.item.state === "paused";
-        },
-    },
-    methods: {
-        copyDataset(item) {
-            this.$emit("copyDataset", this.item);
-        },
-        showDataset(item) {
-            this.$emit("showDataset", this.item);
-        },
-    },
-};
-</script>
 
 <style scoped>
 .dataset-icon {
diff --git a/client/src/components/Dataset/DatasetPermissionsForm.vue b/client/src/components/Dataset/DatasetPermissionsForm.vue
index 6a3d4bffd170..c3be817809d3 100644
--- a/client/src/components/Dataset/DatasetPermissionsForm.vue
+++ b/client/src/components/Dataset/DatasetPermissionsForm.vue
@@ -1,9 +1,15 @@
 <script lang="ts" setup>
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faUsers } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BFormCheckbox } from "bootstrap-vue";
 import { ref, watch } from "vue";
 
 import FormGeneric from "@/components/Form/FormGeneric.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
+library.add(faUsers);
+
 interface DatasetPermissionsFormProps {
     loading: boolean;
     simplePermissions: boolean;
@@ -36,17 +42,20 @@ watch(props, () => {
         <div v-else-if="simplePermissions && !selectedAdvancedForm">
             <div class="ui-portlet-section">
                 <div class="portlet-header">
-                    <span class="portlet-title"
-                        ><span class="portlet-title-icon fa mr-1 fa-users"></span>
+                    <span class="portlet-title">
+                        <FontAwesomeIcon :icnon="faUsers" class="portlet-title-icon mr-1" />
+
                         <b itemprop="name" class="portlet-title-text">{{ title }}</b>
                     </span>
                 </div>
+
                 <div class="portlet-content">
                     <div class="mb-3 mt-3">
-                        <b-form-checkbox v-model="checkedInForm" name="check-button" switch @change="change">
+                        <BFormCheckbox v-model="checkedInForm" name="check-button" switch @change="change">
                             Make new datasets private
-                        </b-form-checkbox>
+                        </BFormCheckbox>
                     </div>
+
                     <a href="#" @click="selectedAdvancedForm = true">Show advanced options.</a>
                 </div>
             </div>
diff --git a/client/src/stores/historyStore.ts b/client/src/stores/historyStore.ts
index 0ceb16cbb053..6acb410d23a5 100644
--- a/client/src/stores/historyStore.ts
+++ b/client/src/stores/historyStore.ts
@@ -150,7 +150,7 @@ export const useHistoryStore = defineStore("historyStore", () => {
         setCurrentHistoryId(history.id);
     }
 
-    async function applyFilters(historyId: string, filters: Record<string, string | boolean>) {
+    async function applyFilters(historyId: string, filters: Record<string, string | number | boolean>) {
         if (currentHistoryId.value !== historyId) {
             await setCurrentHistory(historyId);
         }