From d2f7f07cbf65a8f4b05f9d93736b0b7fb54844e4 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 17 Oct 2024 19:53:45 -0500
Subject: [PATCH] add `CollectionCreatorModal` that replaces
 `buildCollectionModal`

- `buildCollectionModal.ts` still exists but just to create the rules collection modal, all other modals are replaced with a parent `CollectionCreatorModal`
- also added a `collectionBuilderItemsStore` that is used to store the datasets fetched for the builder; only when the builder is opened: which is when we start reacting to any changes in the `historyId`, `history.update_time` and any filter on a history selection.
---
 .../Collections/CollectionCreatorModal.vue    | 322 ++++++++++++++++++
 .../Collections/ListCollectionCreator.vue     |  23 +-
 .../ListDatasetCollectionElementView.vue      |  15 +-
 .../Collections/PairCollectionCreator.vue     | 243 +++++++++----
 .../PairedListCollectionCreator.vue           |  41 +--
 .../Form/Elements/FormData/FormData.vue       |  87 ++---
 .../HistoryOperations/SelectionOperations.vue |  72 ++--
 .../History/adapters/HistoryPanelProxy.js     |   6 +-
 .../History/adapters/buildCollectionModal.ts  |  49 +--
 .../LibraryFolder/TopToolbar/FolderTopBar.vue |  26 ++
 .../import-to-history/import-collection.js    |   8 +-
 client/src/components/Upload/DefaultBox.vue   |  31 +-
 client/src/components/Upload/RulesInput.vue   |   2 +-
 client/src/components/Upload/builders.js      |  27 --
 .../src/composables/useHistoryItemsForType.ts |  90 -----
 .../src/stores/collectionBuilderItemsStore.ts |  78 +++++
 16 files changed, 758 insertions(+), 362 deletions(-)
 create mode 100644 client/src/components/Collections/CollectionCreatorModal.vue
 delete mode 100644 client/src/components/Upload/builders.js
 delete mode 100644 client/src/composables/useHistoryItemsForType.ts
 create mode 100644 client/src/stores/collectionBuilderItemsStore.ts

diff --git a/client/src/components/Collections/CollectionCreatorModal.vue b/client/src/components/Collections/CollectionCreatorModal.vue
new file mode 100644
index 000000000000..96bdaad6245b
--- /dev/null
+++ b/client/src/components/Collections/CollectionCreatorModal.vue
@@ -0,0 +1,322 @@
+<script setup lang="ts">
+import { faCheckCircle, faUndo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BLink, BModal } from "bootstrap-vue";
+import { computed, ref, watch } from "vue";
+
+import type { HDASummary, HistoryItemSummary, HistorySummary } from "@/api";
+import { createDatasetCollection } from "@/components/History/model/queries";
+import { useCollectionBuilderItemsStore } from "@/stores/collectionBuilderItemsStore";
+import { useHistoryStore } from "@/stores/historyStore";
+import localize from "@/utils/localization";
+import { orList } from "@/utils/strings";
+
+import type { CollectionType, DatasetPair } from "../History/adapters/buildCollectionModal";
+
+import ListCollectionCreator from "./ListCollectionCreator.vue";
+import PairCollectionCreator from "./PairCollectionCreator.vue";
+import PairedListCollectionCreator from "./PairedListCollectionCreator.vue";
+import Heading from "@/components/Common/Heading.vue";
+import GenericItem from "@/components/History/Content/GenericItem.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+interface Props {
+    historyId: string;
+    showModal: boolean;
+    collectionType: CollectionType;
+    selectedItems?: HistoryItemSummary[];
+    defaultHideSourceItems?: boolean;
+    extensions?: string[];
+    fromRulesInput?: boolean;
+    hideModalOnCreate?: boolean;
+    filterText?: string;
+}
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "created-collection", collection: any): void;
+    (e: "update:show-modal", showModal: boolean): void;
+}>();
+
+// Computed refs
+/** Computed toggle that handles opening and closing the modal */
+const localShowToggle = computed({
+    get: () => props.showModal,
+    set: (value: boolean) => {
+        emit("update:show-modal", value);
+    },
+});
+
+// Create Collection refs
+const creatingCollection = ref(false);
+const createCollectionError = ref<string | null>(null);
+const createdCollection = ref<any>(null);
+
+// History items variables
+const historyItemsError = ref<string | null>(null);
+const collectionItemsStore = useCollectionBuilderItemsStore();
+const historyStore = useHistoryStore();
+const history = computed(() => historyStore.getHistoryById(props.historyId));
+const historyId = computed(() => props.historyId);
+
+/** Whether a list of items was selected to create a collection from */
+const fromSelection = computed(() => !!props.selectedItems?.length);
+
+/** Items to create the collection from */
+const creatorItems = computed(() => (fromSelection.value ? props.selectedItems : historyDatasets.value));
+
+const localFilterText = computed(() => props.filterText || "");
+const historyUpdateTime = computed(() => history.value?.update_time);
+const isFetchingItems = computed(() => collectionItemsStore.isFetching[localFilterText.value]);
+const historyDatasets = computed(() => {
+    if (collectionItemsStore.cachedDatasetsForFilterText) {
+        return collectionItemsStore.cachedDatasetsForFilterText[localFilterText.value] || [];
+    } else {
+        return [];
+    }
+});
+
+watch(
+    () => localShowToggle.value,
+    async (show) => {
+        if (show) {
+            await fetchHistoryDatasets();
+        }
+    },
+    { immediate: true }
+);
+
+// Fetch items when history ID or update time changes, only if localShowToggle is true
+watch([historyId, historyUpdateTime, localFilterText], async () => {
+    if (localShowToggle.value) {
+        await fetchHistoryDatasets();
+    }
+});
+
+// If there is a change in `historyDatasets`, but we have selected items, we should update the selected items
+watch(
+    () => historyDatasets.value,
+    (newDatasets) => {
+        if (fromSelection.value) {
+            // find each selected item in the new datasets, and update it
+            props.selectedItems?.forEach((selectedItem) => {
+                const newDataset = newDatasets.find((dataset) => dataset.id === selectedItem.id);
+                if (newDataset) {
+                    Object.assign(selectedItem, newDataset);
+                }
+            });
+        }
+    }
+);
+
+const modalTitle = computed(() => {
+    if (props.collectionType === "list") {
+        return localize(
+            `Create a collection from a list of ${fromSelection.value ? "selected" : ""} ${
+                props.extensions?.length ? orList(props.extensions) : ""
+            } datasets`
+        );
+    } else if (props.collectionType === "list:paired") {
+        return localize(
+            `Create a collection of ${fromSelection.value ? "selected" : ""} ${
+                props.extensions?.length ? orList(props.extensions) : ""
+            } dataset pairs`
+        );
+    } else if (props.collectionType === "paired") {
+        return localize(
+            `Create a ${props.extensions?.length ? orList(props.extensions) : ""} dataset pair collection ${
+                fromSelection.value ? "from selected items" : ""
+            }`
+        );
+    } else {
+        return localize("Create a collection");
+    }
+});
+
+// Methods
+function createListCollection(elements: HDASummary[], name: string, hideSourceItems: boolean) {
+    const returnedElems = elements.map((element) => ({
+        id: element.id,
+        name: element.name,
+        //TODO: this allows for list:list even if the implementation does not - reconcile
+        src: "src" in element ? element.src : element.history_content_type == "dataset" ? "hda" : "hdca",
+    }));
+    return createHDCA(returnedElems, "list", name, hideSourceItems);
+}
+
+function createListPairedCollection(elements: DatasetPair[], name: string, hideSourceItems: boolean) {
+    const returnedElems = elements.map((pair) => ({
+        collection_type: "paired",
+        src: "new_collection",
+        name: pair.name,
+        element_identifiers: [
+            {
+                name: "forward",
+                id: pair.forward.id,
+                src: "src" in pair.forward ? pair.forward.src : "hda",
+            },
+            {
+                name: "reverse",
+                id: pair.reverse.id,
+                src: "src" in pair.reverse ? pair.reverse.src : "hda",
+            },
+        ],
+    }));
+    return createHDCA(returnedElems, "list:paired", name, hideSourceItems);
+}
+
+function createPairedCollection(elements: DatasetPair, name: string, hideSourceItems: boolean) {
+    const { forward, reverse } = elements;
+    const returnedElems = [
+        { name: "forward", src: "src" in forward ? forward.src : "hda", id: forward.id },
+        { name: "reverse", src: "src" in reverse ? reverse.src : "hda", id: reverse.id },
+    ];
+    return createHDCA(returnedElems, "paired", name, hideSourceItems);
+}
+
+async function createHDCA(
+    element_identifiers: any[],
+    collection_type: CollectionType,
+    name: string,
+    hide_source_items: boolean,
+    options = {}
+) {
+    try {
+        creatingCollection.value = true;
+        const collection = await createDatasetCollection(history.value as HistorySummary, {
+            collection_type,
+            name,
+            hide_source_items,
+            element_identifiers,
+            options,
+        });
+
+        emit("created-collection", collection);
+        createdCollection.value = collection;
+
+        if (props.hideModalOnCreate) {
+            hideModal();
+        }
+    } catch (error) {
+        createCollectionError.value = error as string;
+    } finally {
+        creatingCollection.value = false;
+    }
+}
+
+async function fetchHistoryDatasets() {
+    const { error } = await collectionItemsStore.fetchDatasetsForFiltertext(
+        historyId.value,
+        historyUpdateTime.value,
+        localFilterText.value
+    );
+    if (error) {
+        historyItemsError.value = error;
+        console.error("Error fetching history items:", historyItemsError.value);
+    } else {
+        historyItemsError.value = null;
+    }
+}
+
+function hideModal() {
+    localShowToggle.value = false;
+}
+
+function resetModal() {
+    createCollectionError.value = null;
+    createdCollection.value = null;
+}
+</script>
+
+<template>
+    <BModal
+        id="collection-creator-modal"
+        v-model="localShowToggle"
+        :busy="(fromSelection && isFetchingItems) || creatingCollection"
+        modal-class="ui-modal collection-creator-modal"
+        :hide-footer="!createdCollection && !createCollectionError"
+        :ok-disabled="!!createdCollection || !!createCollectionError"
+        :cancel-title="localize('Exit')"
+        footer-class="d-flex justify-content-between"
+        :ok-title="localize('Create Collection')"
+        @hidden="resetModal">
+        <template v-slot:modal-header>
+            <Heading class="w-100" size="sm">
+                <div class="d-flex justify-content-between unselectable w-100">
+                    <div>{{ modalTitle }}</div>
+                    <div v-if="!!history">
+                        From history: <b>{{ history.name }}</b>
+                    </div>
+                </div>
+            </Heading>
+        </template>
+        <BAlert v-if="isFetchingItems" variant="info" show>
+            <LoadingSpan :message="localize('Loading items')" />
+        </BAlert>
+        <BAlert v-else-if="!fromSelection && historyItemsError" variant="danger" show>
+            {{ historyItemsError }}
+        </BAlert>
+        <BAlert v-else-if="!creatorItems?.length" variant="info" show>
+            {{ localize("No items available to create a collection.") }}
+        </BAlert>
+        <BAlert v-else-if="creatingCollection" variant="info" show>
+            <LoadingSpan :message="localize('Creating collection')" />
+        </BAlert>
+        <BAlert v-else-if="createCollectionError" variant="danger" show>
+            {{ createCollectionError }}
+            <BLink class="text-decoration-none" @click.stop.prevent="resetModal">
+                <FontAwesomeIcon :icon="faUndo" fixed-width />
+                {{ localize("Try again") }}
+            </BLink>
+        </BAlert>
+        <div v-else-if="createdCollection">
+            <BAlert variant="success" show>
+                <FontAwesomeIcon :icon="faCheckCircle" class="text-success" fixed-width />
+                {{ localize("Collection created successfully.") }}
+                <BLink class="text-decoration-none" @click.stop.prevent="resetModal">
+                    <FontAwesomeIcon :icon="faUndo" fixed-width />
+                    {{ localize("Create another collection") }}
+                </BLink>
+            </BAlert>
+
+            <!-- TODO: This is a bit shady, better if we confirm it is a collection type -->
+            <GenericItem :item-id="createdCollection.id" item-src="hdca" />
+        </div>
+        <ListCollectionCreator
+            v-else-if="props.collectionType === 'list'"
+            :initial-elements="creatorItems"
+            :default-hide-source-items="props.defaultHideSourceItems"
+            :from-selection="fromSelection"
+            :extensions="props.extensions"
+            @clicked-create="createListCollection"
+            @on-cancel="hideModal" />
+        <PairedListCollectionCreator
+            v-else-if="props.collectionType === 'list:paired'"
+            :initial-elements="creatorItems"
+            :default-hide-source-items="props.defaultHideSourceItems"
+            :from-selection="fromSelection"
+            :extensions="props.extensions"
+            @clicked-create="createListPairedCollection"
+            @on-cancel="hideModal" />
+        <PairCollectionCreator
+            v-else-if="props.collectionType === 'paired'"
+            :initial-elements="creatorItems"
+            :default-hide-source-items="props.defaultHideSourceItems"
+            :from-selection="fromSelection"
+            :extensions="props.extensions"
+            @clicked-create="createPairedCollection"
+            @on-cancel="hideModal" />
+    </BModal>
+</template>
+
+<style lang="scss">
+/** NOTE: Not using `<style scoped> here because these classes are
+`BModal` `body-class` and `content-class` and don't seem to work
+with scoped */
+.collection-creator-modal {
+    .modal-dialog {
+        width: 85%;
+        max-width: 100%;
+    }
+}
+</style>
diff --git a/client/src/components/Collections/ListCollectionCreator.vue b/client/src/components/Collections/ListCollectionCreator.vue
index a9750da933f4..8d1e5be51705 100644
--- a/client/src/components/Collections/ListCollectionCreator.vue
+++ b/client/src/components/Collections/ListCollectionCreator.vue
@@ -19,9 +19,6 @@ import DatasetCollectionElementView from "@/components/Collections/ListDatasetCo
 
 interface Props {
     initialElements: HistoryItemSummary[];
-    oncancel: () => void;
-    oncreate: () => void;
-    creationFn: (workingElements: HDASummary[], collectionName: string, hideSourceItems: boolean) => any;
     defaultHideSourceItems?: boolean;
     fromSelection?: boolean;
     extensions?: string[];
@@ -31,6 +28,7 @@ const props = defineProps<Props>();
 
 const emit = defineEmits<{
     (e: "clicked-create", workingElements: HDASummary[], collectionName: string, hideSourceItems: boolean): void;
+    (e: "on-cancel"): void;
 }>();
 
 const state = ref("build");
@@ -152,7 +150,7 @@ function _isElementInvalid(element: HistoryItemSummary): string | null {
         element.extension &&
         !datatypesMapper.value?.isSubTypeOfAny(element.extension, props.extensions!)
     ) {
-        return localize("has an invalid extension");
+        return localize(`has an invalid extension: ${element.extension}`);
     }
     return null;
 }
@@ -231,13 +229,6 @@ function clickedCreate(collectionName: string) {
 
     if (state.value !== "error") {
         emit("clicked-create", returnedElements, collectionName, hideSourceItems.value);
-
-        return props
-            .creationFn(returnedElements, collectionName, hideSourceItems.value)
-            .done(props.oncreate)
-            .fail(() => {
-                state.value = "error";
-            });
     }
 }
 
@@ -339,14 +330,14 @@ function renameElement(element: any, name: string) {
                 <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">
+                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
                         {{ localize("cancel") }}
                     </a>
                     {{ localize("and reselect new elements.") }}
                 </BAlert>
 
                 <div class="float-left">
-                    <button class="cancel-create btn" tabindex="-1" @click="oncancel">
+                    <button class="cancel-create btn" tabindex="-1" @click="emit('on-cancel')">
                         {{ localize("Cancel") }}
                     </button>
                 </div>
@@ -375,14 +366,14 @@ function renameElement(element: any, name: string) {
                         </li>
                     </ul>
                     {{ 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">
+                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
                         {{ localize("cancel") }}
                     </a>
                     {{ localize("and reselect new elements.") }}
                 </BAlert>
 
                 <div class="float-left">
-                    <button class="cancel-create btn" tabindex="-1" @click="oncancel">
+                    <button class="cancel-create btn" tabindex="-1" @click="emit('on-cancel')">
                         {{ localize("Cancel") }}
                     </button>
                 </div>
@@ -414,7 +405,7 @@ function renameElement(element: any, name: string) {
                 </div>
 
                 <CollectionCreator
-                    :oncancel="oncancel"
+                    :oncancel="() => emit('on-cancel')"
                     :hide-source-items="hideSourceItems"
                     :extensions="extensions"
                     @on-update-datatype-toggle="changeDatatypeFilter"
diff --git a/client/src/components/Collections/ListDatasetCollectionElementView.vue b/client/src/components/Collections/ListDatasetCollectionElementView.vue
index 0f17767c203b..cc8a30e19bf3 100644
--- a/client/src/components/Collections/ListDatasetCollectionElementView.vue
+++ b/client/src/components/Collections/ListDatasetCollectionElementView.vue
@@ -3,14 +3,16 @@ import { faCheck, faMinus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref, watch } from "vue";
 
+import type { HDASummary } from "@/api";
 import localize from "@/utils/localization";
 
 import ClickToEdit from "@/components/Collections/common/ClickToEdit.vue";
 
 interface Props {
-    element: any;
+    element: HDASummary;
     selected?: boolean;
     hasActions?: boolean;
+    notEditable?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -21,7 +23,7 @@ const emit = defineEmits<{
     (event: "element-is-discarded", element: any): void;
 }>();
 
-const elementName = ref(props.element.name);
+const elementName = ref(props.element.name || "...");
 
 watch(elementName, () => {
     emit("onRename", elementName.value);
@@ -43,13 +45,16 @@ function clickDiscard() {
         <span class="d-flex flex-gapx-1">
             {{ element.hid }}:
             <strong>
-                <ClickToEdit v-model="elementName" :title="localize('Click to rename')" />
+                <ClickToEdit v-if="!notEditable" v-model="elementName" :title="localize('Click to rename')" />
+                <span v-else>{{ elementName }}</span>
             </strong>
-            <i> ({{ element.extension }}) </i>
+            <i v-if="element.extension"> ({{ element.extension }}) </i>
         </span>
 
         <div v-if="hasActions" class="float-right">
-            <i v-if="!selected" class="mr-2"><FontAwesomeIcon :icon="faCheck" class="text-success" /> Added to list</i>
+            <i v-if="!selected" class="mr-2">
+                <FontAwesomeIcon :icon="faCheck" class="text-success" /> Added to collection
+            </i>
             <i v-else class="text-secondary">Selected</i>
             <button class="btn-sm" :title="localize('Remove this dataset from the list')" @click="clickDiscard">
                 <FontAwesomeIcon :icon="faMinus" fixed-width />
diff --git a/client/src/components/Collections/PairCollectionCreator.vue b/client/src/components/Collections/PairCollectionCreator.vue
index e0641fe50f34..d9870980bb51 100644
--- a/client/src/components/Collections/PairCollectionCreator.vue
+++ b/client/src/components/Collections/PairCollectionCreator.vue
@@ -1,32 +1,46 @@
 <script setup lang="ts">
-import { BAlert } from "bootstrap-vue";
+import { faArrowsAltV } 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 type { HDCADetailed, HistoryItemSummary } from "@/api";
+import type { HDASummary, HistoryItemSummary } from "@/api";
 import STATES from "@/mvc/dataset/states";
+import { useDatatypesMapperStore } from "@/stores/datatypesMapperStore";
 import localize from "@/utils/localization";
 
+import type { DatasetPair } from "../History/adapters/buildCollectionModal";
+
+import DatasetCollectionElementView from "./ListDatasetCollectionElementView.vue";
 import CollectionCreator from "@/components/Collections/common/CollectionCreator.vue";
 
+interface SelectedDatasetPair {
+    forward: HDASummary | undefined;
+    reverse: HDASummary | undefined;
+}
+
 interface Props {
-    initialElements: Array<any>;
-    oncancel: () => void;
-    oncreate: () => void;
-    creationFn: (workingElements: HDCADetailed[], collectionName: string, hideSourceItems: boolean) => any;
+    initialElements: HistoryItemSummary[];
     defaultHideSourceItems?: boolean;
+    fromSelection?: boolean;
+    extensions?: string[];
 }
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-    (event: "clicked-create", workingElements: HDCADetailed[], collectionName: string, hideSourceItems: boolean): void;
+    (event: "clicked-create", selectedPair: DatasetPair, collectionName: string, hideSourceItems: boolean): void;
+    (event: "on-cancel"): void;
 }>();
 
 const state = ref("build");
 const removeExtensions = ref(true);
 const initialSuggestedName = ref("");
 const invalidElements = ref<string[]>([]);
-const workingElements = ref<HDCADetailed[]>([]);
+const workingElements = ref<HDASummary[]>([]);
+
+/** If not `fromSelection`, the manually added elements that will become the pair */
+const inListElements = ref<SelectedDatasetPair>({ forward: undefined, reverse: undefined });
 
 const allElementsAreInvalid = computed(() => {
     return props.initialElements.length == invalidElements.value.length;
@@ -35,9 +49,26 @@ const noElementsSelected = computed(() => {
     return props.initialElements.length == 0;
 });
 const exactlyTwoValidElements = computed(() => {
-    return workingElements.value.length == 2;
+    return pairElements.value.forward && pairElements.value.reverse;
 });
 const hideSourceItems = ref(props.defaultHideSourceItems || false);
+const pairElements = computed<SelectedDatasetPair>(() => {
+    if (props.fromSelection) {
+        return {
+            forward: workingElements.value[0],
+            reverse: workingElements.value[1],
+        };
+    } else {
+        return inListElements.value;
+    }
+});
+
+// variables for datatype mapping and then filtering
+const datatypesMapperStore = useDatatypesMapperStore();
+const datatypesMapper = computed(() => datatypesMapperStore.datatypesMapper);
+
+/** Are we filtering by datatype? */
+const filterExtensions = computed(() => !!datatypesMapper.value && !!props.extensions?.length);
 
 function _elementsSetUp() {
     /** a list of invalid elements and the reasons they aren't valid */
@@ -96,23 +127,59 @@ function _isElementInvalid(element: HistoryItemSummary) {
         return localize("has been deleted or purged");
     }
 
+    // is the element's extension not a subtype of any of the required extensions?
+    if (
+        filterExtensions.value &&
+        element.extension &&
+        !datatypesMapper.value?.isSubTypeOfAny(element.extension, props.extensions!)
+    ) {
+        return localize(`has an invalid extension: ${element.extension}`);
+    }
     return null;
 }
 
+function getPairElement(key: string) {
+    return pairElements.value[key as "forward" | "reverse"];
+}
+
+function removeElement(key: string) {
+    pairElements.value[key as "forward" | "reverse"] = undefined;
+}
+
+function selectElement(element: HDASummary) {
+    if (pairElements.value.forward?.id === element.id) {
+        pairElements.value.forward = undefined;
+    } else if (pairElements.value.reverse?.id === element.id) {
+        pairElements.value.reverse = undefined;
+    } else if (pairElements.value.forward === undefined) {
+        pairElements.value.forward = element;
+    } else if (pairElements.value.reverse === undefined) {
+        pairElements.value.reverse = element;
+    }
+}
+
 function swapButton() {
-    workingElements.value = [workingElements.value[1], workingElements.value[0]] as HDCADetailed[];
+    if (!exactlyTwoValidElements.value) {
+        return;
+    }
+    if (props.fromSelection) {
+        workingElements.value = [workingElements.value[1], workingElements.value[0]] as HDASummary[];
+    } else {
+        inListElements.value = {
+            forward: inListElements.value.reverse,
+            reverse: inListElements.value.forward,
+        };
+    }
 }
 
 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";
-            });
+    if (state.value !== "error" && exactlyTwoValidElements.value) {
+        const returnedPair = {
+            forward: pairElements.value.forward as HDASummary,
+            reverse: pairElements.value.reverse as HDASummary,
+            name: collectionName,
+        };
+        emit("clicked-create", returnedPair, collectionName, hideSourceItems.value);
     }
 }
 
@@ -120,13 +187,13 @@ function removeExtensionsToggle() {
     removeExtensions.value = !removeExtensions.value;
 
     initialSuggestedName.value = _guessNameForPair(
-        workingElements.value[0] as HDCADetailed,
-        workingElements.value[1] as HDCADetailed,
+        workingElements.value[0] as HDASummary,
+        workingElements.value[1] as HDASummary,
         removeExtensions.value
     );
 }
 
-function _guessNameForPair(fwd: HDCADetailed, rev: HDCADetailed, removeExtensions: boolean) {
+function _guessNameForPair(fwd: HDASummary, rev: HDASummary, removeExtensions: boolean) {
     removeExtensions = removeExtensions ? removeExtensions : removeExtensions;
 
     var fwdName = fwd.name ?? "";
@@ -203,9 +270,10 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
 onMounted(() => {
     _elementsSetUp();
 
+    // TODO: fix this, now either of those will almost always be empty
     initialSuggestedName.value = _guessNameForPair(
-        workingElements.value[0] as HDCADetailed,
-        workingElements.value[1] as HDCADetailed,
+        workingElements.value[0] as HDASummary,
+        workingElements.value[1] as HDASummary,
         removeExtensions.value
     );
 });
@@ -223,20 +291,35 @@ onMounted(() => {
                 <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">
+                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
                         {{ localize("cancel") }}
                     </a>
                     {{ localize("and reselect new elements.") }}
                 </BAlert>
 
                 <div class="float-left">
-                    <button class="cancel-create btn" tabindex="-1" @click="oncancel">
+                    <button class="cancel-create btn" tabindex="-1" @click="emit('on-cancel')">
                         {{ localize("Cancel") }}
                     </button>
                 </div>
             </div>
             <div v-else-if="allElementsAreInvalid">
-                <BAlert show variant="warning" dismissible>
+                <BAlert v-if="!fromSelection" show variant="warning">
+                    {{
+                        localize(
+                            "No elements in your history are valid for this pair. You may need to switch to a different history."
+                        )
+                    }}
+                    <span v-if="extensions?.length">
+                        {{ localize("The following extensions are required for this pair: ") }}
+                        <ul>
+                            <li v-for="extension in extensions" :key="extension">
+                                {{ extension }}
+                            </li>
+                        </ul>
+                    </span>
+                </BAlert>
+                <BAlert v-else show variant="warning" dismissible>
                     {{ localize("The following selections could not be included due to problems:") }}
                     <ul>
                         <li v-for="problem in invalidElements" :key="problem">
@@ -244,20 +327,20 @@ onMounted(() => {
                         </li>
                     </ul>
                     {{ localize("Exactly two elements needed for the collection. You may need to") }}
-                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
+                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
                         {{ localize("cancel") }}
                     </a>
                     {{ localize("and reselect new elements.") }}
                 </BAlert>
 
                 <div class="float-left">
-                    <button class="cancel-create btn" tabindex="-1" @click="oncancel">
+                    <button class="cancel-create btn" tabindex="-1" @click="emit('on-cancel')">
                         {{ localize("Cancel") }}
                     </button>
                 </div>
             </div>
-            <div v-else-if="!exactlyTwoValidElements">
-                <div v-if="invalidElements.length">
+            <div v-else>
+                <div v-if="fromSelection && invalidElements.length">
                     <BAlert show variant="warning" dismissible>
                         {{ localize("The following selections could not be included due to problems:") }}
                         <ul>
@@ -267,35 +350,26 @@ onMounted(() => {
                         </ul>
                     </BAlert>
                 </div>
-
-                <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">
-                        {{ localize("cancel") }}
-                    </a>
-                    {{ localize("and reselect new elements.") }}
-                </BAlert>
-
-                <div class="float-left">
-                    <button class="cancel-create btn" tabindex="-1" @click="oncancel">
-                        {{ localize("Cancel") }}
-                    </button>
-                </div>
-            </div>
-            <div v-else>
-                <div v-if="invalidElements.length">
+                <div v-if="!exactlyTwoValidElements">
                     <BAlert show variant="warning" dismissible>
-                        {{ localize("The following selections could not be included due to problems:") }}
-                        <ul>
-                            <li v-for="problem in invalidElements" :key="problem">
-                                {{ problem }}
-                            </li>
-                        </ul>
+                        {{ localize("Exactly two elements are needed for the pair.") }}
+                        <span v-if="fromSelection">
+                            <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
+                                {{ localize("Cancel") }}
+                            </a>
+                            {{ localize("and reselect new elements.") }}
+                        </span>
                     </BAlert>
+
+                    <div v-if="fromSelection" class="float-left">
+                        <button class="cancel-create btn" tabindex="-1" @click="emit('on-cancel')">
+                            {{ localize("Cancel") }}
+                        </button>
+                    </div>
                 </div>
 
                 <CollectionCreator
-                    :oncancel="oncancel"
+                    :oncancel="() => emit('on-cancel')"
                     :hide-source-items="hideSourceItems"
                     :suggested-name="initialSuggestedName"
                     :extensions-toggle="removeExtensions"
@@ -303,6 +377,7 @@ onMounted(() => {
                     @clicked-create="clickedCreate"
                     @remove-extensions-toggle="removeExtensionsToggle">
                     <template v-slot:help-content>
+                        <!-- TODO: Update help content for case where `fromSelection` is false -->
                         <p>
                             {{
                                 localize(
@@ -353,21 +428,46 @@ onMounted(() => {
 
                     <template v-slot:middle-content>
                         <div class="collection-elements-controls">
-                            <a
+                            <BButton
                                 class="swap"
-                                href="javascript:void(0);"
-                                title="l('Swap forward and reverse datasets')"
+                                size="sm"
+                                :disabled="!exactlyTwoValidElements"
+                                :title="localize('Swap forward and reverse datasets')"
                                 @click="swapButton">
+                                <FontAwesomeIcon :icon="faArrowsAltV" fixed-width />
                                 {{ localize("Swap") }}
-                            </a>
+                            </BButton>
+                        </div>
+
+                        <div class="collection-elements flex-row mb-3">
+                            <div v-for="dataset in ['forward', 'reverse']" :key="dataset">
+                                {{ localize(dataset) }}:
+                                <DatasetCollectionElementView
+                                    v-if="getPairElement(dataset)"
+                                    :key="getPairElement(dataset)?.id"
+                                    :element="getPairElement(dataset)"
+                                    has-actions
+                                    @element-is-discarded="removeElement(dataset)" />
+                                <div v-else class="collection-element alert-info">
+                                    <i>{{ localize("No dataset selected") }}</i>
+                                </div>
+                            </div>
                         </div>
 
-                        <div class="collection-elements scroll-container flex-row">
-                            <div
-                                v-for="(element, index) in workingElements"
-                                :key="element.id"
-                                class="collection-element">
-                                {{ index == 0 ? localize("forward") : localize("reverse") }}: {{ element.name }}
+                        <div v-if="!fromSelection">
+                            {{ localize("Manually select a forward and reverse dataset to create a pair collection:") }}
+                            <div class="collection-elements">
+                                <DatasetCollectionElementView
+                                    v-for="element in workingElements"
+                                    :key="element.id"
+                                    :class="{
+                                        selected: [pairElements.forward, pairElements.reverse].includes(element),
+                                    }"
+                                    :element="element"
+                                    not-editable
+                                    :selected="[pairElements.forward, pairElements.reverse].includes(element)"
+                                    @element-is-selected="selectElement"
+                                    @onRename="(name) => (element.name = name)" />
                             </div>
                         </div>
                     </template>
@@ -383,10 +483,6 @@ onMounted(() => {
         margin-top: 8px;
     }
 
-    .main-help {
-        cursor: pointer;
-    }
-
     .collection-elements-controls {
         margin-bottom: 8px;
     }
@@ -434,6 +530,15 @@ onMounted(() => {
                 text-decoration: none;
             }
         }
+
+        &.selected {
+            border-color: black;
+            background: rgb(118, 119, 131);
+            color: white;
+            a {
+                color: white;
+            }
+        }
     }
 
     .empty-message {
diff --git a/client/src/components/Collections/PairedListCollectionCreator.vue b/client/src/components/Collections/PairedListCollectionCreator.vue
index a349a9b707dd..299c1caf3271 100644
--- a/client/src/components/Collections/PairedListCollectionCreator.vue
+++ b/client/src/components/Collections/PairedListCollectionCreator.vue
@@ -18,6 +18,8 @@ import { useDatatypesMapperStore } from "@/stores/datatypesMapperStore";
 import localize from "@/utils/localization";
 import { naturalSort } from "@/utils/naturalSort";
 
+import type { DatasetPair } from "../History/adapters/buildCollectionModal";
+
 import Heading from "../Common/Heading.vue";
 import PairedElementView from "./PairedElementView.vue";
 import UnpairedDatasetElementView from "./UnpairedDatasetElementView.vue";
@@ -40,17 +42,8 @@ const INVALID_HEADER = localize("The following selections could not be included
 const ALL_INVALID_ELEMENTS_PART_ONE = localize("At least two elements are needed for the collection. You may need to");
 const CANCEL_TEXT = localize("Cancel");
 
-type DatasetPair = {
-    forward: HDASummary;
-    reverse: HDASummary;
-    name: string;
-};
-
 interface Props {
     initialElements: HistoryItemSummary[];
-    oncancel: () => void;
-    oncreate: () => void;
-    creationFn: (elements: DatasetPair[], collectionName: string, hideSourceItems: boolean) => any;
     defaultHideSourceItems?: boolean;
     fromSelection?: boolean;
     extensions?: string[];
@@ -58,6 +51,11 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const emit = defineEmits<{
+    (e: "clicked-create", workingElements: DatasetPair[], collectionName: string, hideSourceItems: boolean): void;
+    (e: "on-cancel"): void;
+}>();
+
 // Titles and help text computed
 const noElementsHeader = props.fromSelection ? localize("No elements selected") : localize("No elements available");
 const allInvalidElementsPartTwo = props.fromSelection
@@ -273,7 +271,7 @@ function _isElementInvalid(element: HistoryItemSummary) {
         element.extension &&
         !datatypesMapper.value?.isSubTypeOfAny(element.extension, props.extensions!)
     ) {
-        return localize("has an invalid extension");
+        return localize(`has an invalid extension: ${element.extension}`);
     }
     return null;
 }
@@ -723,12 +721,7 @@ function changeFilters(filter: keyof typeof COMMON_FILTERS) {
 async function clickedCreate(collectionName: string) {
     checkForDuplicates();
     if (state.value == "build") {
-        await props
-            .creationFn(generatedPairs.value, collectionName, hideSourceItems.value)
-            .then(props.oncreate)
-            .catch((e: any) => {
-                state.value = "error";
-            });
+        emit("clicked-create", generatedPairs.value, collectionName, hideSourceItems.value);
     }
 }
 
@@ -797,13 +790,13 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
                 <BAlert show variant="warning" dismissible>
                     {{ noElementsHeader }}
                     {{ ALL_INVALID_ELEMENTS_PART_ONE }}
-                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
+                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
                         {{ CANCEL_TEXT }}
                     </a>
                     {{ allInvalidElementsPartTwo }}
                 </BAlert>
                 <div class="float-left">
-                    <button class="cancel-create btn" tabindex="-1" @click="oncancel">
+                    <button class="cancel-create btn" tabindex="-1" @click="emit('on-cancel')">
                         {{ CANCEL_TEXT }}
                     </button>
                 </div>
@@ -832,13 +825,13 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
                         </li>
                     </ul>
                     {{ ALL_INVALID_ELEMENTS_PART_ONE }}
-                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
+                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
                         {{ CANCEL_TEXT }}
                     </a>
                     {{ allInvalidElementsPartTwo }}
                 </BAlert>
                 <div class="float-left">
-                    <button class="cancel-create btn" tabindex="-1" @click="oncancel">
+                    <button class="cancel-create btn" tabindex="-1" @click="emit('on-cancel')">
                         {{ CANCEL_TEXT }}
                     </button>
                 </div>
@@ -856,13 +849,13 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
                 </div>
                 <BAlert show variant="warning" dismissible>
                     {{ ALL_INVALID_ELEMENTS_PART_ONE }}
-                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
+                    <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
                         {{ CANCEL_TEXT }}
                     </a>
                     {{ allInvalidElementsPartTwo }}
                 </BAlert>
                 <div class="float-left">
-                    <button class="cancel-create btn" tabindex="-1" @click="oncancel">
+                    <button class="cancel-create btn" tabindex="-1" @click="emit('on-cancel')">
                         {{ CANCEL_TEXT }}
                     </button>
                 </div>
@@ -886,7 +879,7 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
                             )
                         }}
                         <span v-if="fromSelection">
-                            <a class="cancel-text" href="javascript:void(0)" role="button" @click="oncancel">
+                            <a class="cancel-text" href="javascript:void(0)" role="button" @click="emit('on-cancel')">
                                 {{ CANCEL_TEXT }}
                             </a>
                             {{ allInvalidElementsPartTwo }}
@@ -907,7 +900,7 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
                     </BAlert>
                 </div>
                 <CollectionCreator
-                    :oncancel="oncancel"
+                    :oncancel="() => emit('on-cancel')"
                     :hide-source-items="hideSourceItems"
                     render-extensions-toggle
                     :extensions-toggle="removeExtensions"
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index f027eb7e6a37..107dd76bc27e 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -15,28 +15,24 @@ import { computed, onMounted, type Ref, ref, watch } from "vue";
 
 import { isDatasetElement, isDCE } from "@/api";
 import { getGalaxyInstance } from "@/app";
-import { buildCollectionModal } from "@/components/History/adapters/buildCollectionModal";
-import { createDatasetCollection } from "@/components/History/model/queries";
 import { useDatatypesMapper } from "@/composables/datatypesMapper";
-import { useHistoryItemsForType } from "@/composables/useHistoryItemsForType";
-import { useUserHistories } from "@/composables/userHistories";
 import { useUid } from "@/composables/utils/uid";
 import { type EventData, useEventStore } from "@/stores/eventStore";
-import { useUserStore } from "@/stores/userStore";
+import { useHistoryStore } from "@/stores/historyStore";
 import { orList } from "@/utils/strings";
 
 import type { DataOption } from "./types";
 import { BATCH, SOURCE, VARIANTS } from "./variants";
 
 import FormSelection from "../FormSelection.vue";
-import ButtonSpinner from "@/components/Common/ButtonSpinner.vue";
+import CollectionCreatorModal from "@/components/Collections/CollectionCreatorModal.vue";
 import FormSelect from "@/components/Form/Elements/FormSelect.vue";
 import HelpText from "@/components/Help/HelpText.vue";
 
 const COLLECTION_TYPE_TO_LABEL: Record<string, string> = {
-    list: "List",
-    "list:paired": "List of Dataset Pairs",
-    paired: "Dataset Pair",
+    list: "list",
+    "list:paired": "list of dataset pairs",
+    paired: "dataset pair",
 };
 
 type SelectOption = {
@@ -90,6 +86,11 @@ const currentHighlighting: Ref<string | null> = ref(null);
 const dragData: Ref<EventData | null> = ref(null);
 const dragTarget: Ref<EventTarget | null> = ref(null);
 
+// Collection creator modal settings
+const collectionModalShow = ref(false);
+const collectionModalType = ref<"list" | "list:paired" | "paired">("list");
+const { currentHistoryId } = storeToRefs(useHistoryStore());
+
 /** Store options which need to be preserved **/
 const keepOptions: Record<string, SelectOption> = {};
 
@@ -488,44 +489,21 @@ function canAcceptSrc(historyContentType: "dataset" | "dataset_collection", coll
     }
 }
 
-const { currentUser } = storeToRefs(useUserStore());
-const { currentHistoryId, currentHistory } = useUserHistories(currentUser);
-
-const { historyItems, isFetchingItems, errorMessage: historyItemsError } = useHistoryItemsForType(currentHistoryId);
-
-/** Excludes the `paired` collection type for now */
-const effectiveCollectionTypes = props.collectionTypes?.filter((collectionType) => collectionType !== "paired");
-
-/** Build a new collection and set it as the current value if valid */
-async function buildNewCollection(collectionType: string) {
-    if (!currentHistoryId.value || !currentHistory.value || isFetchingItems.value || historyItemsError.value) {
-        return;
-    }
+/** Allowed collection types for collection creation */
+const effectiveCollectionTypes = props.collectionTypes?.filter((collectionType) =>
+    ["list", "list:paired", "paired"].includes(collectionType)
+);
 
-    if (collectionType === "list" || collectionType === "list:paired") {
-        const modalResult = await buildCollectionModal(collectionType, historyItems.value, currentHistoryId.value, {
-            extensions: props.extensions?.filter((ext) => ext !== "data"),
-            defaultHideSourceItems: false,
-            historyName: currentHistory.value?.name,
-        });
-        const collection = await createDatasetCollection(currentHistory.value, modalResult);
-        if (collection) {
-            // TODO: Commenting this out; should we allow `handleIncoming` to handle this or not?
-            // // remove the `elements` and `elements_datatypes` keys from the collection
-            // // to prevent `handleIncoming` from flagging the collection as invalid
-            // if ("elements" in collection) {
-            //     delete collection.elements;
-            // }
-            // if ("elements_datatypes" in collection) {
-            //     delete collection.elements_datatypes;
-            // }
-            handleIncoming(collection as any);
-        }
-    }
-    // else if (collectionType === "list:paired") { // TODO: Implement paired collection
-    else {
+function buildNewCollection(collectionType: string) {
+    if (!["list", "list:paired", "paired"].includes(collectionType)) {
         throw Error(`Unknown collection type: ${collectionType}`);
     }
+    collectionModalType.value = collectionType as "list" | "list:paired" | "paired";
+    collectionModalShow.value = true;
+}
+
+function createdCollection(collection: any) {
+    handleIncoming(collection);
 }
 
 // Drag/Drop event handlers
@@ -660,16 +638,15 @@ const noOptionsWarningMessage = computed(() => {
                     <span v-else class="font-weight-bold">...</span>
                 </BButton>
                 <BButtonGroup v-if="effectiveCollectionTypes?.length > 0" size="sm" buttons>
-                    <ButtonSpinner
+                    <BButton
                         v-for="collectionType in effectiveCollectionTypes"
                         :key="collectionType"
-                        :tooltip="`Create a new ${COLLECTION_TYPE_TO_LABEL[collectionType]}`"
+                        v-b-tooltip.hover.bottom
+                        :title="`Create a new ${COLLECTION_TYPE_TO_LABEL[collectionType]}`"
                         :variant="formattedOptions.length === 0 ? 'warning' : 'secondary'"
-                        :disabled="isFetchingItems"
-                        :icon="faPlus"
-                        :wait="isFetchingItems"
-                        @onClick="buildNewCollection(collectionType)">
-                    </ButtonSpinner>
+                        @click="buildNewCollection(collectionType)">
+                        <FontAwesomeIcon :icon="faPlus" fixed-width />
+                    </BButton>
                 </BButtonGroup>
             </BButtonGroup>
             <div v-if="extensions && extensions.length > 0">
@@ -712,6 +689,14 @@ const noOptionsWarningMessage = computed(() => {
             optional
             multiple />
 
+        <CollectionCreatorModal
+            v-if="currentHistoryId && effectiveCollectionTypes?.length > 0"
+            :history-id="currentHistoryId"
+            :collection-type="collectionModalType"
+            :extensions="props.extensions.filter((ext) => ext !== 'data')"
+            :show-modal.sync="collectionModalShow"
+            @created-collection="createdCollection" />
+
         <template v-if="currentVariant && currentVariant.batch !== BATCH.DISABLED">
             <BFormCheckbox
                 v-if="currentVariant.batch === BATCH.ENABLED"
diff --git a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
index 71ccfa80e4c3..38859c0fd041 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
@@ -138,11 +138,19 @@
             <p v-localize>Remove the following tags from {{ numSelected }} items:</p>
             <StatelessTags v-model="selectedTags" class="tags" />
         </b-modal>
+        <CollectionCreatorModal
+            v-if="collectionModalType"
+            :history-id="history.id"
+            :collection-type="collectionModalType"
+            :filter-text="filterText"
+            :selected-items="collectionSelection"
+            :show-modal.sync="collectionModalShow"
+            default-hide-source-items
+            @created-collection="createdCollection" />
     </section>
 </template>
 
 <script>
-import { buildCollectionModal } from "components/History/adapters/buildCollectionModal";
 import { HistoryFilters } from "components/History/HistoryFilters";
 import {
     addTagsToSelectedContent,
@@ -159,13 +167,16 @@ import { DatatypesProvider, DbKeyProvider } from "components/providers";
 import SingleItemSelector from "components/SingleItemSelector";
 import { StatelessTags } from "components/Tags";
 
-import { GalaxyApi } from "@/api";
-import { createDatasetCollection, filtersToQueryValues } from "@/components/History/model/queries";
+import { createDatasetCollection } from "@/components/History/model/queries";
 import { useConfig } from "@/composables/config";
-import { rethrowSimple } from "@/utils/simple-error";
+
+import { buildRuleCollectionModal } from "../../adapters/buildCollectionModal";
+
+import CollectionCreatorModal from "@/components/Collections/CollectionCreatorModal.vue";
 
 export default {
     components: {
+        CollectionCreatorModal,
         DbKeyProvider,
         DatatypesProvider,
         SingleItemSelector,
@@ -186,6 +197,9 @@ export default {
     },
     data: function () {
         return {
+            collectionModalShow: false,
+            collectionModalType: null,
+            collectionSelection: undefined,
             selectedDbKey: "?",
             selectedDatatype: "auto",
             selectedTags: [],
@@ -361,40 +375,26 @@ export default {
         },
 
         // collection creation, fires up a modal
-        async buildDatasetList() {
-            await this.buildNewCollection("list");
-        },
-        async buildDatasetListAll() {
-            let allContents = [];
-            const filters = HistoryFilters.getQueryDict(this.filterText);
-            const filterQuery = filtersToQueryValues(filters);
-            const { data, error } = await GalaxyApi().GET("/api/histories/{history_id}/contents/{type}s", {
-                params: {
-                    path: { history_id: this.history.id, type: "dataset" },
-                    query: { ...filterQuery, v: "dev" },
-                },
-            });
-            if (error) {
-                rethrowSimple(error);
-            }
-
-            allContents = data;
-
-            this.buildNewCollection("list", allContents);
-        },
-        async buildListOfPairs() {
-            await this.buildNewCollection("list:paired");
+        buildDatasetList() {
+            this.collectionModalType = "list";
+            this.collectionSelection = Array.from(this.contentSelection.values());
+            this.collectionModalShow = true;
+        },
+        buildDatasetListAll() {
+            this.collectionModalType = "list";
+            this.collectionSelection = undefined;
+            this.collectionModalShow = true;
+        },
+        buildListOfPairs() {
+            this.collectionModalType = "list:paired";
+            this.collectionSelection = Array.from(this.contentSelection.values());
+            this.collectionModalShow = true;
+        },
+        createdCollection(collection) {
+            this.$emit("reset-selection");
         },
         async buildCollectionFromRules() {
-            await this.buildNewCollection("rules");
-        },
-        async buildNewCollection(collectionType, contents) {
-            if (contents === undefined) {
-                contents = this.contentSelection;
-            }
-            const modalResult = await buildCollectionModal(collectionType, contents, this.history.id, {
-                fromSelection: true,
-            });
+            const modalResult = await buildRuleCollectionModal(this.contentSelection, this.history.id);
             await createDatasetCollection(this.history, modalResult);
 
             // have to hide the source items if that was requested
diff --git a/client/src/components/History/adapters/HistoryPanelProxy.js b/client/src/components/History/adapters/HistoryPanelProxy.js
index e79466d45052..11972ef9fc2c 100644
--- a/client/src/components/History/adapters/HistoryPanelProxy.js
+++ b/client/src/components/History/adapters/HistoryPanelProxy.js
@@ -8,7 +8,7 @@ import { startWatchingHistory } from "store/historyStore/model/watchHistory";
 import { useHistoryItemsStore } from "stores/historyItemsStore";
 import { useHistoryStore } from "stores/historyStore";
 
-import { buildCollectionModal } from "./buildCollectionModal";
+import { buildRuleCollectionModal } from "./buildCollectionModal";
 
 // extend existing current history panel
 export class HistoryPanelProxy {
@@ -45,7 +45,7 @@ export class HistoryPanelProxy {
         this.model.id = historyId;
         this.historyStore.setCurrentHistory(historyId);
     }
-    async buildCollection(collectionType, selection, historyId = null, fromRulesInput = false) {
+    async buildCollectionFromRules(selection, historyId = null, fromRulesInput = false) {
         let selectionContent = null;
         historyId = historyId || this.model.id;
         if (fromRulesInput) {
@@ -56,7 +56,7 @@ export class HistoryPanelProxy {
                 selectionContent.set(obj.id, obj);
             });
         }
-        const modalResult = await buildCollectionModal(collectionType, selectionContent, historyId, { fromRulesInput });
+        const modalResult = await buildRuleCollectionModal(selectionContent, historyId, fromRulesInput);
         if (modalResult) {
             console.debug("Submitting collection build request.", modalResult);
             await createDatasetCollection({ id: historyId }, modalResult);
diff --git a/client/src/components/History/adapters/buildCollectionModal.ts b/client/src/components/History/adapters/buildCollectionModal.ts
index e3947d184420..53a41b424914 100644
--- a/client/src/components/History/adapters/buildCollectionModal.ts
+++ b/client/src/components/History/adapters/buildCollectionModal.ts
@@ -1,4 +1,5 @@
 /**
+ * TODO: Update this description...
  * Temporary adapter to launch bootstrap modals from Vue components, for use with
  * the collection assembly modals. i.e. With selected..... create dataset collection,
  * create paired collection, etc.
@@ -10,54 +11,35 @@
 
 import jQuery from "jquery";
 
-import type { HistoryItemSummary } from "@/api";
-import LIST_COLLECTION_CREATOR from "@/components/Collections/ListCollectionCreatorModal";
-import PAIR_COLLECTION_CREATOR from "@/components/Collections/PairCollectionCreatorModal";
-import LIST_OF_PAIRS_COLLECTION_CREATOR from "@/components/Collections/PairedListCollectionCreatorModal";
+import type { HDASummary, HistoryItemSummary } from "@/api";
 import RULE_BASED_COLLECTION_CREATOR from "@/components/Collections/RuleBasedCollectionCreatorModal";
 
 export type CollectionType = "list" | "paired" | "list:paired" | "rules";
-export interface BuildCollectionOptions {
-    fromRulesInput?: boolean;
-    fromSelection?: boolean;
-    extensions?: string[];
-    title?: string;
-    defaultHideSourceItems?: boolean;
-    historyId?: string;
-    historyName?: string;
-}
+export type DatasetPair = {
+    forward: HDASummary;
+    reverse: HDASummary;
+    name: string;
+};
 
 // stand-in for buildCollection from history-view-edit.js
-export async function buildCollectionModal(
-    collectionType: CollectionType,
+export async function buildRuleCollectionModal(
     selectedContent: HistoryItemSummary[],
     historyId: string,
-    options: BuildCollectionOptions = {}
+    fromRulesInput = false,
+    defaultHideSourceItems = true
 ) {
     // select legacy function
-    const { fromRulesInput = false } = options;
-    let createFunc;
-    if (collectionType == "list") {
-        createFunc = LIST_COLLECTION_CREATOR.createListCollection;
-    } else if (collectionType == "paired") {
-        createFunc = PAIR_COLLECTION_CREATOR.createPairCollection;
-    } else if (collectionType == "list:paired") {
-        createFunc = LIST_OF_PAIRS_COLLECTION_CREATOR.createPairedListCollection;
-    } else if (collectionType.startsWith("rules")) {
-        createFunc = RULE_BASED_COLLECTION_CREATOR.createCollectionViaRules;
-    } else {
-        throw new Error(`Unknown collectionType encountered ${collectionType}`);
-    }
+    const createFunc = RULE_BASED_COLLECTION_CREATOR.createCollectionViaRules;
     // pull up cached content by type_ids;
     if (fromRulesInput) {
         return await createFunc(selectedContent);
     } else {
-        const fakeBackboneContent = createBackboneContent(historyId, selectedContent, options);
+        const fakeBackboneContent = createBackboneContent(historyId, selectedContent, defaultHideSourceItems);
         return await createFunc(fakeBackboneContent);
     }
 }
 
-const createBackboneContent = (historyId: string, selection: HistoryItemSummary[], options: BuildCollectionOptions) => {
+const createBackboneContent = (historyId: string, selection: HistoryItemSummary[], defaultHideSourceItems: boolean) => {
     const selectionJson = Array.from(selection.values());
     return {
         historyId,
@@ -80,9 +62,6 @@ const createBackboneContent = (historyId: string, selection: HistoryItemSummary[
                 options,
             });
         },
-        fromSelection: options.fromSelection,
-        extensions: options.extensions,
-        defaultHideSourceItems: options.defaultHideSourceItems === undefined ? true : options.defaultHideSourceItems,
-        historyName: options.historyName,
+        defaultHideSourceItems,
     };
 };
diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
index bb023fdc3ca2..b9eac7dbddc5 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
@@ -15,6 +15,7 @@ import { storeToRefs } from "pinia";
 import { computed, reactive, ref } from "vue";
 
 import { GalaxyApi } from "@/api";
+import type { CollectionType } from "@/components/History/adapters/buildCollectionModal";
 import { Services } from "@/components/Libraries/LibraryFolder/services";
 import mod_add_datasets from "@/components/Libraries/LibraryFolder/TopToolbar/add-datasets";
 import { deleteSelectedItems } from "@/components/Libraries/LibraryFolder/TopToolbar/delete-selected";
@@ -28,6 +29,7 @@ import { Toast } from "@/composables/toast";
 import { useDbKeyStore } from "@/stores/dbKeyStore";
 import { useUserStore } from "@/stores/userStore";
 
+import CollectionCreatorModal from "@/components/Collections/CollectionCreatorModal.vue";
 import FolderDetails from "@/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.vue";
 import LibraryBreadcrumb from "@/components/Libraries/LibraryFolder/LibraryBreadcrumb.vue";
 import SearchField from "@/components/Libraries/LibraryFolder/SearchField.vue";
@@ -114,6 +116,12 @@ const totalRows = computed(() => {
     return props.metadata?.total_rows ?? 0;
 });
 
+// Variables for Collection Creation
+const collectionModalType = ref<CollectionType | null>(null);
+const collectionModalShow = ref(false);
+const collectionSelection = ref<any[]>([]);
+const collectionHistoryId = ref<string | null>(null);
+
 function updateSearch(value: string) {
     emit("updateSearch", value);
 }
@@ -211,6 +219,16 @@ async function importToHistoryModal(isCollection: boolean) {
         if (isCollection) {
             new mod_import_collection.ImportCollectionModal({
                 selected: checkedItems,
+                onCollectionImport: async (collectionType: string, selection: any, historyId: string) => {
+                    try {
+                        collectionHistoryId.value = historyId;
+                        collectionModalType.value = collectionType as CollectionType;
+                        collectionSelection.value = selection;
+                        collectionModalShow.value = true;
+                    } catch (err) {
+                        console.error(err);
+                    }
+                },
             });
         } else {
             new mod_import_dataset.ImportDatasetModal({
@@ -449,5 +467,13 @@ async function onAddDatasetsFromHistory(selectedDatasets: SelectionItem[]) {
             :folder-id="props.folderId"
             @onSelect="onAddDatasetsFromHistory"
             @onClose="onAddDatasets" />
+
+        <CollectionCreatorModal
+            v-if="collectionModalType && collectionHistoryId"
+            :history-id="collectionHistoryId"
+            :collection-type="collectionModalType"
+            :selected-items="collectionSelection"
+            :show-modal.sync="collectionModalShow"
+            default-hide-source-items />
     </div>
 </template>
diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/import-to-history/import-collection.js b/client/src/components/Libraries/LibraryFolder/TopToolbar/import-to-history/import-collection.js
index 1642d31d89d3..eaf8b7d3d55a 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/import-to-history/import-collection.js
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/import-to-history/import-collection.js
@@ -115,8 +115,12 @@ var ImportCollectionModal = Backbone.View.extend({
                 models: collectionElements,
             };
         }
-        const Galaxy = getGalaxyInstance();
-        Galaxy.currHistoryPanel.buildCollection(collectionType, selection, historyId);
+        if (collectionType === "rules") {
+            const Galaxy = getGalaxyInstance();
+            Galaxy.currHistoryPanel.buildCollectionFromRules(selection, historyId);
+        } else if (this.options.onCollectionImport) {
+            this.options.onCollectionImport(collectionType, selection, historyId);
+        }
     },
     templateCollectionSelectModal: function () {
         return _.template(
diff --git a/client/src/components/Upload/DefaultBox.vue b/client/src/components/Upload/DefaultBox.vue
index 4afaa63ad705..91c5546be514 100644
--- a/client/src/components/Upload/DefaultBox.vue
+++ b/client/src/components/Upload/DefaultBox.vue
@@ -8,10 +8,10 @@ import Vue, { computed, ref } from "vue";
 
 import { UploadQueue } from "@/utils/upload-queue.js";
 
-import { collectionBuilder } from "./builders.js";
 import { defaultModel } from "./model.js";
 import { COLLECTION_TYPES, DEFAULT_FILE_NAME, hasBrowserSupport } from "./utils";
 
+import CollectionCreatorModal from "../Collections/CollectionCreatorModal.vue";
 import DefaultRow from "./DefaultRow.vue";
 import UploadBox from "./UploadBox.vue";
 import UploadSelect from "./UploadSelect.vue";
@@ -72,6 +72,8 @@ const props = defineProps({
 
 const emit = defineEmits(["dismiss", "progress"]);
 
+const collectionModalShow = ref(false);
+const collectionSelection = ref([]);
 const collectionType = ref("list");
 const counterAnnounce = ref(0);
 const counterError = ref(0);
@@ -147,8 +149,24 @@ function eventAnnounce(index, file) {
 }
 
 /** Populates collection builder with uploaded files */
-function eventBuild() {
-    collectionBuilder(historyId, collectionType.value, uploadValues.value);
+async function eventBuild() {
+    try {
+        collectionSelection.value = [];
+        uploadValues.value.forEach((model) => {
+            const outputs = model.outputs;
+            if (outputs) {
+                Object.entries(outputs).forEach((output) => {
+                    const outputDetails = output[1];
+                    collectionSelection.value.push(outputDetails);
+                });
+            } else {
+                console.debug("Warning, upload response does not contain outputs.", model);
+            }
+        });
+        collectionModalShow.value = true;
+    } catch (err) {
+        console.error(err);
+    }
     counterRunning.value = 0;
     eventReset();
     emit("dismiss");
@@ -457,5 +475,12 @@ defineExpose({
                 <span v-else v-localize>Close</span>
             </BButton>
         </div>
+        <CollectionCreatorModal
+            v-if="isCollection && historyId"
+            :history-id="historyId"
+            :collection-type="collectionType"
+            :selected-items="collectionSelection"
+            :show-modal.sync="collectionModalShow"
+            default-hide-source-items />
     </div>
 </template>
diff --git a/client/src/components/Upload/RulesInput.vue b/client/src/components/Upload/RulesInput.vue
index 9cac3661a470..ed36d9636574 100644
--- a/client/src/components/Upload/RulesInput.vue
+++ b/client/src/components/Upload/RulesInput.vue
@@ -60,7 +60,7 @@ function eventBuild() {
     } else if (entry.selectionType == "remote_files") {
         entry.elements = uris.value;
     }
-    Galaxy.currHistoryPanel.buildCollection("rules", entry, null, true);
+    Galaxy.currHistoryPanel.buildCollectionFromRules(entry, null, true);
     emit("dismiss");
 }
 
diff --git a/client/src/components/Upload/builders.js b/client/src/components/Upload/builders.js
deleted file mode 100644
index 5253a8ba6b97..000000000000
--- a/client/src/components/Upload/builders.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * Interface with rule builder
- */
-import { getGalaxyInstance } from "app";
-
-/** Populates collection builder with uploaded files */
-export function collectionBuilder(historyId, type, uploadValues) {
-    const Galaxy = getGalaxyInstance();
-    const models = {};
-    uploadValues.forEach((model) => {
-        const outputs = model.outputs;
-        if (outputs) {
-            Object.entries(outputs).forEach((output) => {
-                const outputDetails = output[1];
-                models[outputDetails.id] = outputDetails;
-            });
-        } else {
-            console.debug("Warning, upload response does not contain outputs.", model);
-        }
-    });
-    // Build selection object
-    const selection = {
-        models: Object.values(models),
-        historyId: historyId,
-    };
-    Galaxy.currHistoryPanel.buildCollection(type, selection);
-}
diff --git a/client/src/composables/useHistoryItemsForType.ts b/client/src/composables/useHistoryItemsForType.ts
deleted file mode 100644
index 765e411637da..000000000000
--- a/client/src/composables/useHistoryItemsForType.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { computed, type Ref, ref, watch } from "vue";
-
-import { GalaxyApi, type HistoryItemSummary } from "@/api";
-import { filtersToQueryValues } from "@/components/History/model/queries";
-import { useHistoryStore } from "@/stores/historyStore";
-import { errorMessageAsString } from "@/utils/simple-error";
-
-const DEFAULT_FILTERS = { visible: true, deleted: false };
-
-let singletonInstance: {
-    isFetchingItems: Ref<boolean>;
-    errorMessage: Ref<string | null>;
-    historyItems: Ref<HistoryItemSummary[]>;
-} | null = null;
-
-/**
- * Creates a composable that fetches the given type of items from a history reactively.
- * @param historyId The history ID to fetch items for. (TODO: make this a required parameter; only `string` allowed)
- * @param type The type of items to fetch. Default is "dataset".
- * @param filters Filters to apply to the items.
- * @returns An object containing reactive properties for the fetch status and the fetched items.
- */
-export function useHistoryItemsForType(
-    historyId: Ref<string | null>,
-    type: "dataset" | "dataset_collection" = "dataset",
-    filters = DEFAULT_FILTERS
-) {
-    if (singletonInstance) {
-        return singletonInstance;
-    }
-    const isFetchingItems = ref(false);
-    const errorMessage = ref<string | null>(null);
-    const historyItems = ref<HistoryItemSummary[]>([]);
-    const counter = ref(0);
-
-    const historyStore = useHistoryStore();
-
-    const historyUpdateTime = computed(
-        () => historyId.value && historyStore.getHistoryById(historyId.value)?.update_time
-    );
-
-    // Fetch items when history ID or update time changes
-    watch(
-        () => ({
-            time: historyUpdateTime.value,
-            id: historyId.value,
-        }),
-        async (newValues, oldValues) => {
-            if (newValues.time !== oldValues?.time || newValues.id !== oldValues?.id) {
-                await fetchItems();
-                counter.value++;
-            }
-        },
-        { immediate: true }
-    );
-
-    async function fetchItems() {
-        if (!historyId.value) {
-            errorMessage.value = "No history ID provided";
-            return;
-        }
-        if (isFetchingItems.value) {
-            return;
-        }
-        const filterQuery = filtersToQueryValues(filters);
-        isFetchingItems.value = true;
-        const { data, error } = await GalaxyApi().GET("/api/histories/{history_id}/contents/{type}s", {
-            params: {
-                path: { history_id: historyId.value, type: type },
-                query: { ...filterQuery, v: "dev" },
-            },
-        });
-        isFetchingItems.value = false;
-        if (error) {
-            errorMessage.value = errorMessageAsString(error);
-            console.error("Error fetching history items", errorMessage.value);
-        } else {
-            historyItems.value = data as HistoryItemSummary[];
-            errorMessage.value = null;
-        }
-    }
-
-    singletonInstance = {
-        isFetchingItems,
-        errorMessage,
-        historyItems,
-    };
-
-    return singletonInstance;
-}
diff --git a/client/src/stores/collectionBuilderItemsStore.ts b/client/src/stores/collectionBuilderItemsStore.ts
new file mode 100644
index 000000000000..dc5705a7b4b7
--- /dev/null
+++ b/client/src/stores/collectionBuilderItemsStore.ts
@@ -0,0 +1,78 @@
+import { defineStore } from "pinia";
+import { ref, set } from "vue";
+
+import { GalaxyApi, type HDASummary } from "@/api";
+import { HistoryFilters } from "@/components/History/HistoryFilters";
+import { filtersToQueryValues } from "@/components/History/model/queries";
+import { errorMessageAsString } from "@/utils/simple-error";
+
+const DEFAULT_FILTERS = { visible: true, deleted: false };
+
+/**
+ * Fetches datasets for the Collection Builder modal. It caches the datasets for each filter text.
+ */
+export const useCollectionBuilderItemsStore = defineStore("collectionBuilderItemsStore", () => {
+    const cachedDatasetsForFilterText = ref<Record<string, HDASummary[]>>({});
+    const errorMessage = ref<string | null>(null);
+    const isFetching = ref<Record<string, boolean>>({});
+    const lastFetch = ref<{ id: string; time: string; text: string } | null>(null);
+
+    async function fetchDatasetsForFiltertext(historyId: string, historyUpdateTime?: string, filterText = "") {
+        if (isFetching.value[filterText]) {
+            return { data: [], error: null };
+        }
+
+        if (
+            lastFetch.value &&
+            lastFetch.value.id === historyId &&
+            lastFetch.value.time === historyUpdateTime &&
+            lastFetch.value.text === filterText
+        ) {
+            return {
+                data: cachedDatasetsForFilterText.value[filterText] || [],
+                error: errorMessage.value,
+            };
+        }
+
+        set(isFetching.value, filterText, true);
+
+        const filterQuery = getFilterQuery(filterText);
+
+        // Note: Had "/api/histories/{history_id}/contents/datasets" before but it was returning datasets and collections
+        const { data, error: apiError } = await GalaxyApi().GET("/api/histories/{history_id}/contents", {
+            params: {
+                path: { history_id: historyId },
+                query: { ...filterQuery, v: "dev" },
+            },
+        });
+        const returnedData = data as HDASummary[];
+
+        let error = null;
+        if (apiError) {
+            error = errorMessageAsString(apiError);
+            errorMessage.value = error;
+        } else {
+            set(cachedDatasetsForFilterText.value, filterText, returnedData);
+        }
+
+        set(isFetching.value, filterText, false);
+        lastFetch.value = { id: historyId, time: historyUpdateTime || "", text: filterText };
+
+        return { data: returnedData, error };
+    }
+
+    function getFilterQuery(filterText: string) {
+        let filters = filterText ? HistoryFilters.getQueryDict(filterText) : DEFAULT_FILTERS;
+        if (filters.history_content_type) {
+            delete filters.history_content_type;
+        }
+        filters = { ...filters, history_content_type: "dataset" };
+        return filtersToQueryValues(filters);
+    }
+
+    return {
+        cachedDatasetsForFilterText,
+        isFetching,
+        fetchDatasetsForFiltertext,
+    };
+});