From 568037e8b4cdfe154071f9aafa0ec1a4f001283e Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 1 Oct 2024 12:55:55 -0500
Subject: [PATCH] improve styling of collection create button in `FormData`

Place it right next to the buttons for choosing between batch or singular collection
---
 .../src/components/Common/ButtonSpinner.vue   | 23 ++++++++------
 .../Form/Elements/FormData/FormData.vue       | 31 +++++++------------
 .../components/Form/Elements/FormSelect.vue   |  3 +-
 3 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/client/src/components/Common/ButtonSpinner.vue b/client/src/components/Common/ButtonSpinner.vue
index 7e7509a8b850..456e97b2ed96 100644
--- a/client/src/components/Common/ButtonSpinner.vue
+++ b/client/src/components/Common/ButtonSpinner.vue
@@ -1,26 +1,25 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
+import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { faPlay, faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
 
-library.add(faPlay, faSpinner);
-
 interface Props {
-    title: string;
+    title?: string;
     wait?: boolean;
     tooltip?: string;
     disabled?: boolean;
     variant?: string;
-    hasPlayIcon?: boolean;
+    icon?: IconDefinition;
 }
 
 withDefaults(defineProps<Props>(), {
+    title: "",
     wait: false,
     tooltip: "",
     disabled: false,
     variant: "primary",
-    hasPlayIcon: true,
+    icon: undefined,
 });
 </script>
 
@@ -32,8 +31,10 @@ withDefaults(defineProps<Props>(), {
         variant="info"
         title="Please Wait..."
         class="d-flex flex-nowrap align-items-center text-nowrap">
-        <FontAwesomeIcon :icon="faSpinner" class="mr-2" spin />
-        <slot>{{ title }}</slot>
+        <FontAwesomeIcon :icon="faSpinner" fixed-width spin />
+        <slot>
+            <span v-if="title">{{ title }}</span>
+        </slot>
     </BButton>
     <BButton
         v-else
@@ -43,7 +44,9 @@ withDefaults(defineProps<Props>(), {
         :title="tooltip"
         :disabled="disabled"
         @click="$emit('onClick')">
-        <FontAwesomeIcon v-if="hasPlayIcon" :icon="faPlay" class="mr-2" />
-        <slot>{{ title }}</slot>
+        <FontAwesomeIcon :icon="!icon ? faPlay : icon" fixed-width />
+        <slot>
+            <span v-if="title">{{ title }}</span>
+        </slot>
     </BButton>
 </template>
diff --git a/client/src/components/Form/Elements/FormData/FormData.vue b/client/src/components/Form/Elements/FormData/FormData.vue
index 21b52437d446..18bdce82144e 100644
--- a/client/src/components/Form/Elements/FormData/FormData.vue
+++ b/client/src/components/Form/Elements/FormData/FormData.vue
@@ -656,6 +656,18 @@ const noOptionsWarningMessage = computed(() => {
                     <FontAwesomeIcon v-if="loading" icon="fa-spinner" spin />
                     <span v-else class="font-weight-bold">...</span>
                 </BButton>
+                <BButtonGroup v-if="effectiveCollectionTypes?.length > 0" size="sm" buttons>
+                    <ButtonSpinner
+                        v-for="collectionType in effectiveCollectionTypes"
+                        :key="collectionType"
+                        :tooltip="collectionType"
+                        variant="secondary"
+                        :disabled="isFetchingItems"
+                        :icon="faPlus"
+                        :wait="isFetchingItems"
+                        @onClick="buildNewCollection(collectionType)">
+                    </ButtonSpinner>
+                </BButtonGroup>
             </BButtonGroup>
             <div v-if="extensions && extensions.length > 0">
                 <BButton :id="formatsButtonId" class="ui-link" @click="formatsVisible = !formatsVisible">
@@ -689,25 +701,6 @@ const noOptionsWarningMessage = computed(() => {
                     {{ noOptionsWarningMessage }}
                 </BAlert>
             </template>
-            <!-- TODO: Improve styling, weirdly positioned to right of select -->
-            <template v-slot:right-actions>
-                <div>
-                    <BButtonGroup v-if="effectiveCollectionTypes?.length > 0" size="sm" buttons>
-                        <ButtonSpinner
-                            v-for="collectionType in effectiveCollectionTypes"
-                            :key="collectionType"
-                            :title="collectionType"
-                            variant="secondary"
-                            :disabled="isFetchingItems"
-                            :has-play-icon="false"
-                            :wait="isFetchingItems"
-                            @onClick="buildNewCollection(collectionType)">
-                            <FontAwesomeIcon v-if="!isFetchingItems" :icon="faPlus" fixed-width />
-                            {{ collectionType }}
-                        </ButtonSpinner>
-                    </BButtonGroup>
-                </div>
-            </template>
         </FormSelect>
         <FormSelection
             v-else-if="currentVariant?.multiple"
diff --git a/client/src/components/Form/Elements/FormSelect.vue b/client/src/components/Form/Elements/FormSelect.vue
index 8eb96645f1dd..98ed4f551e81 100644
--- a/client/src/components/Form/Elements/FormSelect.vue
+++ b/client/src/components/Form/Elements/FormSelect.vue
@@ -152,7 +152,7 @@ onMounted(() => {
 </script>
 
 <template>
-    <div class="d-flex justify-content-between align-items-center">
+    <div>
         <Multiselect
             v-if="hasOptions"
             :id="id"
@@ -182,6 +182,5 @@ onMounted(() => {
         <slot v-else name="no-options">
             <b-alert v-localize class="w-100" variant="warning" show> No options available. </b-alert>
         </slot>
-        <slot name="right-actions" />
     </div>
 </template>