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] 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>