From 0f8c379c486a93d8e9447b2cc8a3b42a38a65e67 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 15 Apr 2024 19:03:40 -0500
Subject: [PATCH 1/3] Use the new column-select component in `FormData` for
 multiple select

This allows for easier multiselect with added ease for range select.
Fixes https://github.com/galaxyproject/galaxy/issues/17947
---
 .../components/Form/Elements/FormData/FormData.vue   |  9 ++++++++-
 .../Form/Elements/FormSelectMany/FormSelectMany.vue  | 12 ++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 87ecd98f4928..2322b9b17ab8 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -14,6 +14,7 @@ import { orList } from "@/utils/strings";
 import type { DataOption } from "./types";
 import { BATCH, SOURCE, VARIANTS } from "./variants";
 
+import FormSelection from "../FormSelection.vue";
 import FormSelect from "@/components/Form/Elements/FormSelect.vue";
 
 library.add(faCopy, faFile, faFolder, faCaretDown, faCaretUp, faExclamation, faLink, faUnlink);
@@ -502,7 +503,7 @@ const noOptionsWarningMessage = computed(() => {
         </div>
 
         <FormSelect
-            v-if="currentVariant"
+            v-if="currentVariant && !currentVariant.multiple"
             v-model="currentValue"
             class="align-self-start"
             :multiple="currentVariant.multiple"
@@ -515,6 +516,12 @@ const noOptionsWarningMessage = computed(() => {
                 </BAlert>
             </template>
         </FormSelect>
+        <FormSelection
+            v-else-if="currentVariant?.multiple"
+            v-model="currentValue"
+            :data="formattedOptions"
+            optional
+            multiple />
 
         <template v-if="currentVariant && currentVariant.batch !== BATCH.DISABLED">
             <BFormCheckbox
diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index 5491a4742b85..6af677ccb784 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -65,7 +65,7 @@ const searchRegex = computed(() => {
 /** Wraps value prop so it can be set, and always returns an array */
 const selected = computed({
     get() {
-        return Array.isArray(props.value) ? props.value : [props.value];
+        return props.value === null ? [] : Array.isArray(props.value) ? props.value : [props.value];
     },
     set(value) {
         emit("input", value);
@@ -142,7 +142,15 @@ async function deselectOption(event: MouseEvent, index: number) {
         const [option] = selectedOptionsFiltered.value.splice(index, 1);
 
         if (option) {
-            const i = selected.value.indexOf(option.value);
+            const i = selected.value.findIndex((selectedValue) => {
+                if (typeof selectedValue === "string") {
+                    return selectedValue === option.value;
+                } else if (typeof selectedValue === "object" && typeof option.value === "object") {
+                    // in case values are objects, compare their ids (if they have the 'id' property)
+                    return selectedValue?.id === option.value?.id;
+                }
+                return false;
+            });
             selected.value = selected.value.flatMap((value, index) => (index === i ? [] : [value]));
         }
 

From 26844a1eabca7aa7a349790363931298e29cda6e Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 15 Apr 2024 19:15:21 -0500
Subject: [PATCH 2/3] fix jest fail caused by `FormSelection.props.options ==
 null`

---
 client/src/components/Form/Elements/FormSelection.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormSelection.vue b/client/src/components/Form/Elements/FormSelection.vue
index 2b533461c338..15176a48f063 100644
--- a/client/src/components/Form/Elements/FormSelection.vue
+++ b/client/src/components/Form/Elements/FormSelection.vue
@@ -82,7 +82,10 @@ watch(
         }
 
         if (newValue === "none") {
-            if ((Array.isArray(props.value) && props.value.length >= 15) || props.options.length >= 500) {
+            if (
+                (Array.isArray(props.value) && props.value.length >= 15) ||
+                (props.options && props.options.length >= 500)
+            ) {
                 useMany.value = true;
             } else {
                 useMany.value = false;

From f6e19c39f20c14d3fd0f15afe70d479c61841fe5 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 16 Apr 2024 11:16:38 -0500
Subject: [PATCH 3/3] remove double ternary op

---
 .../Form/Elements/FormSelectMany/FormSelectMany.vue       | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
index 6af677ccb784..0c762ae90bd4 100644
--- a/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
+++ b/client/src/components/Form/Elements/FormSelectMany/FormSelectMany.vue
@@ -65,7 +65,13 @@ const searchRegex = computed(() => {
 /** Wraps value prop so it can be set, and always returns an array */
 const selected = computed({
     get() {
-        return props.value === null ? [] : Array.isArray(props.value) ? props.value : [props.value];
+        if (props.value === null) {
+            return [];
+        } else if (Array.isArray(props.value)) {
+            return props.value;
+        } else {
+            return [props.value];
+        }
     },
     set(value) {
         emit("input", value);