From bf53873e468c02d986d3bba36d3998dc7253fa63 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 2 Jan 2024 17:19:26 +0100
Subject: [PATCH 1/5] fix typescript errors

---
 .../Form/Elements/FormData/FormData.vue       | 19 ++++++++++---------
 .../Form/Elements/FormData/types.ts           |  4 ++--
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index fcf318eed156..47b8eb3b76e8 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -16,10 +16,10 @@ import FormSelect from "@/components/Form/Elements/FormSelect.vue";
 
 library.add(faCopy, faExclamation, faFile, faFolder, faLink, faUnlink);
 
-interface SelectOption {
+type SelectOption = {
     label: string;
     value: DataOption | null;
-}
+};
 
 const props = withDefaults(
     defineProps<{
@@ -39,11 +39,11 @@ const props = withDefaults(
         loading: false,
         multiple: false,
         optional: false,
-        value: null,
+        value: undefined,
         extensions: () => [],
         type: "data",
-        flavor: null,
-        tag: null,
+        flavor: undefined,
+        tag: undefined,
     }
 );
 
@@ -106,7 +106,7 @@ const currentValue = computed({
                 return value;
             }
         }
-        return null;
+        return undefined;
     },
     set: (val) => {
         $emit("input", createValue(val));
@@ -219,7 +219,7 @@ function clearHighlighting(timeout = 1000) {
 /**
  * Create final input element value
  */
-function createValue(val: Array<DataOption> | DataOption | null) {
+function createValue(val?: Array<DataOption> | DataOption | null) {
     if (val) {
         const values = Array.isArray(val) ? val : [val];
         if (variant.value && values.length > 0 && values[0]) {
@@ -429,6 +429,7 @@ watch(
 </script>
 
 <template>
+    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
     <div
         :class="currentHighlighting && `ui-dragover-${currentHighlighting}`"
         @dragenter.prevent="onDragEnter"
@@ -437,7 +438,7 @@ watch(
         @drop.prevent="onDrop">
         <div>
             <div class="d-flex">
-                <BButtonGroup v-if="variant.length > 1" buttons class="align-self-start mr-2">
+                <BButtonGroup v-if="variant && variant.length > 1" buttons class="align-self-start mr-2">
                     <BButton
                         v-for="(v, index) in variant"
                         :key="index"
@@ -464,7 +465,7 @@ watch(
                     :options="formattedOptions"
                     :placeholder="`Select a ${placeholder}`" />
             </div>
-            <div v-if="currentVariant.batch !== BATCH.DISABLED">
+            <div v-if="currentVariant && currentVariant.batch !== BATCH.DISABLED">
                 <BFormCheckbox
                     v-if="currentVariant.batch === BATCH.ENABLED"
                     v-model="currentLinked"
diff --git a/client/src/components/Form/Elements/FormData/types.ts b/client/src/components/Form/Elements/FormData/types.ts
index 46929c8b876d..52c8a418897e 100644
--- a/client/src/components/Form/Elements/FormData/types.ts
+++ b/client/src/components/Form/Elements/FormData/types.ts
@@ -1,4 +1,4 @@
-export interface DataOption {
+export type DataOption = {
     id: string;
     hid: number;
     is_dataset?: boolean;
@@ -7,4 +7,4 @@ export interface DataOption {
     name: string;
     src: string;
     tags: Array<string>;
-}
+};

From fb54300bd516b5b66d209f1c5b8e433bc06bb23c Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 3 Jan 2024 13:03:46 +0100
Subject: [PATCH 2/5] fix extensions not passed

---
 client/src/components/Form/FormElement.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 208664bdb616..17314b77cbcc 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -277,7 +277,7 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
                 :id="id"
                 v-model="currentValue"
                 :loading="loading"
-                :extension="attrs.extension"
+                :extensions="attrs.extensions"
                 :flavor="attrs.flavor"
                 :multiple="attrs.multiple"
                 :optional="attrs.optional"

From 980b058f2c3b4e9b5245a5229b4d15bda14eb2ef Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 3 Jan 2024 13:04:21 +0100
Subject: [PATCH 3/5] add extensions list on tooltip and collapse

---
 .../Form/Elements/FormData/FormData.vue       | 165 ++++++++++++------
 1 file changed, 107 insertions(+), 58 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 47b8eb3b76e8..74ef0930a94a 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCopy, faFile, faFolder } from "@fortawesome/free-regular-svg-icons";
-import { faExclamation, faLink, faUnlink } from "@fortawesome/free-solid-svg-icons";
+import { faCaretDown, faCaretUp, faExclamation, faLink, faUnlink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BButtonGroup, BFormCheckbox } from "bootstrap-vue";
+import { BButton, BButtonGroup, BCollapse, BFormCheckbox, BTooltip } from "bootstrap-vue";
 import { computed, onMounted, type Ref, ref, watch } from "vue";
 
 import { getGalaxyInstance } from "@/app";
+import { useUid } from "@/composables/utils/uid";
 import { type EventData, useEventStore } from "@/stores/eventStore";
 
 import type { DataOption } from "./types";
@@ -14,7 +15,7 @@ import { BATCH, SOURCE, VARIANTS } from "./variants";
 
 import FormSelect from "@/components/Form/Elements/FormSelect.vue";
 
-library.add(faCopy, faExclamation, faFile, faFolder, faLink, faUnlink);
+library.add(faCopy, faFile, faFolder, faCaretDown, faCaretUp, faExclamation, faLink, faUnlink);
 
 type SelectOption = {
     label: string;
@@ -358,9 +359,7 @@ function onBrowse() {
     }
 }
 
-/**
- * Drag/Drop event handlers
- */
+// Drag/Drop event handlers
 function onDragEnter(evt: MouseEvent) {
     const eventData = eventStore.getDragData();
     if (eventData) {
@@ -426,69 +425,119 @@ watch(
         $emit("input", createValue(currentValue.value));
     }
 );
+
+const formatsVisible = ref(false);
+const formatsButtonId = useUid("form-data-formats-");
 </script>
 
 <template>
     <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
     <div
+        class="form-data"
         :class="currentHighlighting && `ui-dragover-${currentHighlighting}`"
         @dragenter.prevent="onDragEnter"
         @dragleave.prevent="onDragLeave"
         @dragover.prevent="onDragOver"
         @drop.prevent="onDrop">
-        <div>
-            <div class="d-flex">
-                <BButtonGroup v-if="variant && variant.length > 1" buttons class="align-self-start mr-2">
-                    <BButton
-                        v-for="(v, index) in variant"
-                        :key="index"
-                        v-b-tooltip.hover.bottom
-                        :pressed="currentField === index"
-                        :title="v.tooltip"
-                        @click="currentField = index">
-                        <FontAwesomeIcon :icon="['far', v.icon]" />
-                    </BButton>
-                    <BButton
-                        v-if="canBrowse"
-                        v-b-tooltip.hover.bottom
-                        title="Browse or Upload Datasets"
-                        @click="onBrowse">
-                        <FontAwesomeIcon v-if="loading" icon="fa-spinner" spin />
-                        <span v-else class="font-weight-bold">...</span>
-                    </BButton>
-                </BButtonGroup>
-                <FormSelect
-                    v-if="currentVariant"
-                    v-model="currentValue"
-                    :multiple="currentVariant.multiple"
-                    :optional="optional"
-                    :options="formattedOptions"
-                    :placeholder="`Select a ${placeholder}`" />
-            </div>
-            <div v-if="currentVariant && currentVariant.batch !== BATCH.DISABLED">
-                <BFormCheckbox
-                    v-if="currentVariant.batch === BATCH.ENABLED"
-                    v-model="currentLinked"
-                    class="no-highlight my-2"
-                    switch>
-                    <span v-if="currentLinked">
-                        <FontAwesomeIcon icon="fa-link" />
-                        <b v-localize class="mr-1">Linked:</b>
-                        <span v-localize>Datasets will be run in matched order with other datasets.</span>
-                    </span>
-                    <span v-else>
-                        <FontAwesomeIcon icon="fa-unlink" />
-                        <b v-localize class="mr-1">Unlinked:</b>
-                        <span v-localize>Dataset will be run against *all* other datasets.</span>
-                    </span>
-                </BFormCheckbox>
-                <div class="text-info my-2">
-                    <FontAwesomeIcon icon="fa-exclamation" />
-                    <span v-localize class="ml-1">
-                        This is a batch mode input field. Individual jobs will be triggered for each dataset.
-                    </span>
-                </div>
+        <div class="d-flex flex-column">
+            <BButtonGroup v-if="variant && variant.length > 1" buttons class="align-self-start">
+                <BButton
+                    v-for="(v, index) in variant"
+                    :key="index"
+                    v-b-tooltip.hover.bottom
+                    :pressed="currentField === index"
+                    :title="v.tooltip"
+                    @click="currentField = index">
+                    <FontAwesomeIcon :icon="['far', v.icon]" />
+                </BButton>
+                <BButton v-if="canBrowse" v-b-tooltip.hover.bottom title="Browse or Upload Datasets" @click="onBrowse">
+                    <FontAwesomeIcon v-if="loading" icon="fa-spinner" spin />
+                    <span v-else class="font-weight-bold">...</span>
+                </BButton>
+            </BButtonGroup>
+            <div v-if="extensions && extensions.length > 0">
+                <BButton :id="formatsButtonId" class="ui-link" @click="formatsVisible = !formatsVisible">
+                    accepted formats
+                    <FontAwesomeIcon v-if="formatsVisible" icon="fa-caret-up" />
+                    <FontAwesomeIcon v-else icon="fa-caret-down" />
+                </BButton>
+                <BCollapse v-model="formatsVisible">
+                    <ul class="pl-3 m-0">
+                        <li v-for="extension in extensions" :key="extension">{{ extension }}</li>
+                    </ul>
+                </BCollapse>
+                <BTooltip :target="formatsButtonId" noninteractive placement="bottom" triggers="hover">
+                    <div class="form-data-extensions-tooltip">
+                        <span v-for="extension in extensions" :key="extension">{{ extension }}</span>
+                    </div>
+                </BTooltip>
             </div>
         </div>
+
+        <FormSelect
+            v-if="currentVariant"
+            v-model="currentValue"
+            class="align-self-start"
+            :multiple="currentVariant.multiple"
+            :optional="optional"
+            :options="formattedOptions"
+            :placeholder="`Select a ${placeholder}`" />
+        <template v-if="currentVariant && currentVariant.batch !== BATCH.DISABLED">
+            <BFormCheckbox
+                v-if="currentVariant.batch === BATCH.ENABLED"
+                v-model="currentLinked"
+                class="checkbox no-highlight"
+                switch>
+                <span v-if="currentLinked">
+                    <FontAwesomeIcon icon="fa-link" />
+                    <b v-localize class="mr-1">Linked:</b>
+                    <span v-localize>Datasets will be run in matched order with other datasets.</span>
+                </span>
+                <span v-else>
+                    <FontAwesomeIcon icon="fa-unlink" />
+                    <b v-localize class="mr-1">Unlinked:</b>
+                    <span v-localize>Dataset will be run against *all* other datasets.</span>
+                </span>
+            </BFormCheckbox>
+            <div class="info text-info">
+                <FontAwesomeIcon icon="fa-exclamation" />
+                <span v-localize class="ml-1">
+                    This is a batch mode input field. Individual jobs will be triggered for each dataset.
+                </span>
+            </div>
+        </template>
     </div>
 </template>
+
+<style scoped lang="scss">
+.form-data {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.5rem;
+
+    .checkbox {
+        grid-column: span 2;
+    }
+
+    .info {
+        grid-column: span 2;
+    }
+}
+</style>
+
+<style lang="scss">
+.form-data-extensions-tooltip {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 0.25rem;
+    font-size: 0.8rem;
+
+    span::after {
+        content: ", ";
+    }
+
+    span:last-child::after {
+        content: none;
+    }
+}
+</style>

From d2dc8a83caf62a650e9c66e445cee8b983743b9a Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 3 Jan 2024 13:20:09 +0100
Subject: [PATCH 4/5] improve options missing alert

---
 .../Form/Elements/FormData/FormData.vue       | 15 ++++++-
 .../components/Form/Elements/FormSelect.vue   | 42 ++++++++++---------
 2 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 74ef0930a94a..9edf0512f758 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -3,7 +3,7 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCopy, faFile, faFolder } from "@fortawesome/free-regular-svg-icons";
 import { faCaretDown, faCaretUp, faExclamation, faLink, faUnlink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BButtonGroup, BCollapse, BFormCheckbox, BTooltip } from "bootstrap-vue";
+import { BAlert, BButton, BButtonGroup, BCollapse, BFormCheckbox, BTooltip } from "bootstrap-vue";
 import { computed, onMounted, type Ref, ref, watch } from "vue";
 
 import { getGalaxyInstance } from "@/app";
@@ -481,7 +481,18 @@ const formatsButtonId = useUid("form-data-formats-");
             :multiple="currentVariant.multiple"
             :optional="optional"
             :options="formattedOptions"
-            :placeholder="`Select a ${placeholder}`" />
+            :placeholder="`Select a ${placeholder}`">
+            <template v-slot:no-options>
+                <BAlert v-if="!extensions || extensions.length < 1" variant="warning" show>
+                    No datasets available
+                </BAlert>
+                <BAlert v-else-if="extensions.length === 1" variant="warning" class="w-100" show>
+                    No {{ extensions[0] }} datasets available
+                </BAlert>
+                <BAlert v-else variant="warning" show> No compatible datasets available </BAlert>
+            </template>
+        </FormSelect>
+
         <template v-if="currentVariant && currentVariant.batch !== BATCH.DISABLED">
             <BFormCheckbox
                 v-if="currentVariant.batch === BATCH.ENABLED"
diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index 275d61a7c694..3b93539f0de6 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -154,23 +154,27 @@ onMounted(() => {
 </script>
 
 <template>
-    <Multiselect
-        v-if="hasOptions"
-        :id="id"
-        v-model="currentValue"
-        :allow-empty="optional"
-        :aria-expanded="ariaExpanded"
-        :close-on-select="!multiple"
-        :disabled="disabled"
-        :deselect-label="deselectLabel"
-        label="label"
-        :multiple="multiple"
-        :options="reorderedOptions"
-        :placeholder="placeholder"
-        :selected-label="selectedLabel"
-        select-label="Click to select"
-        track-by="value"
-        @open="onOpen"
-        @close="onClose" />
-    <b-alert v-else v-localize class="w-100" variant="warning" show> No options available. </b-alert>
+    <div>
+        <Multiselect
+            v-if="hasOptions"
+            :id="id"
+            v-model="currentValue"
+            :allow-empty="optional"
+            :aria-expanded="ariaExpanded"
+            :close-on-select="!multiple"
+            :disabled="disabled"
+            :deselect-label="deselectLabel"
+            label="label"
+            :multiple="multiple"
+            :options="reorderedOptions"
+            :placeholder="placeholder"
+            :selected-label="selectedLabel"
+            select-label="Click to select"
+            track-by="value"
+            @open="onOpen"
+            @close="onClose" />
+        <slot v-else name="no-options">
+            <b-alert v-localize class="w-100" variant="warning" show> No options available. </b-alert>
+        </slot>
+    </div>
 </template>

From c54bea0357aa5653d58c2b277534f17c65a22d37 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 3 Jan 2024 15:31:22 +0100
Subject: [PATCH 5/5] improve error message for multiple accepted extensions

---
 .../Form/Elements/FormData/FormData.vue       | 20 +++++++++----
 client/src/utils/strings.ts                   | 30 +++++++++++++++++++
 2 files changed, 44 insertions(+), 6 deletions(-)
 create mode 100644 client/src/utils/strings.ts

diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 9edf0512f758..28bddeb966da 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -9,6 +9,7 @@ import { computed, onMounted, type Ref, ref, watch } from "vue";
 import { getGalaxyInstance } from "@/app";
 import { useUid } from "@/composables/utils/uid";
 import { type EventData, useEventStore } from "@/stores/eventStore";
+import { orList } from "@/utils/strings";
 
 import type { DataOption } from "./types";
 import { BATCH, SOURCE, VARIANTS } from "./variants";
@@ -428,6 +429,17 @@ watch(
 
 const formatsVisible = ref(false);
 const formatsButtonId = useUid("form-data-formats-");
+
+const warningListAmount = 4;
+const noOptionsWarningMessage = computed(() => {
+    if (!props.extensions || props.extensions.length === 0) {
+        return "No datasets available";
+    } else if (props.extensions.length <= warningListAmount) {
+        return `No ${orList(props.extensions)} datasets available`;
+    } else {
+        return "No compatible datasets available";
+    }
+});
 </script>
 
 <template>
@@ -483,13 +495,9 @@ const formatsButtonId = useUid("form-data-formats-");
             :options="formattedOptions"
             :placeholder="`Select a ${placeholder}`">
             <template v-slot:no-options>
-                <BAlert v-if="!extensions || extensions.length < 1" variant="warning" show>
-                    No datasets available
-                </BAlert>
-                <BAlert v-else-if="extensions.length === 1" variant="warning" class="w-100" show>
-                    No {{ extensions[0] }} datasets available
+                <BAlert variant="warning" show>
+                    {{ noOptionsWarningMessage }}
                 </BAlert>
-                <BAlert v-else variant="warning" show> No compatible datasets available </BAlert>
             </template>
         </FormSelect>
 
diff --git a/client/src/utils/strings.ts b/client/src/utils/strings.ts
new file mode 100644
index 000000000000..503169c6f9af
--- /dev/null
+++ b/client/src/utils/strings.ts
@@ -0,0 +1,30 @@
+/**
+ * Converts an array of strings to a list, ending with "or"
+ *
+ * @example
+ * // returns the string "a, b or c"
+ * orList(["a", "b", "c"]);
+ * @param items array of strings to join
+ * @returns human readable comma + or separated list
+ */
+export function orList(items: string[]): string {
+    if (items.length === 0) {
+        return "";
+    } else if (items.length === 1) {
+        return items[0] as string;
+    }
+
+    return items
+        .reverse()
+        .flatMap((item, index) => {
+            if (index === 0) {
+                return [item, " or "];
+            } else if (index !== 1) {
+                return [", ", item];
+            } else {
+                return [item];
+            }
+        })
+        .reverse()
+        .join("");
+}