From c4b51c6dc467e6641d3ca65887ccb78efe9924f2 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 21 May 2024 13:14:32 -0500
Subject: [PATCH 1/2] Replace `Multiselect` `selectLabel` with icons in
 `FormSelect`

Fixes https://github.com/galaxyproject/galaxy/issues/18150
---
 .../components/Form/Elements/FormSelect.vue   | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index 3b93539f0de6..15e9d7a00479 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -1,10 +1,15 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCheckSquare, faSquare } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed, type ComputedRef, onMounted, type PropType, watch } from "vue";
 import Multiselect from "vue-multiselect";
 
 import { useMultiselect } from "@/composables/useMultiselect";
 import { uid } from "@/utils/utils";
 
+library.add(faCheckSquare, faSquare);
+
 const { ariaExpanded, onOpen, onClose } = useMultiselect();
 
 type SelectValue = Record<string, unknown> | string | number | null;
@@ -70,13 +75,6 @@ const reorderedOptions = computed(() => {
     }
 });
 
-/**
- * Configure deselect label
- */
-const deselectLabel: ComputedRef<string> = computed(() => {
-    return props.multiple ? "Click to remove" : "";
-});
-
 /**
  * Tracks if the select field has options
  */
@@ -163,16 +161,24 @@ onMounted(() => {
             :aria-expanded="ariaExpanded"
             :close-on-select="!multiple"
             :disabled="disabled"
-            :deselect-label="deselectLabel"
+            :deselect-label="null"
             label="label"
             :multiple="multiple"
             :options="reorderedOptions"
             :placeholder="placeholder"
             :selected-label="selectedLabel"
-            select-label="Click to select"
+            :select-label="null"
             track-by="value"
             @open="onOpen"
-            @close="onClose" />
+            @close="onClose">
+            <template v-slot:option="{ option }">
+                <div class="d-flex align-items-center justify-content-between">
+                    <span>{{ option.label }}</span>
+                    <FontAwesomeIcon v-if="selectedValues.includes(option.value)" :icon="faCheckSquare" />
+                    <FontAwesomeIcon v-else :icon="faSquare" />
+                </div>
+            </template>
+        </Multiselect>
         <slot v-else name="no-options">
             <b-alert v-localize class="w-100" variant="warning" show> No options available. </b-alert>
         </slot>

From 659c2fa3e1bb05ec5d85c99ee374c695ff7586aa Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 22 May 2024 12:24:23 -0500
Subject: [PATCH 2/2] fix jests since each option is in a `div` instead of a
 `span`

---
 client/src/components/Form/Elements/FormSelect.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelect.test.js b/client/src/components/Form/Elements/FormSelect.test.js
index 1854a23698ac..580c72ea34e1 100644
--- a/client/src/components/Form/Elements/FormSelect.test.js
+++ b/client/src/components/Form/Elements/FormSelect.test.js
@@ -25,7 +25,7 @@ const defaultOptions = [
 
 function testDefaultOptions(wrapper) {
     const target = wrapper.findComponent(MountTarget);
-    const options = target.findAll("li > span > span");
+    const options = target.findAll("li > span > div");
     expect(options.length).toBe(4);
     for (let i = 0; i < options.length; i++) {
         expect(options.at(i).text()).toBe(`label_${i + 1}`);
@@ -52,7 +52,7 @@ describe("FormSelect", () => {
             optional: true,
         });
         const target = wrapper.findComponent(MountTarget);
-        const options = target.findAll("li > span > span");
+        const options = target.findAll("li > span > div");
         expect(options.length).toBe(5);
         expect(options.at(0).text()).toBe("Nothing selected");
         const selectedDefault = wrapper.find(".multiselect__option--selected");