From 5229449c95039d7e5e92a16a2017dec5f3317af6 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Sun, 22 Dec 2024 12:43:00 -0500
Subject: [PATCH 1/8] Refactor collection name input out of CollectionCreator.

---
 .../Collections/common/CollectionCreator.vue  | 20 ++------
 .../common/CollectionNameInput.vue            | 47 +++++++++++++++++++
 2 files changed, 52 insertions(+), 15 deletions(-)
 create mode 100644 client/src/components/Collections/common/CollectionNameInput.vue

diff --git a/client/src/components/Collections/common/CollectionCreator.vue b/client/src/components/Collections/common/CollectionCreator.vue
index c60e80099fd2..2fd13b205177 100644
--- a/client/src/components/Collections/common/CollectionCreator.vue
+++ b/client/src/components/Collections/common/CollectionCreator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faChevronDown, faChevronUp, faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BFormCheckbox, BFormGroup, BFormInput, BLink, BTab, BTabs } from "bootstrap-vue";
+import { BAlert, BButton, BFormCheckbox, BFormGroup, BLink, BTab, BTabs } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
@@ -13,6 +13,7 @@ import { useUserStore } from "@/stores/userStore";
 import localize from "@/utils/localization";
 import { orList } from "@/utils/strings";
 
+import CollectionNameInput from "./CollectionNameInput.vue";
 import HelpText from "@/components/Help/HelpText.vue";
 import DefaultBox from "@/components/Upload/DefaultBox.vue";
 
@@ -227,20 +228,9 @@ watch(
                                     </BFormCheckbox>
                                 </div>
                             </BFormGroup>
-
-                            <BFormGroup
-                                class="flex-gapx-1 d-flex align-items-center w-50 inputs-form-group"
-                                :label="localize('Name:')"
-                                label-for="collection-name">
-                                <BFormInput
-                                    id="collection-name"
-                                    v-model="collectionName"
-                                    class="collection-name"
-                                    :placeholder="localize('Enter a name for your new ' + shortWhatIsBeingCreated)"
-                                    size="sm"
-                                    required
-                                    :state="!collectionName ? false : null" />
-                            </BFormGroup>
+                            <CollectionNameInput
+                                v-model="collectionName"
+                                :short-what-is-being-created="shortWhatIsBeingCreated" />
                         </div>
                     </div>
 
diff --git a/client/src/components/Collections/common/CollectionNameInput.vue b/client/src/components/Collections/common/CollectionNameInput.vue
new file mode 100644
index 000000000000..7f299899efb9
--- /dev/null
+++ b/client/src/components/Collections/common/CollectionNameInput.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { BFormGroup, BFormInput } from "bootstrap-vue";
+import { ref, watch } from "vue";
+
+import localize from "@/utils/localization";
+
+interface Props {
+    value: string;
+    shortWhatIsBeingCreated: string;
+}
+
+const props = defineProps<Props>();
+
+const name = ref(props.value);
+
+const emit = defineEmits<{
+    (e: "input", value: string): void;
+}>();
+
+// Watch for external updates to value and sync with innerValue
+watch(
+    () => props.value,
+    (newValue) => {
+        name.value = newValue;
+    }
+);
+
+watch(name, (newValue) => {
+    emit("input", newValue);
+});
+</script>
+
+<template>
+    <BFormGroup
+        class="flex-gapx-1 d-flex align-items-center w-50 inputs-form-group"
+        :label="localize('Name:')"
+        label-for="collection-name">
+        <BFormInput
+            id="collection-name"
+            v-model="name"
+            class="collection-name"
+            :placeholder="localize('Enter a name for your new ' + shortWhatIsBeingCreated)"
+            size="sm"
+            required
+            :state="!name ? false : null" />
+    </BFormGroup>
+</template>

From e6742ed4e168286355efceb0de701b72e62d2566 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Sun, 22 Dec 2024 12:56:31 -0500
Subject: [PATCH 2/8] Refactor the source options out of collection creator.

---
 .../Collections/common/CollectionCreator.vue  | 30 ++++------
 .../common/CollectionCreatorSourceOptions.vue | 56 +++++++++++++++++++
 2 files changed, 67 insertions(+), 19 deletions(-)
 create mode 100644 client/src/components/Collections/common/CollectionCreatorSourceOptions.vue

diff --git a/client/src/components/Collections/common/CollectionCreator.vue b/client/src/components/Collections/common/CollectionCreator.vue
index 2fd13b205177..b0331452916c 100644
--- a/client/src/components/Collections/common/CollectionCreator.vue
+++ b/client/src/components/Collections/common/CollectionCreator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faChevronDown, faChevronUp, faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BFormCheckbox, BFormGroup, BLink, BTab, BTabs } from "bootstrap-vue";
+import { BAlert, BButton, BLink, BTab, BTabs } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
@@ -13,6 +13,7 @@ import { useUserStore } from "@/stores/userStore";
 import localize from "@/utils/localization";
 import { orList } from "@/utils/strings";
 
+import CollectionCreatorSourceOptions from "./CollectionCreatorSourceOptions.vue";
 import CollectionNameInput from "./CollectionNameInput.vue";
 import HelpText from "@/components/Help/HelpText.vue";
 import DefaultBox from "@/components/Upload/DefaultBox.vue";
@@ -132,6 +133,10 @@ function cancelCreate() {
     props.oncancel();
 }
 
+function removeExtensionsToggle() {
+    emit("remove-extensions-toggle");
+}
+
 async function loadExtensions() {
     listExtensions.value = await getUploadDatatypes(false, AUTO_EXTENSION);
     extensionsSet.value = true;
@@ -210,24 +215,11 @@ watch(
                         </div>
 
                         <div class="d-flex align-items-center justify-content-between">
-                            <BFormGroup class="inputs-form-group">
-                                <BFormCheckbox
-                                    v-if="renderExtensionsToggle"
-                                    name="remove-extensions"
-                                    switch
-                                    :checked="extensionsToggle"
-                                    @input="emit('remove-extensions-toggle')">
-                                    {{ localize("Remove file extensions?") }}
-                                </BFormCheckbox>
-
-                                <div data-description="hide original elements">
-                                    <BFormCheckbox v-model="localHideSourceItems" name="hide-originals" switch>
-                                        <HelpText
-                                            uri="galaxy.collections.collectionBuilder.hideOriginalElements"
-                                            :text="localize('Hide original elements')" />
-                                    </BFormCheckbox>
-                                </div>
-                            </BFormGroup>
+                            <CollectionCreatorSourceOptions
+                                v-model="localHideSourceItems"
+                                :render-extensions-toggle="renderExtensionsToggle"
+                                :extensions-toggle="extensionsToggle"
+                                @remove-extensions-toggle="removeExtensionsToggle" />
                             <CollectionNameInput
                                 v-model="collectionName"
                                 :short-what-is-being-created="shortWhatIsBeingCreated" />
diff --git a/client/src/components/Collections/common/CollectionCreatorSourceOptions.vue b/client/src/components/Collections/common/CollectionCreatorSourceOptions.vue
new file mode 100644
index 000000000000..c35c4bd7e779
--- /dev/null
+++ b/client/src/components/Collections/common/CollectionCreatorSourceOptions.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { BFormCheckbox, BFormGroup } from "bootstrap-vue";
+import { ref, watch } from "vue";
+
+import localize from "@/utils/localization";
+
+import HelpText from "@/components/Help/HelpText.vue";
+
+interface Props {
+    value: boolean;
+    extensionsToggle?: boolean;
+    renderExtensionsToggle?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const localHideSourceItems = ref(props.value);
+
+const emit = defineEmits<{
+    (e: "input", value: boolean): void;
+    (e: "remove-extensions-toggle"): void;
+}>();
+
+// Watch for external updates to value and sync with innerValue
+watch(
+    () => props.value,
+    (newValue) => {
+        localHideSourceItems.value = newValue;
+    }
+);
+
+watch(localHideSourceItems, (newValue) => {
+    emit("input", newValue);
+});
+</script>
+
+<template>
+    <BFormGroup class="inputs-form-group">
+        <BFormCheckbox
+            v-if="renderExtensionsToggle"
+            name="remove-extensions"
+            switch
+            :checked="extensionsToggle"
+            @input="emit('remove-extensions-toggle')">
+            {{ localize("Remove file extensions?") }}
+        </BFormCheckbox>
+
+        <div data-description="hide original elements">
+            <BFormCheckbox v-model="localHideSourceItems" name="hide-originals" switch>
+                <HelpText
+                    uri="galaxy.collections.collectionBuilder.hideOriginalElements"
+                    :text="localize('Hide original elements')" />
+            </BFormCheckbox>
+        </div>
+    </BFormGroup>
+</template>

From 40eb1d9aab5126d3e74360d432551166357a0d03 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Sun, 22 Dec 2024 13:32:05 -0500
Subject: [PATCH 3/8] Refactor collection creator help out to simplify.

---
 .../Collections/common/CollectionCreator.vue  | 45 ++---------------
 .../common/CollectionCreatorHelpHeader.vue    | 50 +++++++++++++++++++
 2 files changed, 55 insertions(+), 40 deletions(-)
 create mode 100644 client/src/components/Collections/common/CollectionCreatorHelpHeader.vue

diff --git a/client/src/components/Collections/common/CollectionCreator.vue b/client/src/components/Collections/common/CollectionCreator.vue
index b0331452916c..b076d4f3b815 100644
--- a/client/src/components/Collections/common/CollectionCreator.vue
+++ b/client/src/components/Collections/common/CollectionCreator.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { faChevronDown, faChevronUp, faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
+import { faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BLink, BTab, BTabs } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
@@ -13,6 +13,7 @@ import { useUserStore } from "@/stores/userStore";
 import localize from "@/utils/localization";
 import { orList } from "@/utils/strings";
 
+import CollectionCreatorHelpHeader from "./CollectionCreatorHelpHeader.vue";
 import CollectionCreatorSourceOptions from "./CollectionCreatorSourceOptions.vue";
 import CollectionNameInput from "./CollectionNameInput.vue";
 import HelpText from "@/components/Help/HelpText.vue";
@@ -58,7 +59,6 @@ const emit = defineEmits<{
     (e: "add-uploaded-files", value: HDASummary[]): void;
 }>();
 
-const isExpanded = ref(false);
 const currentTab = ref(Tabs.create);
 const collectionName = ref(props.suggestedName);
 const localHideSourceItems = ref(props.hideSourceItems);
@@ -124,11 +124,6 @@ function addUploadedFiles(value: HDASummary[]) {
     emit("add-uploaded-files", value);
 }
 
-function clickForHelp() {
-    isExpanded.value = !isExpanded.value;
-    return isExpanded.value;
-}
-
 function cancelCreate() {
     props.oncancel();
 }
@@ -165,39 +160,9 @@ watch(
                 </BAlert>
             </div>
             <div v-else>
-                <div class="header flex-row no-flex">
-                    <div class="main-help well clear" :class="{ expanded: isExpanded }">
-                        <a
-                            class="more-help"
-                            href="javascript:void(0);"
-                            role="button"
-                            :title="localize('Expand or Close Help')"
-                            @click="clickForHelp">
-                            <div v-if="!isExpanded">
-                                <FontAwesomeIcon :icon="faChevronDown" />
-                                <span class="sr-only">{{ localize("Expand Help") }}</span>
-                            </div>
-                            <div v-else>
-                                <FontAwesomeIcon :icon="faChevronUp" />
-                                <span class="sr-only">{{ localize("Close Help") }}</span>
-                            </div>
-                        </a>
-
-                        <div class="help-content">
-                            <!-- each collection that extends this will add their own help content -->
-                            <slot name="help-content"></slot>
-
-                            <a
-                                class="more-help"
-                                href="javascript:void(0);"
-                                role="button"
-                                :title="localize('Expand or Close Help')"
-                                @click="clickForHelp">
-                                <span class="sr-only">{{ localize("Expand Help") }}</span>
-                            </a>
-                        </div>
-                    </div>
-                </div>
+                <CollectionCreatorHelpHeader>
+                    <slot name="help-content"></slot>
+                </CollectionCreatorHelpHeader>
 
                 <div class="middle flex-row flex-row-container">
                     <slot name="middle-content"></slot>
diff --git a/client/src/components/Collections/common/CollectionCreatorHelpHeader.vue b/client/src/components/Collections/common/CollectionCreatorHelpHeader.vue
new file mode 100644
index 000000000000..2564230253d3
--- /dev/null
+++ b/client/src/components/Collections/common/CollectionCreatorHelpHeader.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { ref } from "vue";
+
+import localize from "@/utils/localization";
+
+const isExpanded = ref(false);
+
+function clickForHelp() {
+    isExpanded.value = !isExpanded.value;
+    return isExpanded.value;
+}
+</script>
+
+<template>
+    <div class="header flex-row no-flex">
+        <div class="main-help well clear" :class="{ expanded: isExpanded }">
+            <a
+                class="more-help"
+                href="javascript:void(0);"
+                role="button"
+                :title="localize('Expand or Close Help')"
+                @click="clickForHelp">
+                <div v-if="!isExpanded">
+                    <FontAwesomeIcon :icon="faChevronDown" />
+                    <span class="sr-only">{{ localize("Expand Help") }}</span>
+                </div>
+                <div v-else>
+                    <FontAwesomeIcon :icon="faChevronUp" />
+                    <span class="sr-only">{{ localize("Close Help") }}</span>
+                </div>
+            </a>
+
+            <div class="help-content">
+                <!-- each collection that extends this will add their own help content -->
+                <slot></slot>
+
+                <a
+                    class="more-help"
+                    href="javascript:void(0);"
+                    role="button"
+                    :title="localize('Expand or Close Help')"
+                    @click="clickForHelp">
+                    <span class="sr-only">{{ localize("Expand Help") }}</span>
+                </a>
+            </div>
+        </div>
+    </div>
+</template>

From df0336185277d4c0b3c7d604c7bf6d0c91c4ee5d Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Sun, 22 Dec 2024 14:05:25 -0500
Subject: [PATCH 4/8] Refactor showing of extensions into own component.

---
 .../Collections/common/CollectionCreator.vue  | 10 ++------
 .../CollectionCreatorShowExtensions.vue       | 25 +++++++++++++++++++
 2 files changed, 27 insertions(+), 8 deletions(-)
 create mode 100644 client/src/components/Collections/common/CollectionCreatorShowExtensions.vue

diff --git a/client/src/components/Collections/common/CollectionCreator.vue b/client/src/components/Collections/common/CollectionCreator.vue
index b076d4f3b815..81c1eea4191b 100644
--- a/client/src/components/Collections/common/CollectionCreator.vue
+++ b/client/src/components/Collections/common/CollectionCreator.vue
@@ -14,6 +14,7 @@ import localize from "@/utils/localization";
 import { orList } from "@/utils/strings";
 
 import CollectionCreatorHelpHeader from "./CollectionCreatorHelpHeader.vue";
+import CollectionCreatorShowExtensions from "./CollectionCreatorShowExtensions.vue";
 import CollectionCreatorSourceOptions from "./CollectionCreatorSourceOptions.vue";
 import CollectionNameInput from "./CollectionNameInput.vue";
 import HelpText from "@/components/Help/HelpText.vue";
@@ -170,14 +171,7 @@ watch(
 
                 <div class="footer flex-row">
                     <div class="vertically-spaced">
-                        <div class="d-flex align-items-center justify-content-between">
-                            <BAlert v-if="extensions?.length" class="w-100 py-0" variant="secondary" show>
-                                <HelpText
-                                    uri="galaxy.collections.collectionBuilder.filteredExtensions"
-                                    :text="localize('Filtered extensions: ')" />
-                                <strong>{{ orList(extensions) }}</strong>
-                            </BAlert>
-                        </div>
+                        <CollectionCreatorShowExtensions :extensions="extensions" />
 
                         <div class="d-flex align-items-center justify-content-between">
                             <CollectionCreatorSourceOptions
diff --git a/client/src/components/Collections/common/CollectionCreatorShowExtensions.vue b/client/src/components/Collections/common/CollectionCreatorShowExtensions.vue
new file mode 100644
index 000000000000..45a99b22eef8
--- /dev/null
+++ b/client/src/components/Collections/common/CollectionCreatorShowExtensions.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { BAlert } from "bootstrap-vue";
+
+import localize from "@/utils/localization";
+import { orList } from "@/utils/strings";
+
+import HelpText from "@/components/Help/HelpText.vue";
+
+interface Props {
+    extensions?: string[];
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+    <div class="d-flex align-items-center justify-content-between">
+        <BAlert v-if="extensions?.length" class="w-100 py-0" variant="secondary" show>
+            <HelpText
+                uri="galaxy.collections.collectionBuilder.filteredExtensions"
+                :text="localize('Filtered extensions: ')" />
+            <strong>{{ orList(extensions) }}</strong>
+        </BAlert>
+    </div>
+</template>

From d20672096cd1bbafedf8435d1773b2d04e63a3c6 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Sun, 22 Dec 2024 14:11:57 -0500
Subject: [PATCH 5/8] Refactor collection creator footer buttons into a
 component.

---
 .../Collections/common/CollectionCreator.vue  | 21 +++++----------
 .../common/CollectionCreatorFooterButtons.vue | 27 +++++++++++++++++++
 2 files changed, 34 insertions(+), 14 deletions(-)
 create mode 100644 client/src/components/Collections/common/CollectionCreatorFooterButtons.vue

diff --git a/client/src/components/Collections/common/CollectionCreator.vue b/client/src/components/Collections/common/CollectionCreator.vue
index 81c1eea4191b..cb51fe28faa5 100644
--- a/client/src/components/Collections/common/CollectionCreator.vue
+++ b/client/src/components/Collections/common/CollectionCreator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BLink, BTab, BTabs } from "bootstrap-vue";
+import { BAlert, BLink, BTab, BTabs } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
@@ -13,6 +13,7 @@ import { useUserStore } from "@/stores/userStore";
 import localize from "@/utils/localization";
 import { orList } from "@/utils/strings";
 
+import CollectionCreatorFooterButtons from "./CollectionCreatorFooterButtons.vue";
 import CollectionCreatorHelpHeader from "./CollectionCreatorHelpHeader.vue";
 import CollectionCreatorShowExtensions from "./CollectionCreatorShowExtensions.vue";
 import CollectionCreatorSourceOptions from "./CollectionCreatorSourceOptions.vue";
@@ -185,19 +186,11 @@ watch(
                         </div>
                     </div>
 
-                    <div class="actions vertically-spaced d-flex justify-content-between">
-                        <BButton tabindex="-1" @click="cancelCreate">
-                            {{ localize("Cancel") }}
-                        </BButton>
-
-                        <BButton
-                            class="create-collection"
-                            variant="primary"
-                            :disabled="!validInput"
-                            @click="emit('clicked-create', collectionName)">
-                            {{ localize("Create " + shortWhatIsBeingCreated) }}
-                        </BButton>
-                    </div>
+                    <CollectionCreatorFooterButtons
+                        :short-what-is-being-created="shortWhatIsBeingCreated"
+                        :valid-input="validInput"
+                        @clicked-cancel="cancelCreate"
+                        @clicked-create="emit('clicked-create', collectionName)" />
                 </div>
             </div>
         </BTab>
diff --git a/client/src/components/Collections/common/CollectionCreatorFooterButtons.vue b/client/src/components/Collections/common/CollectionCreatorFooterButtons.vue
new file mode 100644
index 000000000000..3137ade35ad7
--- /dev/null
+++ b/client/src/components/Collections/common/CollectionCreatorFooterButtons.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import localize from "@/utils/localization";
+
+interface Props {
+    validInput: boolean;
+    shortWhatIsBeingCreated: string;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "clicked-create"): void;
+    (e: "clicked-cancel"): void;
+}>();
+</script>
+
+<template>
+    <div class="actions vertically-spaced d-flex justify-content-between">
+        <BButton tabindex="-1" @click="emit('clicked-cancel')">
+            {{ localize("Cancel") }}
+        </BButton>
+
+        <BButton class="create-collection" variant="primary" :disabled="!validInput" @click="emit('clicked-create')">
+            {{ localize("Create " + shortWhatIsBeingCreated) }}
+        </BButton>
+    </div>
+</template>

From 1bbe39c57ac19163469538a2c8dae00c5631aef9 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Sun, 22 Dec 2024 14:17:26 -0500
Subject: [PATCH 6/8] Refactor no items message out of collection creator for
 reuse.

---
 .../Collections/common/CollectionCreator.vue   | 11 +++--------
 .../common/CollectionCreatorNoItemsMessage.vue | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 8 deletions(-)
 create mode 100644 client/src/components/Collections/common/CollectionCreatorNoItemsMessage.vue

diff --git a/client/src/components/Collections/common/CollectionCreator.vue b/client/src/components/Collections/common/CollectionCreator.vue
index cb51fe28faa5..06e2ec892eea 100644
--- a/client/src/components/Collections/common/CollectionCreator.vue
+++ b/client/src/components/Collections/common/CollectionCreator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faPlus, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BLink, BTab, BTabs } from "bootstrap-vue";
+import { BAlert, BTab, BTabs } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
@@ -15,6 +15,7 @@ import { orList } from "@/utils/strings";
 
 import CollectionCreatorFooterButtons from "./CollectionCreatorFooterButtons.vue";
 import CollectionCreatorHelpHeader from "./CollectionCreatorHelpHeader.vue";
+import CollectionCreatorNoItemsMessage from "./CollectionCreatorNoItemsMessage.vue";
 import CollectionCreatorShowExtensions from "./CollectionCreatorShowExtensions.vue";
 import CollectionCreatorSourceOptions from "./CollectionCreatorSourceOptions.vue";
 import CollectionNameInput from "./CollectionNameInput.vue";
@@ -153,13 +154,7 @@ watch(
     <BTabs v-model="currentTab" fill justified>
         <BTab class="collection-creator" :title="localize('Create Collection')">
             <div v-if="props.noItems">
-                <BAlert variant="info" show>
-                    {{ localize("No items available to create a collection.") }}
-                    {{ localize("Exit and change your current history, or") }}
-                    <BLink class="text-decoration-none" @click.stop.prevent="currentTab = Tabs.upload">
-                        {{ localize("Upload some datasets.") }}
-                    </BLink>
-                </BAlert>
+                <CollectionCreatorNoItemsMessage @click-upload="currentTab = Tabs.upload" />
             </div>
             <div v-else>
                 <CollectionCreatorHelpHeader>
diff --git a/client/src/components/Collections/common/CollectionCreatorNoItemsMessage.vue b/client/src/components/Collections/common/CollectionCreatorNoItemsMessage.vue
new file mode 100644
index 000000000000..b525f3a28360
--- /dev/null
+++ b/client/src/components/Collections/common/CollectionCreatorNoItemsMessage.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { BAlert, BLink } from "bootstrap-vue";
+
+import localize from "@/utils/localization";
+
+const emit = defineEmits<{
+    (e: "clicked-upload"): void;
+}>();
+</script>
+<template>
+    <BAlert variant="info" show>
+        {{ localize("No items available to create a collection.") }}
+        {{ localize("Exit and change your current history, or") }}
+        <BLink class="text-decoration-none" @click.stop.prevent="emit('clicked-upload')">
+            {{ localize("Upload some datasets.") }}
+        </BLink>
+    </BAlert>
+</template>

From b2e2053431717d20aec5600c2e15493055a23939 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Sun, 22 Dec 2024 14:28:23 -0500
Subject: [PATCH 7/8] Don't show upload files option when selecting datasets.

---
 .../Collections/ListCollectionCreator.vue     |   1 +
 .../Collections/PairCollectionCreator.vue     |   1 +
 .../PairedListCollectionCreator.vue           |   1 +
 .../Collections/common/CollectionCreator.vue  | 118 ++++++++++++------
 4 files changed, 82 insertions(+), 39 deletions(-)

diff --git a/client/src/components/Collections/ListCollectionCreator.vue b/client/src/components/Collections/ListCollectionCreator.vue
index ca9e25aec416..d33f98927d83 100644
--- a/client/src/components/Collections/ListCollectionCreator.vue
+++ b/client/src/components/Collections/ListCollectionCreator.vue
@@ -414,6 +414,7 @@ function renameElement(element: any, name: string) {
                 :extensions="extensions"
                 collection-type="list"
                 :no-items="props.initialElements.length == 0 && !props.fromSelection"
+                :show-upload="!fromSelection"
                 @add-uploaded-files="addUploadedFiles"
                 @on-update-datatype-toggle="changeDatatypeFilter"
                 @onUpdateHideSourceItems="onUpdateHideSourceItems"
diff --git a/client/src/components/Collections/PairCollectionCreator.vue b/client/src/components/Collections/PairCollectionCreator.vue
index 1d3e5922f315..c00c2c0f9b1e 100644
--- a/client/src/components/Collections/PairCollectionCreator.vue
+++ b/client/src/components/Collections/PairCollectionCreator.vue
@@ -376,6 +376,7 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
                 :extensions-toggle="removeExtensions"
                 collection-type="paired"
                 :no-items="props.initialElements.length == 0 && !props.fromSelection"
+                :show-upload="!fromSelection"
                 @add-uploaded-files="addUploadedFiles"
                 @onUpdateHideSourceItems="onUpdateHideSourceItems"
                 @clicked-create="clickedCreate"
diff --git a/client/src/components/Collections/PairedListCollectionCreator.vue b/client/src/components/Collections/PairedListCollectionCreator.vue
index 620252f7c281..1f831e66a79c 100644
--- a/client/src/components/Collections/PairedListCollectionCreator.vue
+++ b/client/src/components/Collections/PairedListCollectionCreator.vue
@@ -881,6 +881,7 @@ function _naiveStartingAndEndingLCS(s1: string, s2: string) {
                 :extensions="extensions"
                 collection-type="list:paired"
                 :no-items="props.initialElements.length == 0 && !props.fromSelection"
+                :show-upload="!fromSelection"
                 @add-uploaded-files="addUploadedFiles"
                 @onUpdateHideSourceItems="hideSourceItems = $event"
                 @clicked-create="clickedCreate"
diff --git a/client/src/components/Collections/common/CollectionCreator.vue b/client/src/components/Collections/common/CollectionCreator.vue
index 06e2ec892eea..b43bbd5574dc 100644
--- a/client/src/components/Collections/common/CollectionCreator.vue
+++ b/client/src/components/Collections/common/CollectionCreator.vue
@@ -46,12 +46,14 @@ interface Props {
     extensionsToggle?: boolean;
     noItems?: boolean;
     collectionType?: string;
+    showUpload: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     suggestedName: "",
     extensions: undefined,
     extensionsToggle: false,
+    showUpload: true,
 });
 
 const emit = defineEmits<{
@@ -151,8 +153,8 @@ watch(
 </script>
 
 <template>
-    <BTabs v-model="currentTab" fill justified>
-        <BTab class="collection-creator" :title="localize('Create Collection')">
+    <span>
+        <span v-if="!showUpload" class="collection-creator">
             <div v-if="props.noItems">
                 <CollectionCreatorNoItemsMessage @click-upload="currentTab = Tabs.upload" />
             </div>
@@ -188,45 +190,83 @@ watch(
                         @clicked-create="emit('clicked-create', collectionName)" />
                 </div>
             </div>
-        </BTab>
-        <BTab>
-            <template v-slot:title>
-                <FontAwesomeIcon :icon="faUpload" fixed-width />
-                <span>{{ localize("Upload Files to Add to Collection") }}</span>
-            </template>
-            <!-- TODO: This is incomplete; need to return uploadValues to parent -->
-            <DefaultBox
-                v-if="configOptions && extensionsSet"
-                :chunk-upload-size="configOptions.chunkUploadSize"
-                :default-db-key="configOptions.defaultDbKey"
-                :default-extension="defaultExtension"
-                :effective-extensions="props.extensions?.length ? validExtensions : listExtensions"
-                :file-sources-configured="configOptions.fileSourcesConfigured"
-                :ftp-upload-site="ftpUploadSite"
-                :has-callback="false"
-                :history-id="historyId"
-                :list-db-keys="[]"
-                disable-footer
-                emit-uploaded
-                @uploaded="addUploadedFiles"
-                @dismiss="currentTab = Tabs.create">
-                <template v-slot:footer>
-                    <div class="d-flex align-items-center justify-content-between mt-2">
-                        <BAlert v-if="extensions?.length" class="w-100 py-0" variant="secondary" show>
-                            <HelpText
-                                uri="galaxy.collections.collectionBuilder.requiredUploadExtensions"
-                                :text="localize('Required extensions: ')" />
-                            <strong>{{ orList(extensions) }}</strong>
-                        </BAlert>
+        </span>
+        <BTabs v-else v-model="currentTab" fill justified>
+            <BTab class="collection-creator" :title="localize('Create Collection')">
+                <div v-if="props.noItems">
+                    <CollectionCreatorNoItemsMessage @click-upload="currentTab = Tabs.upload" />
+                </div>
+                <div v-else>
+                    <CollectionCreatorHelpHeader>
+                        <slot name="help-content"></slot>
+                    </CollectionCreatorHelpHeader>
+
+                    <div class="middle flex-row flex-row-container">
+                        <slot name="middle-content"></slot>
                     </div>
+
+                    <div class="footer flex-row">
+                        <div class="vertically-spaced">
+                            <CollectionCreatorShowExtensions :extensions="extensions" />
+
+                            <div class="d-flex align-items-center justify-content-between">
+                                <CollectionCreatorSourceOptions
+                                    v-model="localHideSourceItems"
+                                    :render-extensions-toggle="renderExtensionsToggle"
+                                    :extensions-toggle="extensionsToggle" />
+                                <CollectionNameInput
+                                    v-model="collectionName"
+                                    :short-what-is-being-created="shortWhatIsBeingCreated" />
+                            </div>
+                        </div>
+
+                        <CollectionCreatorFooterButtons
+                            :short-what-is-being-created="shortWhatIsBeingCreated"
+                            :valid-input="validInput"
+                            @clicked-cancel="cancelCreate"
+                            @clicked-create="emit('clicked-create', collectionName)" />
+                    </div>
+                </div>
+            </BTab>
+            <BTab>
+                <template v-slot:title>
+                    <FontAwesomeIcon :icon="faUpload" fixed-width />
+                    <span>{{ localize("Upload Files to Add to Collection") }}</span>
                 </template>
-                <template v-slot:emit-btn-txt>
-                    <FontAwesomeIcon :icon="faPlus" fixed-width />
-                    {{ localize("Add Uploaded") }}
-                </template>
-            </DefaultBox>
-        </BTab>
-    </BTabs>
+                <!-- TODO: This is incomplete; need to return uploadValues to parent -->
+                <DefaultBox
+                    v-if="configOptions && extensionsSet"
+                    :chunk-upload-size="configOptions.chunkUploadSize"
+                    :default-db-key="configOptions.defaultDbKey"
+                    :default-extension="defaultExtension"
+                    :effective-extensions="props.extensions?.length ? validExtensions : listExtensions"
+                    :file-sources-configured="configOptions.fileSourcesConfigured"
+                    :ftp-upload-site="ftpUploadSite"
+                    :has-callback="false"
+                    :history-id="historyId"
+                    :list-db-keys="[]"
+                    disable-footer
+                    emit-uploaded
+                    @uploaded="addUploadedFiles"
+                    @dismiss="currentTab = Tabs.create">
+                    <template v-slot:footer>
+                        <div class="d-flex align-items-center justify-content-between mt-2">
+                            <BAlert v-if="extensions?.length" class="w-100 py-0" variant="secondary" show>
+                                <HelpText
+                                    uri="galaxy.collections.collectionBuilder.requiredUploadExtensions"
+                                    :text="localize('Required extensions: ')" />
+                                <strong>{{ orList(extensions) }}</strong>
+                            </BAlert>
+                        </div>
+                    </template>
+                    <template v-slot:emit-btn-txt>
+                        <FontAwesomeIcon :icon="faPlus" fixed-width />
+                        {{ localize("Add Uploaded") }}
+                    </template>
+                </DefaultBox>
+            </BTab>
+        </BTabs>
+    </span>
 </template>
 
 <style lang="scss">

From 9023ef3aed54813f0acb08d5db243445cf140449 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Thu, 9 Jan 2025 09:39:33 -0500
Subject: [PATCH 8/8] Update
 client/src/components/Collections/common/CollectionCreator.vue

Co-authored-by: Ahmed Hamid Awan <qe66653@umbc.edu>
---
 client/src/components/Collections/common/CollectionCreator.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/Collections/common/CollectionCreator.vue b/client/src/components/Collections/common/CollectionCreator.vue
index b43bbd5574dc..6947a1d592fb 100644
--- a/client/src/components/Collections/common/CollectionCreator.vue
+++ b/client/src/components/Collections/common/CollectionCreator.vue
@@ -233,7 +233,6 @@ watch(
                     <FontAwesomeIcon :icon="faUpload" fixed-width />
                     <span>{{ localize("Upload Files to Add to Collection") }}</span>
                 </template>
-                <!-- TODO: This is incomplete; need to return uploadValues to parent -->
                 <DefaultBox
                     v-if="configOptions && extensionsSet"
                     :chunk-upload-size="configOptions.chunkUploadSize"