diff --git a/client/src/components/Collections/ListCollectionCreator.vue b/client/src/components/Collections/ListCollectionCreator.vue
index 7f8896e221e7..e6cb37846cba 100644
--- a/client/src/components/Collections/ListCollectionCreator.vue
+++ b/client/src/components/Collections/ListCollectionCreator.vue
@@ -1,67 +1,340 @@
+<script setup lang="ts">
+import "ui/hoverhighlight";
+
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faSortAlphaDown, faUndo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BButton } from "bootstrap-vue";
+import { computed, onMounted, ref } from "vue";
+import draggable from "vuedraggable";
+
+import { type HDCADetailed } from "@/api";
+import STATES from "@/mvc/dataset/states";
+import localize from "@/utils/localization";
+
+import CollectionCreator from "@/components/Collections/common/CollectionCreator.vue";
+import DatasetCollectionElementView from "@/components/Collections/ListDatasetCollectionElementView.vue";
+
+library.add(faSortAlphaDown, faUndo);
+
+interface Props {
+    initialElements: Array<any>;
+    oncancel: () => void;
+    oncreate: () => void;
+    creationFn: (workingElements: any, collectionName: string, hideSourceItems: boolean) => any;
+    defaultHideSourceItems?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "clicked-create", workingElements: any, collectionName: string, hideSourceItems: boolean): void;
+}>();
+
+const state = ref("build");
+const originalNamedElements = ref([]);
+const duplicateNames = ref<string[]>([]);
+const invalidElements = ref<string[]>([]);
+const workingElements = ref<HDCADetailed[]>([]);
+const selectedDatasetElements = ref<string[]>([]);
+const hideSourceItems = ref(props.defaultHideSourceItems || false);
+
+const atLeastOneDatasetIsSelected = computed(() => {
+    return selectedDatasetElements.value.length > 0;
+});
+const getSelectedDatasetElements = computed(() => {
+    return selectedDatasetElements.value;
+});
+const noMoreValidDatasets = computed(() => {
+    return workingElements.value.length == 0;
+});
+const returnInvalidElementsLength = computed(() => {
+    return invalidElements.value.length > 0;
+});
+const returnInvalidElements = computed(() => {
+    return invalidElements.value;
+});
+const noElementsSelected = computed(() => {
+    return props.initialElements.length == 0;
+});
+const showDuplicateError = computed(() => {
+    return duplicateNames.value.length > 0;
+});
+const allElementsAreInvalid = computed(() => {
+    return props.initialElements.length == invalidElements.value.length;
+});
+
+/** set up instance vars function */
+function _instanceSetUp() {
+    /** Ids of elements that have been selected by the user - to preserve over renders */
+    selectedDatasetElements.value = [];
+}
+
+// ----------------------------------------------------------------------- process raw list
+/** set up main data */
+function _elementsSetUp() {
+    /** a list of invalid elements and the reasons they aren't valid */
+
+    invalidElements.value = [];
+
+    //TODO: handle fundamental problem of syncing DOM, views, and list here
+    /** data for list in progress */
+    workingElements.value = [];
+
+    // copy initial list, sort, add ids if needed
+    workingElements.value = JSON.parse(JSON.stringify(props.initialElements.slice(0)));
+
+    _ensureElementIds();
+    _validateElements();
+    _mangleDuplicateNames();
+}
+
+/** add ids to dataset objs in initial list if none */
+function _ensureElementIds() {
+    workingElements.value.forEach((element) => {
+        if (!Object.prototype.hasOwnProperty.call(element, "id")) {
+            element.id = element._uid as string;
+        }
+    });
+
+    return workingElements.value;
+}
+
+// /** separate working list into valid and invalid elements for this collection */
+function _validateElements() {
+    workingElements.value = workingElements.value.filter((element) => {
+        var problem = _isElementInvalid(element);
+
+        if (problem) {
+            invalidElements.value.push(element.name + "  " + problem);
+        }
+
+        return !problem;
+    });
+
+    return workingElements.value;
+}
+
+/** describe what is wrong with a particular element if anything */
+function _isElementInvalid(element: HDCADetailed) {
+    if (element.history_content_type === "dataset_collection") {
+        return localize("is a collection, this is not allowed");
+    }
+
+    var validState = element.state === STATES.OK || STATES.NOT_READY_STATES.includes(element.state as string);
+
+    if (!validState) {
+        return localize("has errored, is paused, or is not accessible");
+    }
+
+    if (element.deleted || element.purged) {
+        return localize("has been deleted or purged");
+    }
+
+    return null;
+}
+
+// /** mangle duplicate names using a mac-like '(counter)' addition to any duplicates */
+function _mangleDuplicateNames() {
+    var counter = 1;
+    var existingNames: { [key: string]: boolean } = {};
+
+    workingElements.value.forEach((element) => {
+        var currName = element.name;
+
+        while (Object.prototype.hasOwnProperty.call(existingNames, currName as string)) {
+            currName = `${element.name} (${counter})`;
+            counter += 1;
+        }
+
+        element.name = currName;
+        existingNames[element.name as string] = true;
+    });
+}
+
+function saveOriginalNames() {
+    // Deep copy elements
+    originalNamedElements.value = JSON.parse(JSON.stringify(workingElements.value));
+}
+
+function getOriginalNames() {
+    // Deep copy elements
+    workingElements.value = JSON.parse(JSON.stringify(originalNamedElements.value));
+}
+
+function elementSelected(e: HDCADetailed) {
+    if (!selectedDatasetElements.value.includes(e.id)) {
+        selectedDatasetElements.value.push(e.id);
+    } else {
+        selectedDatasetElements.value.splice(selectedDatasetElements.value.indexOf(e.id), 1);
+    }
+}
+
+function elementDiscarded(e: HDCADetailed) {
+    workingElements.value.splice(workingElements.value.indexOf(e), 1);
+
+    return workingElements.value;
+}
+
+function clickClearAll() {
+    selectedDatasetElements.value = [];
+}
+
+function clickedCreate(collectionName: string) {
+    checkForDuplicates();
+
+    if (state.value !== "error") {
+        emit("clicked-create", workingElements.value, collectionName, hideSourceItems.value);
+
+        return props
+            .creationFn(workingElements.value, collectionName, hideSourceItems.value)
+            .done(props.oncreate)
+            .fail(() => {
+                state.value = "error";
+            });
+    }
+}
+
+function checkForDuplicates() {
+    var valid = true;
+    var existingNames: { [key: string]: boolean } = {};
+
+    duplicateNames.value = [];
+
+    workingElements.value.forEach((element) => {
+        if (Object.prototype.hasOwnProperty.call(existingNames, element.name as string)) {
+            valid = false;
+            duplicateNames.value.push(element.name as string);
+        }
+
+        existingNames[element.name as string] = true;
+    });
+
+    state.value = valid ? "build" : "error";
+}
+
+/** reset all data to the initial state */
+function reset() {
+    _instanceSetUp();
+    getOriginalNames();
+}
+
+function sortByName() {
+    workingElements.value.sort(compareNames);
+}
+
+function compareNames(a: HDCADetailed, b: HDCADetailed) {
+    if (a.name && b.name && a.name < b.name) {
+        return -1;
+    }
+    if (a.name && b.name && a.name > b.name) {
+        return 1;
+    }
+
+    return 0;
+}
+
+function onUpdateHideSourceItems(newHideSourceItems: boolean) {
+    hideSourceItems.value = newHideSourceItems;
+}
+
+onMounted(() => {
+    _instanceSetUp();
+    _elementsSetUp();
+    saveOriginalNames();
+});
+
+//TODO: issue #9497
+// const removeExtensions = ref(true);
+// removeExtensionsToggle: function () {
+//     this.removeExtensions = !this.removeExtensions;
+//     if (this.removeExtensions == true) {
+//         this.removeExtensionsFn();
+//     }
+// },
+// removeExtensionsFn: function () {
+//     workingElements.value.forEach((e) => {
+//         var lastDotIndex = e.lastIndexOf(".");
+//         if (lastDotIndex > 0) {
+//             var extension = e.slice(lastDotIndex, e.length);
+//             e = e.replace(extension, "");
+//         }
+//     });
+// },
+</script>
+
 <template>
     <div class="list-collection-creator">
         <div v-if="state == 'error'">
-            <b-alert show variant="danger">
-                {{ errorText }}
-            </b-alert>
+            <BAlert show variant="danger">
+                {{ localize("Galaxy could not be reached and may be updating.  Try again in a few minutes.") }}
+            </BAlert>
         </div>
         <div v-else>
             <div v-if="noElementsSelected">
-                <b-alert show variant="warning" dismissible>
-                    {{ noElementsHeader }}
-                    {{ allInvalidElementsPartOne }}
+                <BAlert show variant="warning" dismissible>
+                    {{ localize("No datasets were selected") }}
+                    {{ localize("At least one element is needed for the collection. You may need to") }}
                     <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
-                        {{ cancelText }}
+                        {{ localize("cancel") }}
                     </a>
-                    {{ allInvalidElementsPartTwo }}
-                </b-alert>
+                    {{ localize("and reselect new elements.") }}
+                </BAlert>
+
                 <div class="float-left">
                     <button class="cancel-create btn" tabindex="-1" @click="oncancel">
-                        {{ l("Cancel") }}
+                        {{ localize("Cancel") }}
                     </button>
                 </div>
             </div>
             <div v-else-if="allElementsAreInvalid">
-                <b-alert show variant="warning" dismissible>
-                    {{ invalidHeader }}
+                <BAlert show variant="warning" dismissible>
+                    {{ localize("The following selections could not be included due to problems:") }}
                     <ul>
                         <li v-for="problem in returnInvalidElements" :key="problem">
                             {{ problem }}
                         </li>
                     </ul>
-                    {{ allInvalidElementsPartOne }}
+                    {{ localize("At least one element is needed for the collection. You may need to") }}
                     <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
-                        {{ cancelText }}
+                        {{ localize("cancel") }}
                     </a>
-                    {{ allInvalidElementsPartTwo }}
-                </b-alert>
+                    {{ localize("and reselect new elements.") }}
+                </BAlert>
+
                 <div class="float-left">
                     <button class="cancel-create btn" tabindex="-1" @click="oncancel">
-                        {{ l("Cancel") }}
+                        {{ localize("Cancel") }}
                     </button>
                 </div>
             </div>
             <div v-else>
                 <div v-if="returnInvalidElementsLength">
-                    <b-alert show variant="warning" dismissible>
-                        {{ invalidHeader }}
+                    <BAlert show variant="warning" dismissible>
+                        {{ localize("The following selections could not be included due to problems:") }}
                         <ul>
                             <li v-for="problem in returnInvalidElements" :key="problem">
                                 {{ problem }}
                             </li>
                         </ul>
-                    </b-alert>
+                    </BAlert>
                 </div>
+
                 <div v-if="showDuplicateError">
-                    <b-alert show variant="danger">
-                        {{ l("Collections cannot have duplicated names. The following list names are duplicated: ") }}
+                    <BAlert show variant="danger">
+                        {{
+                            localize(
+                                "Collections cannot have duplicated names. The following list names are duplicated: "
+                            )
+                        }}
                         <ol>
                             <li v-for="name in duplicateNames" :key="name">{{ name }}</li>
                         </ol>
-                        {{ l("Please fix these duplicates and try again.") }}
-                    </b-alert>
+                        {{ localize("Please fix these duplicates and try again.") }}
+                    </BAlert>
                 </div>
-                <collection-creator
+
+                <CollectionCreator
                     :oncancel="oncancel"
                     :hide-source-items="hideSourceItems"
                     @onUpdateHideSourceItems="onUpdateHideSourceItems"
@@ -69,7 +342,7 @@
                     <template v-slot:help-content>
                         <p>
                             {{
-                                l(
+                                localize(
                                     [
                                         "Collections of datasets are permanent, ordered lists of datasets that can be passed to tools ",
                                         "and workflows in order to have analyses done on each member of the entire group. This interface allows ",
@@ -78,383 +351,162 @@
                                 )
                             }}
                         </p>
+
                         <ul>
                             <li>
-                                {{ l("Rename elements in the list by clicking on") }}
+                                {{ localize("Rename elements in the list by clicking on") }}
                                 <i data-target=".collection-element .name">
-                                    {{ l("the existing name") }}
+                                    {{ localize("the existing name") }}
                                 </i>
-                                {{ l(".") }}
+                                {{ localize(".") }}
                             </li>
+
                             <li>
-                                {{ l("Discard elements from the final created list by clicking on the ") }}
+                                {{ localize("Discard elements from the final created list by clicking on the ") }}
                                 <i data-target=".collection-element .discard">
-                                    {{ l("Discard") }}
+                                    {{ localize("Discard") }}
                                 </i>
-                                {{ l("button.") }}
+                                {{ localize("button.") }}
                             </li>
+
                             <li>
                                 {{
-                                    l(
+                                    localize(
                                         "Reorder the list by clicking and dragging elements. Select multiple elements by clicking on"
                                     )
                                 }}
                                 <i data-target=".collection-element">
-                                    {{ l("them") }}
+                                    {{ localize("them") }}
                                 </i>
                                 {{
-                                    l(
+                                    localize(
                                         "and you can then move those selected by dragging the entire group. Deselect them by clicking them again or by clicking the"
                                     )
                                 }}
                                 <i data-target=".clear-selected">
-                                    {{ l("Clear selected") }}
+                                    {{ localize("Clear selected") }}
                                 </i>
-                                {{ l("link.") }}
+                                {{ localize("link.") }}
                             </li>
+
                             <li>
-                                {{ l("Click ") }}
+                                {{ localize("Click ") }}
                                 <i data-target=".reset">
-                                    <FontAwesomeIcon icon="undo" />
+                                    <FontAwesomeIcon :icon="faUndo" />
                                 </i>
-                                {{ l("to begin again as if you had just opened the interface.") }}
+                                {{ localize("to begin again as if you had just opened the interface.") }}
                             </li>
+
                             <li>
-                                {{ l("Click ") }}
+                                {{ localize("Click ") }}
                                 <i data-target=".sort-items">
-                                    <FontAwesomeIcon icon="sort-alpha-down" />
+                                    <FontAwesomeIcon :icon="faSortAlphaDown" />
                                 </i>
-                                {{ l("to sort datasets alphabetically.") }}
+                                {{ localize("to sort datasets alphabetically.") }}
                             </li>
+
                             <li>
-                                {{ l("Click the") }}
+                                {{ localize("Click the") }}
                                 <i data-target=".cancel-create">
-                                    {{ l("Cancel") }}
+                                    {{ localize("Cancel") }}
                                 </i>
-                                {{ l("button to exit the interface.") }}
+                                {{ localize("button to exit the interface.") }}
                             </li>
                         </ul>
+
                         <br />
+
                         <p>
-                            {{ l("Once your collection is complete, enter a ") }}
+                            {{ localize("Once your collection is complete, enter a ") }}
                             <i data-target=".collection-name">
-                                {{ l("name") }}
+                                {{ localize("name") }}
                             </i>
-                            {{ l("and click") }}
+                            {{ localize("and click") }}
                             <i data-target=".create-collection">
-                                {{ l("Create list") }}
+                                {{ localize("Create list") }}
                             </i>
-                            {{ l(".") }}
+                            {{ localize(".") }}
                         </p>
                     </template>
+
                     <template v-slot:middle-content>
                         <div class="collection-elements-controls">
-                            <b-button class="reset" :title="titleUndoButton" @click="reset">
-                                <FontAwesomeIcon icon="undo" />
-                            </b-button>
-                            <b-button class="sort-items" :title="titleSortButton" @click="sortByName">
-                                <FontAwesomeIcon icon="sort-alpha-down" />
-                            </b-button>
+                            <BButton class="reset" :title="localize('Undo all reordering and discards')" @click="reset">
+                                <FontAwesomeIcon :icon="faUndo" />
+                            </BButton>
+
+                            <BButton class="sort-items" :title="localize('Sort datasets by name')" @click="sortByName">
+                                <FontAwesomeIcon :icon="faSortAlphaDown" />
+                            </BButton>
+
                             <a
                                 v-if="atLeastOneDatasetIsSelected"
                                 class="clear-selected"
                                 href="javascript:void(0);"
                                 role="button"
-                                :title="titleDeselectButton"
+                                :title="localize('De-select all selected datasets')"
                                 @click="clickClearAll">
-                                {{ l("Clear selected") }}
+                                {{ localize("Clear selected") }}
                             </a>
                         </div>
+
                         <draggable
                             v-model="workingElements"
                             class="collection-elements scroll-container flex-row drop-zone"
                             @start="drag = true"
                             @end="drag = false">
                             <div v-if="noMoreValidDatasets">
-                                <b-alert show variant="warning" dismissible>
-                                    {{ discardedElementsHeader }}
+                                <BAlert show variant="warning" dismissible>
+                                    {{ localize("No elements left. Would you like to") }}
                                     <a class="reset-text" href="javascript:void(0)" role="button" @click="reset">
-                                        {{ startOverText }}
+                                        {{ localize("start over") }}
                                     </a>
                                     ?
-                                </b-alert>
+                                </BAlert>
                             </div>
+
                             <DatasetCollectionElementView
-                                v-for="element in returnWorkingElements"
+                                v-for="element in workingElements"
                                 v-else
                                 :key="element.id"
-                                :class="{ selected: getSelectedDatasetElems.includes(element.id) }"
+                                :class="{ selected: getSelectedDatasetElements.includes(element.id) }"
                                 :element="element"
                                 @element-is-selected="elementSelected"
                                 @element-is-discarded="elementDiscarded"
                                 @onRename="(name) => (element.name = name)" />
                         </draggable>
                     </template>
-                </collection-creator>
+                </CollectionCreator>
             </div>
         </div>
     </div>
 </template>
 
-<script>
-import "ui/hoverhighlight";
-
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faSortAlphaDown, faUndo } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import BootstrapVue from "bootstrap-vue";
-import STATES from "mvc/dataset/states";
-import _l from "utils/localization";
-import Vue from "vue";
-import draggable from "vuedraggable";
-
-import mixin from "./common/mixin";
-import DatasetCollectionElementView from "./ListDatasetCollectionElementView";
-
-library.add(faSortAlphaDown, faUndo);
-
-Vue.use(BootstrapVue);
-export default {
-    components: { DatasetCollectionElementView, draggable, FontAwesomeIcon },
-    mixins: [mixin],
-    data: function () {
-        return {
-            state: "build", //error
-            titleUndoButton: _l("Undo all reordering and discards"),
-            titleSortButton: _l("Sort datasets by name"),
-            titleDeselectButton: _l("De-select all selected datasets"),
-            noElementsHeader: _l("No datasets were selected"),
-            discardedElementsHeader: _l("No elements left. Would you like to"),
-            invalidHeader: _l("The following selections could not be included due to problems:"),
-            allInvalidElementsPartOne: _l("At least one element is needed for the collection. You may need to"),
-            cancelText: _l("cancel"),
-            startOverText: _l("start over"),
-            allInvalidElementsPartTwo: _l("and reselect new elements."),
-            errorText: _l("Galaxy could not be reached and may be updating.  Try again in a few minutes."),
-            workingElements: [],
-            originalNamedElements: [],
-            invalidElements: [],
-            selectedDatasetElems: [],
-            removeExtensions: true,
-            duplicateNames: [],
-        };
-    },
-    computed: {
-        atLeastOneDatasetIsSelected() {
-            return this.selectedDatasetElems.length > 0;
-        },
-        getSelectedDatasetElems() {
-            return this.selectedDatasetElems;
-        },
-        returnWorkingElements: function () {
-            return this.workingElements;
-        },
-        noMoreValidDatasets() {
-            return this.workingElements.length == 0;
-        },
-        returnInvalidElementsLength: function () {
-            return this.invalidElements.length > 0;
-        },
-        returnInvalidElements: function () {
-            return this.invalidElements;
-        },
-        allElementsAreInvalid: function () {
-            return this.initialElements.length == this.invalidElements.length;
-        },
-        noElementsSelected: function () {
-            return this.initialElements.length == 0;
-        },
-        noElementsLeft: function () {
-            return this.workingElements.length == 0;
-        },
-        showDuplicateError() {
-            return this.duplicateNames.length > 0;
-        },
-    },
-    created() {
-        this._instanceSetUp();
-        this._elementsSetUp();
-        this.saveOriginalNames();
-    },
-    methods: {
-        l(str) {
-            // _l conflicts private methods of Vue internals, expose as l instead
-            return _l(str);
-        },
-        /** set up instance vars */
-        _instanceSetUp: function () {
-            /** Ids of elements that have been selected by the user - to preserve over renders */
-            this.selectedDatasetElems = [];
-        },
-        // ------------------------------------------------------------------------ process raw list
-        /** set up main data */
-        _elementsSetUp: function () {
-            /** a list of invalid elements and the reasons they aren't valid */
-            this.invalidElements = [];
-            //TODO: handle fundamental problem of syncing DOM, views, and list here
-            /** data for list in progress */
-            this.workingElements = [];
-            // copy initial list, sort, add ids if needed
-            this.workingElements = JSON.parse(JSON.stringify(this.initialElements.slice(0)));
-            this._ensureElementIds();
-            this._validateElements();
-            this._mangleDuplicateNames();
-        },
-        /** add ids to dataset objs in initial list if none */
-        _ensureElementIds: function () {
-            this.workingElements.forEach((element) => {
-                if (!Object.prototype.hasOwnProperty.call(element, "id")) {
-                    element.id = element._uid;
-                }
-            });
-            return this.workingElements;
-        },
-        // /** separate working list into valid and invalid elements for this collection */
-        _validateElements: function () {
-            this.workingElements = this.workingElements.filter((element) => {
-                var problem = this._isElementInvalid(element);
-                if (problem) {
-                    this.invalidElements.push(element.name + "  " + problem);
-                }
-                return !problem;
-            });
-            return this.workingElements;
-        },
-        /** describe what is wrong with a particular element if anything */
-        _isElementInvalid: function (element) {
-            if (element.history_content_type === "dataset_collection") {
-                return _l("is a collection, this is not allowed");
-            }
-            var validState = element.state === STATES.OK || STATES.NOT_READY_STATES.includes(element.state);
-            if (!validState) {
-                return _l("has errored, is paused, or is not accessible");
-            }
-            if (element.deleted || element.purged) {
-                return _l("has been deleted or purged");
-            }
-            return null;
-        },
-        // /** mangle duplicate names using a mac-like '(counter)' addition to any duplicates */
-        _mangleDuplicateNames: function () {
-            var counter = 1;
-            var existingNames = {};
-            this.workingElements.forEach((element) => {
-                var currName = element.name;
-                while (Object.prototype.hasOwnProperty.call(existingNames, currName)) {
-                    currName = `${element.name} (${counter})`;
-                    counter += 1;
-                }
-                element.name = currName;
-                existingNames[element.name] = true;
-            });
-        },
-        saveOriginalNames: function () {
-            // Deep copy elements
-            this.originalNamedElements = JSON.parse(JSON.stringify(this.workingElements));
-        },
-        getOriginalNames: function () {
-            // Deep copy elements
-            this.workingElements = JSON.parse(JSON.stringify(this.originalNamedElements));
-        },
-        elementSelected: function (e) {
-            if (!this.selectedDatasetElems.includes(e.id)) {
-                this.selectedDatasetElems.push(e.id);
-            } else {
-                this.selectedDatasetElems.splice(this.selectedDatasetElems.indexOf(e.id), 1);
-            }
-        },
-        elementDiscarded: function (e) {
-            this.$delete(this.workingElements, this.workingElements.indexOf(e));
-            return this.workingElements;
-        },
-        clickClearAll: function () {
-            this.selectedDatasetElems = [];
-        },
-        clickedCreate: function (collectionName) {
-            this.checkForDuplicates();
-            if (this.state !== "error") {
-                this.$emit("clicked-create", this.workingElements, this.collectionName, this.hideSourceItems);
-                return this.creationFn(this.workingElements, collectionName, this.hideSourceItems)
-                    .done(this.oncreate)
-                    .fail(() => {
-                        this.state = "error";
-                    });
-            }
-        },
-        checkForDuplicates: function () {
-            var existingNames = {};
-            this.duplicateNames = [];
-            var valid = true;
-            this.workingElements.forEach((element) => {
-                if (Object.prototype.hasOwnProperty.call(existingNames, element.name)) {
-                    valid = false;
-                    this.duplicateNames.push(element.name);
-                }
-                existingNames[element.name] = true;
-            });
-            this.state = valid ? "build" : "error";
-        },
-        //TODO: issue #9497
-        // removeExtensionsToggle: function () {
-        //     this.removeExtensions = !this.removeExtensions;
-        //     if (this.removeExtensions == true) {
-        //         this.removeExtensionsFn();
-        //     }
-        // },
-        // removeExtensionsFn: function () {
-        //     this.workingElements.forEach((e) => {
-        //         var lastDotIndex = e.lastIndexOf(".");
-        //         if (lastDotIndex > 0) {
-        //             var extension = e.slice(lastDotIndex, e.length);
-        //             e = e.replace(extension, "");
-        //         }
-        //     });
-        // },
-        /** reset all data to the initial state */
-        reset: function () {
-            this._instanceSetUp();
-            this.getOriginalNames();
-        },
-        sortByName: function () {
-            this.workingElements.sort(this.compareNames);
-        },
-        compareNames: function (a, b) {
-            if (a.name < b.name) {
-                return -1;
-            }
-            if (a.name > b.name) {
-                return 1;
-            }
-            return 0;
-        },
-        /** string rep */
-        toString: function () {
-            return "ListCollectionCreator";
-        },
-    },
-};
-</script>
-
-<style lang="scss">
+<style scoped lang="scss">
 .list-collection-creator {
     .footer {
         margin-top: 8px;
     }
+
     .cancel-create {
         border-color: lightgrey;
     }
+
     .collection-elements-controls {
         margin-bottom: 8px;
+
         .clear-selected {
             float: right !important;
         }
     }
+
     .collection-elements {
         max-height: 400px;
         border: 0px solid lightgrey;
         overflow-y: auto;
         overflow-x: hidden;
     }
+
     // TODO: taken from .dataset above - swap these out
     .collection-element {
         height: 32px;
@@ -466,12 +518,15 @@ export default {
         line-height: 28px;
         cursor: pointer;
         overflow: hidden;
+
         &:last-of-type {
             margin-bottom: 2px;
         }
+
         &:hover {
             border-color: black;
         }
+
         &.selected {
             border-color: black;
             background: rgb(118, 119, 131);
@@ -480,18 +535,22 @@ export default {
                 color: white;
             }
         }
+
         .name {
             &:hover {
                 text-decoration: underline;
             }
         }
+
         button {
             margin-top: 3px;
         }
+
         .discard {
             @extend .float-right !optional;
         }
     }
+
     .empty-message {
         margin: 8px;
         color: grey;
diff --git a/client/src/components/Collections/ListDatasetCollectionElementView.vue b/client/src/components/Collections/ListDatasetCollectionElementView.vue
index ea5276d901cc..e7b41e4158de 100644
--- a/client/src/components/Collections/ListDatasetCollectionElementView.vue
+++ b/client/src/components/Collections/ListDatasetCollectionElementView.vue
@@ -1,61 +1,53 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+
+import localize from "@/utils/localization";
+
+import ClickToEdit from "@/components/Collections/common/ClickToEdit.vue";
+
+interface Props {
+    element: any;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (event: "onRename", name: string): void;
+    (event: "element-is-selected", element: any): void;
+    (event: "element-is-discarded", element: any): void;
+}>();
+
+const elementName = ref("");
+
+watch(elementName, () => {
+    emit("onRename", elementName.value);
+});
+
+function clickDiscard() {
+    emit("element-is-discarded", props.element);
+}
+
+onMounted(() => {
+    elementName.value = props.element.name;
+});
+</script>
+
 <template>
-    <div class="collection-element" @click="$emit('element-is-selected', element)">
-        <ClickToEdit v-model="elementName" :title="titleElementName" />
-        <button class="discard-btn btn-sm" :title="titleDiscardButton" @click="clickDiscard">
-            {{ l("Discard") }}
+    <div class="collection-element" @click="emit('element-is-selected', element)">
+        <ClickToEdit v-model="elementName" :title="localize('Click to rename')" />
+
+        <button class="discard-btn btn-sm" :title="localize('Remove this dataset from the list')" @click="clickDiscard">
+            {{ localize("Discard") }}
         </button>
     </div>
 </template>
 
-<script>
-import _l from "utils/localization";
-
-import ClickToEdit from "./common/ClickToEdit";
-
-export default {
-    components: { ClickToEdit },
-    props: {
-        element: {
-            required: true,
-        },
-    },
-    data: function () {
-        return {
-            titleDiscardButton: _l("Remove this dataset from the list"),
-            titleElementName: _l("Click to rename"),
-            isSelected: false,
-            elementName: "",
-        };
-    },
-    watch: {
-        elementName() {
-            this.$emit("onRename", this.elementName);
-        },
-    },
-    created: function () {
-        this.elementName = this.element.name;
-    },
-    methods: {
-        l(str) {
-            // _l conflicts private methods of Vue internals, expose as l instead
-            return _l(str);
-        },
-        clickDiscard: function () {
-            this.$emit("element-is-discarded", this.element);
-        },
-        /** string rep */
-        toString() {
-            return "ListDatasetCollectionElementView()";
-        },
-    },
-};
-</script>
-
-<style>
-.discard-btn {
-    float: right;
-}
+<style scoped lang="scss">
 .collection-element {
     height: auto;
+
+    .discard-btn {
+        float: right;
+    }
 }
 </style>
diff --git a/client/src/components/Collections/PairCollectionCreator.vue b/client/src/components/Collections/PairCollectionCreator.vue
index 3323c9005308..154d82c2cfcc 100644
--- a/client/src/components/Collections/PairCollectionCreator.vue
+++ b/client/src/components/Collections/PairCollectionCreator.vue
@@ -1,82 +1,300 @@
+<script setup lang="ts">
+import { BAlert } from "bootstrap-vue";
+import { computed, onMounted, ref } from "vue";
+
+import { type HDCADetailed } from "@/api";
+import STATES from "@/mvc/dataset/states";
+import localize from "@/utils/localization";
+
+import CollectionCreator from "@/components/Collections/common/CollectionCreator.vue";
+
+interface Props {
+    initialElements: Array<any>;
+    oncancel: () => void;
+    oncreate: () => void;
+    creationFn: (workingElements: HDCADetailed[], collectionName: string, hideSourceItems: boolean) => any;
+    defaultHideSourceItems?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (event: "clicked-create", workingElements: HDCADetailed[], collectionName: string, hideSourceItems: boolean): void;
+}>();
+
+const state = ref("build");
+const removeExtensions = ref(true);
+const initialSuggestedName = ref("");
+const invalidElements = ref<string[]>([]);
+const workingElements = ref<HDCADetailed[]>([]);
+
+const allElementsAreInvalid = computed(() => {
+    return props.initialElements.length == invalidElements.value.length;
+});
+const noElementsSelected = computed(() => {
+    return props.initialElements.length == 0;
+});
+const exactlyTwoValidElements = computed(() => {
+    return workingElements.value.length == 2;
+});
+const hideSourceItems = ref(props.defaultHideSourceItems || false);
+
+function _elementsSetUp() {
+    /** a list of invalid elements and the reasons they aren't valid */
+    invalidElements.value = [];
+
+    //TODO: handle fundamental problem of syncing DOM, views, and list here
+    /** data for list in progress */
+    workingElements.value = [];
+
+    // copy initial list, sort, add ids if needed
+    workingElements.value = JSON.parse(JSON.stringify(props.initialElements.slice(0)));
+
+    _ensureElementIds();
+    _validateElements();
+}
+
+/** add ids to dataset objs in initial list if none */
+function _ensureElementIds() {
+    workingElements.value.forEach((element) => {
+        if (!Object.prototype.hasOwnProperty.call(element, "id")) {
+            element.id = element._uid as string;
+        }
+    });
+
+    return workingElements.value;
+}
+
+// /** separate working list into valid and invalid elements for this collection */
+function _validateElements() {
+    workingElements.value = workingElements.value.filter((element) => {
+        var problem = _isElementInvalid(element);
+
+        if (problem) {
+            invalidElements.value.push(element.name + "  " + problem);
+        }
+
+        return !problem;
+    });
+
+    return workingElements.value;
+}
+
+/** describe what is wrong with a particular element if anything */
+function _isElementInvalid(element: HDCADetailed) {
+    if (element.history_content_type === "dataset_collection") {
+        return localize("is a collection, this is not allowed");
+    }
+
+    var validState = element.state === STATES.OK || STATES.NOT_READY_STATES.includes(element.state as string);
+
+    if (!validState) {
+        return localize("has errored, is paused, or is not accessible");
+    }
+
+    if (element.deleted || element.purged) {
+        return localize("has been deleted or purged");
+    }
+
+    return null;
+}
+
+function swapButton() {
+    workingElements.value = [workingElements.value[1], workingElements.value[0]] as HDCADetailed[];
+}
+
+function clickedCreate(collectionName: string) {
+    if (state.value !== "error") {
+        emit("clicked-create", workingElements.value, collectionName, hideSourceItems.value);
+
+        return props
+            .creationFn(workingElements.value, collectionName, hideSourceItems.value)
+            .done(props.oncreate)
+            .fail(() => {
+                state.value = "error";
+            });
+    }
+}
+
+function removeExtensionsToggle() {
+    removeExtensions.value = !removeExtensions.value;
+
+    initialSuggestedName.value = _guessNameForPair(
+        workingElements.value[0] as HDCADetailed,
+        workingElements.value[1] as HDCADetailed,
+        removeExtensions.value
+    );
+}
+
+function _guessNameForPair(fwd: HDCADetailed, rev: HDCADetailed, removeExtensions: boolean) {
+    removeExtensions = removeExtensions ? removeExtensions : removeExtensions;
+
+    var fwdName = fwd.name ?? "";
+    var revName = rev.name ?? "";
+    var lcs = _naiveStartingAndEndingLCS(fwdName, revName);
+
+    /** remove url prefix if files were uploaded by url */
+    var lastDotIndex = lcs.lastIndexOf(".");
+    var lastSlashIndex = lcs.lastIndexOf("/");
+    var extension = lcs.slice(lastDotIndex, lcs.length);
+
+    if (lastSlashIndex > 0) {
+        var urlprefix = lcs.slice(0, lastSlashIndex + 1);
+
+        lcs = lcs.replace(urlprefix, "");
+        fwdName = fwdName.replace(extension, "");
+        revName = revName.replace(extension, "");
+    }
+
+    if (removeExtensions) {
+        if (lastDotIndex > 0) {
+            lcs = lcs.replace(extension, "");
+            fwdName = fwdName.replace(extension, "");
+            revName = revName.replace(extension, "");
+        }
+    }
+
+    return lcs || `${fwdName} & ${revName}`;
+}
+
+function onUpdateHideSourceItems(newHideSourceItems: boolean) {
+    hideSourceItems.value = newHideSourceItems;
+}
+
+function _naiveStartingAndEndingLCS(s1: string, s2: string) {
+    var i = 0;
+    var j = 0;
+    var fwdLCS = "";
+    var revLCS = "";
+
+    while (i < s1.length && i < s2.length) {
+        if (s1[i] !== s2[i]) {
+            break;
+        }
+
+        fwdLCS += s1[i];
+        i += 1;
+    }
+
+    if (i === s1.length) {
+        return s1;
+    }
+
+    if (i === s2.length) {
+        return s2;
+    }
+
+    i = s1.length - 1;
+    j = s2.length - 1;
+
+    while (i >= 0 && j >= 0) {
+        if (s1[i] !== s2[j]) {
+            break;
+        }
+
+        revLCS = [s1[i], revLCS].join("");
+        i -= 1;
+        j -= 1;
+    }
+
+    return fwdLCS + revLCS;
+}
+
+onMounted(() => {
+    _elementsSetUp();
+
+    initialSuggestedName.value = _guessNameForPair(
+        workingElements.value[0] as HDCADetailed,
+        workingElements.value[1] as HDCADetailed,
+        removeExtensions.value
+    );
+});
+</script>
+
 <template>
     <div class="pair-collection-creator">
         <div v-if="state == 'error'">
-            <b-alert show variant="danger">
-                {{ errorText }}
-            </b-alert>
+            <BAlert show variant="danger">
+                {{ localize("Galaxy could not be reached and may be updating.  Try again in a few minutes.") }}
+            </BAlert>
         </div>
         <div v-else>
             <div v-if="noElementsSelected">
-                <b-alert show variant="warning" dismissible>
-                    {{ noElementsHeader }}
-                    {{ allInvalidElementsPartOne }}
+                <BAlert show variant="warning" dismissible>
+                    {{ localize("No datasets were selected.") }}
+                    {{ localize("Exactly two elements needed for the collection. You may need to") }}
                     <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
-                        {{ cancelText }}
+                        {{ localize("cancel") }}
                     </a>
-                    {{ allInvalidElementsPartTwo }}
-                </b-alert>
+                    {{ localize("and reselect new elements.") }}
+                </BAlert>
+
                 <div class="float-left">
                     <button class="cancel-create btn" tabindex="-1" @click="oncancel">
-                        {{ l("Cancel") }}
+                        {{ localize("Cancel") }}
                     </button>
                 </div>
             </div>
             <div v-else-if="allElementsAreInvalid">
-                <b-alert show variant="warning" dismissible>
-                    {{ invalidHeader }}
+                <BAlert show variant="warning" dismissible>
+                    {{ localize("The following selections could not be included due to problems:") }}
                     <ul>
-                        <li v-for="problem in returnInvalidElements" :key="problem">
+                        <li v-for="problem in invalidElements" :key="problem">
                             {{ problem }}
                         </li>
                     </ul>
-                    {{ allInvalidElementsPartOne }}
+                    {{ localize("Exactly two elements needed for the collection. You may need to") }}
                     <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
-                        {{ cancelText }}
+                        {{ localize("cancel") }}
                     </a>
-                    {{ allInvalidElementsPartTwo }}
-                </b-alert>
+                    {{ localize("and reselect new elements.") }}
+                </BAlert>
+
                 <div class="float-left">
                     <button class="cancel-create btn" tabindex="-1" @click="oncancel">
-                        {{ l("Cancel") }}
+                        {{ localize("Cancel") }}
                     </button>
                 </div>
             </div>
             <div v-else-if="!exactlyTwoValidElements">
-                <div v-if="returnInvalidElementsLength">
-                    <b-alert show variant="warning" dismissible>
-                        {{ invalidHeader }}
+                <div v-if="invalidElements.length">
+                    <BAlert show variant="warning" dismissible>
+                        {{ localize("The following selections could not be included due to problems:") }}
                         <ul>
-                            <li v-for="problem in returnInvalidElements" :key="problem">
+                            <li v-for="problem in invalidElements" :key="problem">
                                 {{ problem }}
                             </li>
                         </ul>
-                    </b-alert>
+                    </BAlert>
                 </div>
-                <b-alert show variant="warning" dismissible>
-                    {{ exactlyTwoValidElementsPartOne }}
+
+                <BAlert show variant="warning" dismissible>
+                    {{ localize("Two (and only two) elements are needed for the pair. You may need to ") }}
                     <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
-                        {{ cancelText }}
+                        {{ localize("cancel") }}
                     </a>
-                    {{ exactlyTwoValidElementsPartTwo }}
-                </b-alert>
+                    {{ localize("and reselect new elements.") }}
+                </BAlert>
+
                 <div class="float-left">
                     <button class="cancel-create btn" tabindex="-1" @click="oncancel">
-                        {{ l("Cancel") }}
+                        {{ localize("Cancel") }}
                     </button>
                 </div>
             </div>
             <div v-else>
-                <div v-if="returnInvalidElementsLength">
-                    <b-alert show variant="warning" dismissible>
-                        {{ invalidHeader }}
+                <div v-if="invalidElements.length">
+                    <BAlert show variant="warning" dismissible>
+                        {{ localize("The following selections could not be included due to problems:") }}
                         <ul>
-                            <li v-for="problem in returnInvalidElements" :key="problem">
+                            <li v-for="problem in invalidElements" :key="problem">
                                 {{ problem }}
                             </li>
                         </ul>
-                    </b-alert>
+                    </BAlert>
                 </div>
-                <collection-creator
+
+                <CollectionCreator
                     :oncancel="oncancel"
                     :hide-source-items="hideSourceItems"
                     :suggested-name="initialSuggestedName"
@@ -86,7 +304,7 @@
                     <template v-slot:help-content>
                         <p>
                             {{
-                                l(
+                                localize(
                                     [
                                         "Pair collections are permanent collections containing two datasets: one forward and one reverse. ",
                                         "Often these are forward and reverse reads. The pair collections can be passed to tools and workflows in ",
@@ -96,33 +314,42 @@
                                 )
                             }}
                         </p>
+
                         <ul>
                             <li>
-                                {{ l("Click the ") }}
+                                {{ localize("Click the ") }}
                                 <i data-target=".swap">
-                                    {{ l("Swap") }}
+                                    {{ localize("Swap") }}
                                 </i>
-                                {{ l("link to make your forward dataset the reverse and the reverse dataset forward") }}
+                                {{
+                                    localize(
+                                        "link to make your forward dataset the reverse and the reverse dataset forward"
+                                    )
+                                }}
                             </li>
+
                             <li>
-                                {{ l("Click the ") }}
+                                {{ localize("Click the ") }}
                                 <i data-target=".cancel-create">
-                                    {{ l("Cancel") }}
+                                    {{ localize("Cancel") }}
                                 </i>
-                                {{ l("button to exit the interface.") }}
+                                {{ localize("button to exit the interface.") }}
                             </li>
                         </ul>
+
                         <br />
+
                         <p>
-                            {{ l("Once your collection is complete, enter a ") }}
-                            <i data-target=".collection-name"> {{ l("name") }}</i>
-                            {{ l("and click ") }}
+                            {{ localize("Once your collection is complete, enter a ") }}
+                            <i data-target=".collection-name"> {{ localize("name") }}</i>
+                            {{ localize("and click ") }}
                             <i data-target=".create-collection">
-                                {{ l("Create list") }}
+                                {{ localize("Create list") }}
                             </i>
-                            {{ l(".") }}
+                            {{ localize(".") }}
                         </p>
                     </template>
+
                     <template v-slot:middle-content>
                         <div class="collection-elements-controls">
                             <a
@@ -130,184 +357,25 @@
                                 href="javascript:void(0);"
                                 title="l('Swap forward and reverse datasets')"
                                 @click="swapButton">
-                                {{ l("Swap") }}
+                                {{ localize("Swap") }}
                             </a>
                         </div>
+
                         <div class="collection-elements scroll-container flex-row">
                             <div
                                 v-for="(element, index) in workingElements"
                                 :key="element.id"
                                 class="collection-element">
-                                {{ index == 0 ? l("forward") : l("reverse") }}: {{ element.name }}
+                                {{ index == 0 ? localize("forward") : localize("reverse") }}: {{ element.name }}
                             </div>
                         </div>
                     </template>
-                </collection-creator>
+                </CollectionCreator>
             </div>
         </div>
     </div>
 </template>
 
-<script>
-import BootstrapVue from "bootstrap-vue";
-import STATES from "mvc/dataset/states";
-import _l from "utils/localization";
-import Vue from "vue";
-
-import mixin from "./common/mixin";
-
-Vue.use(BootstrapVue);
-export default {
-    mixins: [mixin],
-    data: function () {
-        return {
-            state: "build", //error
-            errorText: _l("Galaxy could not be reached and may be updating.  Try again in a few minutes."),
-            noElementsHeader: _l("No datasets were selected."),
-            allInvalidElementsPartOne: _l("Exactly two elements needed for the collection. You may need to"),
-            cancelText: _l("cancel"),
-            allInvalidElementsPartTwo: _l("and reselect new elements."),
-            exactlyTwoValidElementsPartOne: _l("Two (and only two) elements are needed for the pair. You may need to "),
-            exactlyTwoValidElementsPartTwo: _l("and reselect new elements."),
-            invalidHeader: _l("The following selections could not be included due to problems:"),
-            minElements: 2,
-            workingElements: [],
-            invalidElements: [],
-            removeExtensions: true,
-            initialSuggestedName: "",
-        };
-    },
-    computed: {
-        returnInvalidElementsLength: function () {
-            return this.invalidElements.length > 0;
-        },
-        returnInvalidElements: function () {
-            return this.invalidElements;
-        },
-        allElementsAreInvalid: function () {
-            return this.initialElements.length == this.invalidElements.length;
-        },
-        noElementsSelected: function () {
-            return this.initialElements.length == 0;
-        },
-        exactlyTwoValidElements: function () {
-            return this.workingElements.length == 2;
-        },
-    },
-    created() {
-        this._elementsSetUp();
-        this.initialSuggestedName = this._guessNameForPair(
-            this.workingElements[0],
-            this.workingElements[1],
-            this.removeExtensions
-        );
-    },
-    methods: {
-        l(str) {
-            // _l conflicts private methods of Vue internals, expose as l instead
-            return _l(str);
-        },
-        _elementsSetUp: function () {
-            /** a list of invalid elements and the reasons they aren't valid */
-            this.invalidElements = [];
-            //TODO: handle fundamental problem of syncing DOM, views, and list here
-            /** data for list in progress */
-            this.workingElements = [];
-            // copy initial list, sort, add ids if needed
-            this.workingElements = JSON.parse(JSON.stringify(this.initialElements.slice(0)));
-            this._ensureElementIds();
-            this._validateElements();
-        },
-        /** add ids to dataset objs in initial list if none */
-        _ensureElementIds: function () {
-            this.workingElements.forEach((element) => {
-                if (!Object.prototype.hasOwnProperty.call(element, "id")) {
-                    element.id = element._uid;
-                }
-            });
-            return this.workingElements;
-        },
-        // /** separate working list into valid and invalid elements for this collection */
-        _validateElements: function () {
-            this.workingElements = this.workingElements.filter((element) => {
-                var problem = this._isElementInvalid(element);
-                if (problem) {
-                    this.invalidElements.push(element.name + "  " + problem);
-                }
-                return !problem;
-            });
-            return this.workingElements;
-        },
-        /** describe what is wrong with a particular element if anything */
-        _isElementInvalid: function (element) {
-            if (element.history_content_type === "dataset_collection") {
-                return _l("is a collection, this is not allowed");
-            }
-            var validState = element.state === STATES.OK || STATES.NOT_READY_STATES.includes(element.state);
-            if (!validState) {
-                return _l("has errored, is paused, or is not accessible");
-            }
-            if (element.deleted || element.purged) {
-                return _l("has been deleted or purged");
-            }
-            return null;
-        },
-        swapButton: function () {
-            this.workingElements = [this.workingElements[1], this.workingElements[0]];
-        },
-        clickedCreate: function (collectionName) {
-            if (this.state !== "error") {
-                this.$emit("clicked-create", this.workingElements, this.collectionName, this.hideSourceItems);
-                return this.creationFn(this.workingElements, collectionName, this.hideSourceItems)
-                    .done(this.oncreate)
-                    .fail(() => {
-                        this.state = "error";
-                    });
-            }
-        },
-        /** string rep */
-        toString: function () {
-            return "PairCollectionCreator";
-        },
-        removeExtensionsToggle: function () {
-            this.removeExtensions = !this.removeExtensions;
-            this.initialSuggestedName = this._guessNameForPair(
-                this.workingElements[0],
-                this.workingElements[1],
-                this.removeExtensions
-            );
-        },
-        _guessNameForPair: function (fwd, rev, removeExtensions) {
-            removeExtensions = removeExtensions ? removeExtensions : this.removeExtensions;
-            var fwdName = fwd.name;
-            var revName = rev.name;
-
-            var lcs = this._naiveStartingAndEndingLCS(fwdName, revName);
-
-            /** remove url prefix if files were uploaded by url */
-            var lastSlashIndex = lcs.lastIndexOf("/");
-            if (lastSlashIndex > 0) {
-                var urlprefix = lcs.slice(0, lastSlashIndex + 1);
-                lcs = lcs.replace(urlprefix, "");
-                fwdName = fwdName.replace(extension, "");
-                revName = revName.replace(extension, "");
-            }
-
-            if (removeExtensions) {
-                var lastDotIndex = lcs.lastIndexOf(".");
-                if (lastDotIndex > 0) {
-                    var extension = lcs.slice(lastDotIndex, lcs.length);
-                    lcs = lcs.replace(extension, "");
-                    fwdName = fwdName.replace(extension, "");
-                    revName = revName.replace(extension, "");
-                }
-            }
-            return lcs || `${fwdName} & ${revName}`;
-        },
-    },
-};
-</script>
-
 <style lang="scss">
 .pair-collection-creator {
     .footer {
@@ -321,6 +389,7 @@ export default {
     .collection-elements-controls {
         margin-bottom: 8px;
     }
+
     .collection-elements {
         max-height: 400px;
         border: 0px solid lightgrey;
@@ -343,6 +412,7 @@ export default {
         &:last-of-type {
             margin-bottom: 2px;
         }
+
         &:hover {
             border-color: black;
         }
@@ -350,18 +420,21 @@ export default {
         button {
             margin-top: 3px;
         }
+
         .identifier {
             &:after {
                 content: ":";
                 margin-right: 6px;
             }
         }
+
         .name {
             &:hover {
                 text-decoration: none;
             }
         }
     }
+
     .empty-message {
         margin: 8px;
         color: grey;
diff --git a/client/src/components/Collections/PairedElementView.vue b/client/src/components/Collections/PairedElementView.vue
index 8c0a3998d11d..364832a22db2 100644
--- a/client/src/components/Collections/PairedElementView.vue
+++ b/client/src/components/Collections/PairedElementView.vue
@@ -1,58 +1,69 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faUnlink } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { onMounted, ref, watch } from "vue";
+
+import localize from "@/utils/localization";
+
+import ClickToEdit from "@/components/Collections/common/ClickToEdit.vue";
+
+library.add(faUnlink);
+
+interface Props {
+    // TODO: Define the type of the pair prop
+    pair: {
+        name: string;
+        forward: { name: string };
+        reverse: { name: string };
+    };
+    unlinkFn: () => void;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (event: "onPairRename", name: string): void;
+}>();
+
+const name = ref("");
+
+watch(
+    () => props.pair,
+    () => {
+        name.value = props.pair.name;
+    }
+);
+
+watch(name, () => {
+    emit("onPairRename", name.value);
+});
+
+onMounted(() => {
+    name.value = props.pair.name;
+});
+</script>
+
 <template>
     <div>
         <li class="dataset paired">
-            <span class="forward-dataset-name flex-column">{{ pair.forward.name }}</span>
+            <span class="forward-dataset-name flex-column">
+                {{ pair.forward.name }}
+            </span>
+
             <span class="pair-name-column flex-column">
                 <span class="pair-name">
-                    <ClickToEdit v-model="name" :title="titlePairName" />
+                    <ClickToEdit v-model="name" :title="localize('Click to rename')" />
                 </span>
             </span>
-            <span class="reverse-dataset-name flex-column">{{ pair.reverse.name }}</span>
+
+            <span class="reverse-dataset-name flex-column">
+                {{ pair.reverse.name }}
+            </span>
         </li>
+
         <button class="unpair-btn" @click="unlinkFn">
-            <span class="fa fa-unlink" :title="unpairButtonTitle"></span>
+            <FontAwesomeIcon :icon="faUnlink" :title="localize('Unpair')" />
         </button>
     </div>
 </template>
-<script>
-import _l from "utils/localization";
-
-import ClickToEdit from "./common/ClickToEdit.vue";
-
-export default {
-    components: { ClickToEdit },
-    props: {
-        pair: {
-            required: true,
-        },
-        unlinkFn: {
-            required: true,
-            type: Function,
-        },
-    },
-    data: function () {
-        return {
-            unpairButtonTitle: _l("Unpair"),
-            titlePairName: _l("Click to rename"),
-            name: "",
-        };
-    },
-    watch: {
-        pair() {
-            this.name = this.pair.name;
-        },
-        name() {
-            this.$emit("onPairRename", this.name);
-        },
-    },
-    created: function () {
-        this.name = this.pair.name;
-    },
-    methods: {
-        l(str) {
-            // _l conflicts private methods of Vue internals, expose as l instead
-            return _l(str);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Collections/UnpairedDatasetElementView.vue b/client/src/components/Collections/UnpairedDatasetElementView.vue
index b02575a2bb05..91494a082fea 100644
--- a/client/src/components/Collections/UnpairedDatasetElementView.vue
+++ b/client/src/components/Collections/UnpairedDatasetElementView.vue
@@ -1,41 +1,21 @@
+<script setup lang="ts">
+interface Props {
+    // TODO: Define the type of the element
+    element: any;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+    // TODO: Define the type of the element
+    (event: "element-is-selected", element: any): void;
+}>();
+</script>
+
 <template>
-    <li class="dataset unpaired" @click="$emit('element-is-selected', element)">
+    <li class="dataset unpaired" @click="emit('element-is-selected', element)">
         <label>
             {{ element.name }}
         </label>
     </li>
 </template>
-
-<script>
-import _l from "utils/localization";
-
-export default {
-    props: {
-        element: {
-            required: true,
-        },
-    },
-    data: function () {
-        return {
-            titleElementName: _l("Click to rename"),
-            isSelected: false,
-        };
-    },
-    methods: {
-        l(str) {
-            // _l conflicts private methods of Vue internals, expose as l instead
-            return _l(str);
-        },
-        /** string rep */
-        toString() {
-            return "PairedListDatasetCollectionElementView()";
-        },
-    },
-};
-</script>
-
-<style>
-.discard-btn {
-    float: right;
-}
-</style>
diff --git a/client/src/mvc/dataset/states.js b/client/src/mvc/dataset/states.ts
similarity index 95%
rename from client/src/mvc/dataset/states.js
rename to client/src/mvc/dataset/states.ts
index 4e0702c9cdbb..dd5b37d7fb07 100644
--- a/client/src/mvc/dataset/states.js
+++ b/client/src/mvc/dataset/states.ts
@@ -2,7 +2,7 @@
 /** Map of possible HDA/collection/job states to their string equivalents.
  *      A port of galaxy.model.Dataset.states.
  */
-var STATES = {
+const STATES = {
     // NOT ready states
     /** is uploading and not ready */
     UPLOAD: "upload",
@@ -34,6 +34,9 @@ var STATES = {
     DEFERRED: "deferred",
     /** the tool producing this dataset failed */
     ERROR: "error",
+
+    READY_STATES: [] as string[],
+    NOT_READY_STATES: [] as string[],
 };
 
 STATES.READY_STATES = [