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] 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("");
+}