From 7d474c2087611fe556b8fc8277620c8a63a69ca8 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Fri, 4 Oct 2024 17:42:43 -0500
Subject: [PATCH] add history name to modal header

---
 .../components/Collections/common/modal.js    |  8 ++++-
 .../Form/Elements/FormData/FormData.vue       | 33 ++++++++-----------
 .../History/adapters/buildCollectionModal.ts  |  2 ++
 client/src/style/scss/ui.scss                 |  3 ++
 4 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/client/src/components/Collections/common/modal.js b/client/src/components/Collections/common/modal.js
index a823d1c27657..eaf90715aa3e 100644
--- a/client/src/components/Collections/common/modal.js
+++ b/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%",
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index e0c2994909c7..f027eb7e6a37 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/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
diff --git a/client/src/components/History/adapters/buildCollectionModal.ts b/client/src/components/History/adapters/buildCollectionModal.ts
index 06be87275012..e3947d184420 100644
--- a/client/src/components/History/adapters/buildCollectionModal.ts
+++ b/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,
     };
 };
diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index d29d05759050..916d98d12c99 100644
--- a/client/src/style/scss/ui.scss
+++ b/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;