From 2bbb58256a39539cd5913285f04c442531c17d4d Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 19 Sep 2024 15:40:46 -0500
Subject: [PATCH] add button for creating a list from run form field

This is an initial/draft implementation. Some of the next steps are:
- By default, instead of the modals treating the items as selections from the current history, automatically filter items valid for the list (e.g.: a list with csv elements).
- In case nothing can be auto paried for `list:paired`, do not attempt to auto pair by default and simply show all items.
- In case the current history is empty and to make it clearer in general, allow history to be switched from within the modal?
- Allow files to be uploaded (and dropped) directly to either the form field or within the list builder once it is opened.

One thing I have not planned as the initial step is the rule builder. I can see that for `list` and `list:paired`, we get that from the `props.collectionTypes` in `FormData`. But when would we use the rule builder instead?

Fixes https://github.com/galaxyproject/galaxy/issues/18704
---
 .../Form/Elements/FormData/FormData.vue       | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 9c719ca91b86..9cdb34812259 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -8,9 +8,12 @@ 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 { useDatatypesMapper } from "@/composables/datatypesMapper";
 import { useUid } from "@/composables/utils/uid";
 import { type EventData, useEventStore } from "@/stores/eventStore";
+import { useHistoryItemsStore } from "@/stores/historyItemsStore";
+import { useHistoryStore } from "@/stores/historyStore";
 import { orList } from "@/utils/strings";
 
 import type { DataOption } from "./types";
@@ -471,6 +474,21 @@ function canAcceptSrc(historyContentType: "dataset" | "dataset_collection", coll
     }
 }
 
+const historyStore = useHistoryStore();
+const historyItemsStore = useHistoryItemsStore();
+// Build a new collection
+async function buildNewCollection(collectionType: string) {
+    if (!historyStore.currentHistoryId) {
+        return;
+    }
+    const modalResult = await buildCollectionModal(
+        collectionType,
+        historyItemsStore.getHistoryItems(historyStore.currentHistoryId, ""),
+        historyStore.currentHistoryId
+    );
+    // TODO: Implement handling `modalResult` as input for the field
+}
+
 // Drag/Drop event handlers
 function onDragEnter(evt: MouseEvent) {
     const eventData = eventStore.getDragData();
@@ -632,7 +650,20 @@ const noOptionsWarningMessage = computed(() => {
             :placeholder="`Select a ${placeholder}`">
             <template v-slot:no-options>
                 <BAlert variant="warning" show>
-                    {{ noOptionsWarningMessage }}
+                    <div>{{ noOptionsWarningMessage }}</div>
+                    <div v-if="props.collectionTypes?.length > 0">
+                        Click here to create/add:
+                        <BButtonGroup size="sm" buttons>
+                            <BButton
+                                v-for="collectionType in props.collectionTypes"
+                                :key="collectionType"
+                                variant="primary"
+                                @click="buildNewCollection(collectionType)">
+                                {{ collectionType }}
+                            </BButton>
+                        </BButtonGroup>
+                        {{ props.type === "data" ? "datasets" : "dataset collections" }}
+                    </div>
                 </BAlert>
             </template>
         </FormSelect>