add history name to modal header

client/src/components/Collections/ListCollectionCreatorModal.js

@@ -41,6 +41,7 @@ function createListCollection(contents) {
         defaultHideSourceItems: contents.defaultHideSourceItems,
         fromSelection: contents.fromSelection,
         extensions: contents.extensions,
+        historyName: contents.historyName,
         creationFn: function (elements, name, hideSourceItems) {
             elements = elements.map((element) => ({
                 id: element.id,

client/src/components/Collections/PairedListCollectionCreatorModal.js

@@ -41,6 +41,7 @@ function createPairedListCollection(contents) {
         defaultHideSourceItems: contents.defaultHideSourceItems,
         fromSelection: contents.fromSelection,
         extensions: contents.extensions,
+        historyName: contents.historyName,
         creationFn: function (elements, name, hideSourceItems) {
             elements = elements.map((pair) => ({
                 collection_type: "paired",

client/src/components/Collections/common/modal.js

@@ -17,8 +17,14 @@ export function collectionCreatorModalSetup(options, Galaxy = null) {
     });
     const showEl = function (el) {
         const close_event = options.closing_events === undefined || options.closing_events;
+        const title = options.title || _l("Create a collection");
+        const titleSuffix = options.historyName ? `From history: <b>${options.historyName}</b>` : "";
+        const titleHtml = `<div class='d-flex justify-content-between unselectable'>
+                <span>${title}</span>
+                <span>${titleSuffix}</span>
+            </div>`;
         modal.show({
-            title: options.title || _l("Create a collection"),
+            title: titleHtml,
             body: el,
             width: "85%",
             height: "100%",

client/src/components/Form/Elements/FormData/FormData.vue

@@ -10,6 +10,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BButtonGroup, BCollapse, BFormCheckbox, BTooltip } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
 import { computed, onMounted, type Ref, ref, watch } from "vue";
 
 import { isDatasetElement, isDCE } from "@/api";
@@ -18,9 +19,10 @@ import { buildCollectionModal } from "@/components/History/adapters/buildCollect
 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 { useHistoryStore } from "@/stores/historyStore";
+import { useUserStore } from "@/stores/userStore";
 import { orList } from "@/utils/strings";
 
 import type { DataOption } from "./types";
@@ -486,36 +488,27 @@ function canAcceptSrc(historyContentType: "dataset" | "dataset_collection", coll
     }
 }
 
-const historyStore = useHistoryStore();
+const { currentUser } = storeToRefs(useUserStore());
+const { currentHistoryId, currentHistory } = useUserHistories(currentUser);
 
-const idToFetchFor = computed(() => historyStore.currentHistoryId);
-const { historyItems, isFetchingItems, errorMessage: historyItemsError } = useHistoryItemsForType(idToFetchFor);
+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 (
-        !historyStore.currentHistoryId ||
-        !historyStore.currentHistory ||
-        isFetchingItems.value ||
-        historyItemsError.value
-    ) {
+    if (!currentHistoryId.value || !currentHistory.value || isFetchingItems.value || historyItemsError.value) {
         return;
     }
 
     if (collectionType === "list" || collectionType === "list:paired") {
-        const modalResult = await buildCollectionModal(
-            collectionType,
-            historyItems.value,
-            historyStore.currentHistoryId,
-            {
-                extensions: props.extensions?.filter((ext) => ext !== "data"),
-                defaultHideSourceItems: false,
-            }
-        );
-        const collection = await createDatasetCollection(historyStore.currentHistory, modalResult);
+        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

client/src/components/History/adapters/buildCollectionModal.ts

@@ -24,6 +24,7 @@ export interface BuildCollectionOptions {
     title?: string;
     defaultHideSourceItems?: boolean;
     historyId?: string;
+    historyName?: string;
 }
 
 // stand-in for buildCollection from history-view-edit.js
@@ -82,5 +83,6 @@ const createBackboneContent = (historyId: string, selection: HistoryItemSummary[
         fromSelection: options.fromSelection,
         extensions: options.extensions,
         defaultHideSourceItems: options.defaultHideSourceItems === undefined ? true : options.defaultHideSourceItems,
+        historyName: options.historyName,
     };
 };

client/src/style/scss/ui.scss

@@ -71,6 +71,9 @@ $ui-margin-horizontal-large: $margin-v * 2;
 .ui-modal {
     display: none;
     overflow: auto;
+    .title {
+        width: 100%;
+    }
     .modal-header.no-separator {
         border: none !important;
         padding-bottom: 0px !important;