From a6a680061ae4450c86d4335bb5f023088c7c39d1 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 2 Jul 2024 17:30:21 +0200
Subject: [PATCH 01/10] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Libr?=
 =?UTF-8?q?aries/LibraryFolder/FolderTopBar`=20to=20use=20`composition=20A?=
 =?UTF-8?q?PI`=20and=20`typeScript`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LibraryFolder/TopToolbar/FolderTopBar.vue | 586 ++++++++++--------
 1 file changed, 316 insertions(+), 270 deletions(-)

diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
index de3b1c052e5b..e05fac22a3a4 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
@@ -1,52 +1,326 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faBook, faCaretDown, faDownload, faHome, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton, BFormCheckbox } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
+import { computed, onMounted, ref } from "vue";
+
+import { fetchDatatypes } from "@/api/datatypes";
+import { fetchGenomes } from "@/api/genomes";
+import type { components } from "@/api/schema/schema";
+import { getGalaxyInstance } from "@/app";
+import { Services } from "@/components/Libraries/LibraryFolder/services";
+import mod_add_datasets from "@/components/Libraries/LibraryFolder/TopToolbar/add-datasets";
+import { deleteSelectedItems } from "@/components/Libraries/LibraryFolder/TopToolbar/delete-selected";
+import download from "@/components/Libraries/LibraryFolder/TopToolbar/download";
+import mod_import_collection from "@/components/Libraries/LibraryFolder/TopToolbar/import-to-history/import-collection";
+import mod_import_dataset from "@/components/Libraries/LibraryFolder/TopToolbar/import-to-history/import-dataset";
+import { Toast } from "@/composables/toast";
+import { useUserStore } from "@/stores/userStore";
+
+import FolderDetails from "@/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.vue";
+import LibraryBreadcrumb from "@/components/Libraries/LibraryFolder/LibraryBreadcrumb.vue";
+import SearchField from "@/components/Libraries/LibraryFolder/SearchField.vue";
+
+library.add(faBook, faCaretDown, faDownload, faHome, faPlus, faTrash);
+
+type DatatypeDetails = components["schemas"]["DatatypeDetails"][];
+
+type GenomesList = { id: string; text: string }[];
+type ExtensionsList = { id: string; text: string; description: string; description_url: string }[];
+
+interface Props {
+    metadata: any;
+    selected: any[];
+    folderId: string;
+    unselected: any[];
+    searchText: string;
+    folderContents: any[];
+    includeDeleted: boolean;
+    isAllSelectedMode: boolean;
+    canAddLibraryItem?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "newFolder"): void;
+    (e: "refreshTable"): void;
+    (e: "fetchFolderContents"): void;
+    (e: "refreshTableContent"): void;
+    (e: "setBusy", value: boolean): void;
+    (e: "deleteFromTable", item: any): void;
+    (e: "updateSearch", value: string): void;
+    (e: "update:includeDeleted", value: boolean): void;
+}>();
+
+const userStore = useUserStore();
+const { isAdmin } = storeToRefs(userStore);
+
+const libraryImportDir = ref(false);
+const allowLibraryPathPaste = ref(false);
+const genomesList = ref<GenomesList>([]);
+const extensionsList = ref<ExtensionsList>([]);
+const userLibraryImportDirAvailable = ref(false);
+const auto = ref({
+    id: "auto",
+    text: "Auto-detect",
+    description: `This system will try to detect the file type automatically.
+                     If your file is not detected properly as one of the known formats,
+                     it most likely means that it has some format problems (e.g., different
+                     number of columns on different rows). You can still coerce the system
+                     to set your data to the format you think it should be.
+                     You can also upload compressed files, which will automatically be decompressed`,
+    description_url: "",
+});
+
+const Galaxy = getGalaxyInstance();
+
+const services = new Services();
+
+const containsFileOrFolder = computed(() => {
+    return props.folderContents.find((el) => el.type === "folder" || el.type === "file");
+});
+const canDelete = computed(() => {
+    return !!(containsFileOrFolder.value && isAdmin.value);
+});
+const datasetManipulation = computed(() => {
+    return !!(containsFileOrFolder.value && Galaxy.user);
+});
+
+function updateSearch(value: string) {
+    emit("updateSearch", value);
+}
+
+function newFolder() {
+    emit("newFolder");
+}
+
+async function getSelected() {
+    if (props.isAllSelectedMode) {
+        try {
+            emit("setBusy", true);
+
+            const selected = await services.getFilteredFolderContents(
+                props.folderId,
+                props.unselected,
+                props.searchText
+            );
+
+            emit("setBusy", false);
+
+            return selected;
+        } catch (err) {
+            console.error(err);
+        } finally {
+            emit("setBusy", false);
+        }
+
+        return [];
+    } else {
+        return props.selected;
+    }
+}
+
+async function deleteSelected() {
+    try {
+        const selected = await getSelected();
+
+        deleteSelectedItems(
+            selected,
+            (deletedItem: any) => emit("deleteFromTable", deletedItem),
+            () => emit("refreshTable"),
+            () => emit("refreshTableContent")
+        );
+    } catch (err) {
+        console.error(err);
+    }
+}
+
+async function findCheckedItems(idOnly = true) {
+    const folders: any[] = [];
+    const datasets: any[] = [];
+
+    try {
+        const selected = await getSelected();
+
+        selected.forEach((item: any) => {
+            const selectedItem = idOnly ? item.id : item;
+
+            item.type === "file" ? datasets.push(selectedItem) : folders.push(selectedItem);
+        });
+    } catch (err) {
+        console.error(err);
+    }
+
+    return { datasets, folders };
+}
+
+async function downloadData(format: string) {
+    try {
+        const { datasets, folders } = await findCheckedItems();
+
+        if (props.selected.length === 0) {
+            Toast.info("You must select at least one dataset to download");
+
+            return;
+        }
+
+        download(format, datasets, folders);
+    } catch (err) {
+        console.error(err);
+    }
+}
+
+async function importToHistoryModal(isCollection: boolean) {
+    try {
+        const { datasets, folders } = await findCheckedItems(!isCollection);
+
+        const checkedItems: any = props.selected;
+
+        checkedItems.dataset_ids = datasets;
+        checkedItems.folder_ids = folders;
+
+        if (isCollection) {
+            new mod_import_collection.ImportCollectionModal({
+                selected: checkedItems,
+            });
+        } else {
+            new mod_import_dataset.ImportDatasetModal({
+                selected: checkedItems,
+            });
+        }
+    } catch (err) {
+        console.error(err);
+    }
+}
+
+// TODO: after replacing the selection dialog with the new component that is not using jquery
+function addDatasets(source: string) {
+    new mod_add_datasets.AddDatasets({
+        source: source,
+        id: props.folderId,
+        updateContent: updateContent,
+        list_genomes: genomesList.value,
+        list_extensions: extensionsList.value,
+    });
+}
+
+function updateContent() {
+    emit("fetchFolderContents");
+}
+// END TODO
+
+async function fetchExtAndGenomes() {
+    try {
+        const { data: dataTypes } = await fetchDatatypes({ extension_only: false });
+
+        if (typeof dataTypes[0] === "string") {
+            extensionsList.value = (dataTypes as string[]).map((datatype) => ({
+                id: datatype,
+                text: datatype,
+                description: "",
+                description_url: "",
+            }));
+        } else {
+            extensionsList.value = (dataTypes as DatatypeDetails).map((datatype) => ({
+                id: datatype.extension,
+                text: datatype.extension,
+                description: datatype.description || "",
+                description_url: datatype.description_url || "",
+            }));
+        }
+
+        extensionsList.value.sort((a, b) => (a.id > b.id ? 1 : a.id < b.id ? -1 : 0));
+
+        extensionsList.value = [auto.value, ...extensionsList.value];
+    } catch (err) {
+        console.error(err);
+    }
+
+    try {
+        const { data: genomes } = await fetchGenomes({});
+
+        genomesList.value = genomes.map((genome: string[]) => ({
+            id: genome[1] || "",
+            text: genome[0] || "",
+        }));
+
+        genomesList.value.sort((a, b) => (a.id > b.id ? 1 : a.id < b.id ? -1 : 0));
+    } catch (err) {
+        console.error(err);
+    }
+}
+
+onMounted(async () => {
+    libraryImportDir.value = Galaxy.config.library_import_dir;
+    allowLibraryPathPaste.value = Galaxy.config.allow_library_path_paste;
+    userLibraryImportDirAvailable.value = Galaxy.config.user_library_import_dir_available;
+
+    await fetchExtAndGenomes();
+});
+</script>
+
 <template>
     <div>
         <div class="form-inline d-flex align-items-center mb-2">
-            <b-button
+            <BButton
                 class="mr-1 btn btn-secondary"
                 :to="{ path: `/libraries` }"
                 data-toggle="tooltip"
                 title="Go to libraries list">
-                <FontAwesomeIcon icon="home" />
-            </b-button>
+                <FontAwesomeIcon :icon="faHome" />
+            </BButton>
+
             <div>
                 <div class="form-inline">
                     <SearchField @updateSearch="updateSearch($event)"></SearchField>
-                    <button
-                        v-if="canAddLibraryItem"
+
+                    <BButton
+                        v-if="props.canAddLibraryItem"
                         title="Create new folder"
                         class="btn btn-secondary toolbtn-create-folder add-library-items add-library-items-folder mr-1"
                         type="button"
                         @click="newFolder">
-                        <FontAwesomeIcon icon="plus" />
+                        <FontAwesomeIcon :icon="faPlus" />
                         Folder
-                    </button>
-                    <div v-if="canAddLibraryItem">
+                    </BButton>
+
+                    <div v-if="props.canAddLibraryItem">
                         <div
                             title="Add datasets to current folder"
                             class="dropdown add-library-items add-library-items-datasets mr-1">
-                            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
-                                <span class="fa fa-plus"></span> Datasets <span class="caret" />
-                            </button>
+                            <BButton type="button" class="btn btn-secondary" data-toggle="dropdown">
+                                <FontAwesomeIcon :icon="faPlus" />
+                                Datasets
+                                <FontAwesomeIcon :icon="faCaretDown" />
+                            </BButton>
+
                             <div class="dropdown-menu">
                                 <a class="dropdown-item cursor-pointer" @click="addDatasets('history')">
-                                    from History</a
-                                >
+                                    from History
+                                </a>
+
                                 <a
-                                    v-if="user_library_import_dir_available"
+                                    v-if="userLibraryImportDirAvailable"
                                     class="dropdown-item cursor-pointer"
                                     @click="addDatasets('userdir')">
                                     from User Directory
                                 </a>
-                                <div v-if="library_import_dir || allow_library_path_paste">
+
+                                <div v-if="libraryImportDir || allowLibraryPathPaste">
                                     <h2 class="dropdown-header cursor-pointer h-text">Admins only</h2>
+
                                     <a
-                                        v-if="library_import_dir"
+                                        v-if="libraryImportDir"
                                         class="dropdown-item cursor-pointer"
                                         @click="addDatasets('importdir')">
                                         from Import Directory
                                     </a>
+
                                     <a
-                                        v-if="allow_library_path_paste"
+                                        v-if="allowLibraryPathPaste"
                                         class="dropdown-item cursor-pointer"
                                         @click="addDatasets('path')">
                                         from Path
@@ -55,14 +329,14 @@
                             </div>
                         </div>
                     </div>
+
                     <div class="dropdown mr-1">
-                        <button
-                            type="button"
-                            class="primary-button dropdown-toggle add-to-history"
-                            data-toggle="dropdown">
-                            <FontAwesomeIcon icon="book" />
-                            Add to History <span class="caret"></span>
-                        </button>
+                        <BButton type="button" class="primary-button add-to-history" data-toggle="dropdown">
+                            <FontAwesomeIcon :icon="faBook" />
+                            Add to History
+                            <FontAwesomeIcon :icon="faCaretDown" />
+                        </BButton>
+
                         <div class="dropdown-menu" role="menu">
                             <a
                                 href="javascript:void(0)"
@@ -71,6 +345,7 @@
                                 @click="importToHistoryModal(false)">
                                 as Datasets
                             </a>
+
                             <a
                                 href="javascript:void(0)"
                                 role="button"
@@ -80,271 +355,42 @@
                             </a>
                         </div>
                     </div>
+
                     <div
-                        v-if="dataset_manipulation"
+                        v-if="datasetManipulation"
                         title="Download items as archive"
                         class="dropdown dataset-manipulation mr-1">
-                        <button id="download--btn" type="button" class="primary-button" @click="downloadData('zip')">
-                            <FontAwesomeIcon icon="download" />
+                        <BButton id="download--btn" type="button" class="primary-button" @click="downloadData('zip')">
+                            <FontAwesomeIcon :icon="faDownload" />
                             Download
-                        </button>
+                        </BButton>
                     </div>
-                    <button
+
+                    <BButton
                         v-if="canDelete"
                         data-toggle="tooltip"
                         title="Mark items deleted"
                         class="primary-button toolbtn-bulk-delete logged-dataset-manipulation mr-1"
                         type="button"
                         @click="deleteSelected">
-                        <FontAwesomeIcon icon="trash" />
+                        <FontAwesomeIcon :icon="faTrash" />
                         Delete
-                    </button>
-                    <FolderDetails :id="folder_id" class="mr-1" :metadata="metadata" />
+                    </BButton>
+
+                    <FolderDetails :id="props.folderId" class="mr-1" :metadata="props.metadata" />
+
                     <div v-if="canDelete" class="form-check logged-dataset-manipulation mr-1">
-                        <b-form-checkbox :checked="includeDeleted" @change="$emit('update:includeDeleted', $event)">
+                        <BFormCheckbox :checked="props.includeDeleted" @change="$emit('update:includeDeleted', $event)">
                             include deleted
-                        </b-form-checkbox>
+                        </BFormCheckbox>
                     </div>
                 </div>
             </div>
         </div>
 
         <LibraryBreadcrumb
-            v-if="metadata && metadata.full_path"
-            :full_path="metadata.full_path"
-            :current-id="folder_id" />
+            v-if="props.metadata && props.metadata.full_path"
+            :full_path="props.metadata.full_path"
+            :current-id="props.folderId" />
     </div>
 </template>
-<script>
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { getGalaxyInstance } from "app";
-import BootstrapVue from "bootstrap-vue";
-import { initTopBarIcons } from "components/Libraries/icons";
-import FolderDetails from "components/Libraries/LibraryFolder/FolderDetails/FolderDetails";
-import LibraryBreadcrumb from "components/Libraries/LibraryFolder/LibraryBreadcrumb";
-import { Toast } from "composables/toast";
-import { getAppRoot } from "onload/loadConfig";
-import mod_utils from "utils/utils";
-import Vue from "vue";
-
-import SearchField from "../SearchField";
-import { Services } from "../services";
-import mod_add_datasets from "./add-datasets";
-import { deleteSelectedItems } from "./delete-selected";
-import download from "./download";
-import mod_import_collection from "./import-to-history/import-collection";
-import mod_import_dataset from "./import-to-history/import-dataset";
-
-initTopBarIcons();
-
-Vue.use(BootstrapVue);
-
-export default {
-    name: "FolderTopBar",
-    components: {
-        SearchField,
-        FontAwesomeIcon,
-        LibraryBreadcrumb,
-        FolderDetails,
-    },
-    props: {
-        folder_id: {
-            type: String,
-            required: true,
-        },
-        includeDeleted: {
-            type: Boolean,
-            required: true,
-        },
-        isAllSelectedMode: {
-            type: Boolean,
-            required: true,
-        },
-        selected: {
-            type: Array,
-            required: true,
-        },
-        unselected: {
-            type: Array,
-            required: true,
-        },
-        canAddLibraryItem: {
-            type: Boolean,
-            default: false,
-        },
-        metadata: {
-            type: Object,
-            required: true,
-        },
-        folderContents: {
-            type: Array,
-            required: true,
-        },
-    },
-    data() {
-        return {
-            is_admin: false,
-            user_library_import_dir_available: false,
-            library_import_dir: false,
-            allow_library_path_paste: false,
-            list_genomes: [],
-            list_extensions: [],
-            // datatype placeholder for extension auto-detection
-            auto: {
-                id: "auto",
-                text: "Auto-detect",
-                description: `This system will try to detect the file type automatically.
-                     If your file is not detected properly as one of the known formats,
-                     it most likely means that it has some format problems (e.g., different
-                     number of columns on different rows). You can still coerce the system
-                     to set your data to the format you think it should be.
-                     You can also upload compressed files, which will automatically be decompressed`,
-            },
-        };
-    },
-    computed: {
-        contains_file_or_folder: function () {
-            return this.folderContents.find((el) => el.type === "folder" || el.type === "file");
-        },
-        canDelete: function () {
-            return !!(this.contains_file_or_folder && this.is_admin);
-        },
-        dataset_manipulation: function () {
-            const Galaxy = getGalaxyInstance();
-            // logic from legacy code
-            return !!(this.contains_file_or_folder && Galaxy.user);
-        },
-    },
-    created() {
-        const Galaxy = getGalaxyInstance();
-        this.services = new Services();
-        this.is_admin = Galaxy.user.attributes.is_admin;
-        this.user_library_import_dir_available = Galaxy.config.user_library_import_dir_available;
-        this.library_import_dir = Galaxy.config.library_import_dir;
-        this.allow_library_path_paste = Galaxy.config.allow_library_path_paste;
-
-        this.fetchExtAndGenomes();
-    },
-    methods: {
-        updateSearch: function (value) {
-            this.$emit("updateSearch", value);
-        },
-        deleteSelected: function () {
-            this.getSelected().then((selected) =>
-                deleteSelectedItems(
-                    selected,
-                    (deletedItem) => this.$emit("deleteFromTable", deletedItem),
-                    () => this.$emit("refreshTable"),
-                    () => this.$emit("refreshTableContent")
-                )
-            );
-        },
-        async getSelected() {
-            if (this.isAllSelectedMode) {
-                this.$emit("setBusy", true);
-                const selected = await this.services.getFilteredFolderContents(
-                    this.folder_id,
-                    this.unselected,
-                    this.$parent.searchText
-                );
-                this.$emit("setBusy", false);
-                return selected;
-            } else {
-                return this.selected;
-            }
-        },
-        newFolder() {
-            this.$emit("newFolder");
-        },
-        downloadData(format) {
-            this.findCheckedItems().then(({ datasets, folders }) => {
-                if (this.selected.length === 0) {
-                    Toast.info("You must select at least one dataset to download");
-                    return;
-                }
-
-                download(format, datasets, folders);
-            });
-        },
-        addDatasets(source) {
-            new mod_add_datasets.AddDatasets({
-                source: source,
-                id: this.folder_id,
-                updateContent: this.updateContent,
-                list_genomes: this.list_genomes,
-                list_extensions: this.list_extensions,
-            });
-        },
-        // helper function to make legacy code compatible
-        findCheckedItems: async function (idOnly = true) {
-            const datasets = [];
-            const folders = [];
-            const selected = await this.getSelected();
-            selected.forEach((item) => {
-                const selected_item = idOnly ? item.id : item;
-                item.type === "file" ? datasets.push(selected_item) : folders.push(selected_item);
-            });
-            return { datasets: datasets, folders: folders };
-        },
-        importToHistoryModal: function (isCollection) {
-            this.findCheckedItems(!isCollection).then(({ datasets, folders }) => {
-                const checkedItems = this.selected;
-                checkedItems.dataset_ids = datasets;
-                checkedItems.folder_ids = folders;
-                if (isCollection) {
-                    new mod_import_collection.ImportCollectionModal({
-                        selected: checkedItems,
-                    });
-                } else {
-                    new mod_import_dataset.ImportDatasetModal({
-                        selected: checkedItems,
-                    });
-                }
-            });
-        },
-        /*
-            Slightly adopted Bootstrap code
-        */
-        /**
-         * Request all extensions and genomes from Galaxy
-         * and save them in sorted arrays.
-         */
-        fetchExtAndGenomes: function () {
-            mod_utils.get({
-                url: `${getAppRoot()}api/datatypes?extension_only=False`,
-                success: (datatypes) => {
-                    this.list_extensions = [];
-                    for (const key in datatypes) {
-                        this.list_extensions.push({
-                            id: datatypes[key].extension,
-                            text: datatypes[key].extension,
-                            description: datatypes[key].description,
-                            description_url: datatypes[key].description_url,
-                        });
-                    }
-                    this.list_extensions.sort((a, b) => (a.id > b.id ? 1 : a.id < b.id ? -1 : 0));
-                    this.list_extensions.unshift(this.auto);
-                },
-                cache: true,
-            });
-            mod_utils.get({
-                url: `${getAppRoot()}api/genomes`,
-                success: (genomes) => {
-                    this.list_genomes = [];
-                    for (const key in genomes) {
-                        this.list_genomes.push({
-                            id: genomes[key][1],
-                            text: genomes[key][0],
-                        });
-                    }
-                    this.list_genomes.sort((a, b) => (a.id > b.id ? 1 : a.id < b.id ? -1 : 0));
-                },
-                cache: true,
-            });
-        },
-        updateContent: function () {
-            this.$emit("fetchFolderContents");
-        },
-    },
-};
-</script>

From 1bdf4b2103e17292af73804ed2008cf6215e14a6 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 2 Jul 2024 17:31:21 +0200
Subject: [PATCH 02/10] =?UTF-8?q?=F0=9F=94=A8:=20update=20`Libraries/Libra?=
 =?UTF-8?q?ryFolder/FolderTopBar`=20props=20usages=20in=20`LibraryFolder`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Libraries/LibraryFolder/LibraryFolder.vue   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Libraries/LibraryFolder/LibraryFolder.vue b/client/src/components/Libraries/LibraryFolder/LibraryFolder.vue
index c08ff48449b6..3d1ca0999131 100644
--- a/client/src/components/Libraries/LibraryFolder/LibraryFolder.vue
+++ b/client/src/components/Libraries/LibraryFolder/LibraryFolder.vue
@@ -1,10 +1,11 @@
 <template>
     <div>
         <FolderTopBar
+            :search-text="searchText"
             :can-add-library-item="canAddLibraryItem"
             :folder-contents="folderContents"
             :include-deleted.sync="includeDeleted"
-            :folder_id="currentFolderId"
+            :folder-id="currentFolderId"
             :selected="selected"
             :metadata="folder_metadata"
             :unselected="unselected"

From d4dfad24b862889d95f486394e9d578391ecdb7c Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 3 Jul 2024 13:20:42 +0200
Subject: [PATCH 03/10] =?UTF-8?q?=E2=9C=A8:=20add=20`fetchDatatypes=20to`?=
 =?UTF-8?q?=20api/datatypes`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/api/datatypes.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/src/api/datatypes.ts b/client/src/api/datatypes.ts
index fde4da5b529b..11a44d339952 100644
--- a/client/src/api/datatypes.ts
+++ b/client/src/api/datatypes.ts
@@ -11,3 +11,5 @@ export async function fetchDatatypesAndMappings(upload_only = true) {
     const { data } = await typesAndMappingsFetcher({ upload_only });
     return data;
 }
+
+export const fetchDatatypes = fetcher.path("/api/datatypes").method("get").create();

From e8bb66c92a1cff223b7025395a6997805192fa80 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 3 Jul 2024 13:21:00 +0200
Subject: [PATCH 04/10] =?UTF-8?q?=E2=9C=A8:=20add=20`fetchGenomes=20to`=20?=
 =?UTF-8?q?api/genomes`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/api/genomes.ts | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 client/src/api/genomes.ts

diff --git a/client/src/api/genomes.ts b/client/src/api/genomes.ts
new file mode 100644
index 000000000000..5b5c70f5e77e
--- /dev/null
+++ b/client/src/api/genomes.ts
@@ -0,0 +1,3 @@
+import { fetcher } from "@/api/schema";
+
+export const fetchGenomes = fetcher.path("/api/genomes").method("get").create();

From 505c7ecbb9867c5ae43786f5b21db0174eb5671a Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 3 Jul 2024 13:21:48 +0200
Subject: [PATCH 05/10] =?UTF-8?q?=F0=9F=94=A5:=20remove=20unused=20icons?=
 =?UTF-8?q?=20and=20functions=20in=20`Libraries/icons.js`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Libraries/icons.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/client/src/components/Libraries/icons.js b/client/src/components/Libraries/icons.js
index 309572e91903..7ae347b7dc5b 100644
--- a/client/src/components/Libraries/icons.js
+++ b/client/src/components/Libraries/icons.js
@@ -3,14 +3,11 @@ import { faCheckSquare, faFile, faFolder, faSave, faSquare } from "@fortawesome/
 import {
     faAngleDoubleLeft,
     faBan,
-    faBook,
-    faDownload,
     faGlobe,
     faHome,
     faKey,
     faMinusSquare,
     faPencilAlt,
-    faPlus,
     faShieldAlt,
     faSpinner,
     faTimes,
@@ -38,7 +35,6 @@ const tableIcons = [
 ];
 
 const manageIcons = [faAngleDoubleLeft, faSave, faFile];
-const topBarIcons = [faHome, faPlus, faTrash, faDownload, faBook];
 const librariesIcons = [faGlobe, faPencilAlt, faSave, faTimes, faTrash, faUsers, faHome, faUnlock];
 
 export function initFolderTableIcons() {
@@ -51,6 +47,3 @@ export function initPermissionsIcons() {
 export function initLibrariesIcons() {
     librariesIcons.forEach((icon) => library.add(icon));
 }
-export function initTopBarIcons() {
-    topBarIcons.forEach((icon) => library.add(icon));
-}

From e2162ada3b7ca172155e99b3391e55fdf1be8d9c Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 3 Jul 2024 15:43:20 +0200
Subject: [PATCH 06/10] =?UTF-8?q?=F0=9F=8E=A8:=20remove=20duplicate=20`api?=
 =?UTF-8?q?`=20in=20`api/datatypes`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/api/datatypes.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/src/api/datatypes.ts b/client/src/api/datatypes.ts
index 11a44d339952..fde4da5b529b 100644
--- a/client/src/api/datatypes.ts
+++ b/client/src/api/datatypes.ts
@@ -11,5 +11,3 @@ export async function fetchDatatypesAndMappings(upload_only = true) {
     const { data } = await typesAndMappingsFetcher({ upload_only });
     return data;
 }
-
-export const fetchDatatypes = fetcher.path("/api/datatypes").method("get").create();

From cc26282cf700c44d9752821f0c43f63f87b7aa71 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 3 Jul 2024 15:59:18 +0200
Subject: [PATCH 07/10] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Libr?=
 =?UTF-8?q?aries/LibraryFolder/FolderTopBar`=20to=20read=20datatypes/exten?=
 =?UTF-8?q?sions=20from=20composable=20`useDetailedDatatypes`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LibraryFolder/TopToolbar/FolderTopBar.vue | 37 +++++--------------
 1 file changed, 10 insertions(+), 27 deletions(-)

diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
index e05fac22a3a4..aee37d96817b 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
@@ -6,9 +6,7 @@ import { BButton, BFormCheckbox } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, ref } from "vue";
 
-import { fetchDatatypes } from "@/api/datatypes";
 import { fetchGenomes } from "@/api/genomes";
-import type { components } from "@/api/schema/schema";
 import { getGalaxyInstance } from "@/app";
 import { Services } from "@/components/Libraries/LibraryFolder/services";
 import mod_add_datasets from "@/components/Libraries/LibraryFolder/TopToolbar/add-datasets";
@@ -16,6 +14,7 @@ import { deleteSelectedItems } from "@/components/Libraries/LibraryFolder/TopToo
 import download from "@/components/Libraries/LibraryFolder/TopToolbar/download";
 import mod_import_collection from "@/components/Libraries/LibraryFolder/TopToolbar/import-to-history/import-collection";
 import mod_import_dataset from "@/components/Libraries/LibraryFolder/TopToolbar/import-to-history/import-dataset";
+import { type DetailedDatatypes, useDetailedDatatypes } from "@/composables/datatypes";
 import { Toast } from "@/composables/toast";
 import { useUserStore } from "@/stores/userStore";
 
@@ -25,10 +24,7 @@ import SearchField from "@/components/Libraries/LibraryFolder/SearchField.vue";
 
 library.add(faBook, faCaretDown, faDownload, faHome, faPlus, faTrash);
 
-type DatatypeDetails = components["schemas"]["DatatypeDetails"][];
-
 type GenomesList = { id: string; text: string }[];
-type ExtensionsList = { id: string; text: string; description: string; description_url: string }[];
 
 interface Props {
     metadata: any;
@@ -58,13 +54,16 @@ const emit = defineEmits<{
 const userStore = useUserStore();
 const { isAdmin } = storeToRefs(userStore);
 
+const { datatypes } = useDetailedDatatypes();
+
 const libraryImportDir = ref(false);
 const allowLibraryPathPaste = ref(false);
 const genomesList = ref<GenomesList>([]);
-const extensionsList = ref<ExtensionsList>([]);
+const extensionsList = ref<DetailedDatatypes[]>([]);
 const userLibraryImportDirAvailable = ref(false);
 const auto = ref({
     id: "auto",
+    extension: "auto",
     text: "Auto-detect",
     description: `This system will try to detect the file type automatically.
                      If your file is not detected properly as one of the known formats,
@@ -197,7 +196,9 @@ async function importToHistoryModal(isCollection: boolean) {
 }
 
 // TODO: after replacing the selection dialog with the new component that is not using jquery
-function addDatasets(source: string) {
+async function addDatasets(source: string) {
+    await fetchExtAndGenomes();
+
     new mod_add_datasets.AddDatasets({
         source: source,
         id: props.folderId,
@@ -214,25 +215,9 @@ function updateContent() {
 
 async function fetchExtAndGenomes() {
     try {
-        const { data: dataTypes } = await fetchDatatypes({ extension_only: false });
-
-        if (typeof dataTypes[0] === "string") {
-            extensionsList.value = (dataTypes as string[]).map((datatype) => ({
-                id: datatype,
-                text: datatype,
-                description: "",
-                description_url: "",
-            }));
-        } else {
-            extensionsList.value = (dataTypes as DatatypeDetails).map((datatype) => ({
-                id: datatype.extension,
-                text: datatype.extension,
-                description: datatype.description || "",
-                description_url: datatype.description_url || "",
-            }));
-        }
+        extensionsList.value = datatypes.value;
 
-        extensionsList.value.sort((a, b) => (a.id > b.id ? 1 : a.id < b.id ? -1 : 0));
+        extensionsList.value.sort((a, b) => (a.extension > b.extension ? 1 : a.extension < b.extension ? -1 : 0));
 
         extensionsList.value = [auto.value, ...extensionsList.value];
     } catch (err) {
@@ -257,8 +242,6 @@ onMounted(async () => {
     libraryImportDir.value = Galaxy.config.library_import_dir;
     allowLibraryPathPaste.value = Galaxy.config.allow_library_path_paste;
     userLibraryImportDirAvailable.value = Galaxy.config.user_library_import_dir_available;
-
-    await fetchExtAndGenomes();
 });
 </script>
 

From e81995b062a30e0614ce958c3e9f8d7bea9f6491 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 3 Jul 2024 16:01:48 +0200
Subject: [PATCH 08/10] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Libr?=
 =?UTF-8?q?aries/LibraryFolder/FolderTopBar`=20to=20read=20genomes/dbKeys?=
 =?UTF-8?q?=20from=20`dbKeyStore`=20store?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LibraryFolder/TopToolbar/FolderTopBar.vue         | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
index aee37d96817b..1f0a90b54e47 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
@@ -6,7 +6,6 @@ import { BButton, BFormCheckbox } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, ref } from "vue";
 
-import { fetchGenomes } from "@/api/genomes";
 import { getGalaxyInstance } from "@/app";
 import { Services } from "@/components/Libraries/LibraryFolder/services";
 import mod_add_datasets from "@/components/Libraries/LibraryFolder/TopToolbar/add-datasets";
@@ -16,6 +15,7 @@ import mod_import_collection from "@/components/Libraries/LibraryFolder/TopToolb
 import mod_import_dataset from "@/components/Libraries/LibraryFolder/TopToolbar/import-to-history/import-dataset";
 import { type DetailedDatatypes, useDetailedDatatypes } from "@/composables/datatypes";
 import { Toast } from "@/composables/toast";
+import { useDbKeyStore } from "@/stores/dbKeyStore";
 import { useUserStore } from "@/stores/userStore";
 
 import FolderDetails from "@/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.vue";
@@ -56,6 +56,8 @@ const { isAdmin } = storeToRefs(userStore);
 
 const { datatypes } = useDetailedDatatypes();
 
+const dbKeyStore = useDbKeyStore();
+
 const libraryImportDir = ref(false);
 const allowLibraryPathPaste = ref(false);
 const genomesList = ref<GenomesList>([]);
@@ -225,12 +227,9 @@ async function fetchExtAndGenomes() {
     }
 
     try {
-        const { data: genomes } = await fetchGenomes({});
+        await dbKeyStore.fetchUploadDbKeys();
 
-        genomesList.value = genomes.map((genome: string[]) => ({
-            id: genome[1] || "",
-            text: genome[0] || "",
-        }));
+        genomesList.value = dbKeyStore.uploadDbKeys;
 
         genomesList.value.sort((a, b) => (a.id > b.id ? 1 : a.id < b.id ? -1 : 0));
     } catch (err) {

From c856e34870de9cf9c137d441d04bba23e0de61a2 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Wed, 3 Jul 2024 16:02:53 +0200
Subject: [PATCH 09/10] =?UTF-8?q?=F0=9F=94=A5:=20remove=20`api/genomes/=20?=
 =?UTF-8?q?file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/api/genomes.ts | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 client/src/api/genomes.ts

diff --git a/client/src/api/genomes.ts b/client/src/api/genomes.ts
deleted file mode 100644
index 5b5c70f5e77e..000000000000
--- a/client/src/api/genomes.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { fetcher } from "@/api/schema";
-
-export const fetchGenomes = fetcher.path("/api/genomes").method("get").create();

From 24b3b75589c35ff6c0682674d2e705b27e9e3a6c Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Tue, 9 Jul 2024 14:18:59 +0200
Subject: [PATCH 10/10] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`Libr?=
 =?UTF-8?q?aries/LibraryFolder/FolderTopBar`=20dropdowns=20using=20bootstr?=
 =?UTF-8?q?ap=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LibraryFolder/TopToolbar/FolderTopBar.vue | 108 +++++++-----------
 1 file changed, 43 insertions(+), 65 deletions(-)

diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
index 1f0a90b54e47..22529f241078 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
@@ -2,7 +2,7 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faBook, faCaretDown, faDownload, faHome, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BFormCheckbox } from "bootstrap-vue";
+import { BButton, BDropdown, BDropdownDivider, BDropdownGroup, BDropdownItem, BFormCheckbox } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, onMounted, ref } from "vue";
 
@@ -262,81 +262,59 @@ onMounted(async () => {
                     <BButton
                         v-if="props.canAddLibraryItem"
                         title="Create new folder"
-                        class="btn btn-secondary toolbtn-create-folder add-library-items add-library-items-folder mr-1"
+                        class="add-library-items-folder mr-1"
                         type="button"
                         @click="newFolder">
                         <FontAwesomeIcon :icon="faPlus" />
                         Folder
                     </BButton>
 
-                    <div v-if="props.canAddLibraryItem">
-                        <div
-                            title="Add datasets to current folder"
-                            class="dropdown add-library-items add-library-items-datasets mr-1">
-                            <BButton type="button" class="btn btn-secondary" data-toggle="dropdown">
-                                <FontAwesomeIcon :icon="faPlus" />
-                                Datasets
-                                <FontAwesomeIcon :icon="faCaretDown" />
-                            </BButton>
-
-                            <div class="dropdown-menu">
-                                <a class="dropdown-item cursor-pointer" @click="addDatasets('history')">
-                                    from History
-                                </a>
-
-                                <a
-                                    v-if="userLibraryImportDirAvailable"
-                                    class="dropdown-item cursor-pointer"
-                                    @click="addDatasets('userdir')">
-                                    from User Directory
-                                </a>
-
-                                <div v-if="libraryImportDir || allowLibraryPathPaste">
-                                    <h2 class="dropdown-header cursor-pointer h-text">Admins only</h2>
-
-                                    <a
-                                        v-if="libraryImportDir"
-                                        class="dropdown-item cursor-pointer"
-                                        @click="addDatasets('importdir')">
-                                        from Import Directory
-                                    </a>
-
-                                    <a
-                                        v-if="allowLibraryPathPaste"
-                                        class="dropdown-item cursor-pointer"
-                                        @click="addDatasets('path')">
-                                        from Path
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                    <BDropdown
+                        v-if="props.canAddLibraryItem"
+                        v-b-tooltip.top.noninteractive
+                        right
+                        no-caret
+                        class="add-library-items-datasets mr-1">
+                        <template v-slot:button-content>
+                            <FontAwesomeIcon :icon="faPlus" />
+                            Datasets
+                            <FontAwesomeIcon :icon="faCaretDown" />
+                        </template>
+
+                        <BDropdownItem @click="addDatasets('history')"> from History </BDropdownItem>
+
+                        <BDropdownItem v-if="userLibraryImportDirAvailable" @click="addDatasets('userdir')">
+                            from User Directory
+                        </BDropdownItem>
+
+                        <BDropdownDivider v-if="libraryImportDir || allowLibraryPathPaste" />
 
-                    <div class="dropdown mr-1">
-                        <BButton type="button" class="primary-button add-to-history" data-toggle="dropdown">
+                        <BDropdownGroup v-if="libraryImportDir || allowLibraryPathPaste" header="Admins Only">
+                            <BDropdownItem v-if="libraryImportDir" @click="addDatasets('importdir')">
+                                from Import Directory
+                            </BDropdownItem>
+
+                            <BDropdownItem v-if="allowLibraryPathPaste" @click="addDatasets('path')">
+                                from Path
+                            </BDropdownItem>
+                        </BDropdownGroup>
+                    </BDropdown>
+
+                    <BDropdown v-b-tooltip.top.noninteractive right no-caret class="add-to-history mr-1">
+                        <template v-slot:button-content>
                             <FontAwesomeIcon :icon="faBook" />
                             Add to History
                             <FontAwesomeIcon :icon="faCaretDown" />
-                        </BButton>
+                        </template>
 
-                        <div class="dropdown-menu" role="menu">
-                            <a
-                                href="javascript:void(0)"
-                                role="button"
-                                class="toolbtn-bulk-import add-to-history-datasets dropdown-item"
-                                @click="importToHistoryModal(false)">
-                                as Datasets
-                            </a>
-
-                            <a
-                                href="javascript:void(0)"
-                                role="button"
-                                class="toolbtn-collection-import add-to-history-collection dropdown-item"
-                                @click="importToHistoryModal(true)">
-                                as a Collection
-                            </a>
-                        </div>
-                    </div>
+                        <BDropdownItem class="add-to-history-datasets" @click="importToHistoryModal(false)">
+                            as Datasets
+                        </BDropdownItem>
+
+                        <BDropdownItem class="add-to-history-collection" @click="importToHistoryModal(true)">
+                            as a Collection
+                        </BDropdownItem>
+                    </BDropdown>
 
                     <div
                         v-if="datasetManipulation"