From e49b6a54eb8a117e3a6b318d34c2053a9306c2ba Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 2 Aug 2024 14:26:42 +0200
Subject: [PATCH 01/24] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20add=20`modalShow?=
 =?UTF-8?q?`=20typing=20in=20`FolderTopBar`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue      | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
index bb023fdc3ca2..2730181728e7 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
@@ -72,7 +72,8 @@ const { datatypes } = useDetailedDatatypes();
 
 const dbKeyStore = useDbKeyStore();
 
-const modalShow = ref("");
+type ImportSource = "history" | "userdir" | "importdir" | "path" | "";
+const modalShow = ref<ImportSource>();
 const genomesList = ref<GenomesList>([]);
 const extensionsList = ref<DetailedDatatypes[]>([]);
 const progress = ref(false);
@@ -222,7 +223,7 @@ async function importToHistoryModal(isCollection: boolean) {
     }
 }
 
-function onAddDatasets(source: string = "") {
+function onAddDatasets(source: ImportSource = "") {
     modalShow.value = source;
 }
 

From 19a1bae2a1187c836daa87a3056c24299c7f5812 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 2 Aug 2024 14:28:00 +0200
Subject: [PATCH 02/24] =?UTF-8?q?=E2=9C=A8:=20=20add=20`leaf`,=20`fullPath?=
 =?UTF-8?q?`,=20and=20`disabled`=20properties=20to=20`FormDrilldown`=20`Op?=
 =?UTF-8?q?tion`=20interface?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Form/Elements/FormDrilldown/utilities.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/src/components/Form/Elements/FormDrilldown/utilities.ts b/client/src/components/Form/Elements/FormDrilldown/utilities.ts
index 22db204189ee..c634dcfc9bd3 100644
--- a/client/src/components/Form/Elements/FormDrilldown/utilities.ts
+++ b/client/src/components/Form/Elements/FormDrilldown/utilities.ts
@@ -1,6 +1,9 @@
 export interface Option {
     name: string;
     value: string;
+    leaf?: boolean;
+    fullPath?: string;
+    disabled?: boolean;
     options: Array<Option>;
 }
 

From 5839ce3a3fc811b91c5697996d0891d37934f92f Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 2 Aug 2024 14:31:20 +0200
Subject: [PATCH 03/24] =?UTF-8?q?=E2=9C=A8:=20=20add=20optional=20`leafIco?=
 =?UTF-8?q?n`=20and=20`branchIcon`=20and=20`disable`=20=20to=20`FormDrilld?=
 =?UTF-8?q?own`=20items=20and=20import=20missing=20icons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Elements/FormDrilldown/FormDrilldown.vue  |  3 ++
 .../FormDrilldown/FormDrilldownList.vue       |  2 ++
 .../FormDrilldown/FormDrilldownOption.vue     | 29 ++++++++++++++++---
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index f023dcebc84d..a02f4e4c54f3 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -11,10 +11,12 @@ const props = withDefaults(
         value?: Value;
         options: Array<Option>;
         multiple: boolean;
+        showIcons?: boolean;
     }>(),
     {
         value: null,
         multiple: true,
+        showIcons: false,
     }
 );
 
@@ -102,6 +104,7 @@ function setElementValues(oldArray: string[], newArray: string[], value: string)
             Select / Deselect All
         </b-form-checkbox>
         <FormDrilldownList
+            :show-icons="showIcons"
             :multiple="multiple"
             :current-value="currentValue"
             :options="options"
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
index 142538efed69..d49b7e3a4632 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownList.vue
@@ -7,6 +7,7 @@ defineProps<{
     currentValue: string[];
     handleClick: Function;
     multiple: boolean;
+    showIcons?: boolean;
     options: Array<Option>;
 }>();
 </script>
@@ -15,6 +16,7 @@ defineProps<{
     <div class="ui-drilldown">
         <div v-for="option in options" :key="option.name" class="descendant-lines">
             <FormDrilldownOption
+                :show-icons="showIcons"
                 :current-value="currentValue"
                 :handle-click="handleClick"
                 :multiple="multiple"
diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index f9bb1a0b8a45..64e16d6a91b7 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCaretDown, faCaretRight, faFile, faFolder } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BFormCheckbox, BFormRadio } from "bootstrap-vue";
 import { computed, type ComputedRef, onMounted, ref } from "vue";
 
@@ -6,12 +9,22 @@ import { getAllValues, type Option } from "./utilities";
 
 import FormDrilldownList from "./FormDrilldownList.vue";
 
-const props = defineProps<{
+library.add(faCaretDown, faCaretRight, faFile, faFolder);
+
+interface Props {
     currentValue: string[];
     option: Option;
     handleClick: Function;
     multiple: boolean;
-}>();
+    showIcons?: boolean;
+    leafIcon?: string | object;
+    branchIcon?: string | object;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    leafIcon: () => faFile,
+    branchIcon: () => faFolder,
+});
 
 const showChildren = ref(false);
 
@@ -43,6 +56,11 @@ function toggleInitialization(): void {
         }
     }
 }
+
+function getOptionIcon(option: Option) {
+    return option.leaf ? props.leafIcon : props.branchIcon;
+}
+
 onMounted(() => {
     toggleInitialization();
 });
@@ -51,22 +69,25 @@ onMounted(() => {
 <template>
     <div>
         <b-button v-if="hasOptions" variant="link" class="btn p-0" @click="toggleChildren">
-            <i v-if="showChildren" class="fa fa-caret-down align-checkbox" />
-            <i v-else class="fa fa-caret-right align-checkbox" />
+            <FontAwesomeIcon v-if="showChildren" :icon="faCaretDown" class="align-checkbox" />
+            <FontAwesomeIcon v-else :icon="faCaretRight" class="align-checkbox" />
         </b-button>
         <span v-if="!hasOptions" class="align-indent"></span>
         <component
             :is="isComponent"
             class="drilldown-option d-inline"
             value="true"
+            :disabled="option.disabled"
             :checked="isChecked"
             @change="handleClick(option.value, $event)">
+            <FontAwesomeIcon v-if="props.showIcons" :icon="getOptionIcon(option)" />
             {{ option.name }}
         </component>
         <FormDrilldownList
             v-if="hasOptions"
             v-show="showChildren"
             class="indent"
+            :show-icons="props.showIcons"
             :current-value="currentValue"
             :multiple="multiple"
             :options="option.options"

From 57731e45a5afa084cce6e97941c167ec51041373 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 2 Aug 2024 14:33:21 +0200
Subject: [PATCH 04/24] =?UTF-8?q?=F0=9F=8E=89:=20create=20`DirectoryDatase?=
 =?UTF-8?q?tPicker`=20to=20select=20datasets=20from=20paths?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TopToolbar/DirectoryDatasetPicker.vue     | 336 ++++++++++++++++++
 1 file changed, 336 insertions(+)
 create mode 100644 client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue

diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
new file mode 100644
index 000000000000..66d06e7c2f29
--- /dev/null
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
@@ -0,0 +1,336 @@
+<script setup lang="ts">
+import axios from "axios";
+import {
+    BAlert,
+    BButton,
+    BFormCheckbox,
+    BFormCheckboxGroup,
+    BFormGroup,
+    BFormTextarea,
+    BModal,
+    BTab,
+    BTabs,
+} from "bootstrap-vue";
+import { computed, ref, watch } from "vue";
+import Multiselect from "vue-multiselect";
+
+import { remoteFilesFetcher } from "@/api/remoteFiles";
+import { type Option } from "@/components/Form/Elements/FormDrilldown/utilities";
+import { type DetailedDatatypes, useDetailedDatatypes } from "@/composables/datatypes";
+import { Toast } from "@/composables/toast";
+import { getAppRoot } from "@/onload/loadConfig";
+import { useDbKeyStore } from "@/stores/dbKeyStore";
+
+import FormDrilldown from "@/components/Form/Elements/FormDrilldown/FormDrilldown.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+const auto = {
+    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,
+                     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`,
+    descriptionUrl: "",
+};
+
+type GenomesList = { id: string; text: string }[];
+
+interface Props {
+    folderId: string;
+    target: "userdir" | "importdir" | "path";
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "reload"): void;
+    (e: "onClose"): void;
+}>();
+
+const dbKeyStore = useDbKeyStore();
+const { datatypes, datatypesLoading } = useDetailedDatatypes();
+
+const activeTab = ref(0);
+const importing = ref(false);
+const selectedGenome = ref();
+const paths = ref<string>("");
+const selectedExtension = ref();
+const options = ref<Option[]>([]);
+const optionsLoading = ref(false);
+const currentValue = ref<string[]>([]);
+const genomesList = ref<GenomesList>([]);
+const preserveOptions = ref<string[]>([]);
+const extensionsList = ref<DetailedDatatypes[]>([]);
+
+const pathMode = computed(() => {
+    return props.target === "path";
+});
+const filesMode = computed(() => {
+    return activeTab.value === 0;
+});
+const title = computed(() => {
+    return pathMode.value ? "Please enter paths to import" : "Please select folders or files";
+});
+const importDisable = computed(() => {
+    if (importing.value) {
+        return true;
+    }
+
+    if (pathMode.value) {
+        return paths.value?.length === 0;
+    }
+
+    return currentValue.value?.length === 0;
+});
+
+async function fetchOptions() {
+    try {
+        optionsLoading.value = true;
+
+        const { data } = await remoteFilesFetcher({
+            format: "jstree",
+            target: props.target,
+            disable: filesMode.value ? "folders" : "files",
+        });
+
+        options.value = mapDataToOptions(data);
+    } catch (err) {
+        console.error(err);
+    } finally {
+        optionsLoading.value = false;
+    }
+}
+
+function mapDataToOptions(data: any): Option[] {
+    return data.map((item: any) => {
+        const option: Option = {
+            name: item.text,
+            fullPath: item.li_attr.full_path,
+            value: item.li_attr.id,
+            leaf: item.type === "file",
+            disabled: item.state.disabled,
+            options: item.children ? mapDataToOptions(item.children) : [],
+        };
+
+        return option;
+    });
+}
+
+function getFullPathById(id: string): string {
+    function traverse(nodes: Option[], targetId: string): string {
+        for (const node of nodes) {
+            if (node.value === targetId) {
+                return node.fullPath as string;
+            }
+            if (node.options?.length > 0) {
+                const result = traverse(node.options, targetId);
+
+                if (result) {
+                    return result;
+                }
+            }
+        }
+
+        return "";
+    }
+
+    return traverse(options.value, id);
+}
+
+async function fetchExtAndGenomes() {
+    try {
+        extensionsList.value = datatypes.value;
+
+        extensionsList.value.sort((a, b) => (a.extension > b.extension ? 1 : a.extension < b.extension ? -1 : 0));
+
+        extensionsList.value = [auto, ...extensionsList.value];
+
+        selectedExtension.value = auto;
+    } catch (err) {
+        console.error(err);
+    }
+
+    try {
+        await dbKeyStore.fetchUploadDbKeys();
+
+        genomesList.value = dbKeyStore.uploadDbKeys;
+
+        genomesList.value.sort((a, b) => (a.id > b.id ? 1 : a.id < b.id ? -1 : 0));
+    } catch (err) {
+        console.error(err);
+    }
+}
+
+async function onImport() {
+    if (pathMode.value) {
+        const tmp: string[] = paths.value.split("\n");
+        const validPaths: string[] = [];
+
+        for (let i = tmp.length - 1; i >= 0; i--) {
+            var trimmed = tmp?.[i]?.trim();
+            if (trimmed && trimmed?.length !== 0) {
+                validPaths.push(trimmed);
+            }
+        }
+
+        if (validPaths.length === 0) {
+            Toast.error("Please provide a valid path");
+            return;
+        } else {
+            importFileOrFolder(validPaths, "admin_path");
+        }
+    } else {
+        const source = `${props.target}_${filesMode.value ? "file" : "folder"}`;
+        const validPaths: string[] = currentValue.value.map((item) => getFullPathById(item));
+
+        importFileOrFolder(validPaths, source);
+    }
+}
+
+async function importFileOrFolder(validPaths: string[], source: string) {
+    try {
+        importing.value = true;
+
+        for (const path of validPaths) {
+            const reqData: Record<string, any> = {
+                path: path,
+                source: source,
+                dbkey: selectedGenome.value,
+                encoded_folder_id: props.folderId,
+                link_data: preserveOptions.value.includes("link_files"),
+                space_to_tab: preserveOptions.value.includes("space_to_tab"),
+                to_posix_lines: preserveOptions.value.includes("to_posix_lines"),
+                tag_using_filenames: preserveOptions.value.includes("tags_from_filenames"),
+            };
+
+            if (!pathMode.value) {
+                reqData.file_type = selectedExtension.value;
+            }
+
+            if (!filesMode.value) {
+                reqData.preserve_dirs = preserveOptions.value.includes("preserve_directory_structure");
+            }
+
+            await axios.post(`${getAppRoot()}api/libraries/datasets`, reqData);
+        }
+
+        emit("reload");
+        emit("onClose");
+    } catch (err) {
+        console.error(err);
+    } finally {
+        importing.value = false;
+    }
+}
+
+watch(
+    activeTab,
+    () => {
+        if (!pathMode.value) {
+            fetchOptions();
+        }
+    },
+    { immediate: true }
+);
+
+watch(
+    () => datatypesLoading.value,
+    () => {
+        if (!datatypesLoading.value) {
+            fetchExtAndGenomes();
+        }
+    }
+);
+</script>
+
+<template>
+    <BModal :title="title" visible @hide="emit('onClose')">
+        <BTabs v-if="!pathMode" v-model="activeTab" fill pills>
+            <BTab title="Choose Files" />
+
+            <BTab title="Choose Folders" />
+        </BTabs>
+
+        <BAlert v-if="filesMode" show class="mt-2">
+            All files you select will be imported into the current folder ignoring their folder structure.
+        </BAlert>
+        <BAlert v-else-if="!filesMode" show class="mt-2">
+            All files within the selected folders and their sub-folders will be imported into the current folder.
+        </BAlert>
+        <BAlert v-else-if="pathMode" show class="mt-2">
+            All files within the given folders and their sub-folders will be imported into the current folder.
+        </BAlert>
+
+        <BFormCheckboxGroup v-model="preserveOptions" switches>
+            <BFormCheckbox value="link_files">Link files instead of copying </BFormCheckbox>
+            <BFormCheckbox value="to_posix_lines">Convert line endings to POSIX</BFormCheckbox>
+            <BFormCheckbox value="space_to_tab">Convert spaces to tabs</BFormCheckbox>
+            <BFormCheckbox value="tags_from_filenames">Tag datasets based on file names</BFormCheckbox>
+            <BFormCheckbox v-if="!filesMode || pathMode" value="preserve_directory_structure">
+                Preserve directory structure
+            </BFormCheckbox>
+        </BFormCheckboxGroup>
+
+        <hr />
+
+        You can set extension type and genome for all imported datasets at once:
+        <BFormGroup label="Genome">
+            <Multiselect
+                v-model="selectedGenome"
+                :options="genomesList"
+                label="text"
+                track-by="id"
+                placeholder="Select genome"
+                :close-on-select="true"
+                :preserve-search="true"
+                :searchable="true"
+                :allow-empty="true"
+                :max="1" />
+        </BFormGroup>
+
+        <BFormGroup label="Extension">
+            <Multiselect
+                v-model="selectedExtension"
+                :options="extensionsList"
+                label="extension"
+                track-by="id"
+                placeholder="Select extension"
+                :close-on-select="true"
+                :preserve-search="true"
+                :searchable="true"
+                :allow-empty="true"
+                :max="1" />
+        </BFormGroup>
+
+        <hr />
+
+        <BFormTextarea
+            v-if="pathMode"
+            id="import_paths"
+            v-model="paths"
+            placeholder="Absolute paths (or paths relative to Galaxy root) separated by newline"
+            rows="5" />
+        <BAlert v-if="optionsLoading" variant="info" show>
+            <LoadingSpan message="Loading directories" />
+        </BAlert>
+        <FormDrilldown
+            v-else
+            :id="filesMode ? 'files' : 'folders'"
+            v-model="currentValue"
+            show-icons
+            :options="options"
+            multiple />
+
+        <template v-slot:modal-footer>
+            <BButton size="sm" variant="secondary" :disabled="importing" @click="emit('onClose')">Close</BButton>
+            <BButton size="sm" variant="primary" :disabled="importDisable" @click="onImport">
+                <LoadingSpan v-if="importing" message="Importing" />
+                <span v-else>Import</span>
+            </BButton>
+        </template>
+    </BModal>
+</template>

From e81a0c86cb89b91ef3c20c7dcb8eb082dc368e90 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 2 Aug 2024 14:37:02 +0200
Subject: [PATCH 05/24] =?UTF-8?q?=F0=9F=8E=A8:=20use=20`DirectoryDatasetPi?=
 =?UTF-8?q?cker`=20in=20`FolderTopBar`=20and=20remove=20outdated=20stuff?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
index 2730181728e7..0876aa617bdc 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
@@ -16,28 +16,24 @@ import { computed, reactive, ref } from "vue";
 
 import { GalaxyApi } from "@/api";
 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 { type SelectionItem } from "@/components/SelectionDialog/selectionTypes";
 import { useConfig } from "@/composables/config";
-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";
 import LibraryBreadcrumb from "@/components/Libraries/LibraryFolder/LibraryBreadcrumb.vue";
 import SearchField from "@/components/Libraries/LibraryFolder/SearchField.vue";
+import DirectoryDatasetPicker from "@/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue";
 import ProgressBar from "@/components/ProgressBar.vue";
 import HistoryDatasetPicker from "@/components/SelectionDialog/HistoryDatasetPicker.vue";
 
 library.add(faBook, faCaretDown, faDownload, faHome, faPlus, faTrash);
 
-type GenomesList = { id: string; text: string }[];
-
 interface Props {
     metadata: any;
     selected: any[];
@@ -68,14 +64,8 @@ const { config, isConfigLoaded } = useConfig();
 const userStore = useUserStore();
 const { isAdmin } = storeToRefs(userStore);
 
-const { datatypes } = useDetailedDatatypes();
-
-const dbKeyStore = useDbKeyStore();
-
 type ImportSource = "history" | "userdir" | "importdir" | "path" | "";
 const modalShow = ref<ImportSource>();
-const genomesList = ref<GenomesList>([]);
-const extensionsList = ref<DetailedDatatypes[]>([]);
 const progress = ref(false);
 const progressNote = ref("");
 const progressStatus = reactive({
@@ -84,18 +74,6 @@ const progressStatus = reactive({
     errorCount: 0,
     runningCount: 0,
 });
-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,
-                     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 services = new Services();
 
@@ -227,46 +205,6 @@ function onAddDatasets(source: ImportSource = "") {
     modalShow.value = source;
 }
 
-// TODO: after replacing the selection dialog with the new component that is not using jquery
-async function addDatasets(source: string) {
-    await fetchExtAndGenomes();
-
-    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 {
-        extensionsList.value = datatypes.value;
-
-        extensionsList.value.sort((a, b) => (a.extension > b.extension ? 1 : a.extension < b.extension ? -1 : 0));
-
-        extensionsList.value = [auto.value, ...extensionsList.value];
-    } catch (err) {
-        console.error(err);
-    }
-
-    try {
-        await dbKeyStore.fetchUploadDbKeys();
-
-        genomesList.value = dbKeyStore.uploadDbKeys;
-
-        genomesList.value.sort((a, b) => (a.id > b.id ? 1 : a.id < b.id ? -1 : 0));
-    } catch (err) {
-        console.error(err);
-    }
-}
-
 function resetProgress() {
     progressStatus.total = 0;
     progressStatus.okCount = 0;
@@ -365,18 +303,18 @@ async function onAddDatasetsFromHistory(selectedDatasets: SelectionItem[]) {
 
                         <BDropdownItem @click="onAddDatasets('history')"> from History </BDropdownItem>
 
-                        <BDropdownItem v-if="userLibraryImportDirAvailable" @click="addDatasets('userdir')">
+                        <BDropdownItem v-if="userLibraryImportDirAvailable" @click="onAddDatasets('userdir')">
                             from User Directory
                         </BDropdownItem>
 
                         <BDropdownDivider v-if="libraryImportDir || allowLibraryPathPaste" />
 
                         <BDropdownGroup v-if="libraryImportDir || allowLibraryPathPaste" header="Admins Only">
-                            <BDropdownItem v-if="libraryImportDir" @click="addDatasets('importdir')">
+                            <BDropdownItem v-if="libraryImportDir" @click="onAddDatasets('importdir')">
                                 from Import Directory
                             </BDropdownItem>
 
-                            <BDropdownItem v-if="allowLibraryPathPaste" @click="addDatasets('path')">
+                            <BDropdownItem v-if="allowLibraryPathPaste" @click="onAddDatasets('path')">
                                 from Path
                             </BDropdownItem>
                         </BDropdownGroup>
@@ -450,5 +388,11 @@ async function onAddDatasetsFromHistory(selectedDatasets: SelectionItem[]) {
             :folder-id="props.folderId"
             @onSelect="onAddDatasetsFromHistory"
             @onClose="onAddDatasets" />
+        <DirectoryDatasetPicker
+            v-else-if="modalShow"
+            :target="modalShow"
+            :folder-id="props.folderId"
+            @onClose="onAddDatasets"
+            @reload="emit('fetchFolderContents')" />
     </div>
 </template>

From b0b6dfe12e6a7d3d548394908caeeb01dfd29460 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 2 Aug 2024 14:50:48 +0200
Subject: [PATCH 06/24] =?UTF-8?q?=F0=9F=94=A5:=20remove=20`add-datasets.js?=
 =?UTF-8?q?`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LibraryFolder/TopToolbar/add-datasets.js  | 579 ------------------
 1 file changed, 579 deletions(-)
 delete mode 100644 client/src/components/Libraries/LibraryFolder/TopToolbar/add-datasets.js

diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/add-datasets.js b/client/src/components/Libraries/LibraryFolder/TopToolbar/add-datasets.js
deleted file mode 100644
index 42e5db51eb4b..000000000000
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/add-datasets.js
+++ /dev/null
@@ -1,579 +0,0 @@
-import "libs/jquery/jstree";
-
-import { getGalaxyInstance } from "app";
-import Backbone from "backbone";
-import { Toast } from "composables/toast";
-import $ from "jquery";
-import { getAppRoot } from "onload/loadConfig";
-import _ from "underscore";
-import _l from "utils/localization";
-
-import { updateProgress } from "./delete-selected";
-import mod_library_model from "./library-model";
-import mod_select from "./ui-select";
-
-var AddDatasets = Backbone.View.extend({
-    options: null,
-
-    initialize: function (options) {
-        this.options = options;
-        this.options.chain_call_control = {
-            total_number: 0,
-            failed_number: 0,
-        };
-
-        this.list_extensions = options.list_extensions;
-        this.list_genomes = options.list_genomes;
-        this.showImportModal(options);
-    },
-
-    /*
-     Slightly adopted Backbone code
-     */
-    showImportModal: function (options) {
-        switch (options.source) {
-            case "importdir":
-                this.importFilesFromGalaxyFolderModal({
-                    source: "importdir",
-                });
-                break;
-            case "path":
-                this.importFilesFromPathModal();
-                break;
-            case "userdir":
-                this.importFilesFromGalaxyFolderModal({
-                    source: "userdir",
-                });
-                break;
-            default:
-                // Galaxy.libraries.library_router.back();
-                Toast.error("Invalid import source.");
-                break;
-        }
-    },
-    templateBrowserModal: function () {
-        return _.template(
-            `<div id="file_browser_modal">
-                    <div style="margin-bottom:1em;">
-                        <label title="Switch to selecting files" class="radio-inline import-type-switch">
-                            <input type="radio" name="jstree-radio" value="jstree-disable-folders" checked="checked">
-                            Choose Files
-                        </label>
-                        <label title="Switch to selecting folders" class="radio-inline import-type-switch">
-                            <input type="radio" name="jstree-radio" value="jstree-disable-files">
-                            Choose Folders
-                        </label>
-                    </div>
-                    <div class="alert alert-info jstree-files-message">
-                        All files you select will be imported into the current folder ignoring their folder structure.
-                    </div>
-                    <div class="alert alert-info jstree-folders-message" style="display:none;">
-                        All files within the selected folders and their subfolders will be imported into the current folder.
-                    </div>
-                    <div style="margin-bottom:1em;">
-                        <label class="checkbox-inline jstree-preserve-structure" style="display:none;">
-                            <input class="preserve-checkbox" type="checkbox" value="preserve_directory_structure">
-                                Preserve directory structure
-                            </label>
-                        <label class="checkbox-inline">
-                            <input class="link-checkbox" type="checkbox" value="link_files">
-                                Link files instead of copying
-                        </label>
-                        <label class="checkbox-inline">
-                            <input class="posix-checkbox" type="checkbox" value="to_posix_lines" checked="checked">
-                                Convert line endings to POSIX
-                        </label>
-                        <label class="checkbox-inline">
-                            <input class="spacetab-checkbox" type="checkbox" value="space_to_tab">
-                                Convert spaces to tabs
-                        </label>
-                    </div>
-                    <button title="Select all files" type="button" class="button primary-button libimport-select-all">
-                        Select all
-                    </button>
-                    <button title="Select no files" type="button" class="button primary-button libimport-select-none">
-                        Unselect all
-                    </button>
-                    <hr /> <!-- append jstree object here -->
-                    <div id="jstree_browser">
-                    </div>
-                    <hr />
-                    <p>You can set extension type and genome for all imported datasets at once:</p>
-                    <div>
-                        Type: <span id="library_extension_select" class="library-extension-select" />
-                        Genome: <span id="library_genome_select" class="library-genome-select" />
-                    </div>
-                    <br />
-                    <div>
-                        <label class="checkbox-inline tag-files">
-                            Tag datasets based on file names
-                            <input class="tag-files" type="checkbox" value="tag_using_filenames">
-                        </label>
-                    </div>
-                </div>`
-        );
-    },
-    templateImportPathModal: function () {
-        return _.template(
-            `<div id="file_browser_modal">
-                <div class="alert alert-info jstree-folders-message">
-                    All files within the given folders and their subfolders will be imported into the current folder.
-                </div>
-                <div style="margin-bottom: 0.5em;">
-                    <label class="checkbox-inline">
-                        <input class="preserve-checkbox" type="checkbox" value="preserve_directory_structure">
-                        Preserve directory structure
-                    </label>
-                    <label class="checkbox-inline">
-                        <input class="link-checkbox" type="checkbox" value="link_files">
-                        Link files instead of copying
-                    </label>
-                    <br>
-                    <label class="checkbox-inline">
-                        <input class="posix-checkbox" type="checkbox" value="to_posix_lines" checked="checked">
-                        Convert line endings to POSIX
-                    </label>
-                    <label class="checkbox-inline">
-                        <input class="spacetab-checkbox" type="checkbox" value="space_to_tab">
-                        Convert spaces to tabs
-                    </label>
-                </div>
-                <textarea id="import_paths" class="form-control" rows="5"
-                    placeholder="Absolute paths (or paths relative to Galaxy root) separated by newline" autofocus>
-                </textarea>
-                <hr />
-                <p>You can set extension type and genome for all imported datasets at once:</p>
-                <div>
-                    Type: <span id="library_extension_select" class="library-extension-select"></span>
-                    Genome: <span id="library_genome_select" class="library-genome-select"></span>
-                </div>
-                <div>
-                    <label class="checkbox-inline tag-files">
-                        Tag datasets based on file names
-                        <input class="tag-files" type="checkbox" value="tag_using_filenames">
-                    </label>
-                </div>
-            </div>`
-        );
-    },
-    renderSelectBoxes: function () {
-        const Galaxy = getGalaxyInstance();
-        // This won't work properly unlesss we already have the data fetched.
-        // See this.fetchExtAndGenomes()
-        this.select_genome = new mod_select.View({
-            css: "library-genome-select",
-            data: this.list_genomes,
-            container: Galaxy.modal.$el.find("#library_genome_select"),
-            value: "?",
-        });
-        this.select_extension = new mod_select.View({
-            css: "library-extension-select",
-            data: this.list_extensions,
-            container: Galaxy.modal.$el.find("#library_extension_select"),
-            value: "auto",
-        });
-    },
-    /**
-     * Create modal for importing from given directory
-     * on Galaxy. Bind jQuery events.
-     */
-    importFilesFromGalaxyFolderModal: function (options) {
-        var template_modal = this.templateBrowserModal();
-        const Galaxy = getGalaxyInstance();
-        this.modal = Galaxy.modal;
-        this.modal.show({
-            closing_events: true,
-            title: _l("Please select folders or files"),
-            body: template_modal({}),
-            buttons: {
-                Import: () => {
-                    this.importFromJstreePath(this, options);
-                },
-                Close: () => {
-                    Galaxy.modal.hide();
-                },
-            },
-            closing_callback: () => {
-                // TODO update table without fetching new content from the server
-                this.options.updateContent();
-                // Galaxy.libraries.library_router.navigate(`folders/${this.id}`, {
-                //     trigger: true,
-                // });
-            },
-        });
-
-        $(".libimport-select-all").bind("click", () => {
-            $("#jstree_browser").jstree("check_all");
-        });
-        $(".libimport-select-none").bind("click", () => {
-            $("#jstree_browser").jstree("uncheck_all");
-        });
-
-        this.renderSelectBoxes();
-        options.disabled_jstree_element = "folders";
-        this.renderJstree(options);
-
-        $("input[type=radio]").change((event) => {
-            if (event.target.value === "jstree-disable-folders") {
-                options.disabled_jstree_element = "folders";
-                this.renderJstree(options);
-                $(".jstree-folders-message").hide();
-                $(".jstree-preserve-structure").hide();
-                $(".jstree-files-message").show();
-            } else if (event.target.value === "jstree-disable-files") {
-                $(".jstree-files-message").hide();
-                $(".jstree-folders-message").show();
-                $(".jstree-preserve-structure").show();
-                options.disabled_jstree_element = "files";
-                this.renderJstree(options);
-            }
-        });
-    },
-    /**
-     * Take the selected items from the jstree, create a request queue
-     * and send them one by one to the server for importing into
-     * the current folder.
-     *
-     * jstree.js has to be loaded before
-     * @see renderJstree
-     */
-    importFromJstreePath: function (that, options) {
-        var all_nodes = $("#jstree_browser").jstree().get_selected(true);
-        // remove the disabled elements that could have been trigerred with the 'select all'
-        var selected_nodes = _.filter(all_nodes, (node) => node.state.disabled == false);
-        var preserve_dirs = this.modal.$el.find(".preserve-checkbox").is(":checked");
-        var link_data = this.modal.$el.find(".link-checkbox").is(":checked");
-        var space_to_tab = this.modal.$el.find(".spacetab-checkbox").is(":checked");
-        var to_posix_lines = this.modal.$el.find(".posix-checkbox").is(":checked");
-        var file_type = this.select_extension.value();
-        var dbkey = this.select_genome.value();
-        var tag_using_filenames = this.modal.$el.find(".tag-files").is(":checked");
-        var selection_type = selected_nodes[0].type;
-        var paths = [];
-        if (selected_nodes.length < 1) {
-            Toast.info("Please select some items first.");
-        } else {
-            this.modal.disableButton("Import");
-            for (let i = selected_nodes.length - 1; i >= 0; i--) {
-                if (selected_nodes[i].li_attr.full_path !== undefined) {
-                    // should be always String
-                    paths.push(`"${selected_nodes[i].li_attr.full_path}"`);
-                }
-            }
-            this.initChainCallControlAddingDatasets({
-                length: paths.length,
-            });
-            if (selection_type === "folder") {
-                const full_source = `${options.source}_folder`;
-                this.chainCallImportingFolders({
-                    paths: paths,
-                    preserve_dirs: preserve_dirs,
-                    link_data: link_data,
-                    space_to_tab: space_to_tab,
-                    to_posix_lines: to_posix_lines,
-                    source: full_source,
-                    file_type: file_type,
-                    dbkey: dbkey,
-                    tag_using_filenames: tag_using_filenames,
-                });
-            } else if (selection_type === "file") {
-                const full_source = `${options.source}_file`;
-                this.chainCallImportingUserdirFiles({
-                    paths: paths,
-                    file_type: file_type,
-                    dbkey: dbkey,
-                    link_data: link_data,
-                    space_to_tab: space_to_tab,
-                    to_posix_lines: to_posix_lines,
-                    source: full_source,
-                    tag_using_filenames: tag_using_filenames,
-                });
-            }
-        }
-    },
-    /**
-     * Take the array of paths and create a request for each of them
-     * calling them in chain. Update the progress bar in between each.
-     * @param  {array} paths                    paths relative to user folder on Galaxy
-     * @param  {boolean} tag_using_filenames    add tags to datasets using names of files
-     */
-    chainCallImportingUserdirFiles: function (options) {
-        const Galaxy = getGalaxyInstance();
-        const popped_item = options.paths.pop();
-        if (typeof popped_item === "undefined") {
-            if (this.options.chain_call_control.failed_number === 0) {
-                Toast.success("Selected files imported into the current folder");
-                Galaxy.modal.hide();
-            } else {
-                Toast.error("An error occurred.");
-            }
-            return true;
-        }
-        const post_url = `${getAppRoot()}api/libraries/datasets`;
-        const post_data = {
-            encoded_folder_id: this.id,
-            source: options.source,
-            path: popped_item,
-            file_type: options.file_type,
-            link_data: options.link_data,
-            space_to_tab: options.space_to_tab,
-            to_posix_lines: options.to_posix_lines,
-            dbkey: options.dbkey,
-            tag_using_filenames: options.tag_using_filenames,
-        };
-        const promise = $.when($.post(post_url, post_data));
-        promise
-            .done((response) => {
-                updateProgress();
-                this.chainCallImportingUserdirFiles(options);
-            })
-            .fail(() => {
-                this.options.chain_call_control.failed_number += 1;
-                updateProgress();
-                this.chainCallImportingUserdirFiles(options);
-            });
-    },
-    /**
-     * Fetch the contents of user directory on Galaxy
-     * and render jstree component based on received
-     * data.
-     * @param  {[type]} options [description]
-     */
-    renderJstree: function (options) {
-        this.options = _.extend(this.options, options);
-        var target = options.source || "userdir";
-        var disabled_jstree_element = this.options.disabled_jstree_element;
-        this.jstree = new mod_library_model.Jstree();
-        this.jstree.url = `${this.jstree.urlRoot}?target=${target}&format=jstree&disable=${disabled_jstree_element}`;
-        this.jstree.fetch({
-            success: (model, response) => {
-                $("#jstree_browser").jstree("destroy");
-                $("#jstree_browser").jstree({
-                    core: {
-                        data: model,
-                    },
-                    plugins: ["types", "checkbox"],
-                    types: {
-                        folder: {
-                            icon: "jstree-folder",
-                        },
-                        file: {
-                            icon: "jstree-file",
-                        },
-                    },
-                    checkbox: {
-                        three_state: false,
-                    },
-                });
-            },
-            error: (model, response) => {
-                if (typeof response.responseJSON !== "undefined") {
-                    if (response.responseJSON.err_code === 404001) {
-                        Toast.warning(response.responseJSON.err_msg);
-                        getGalaxyInstance().modal.hide();
-                    } else {
-                        Toast.error(response.responseJSON.err_msg);
-                    }
-                } else {
-                    Toast.error("An error occurred.");
-                }
-            },
-        });
-    },
-    /**
-     * Create modal for importing from Galaxy path.
-     */
-    importFilesFromPathModal: function () {
-        const Galaxy = getGalaxyInstance();
-        this.modal = Galaxy.modal;
-        var template_modal = this.templateImportPathModal();
-        this.modal.show({
-            closing_events: true,
-            title: _l("Please enter paths to import"),
-            body: template_modal({}),
-            buttons: {
-                Import: () => {
-                    this.importFromPathsClicked(this);
-                },
-                Close: () => {
-                    Galaxy.modal.hide();
-                },
-            },
-            closing_callback: () => {
-                // TODO update table without fetching new content from the server
-                this.options.updateContent();
-
-                // Galaxy.libraries.library_router.navigate(`folders/${this.id}`, {
-                //     trigger: true,
-                // });
-            },
-        });
-        this.renderSelectBoxes();
-    },
-    /**
-     * Take the paths from the textarea, split it, create
-     * a request queue and call a function that starts sending
-     * one by one to be imported on the server.
-     */
-    importFromPathsClicked: function () {
-        var preserve_dirs = this.modal.$el.find(".preserve-checkbox").is(":checked");
-        var link_data = this.modal.$el.find(".link-checkbox").is(":checked");
-        var space_to_tab = this.modal.$el.find(".spacetab-checkbox").is(":checked");
-        var to_posix_lines = this.modal.$el.find(".posix-checkbox").is(":checked");
-        var tag_using_filenames = this.modal.$el.find(".tag-files").is(":checked");
-        var file_type = this.select_extension.value();
-        var dbkey = this.select_genome.value();
-        var paths = $("textarea#import_paths").val();
-        var valid_paths = [];
-        if (!paths) {
-            Toast.info("Please enter a path relative to Galaxy root.");
-        } else {
-            this.modal.disableButton("Import");
-            paths = paths.split("\n");
-            for (let i = paths.length - 1; i >= 0; i--) {
-                var trimmed = paths[i].trim();
-                if (trimmed.length !== 0) {
-                    valid_paths.push(trimmed);
-                }
-            }
-            this.initChainCallControlAddingDatasets({
-                length: valid_paths.length,
-            });
-            this.chainCallImportingFolders({
-                paths: valid_paths,
-                preserve_dirs: preserve_dirs,
-                link_data: link_data,
-                space_to_tab: space_to_tab,
-                to_posix_lines: to_posix_lines,
-                source: "admin_path",
-                file_type: file_type,
-                tag_using_filenames: tag_using_filenames,
-                dbkey: dbkey,
-            });
-        }
-    },
-    /**
-     * Take the array of paths and create a request for each of them
-     * calling them in series. Update the progress bar in between each.
-     * @param  {array} paths                    paths relative to Galaxy root folder
-     * @param  {boolean} preserve_dirs          indicates whether to preserve folder structure
-     * @param  {boolean} link_data              copy files to Galaxy or link instead
-     * @param  {boolean} to_posix_lines         convert line endings to POSIX standard
-     * @param  {boolean} space_to_tab           convert spaces to tabs
-     * @param  {str} source                     string representing what type of folder
-     *                                          is the source of import
-     * @param  {boolean} tag_using_filenames    add tags to datasets using names of files
-     */
-    chainCallImportingFolders: function (options) {
-        const Galaxy = getGalaxyInstance();
-        // TODO need to check which paths to call
-        const popped_item = options.paths.pop();
-        if (typeof popped_item == "undefined") {
-            if (this.options.chain_call_control.failed_number === 0) {
-                Toast.success("Selected folders and their contents imported into the current folder.");
-                Galaxy.modal.hide();
-            } else {
-                // TODO better error report
-                Toast.error("An error occurred.");
-            }
-            return true;
-        }
-        const post_url = `${getAppRoot()}api/libraries/datasets`;
-        const post_data = {
-            encoded_folder_id: this.id,
-            source: options.source,
-            path: popped_item,
-            preserve_dirs: options.preserve_dirs,
-            link_data: options.link_data,
-            to_posix_lines: options.to_posix_lines,
-            space_to_tab: options.space_to_tab,
-            file_type: options.file_type,
-            dbkey: options.dbkey,
-            tag_using_filenames: options.tag_using_filenames,
-        };
-        const promise = $.when($.post(post_url, post_data));
-        promise
-            .done((response) => {
-                updateProgress();
-                this.chainCallImportingFolders(options);
-            })
-            .fail(() => {
-                this.options.chain_call_control.failed_number += 1;
-                updateProgress();
-                this.chainCallImportingFolders(options);
-            });
-    },
-    templateAddingDatasetsProgressBar: function () {
-        return _.template(
-            `<div class="import_text">
-                Adding selected datasets to library folder <b><%= _.escape(folder_name) %></b>
-            </div>
-            <div class="progress">
-                <div class="progress-bar progress-bar-import" role="progressbar" aria-valuenow="0" aria-valuemin="0"
-                    aria-valuemax="100" style="width: 00%;">
-                    <span class="completion_span">0% Complete</span>
-                </div>
-            </div>`
-        );
-    },
-    initChainCallControlAddingDatasets: function (options) {
-        var template;
-        template = this.templateAddingDatasetsProgressBar();
-        this.modal.$el.find(".modal-body").html(
-            template({
-                folder_name: this.options.folder_name,
-            })
-        );
-
-        // var progress_bar_tmpl = this.templateAddingDatasetsProgressBar();
-        // this.modal.$el.find( '.modal-body' ).html( progress_bar_tmpl( { folder_name : this.options.folder_name } ) );
-        this.progress = 0;
-        this.progressStep = 100 / options.length;
-        this.options.chain_call_control.total_number = options.length;
-        this.options.chain_call_control.failed_number = 0;
-    },
-
-    /**
-     * Take the array of hdas and create a request for each.
-     * Call them in chain and update progress bar in between each.
-     * @param  {array} hdas_set array of empty hda objects
-     */
-    chainCallAddingHdas: function (hdas_set) {
-        const Galaxy = getGalaxyInstance();
-        this.added_hdas = new mod_library_model.Folder();
-        var popped_item = hdas_set.pop();
-        if (typeof popped_item == "undefined") {
-            if (this.options.chain_call_control.failed_number === 0) {
-                Toast.success("Selected datasets from history added to the folder");
-            } else if (this.options.chain_call_control.failed_number === this.options.chain_call_control.total_number) {
-                Toast.error("There was an error and no datasets were added to the folder.");
-            } else if (this.options.chain_call_control.failed_number < this.options.chain_call_control.total_number) {
-                Toast.warning("Some of the datasets could not be added to the folder");
-            }
-            this.options.updateContent();
-            Galaxy.modal.hide();
-            return this.added_hdas;
-        }
-        var promise = $.when(
-            popped_item.save({
-                from_hda_id: popped_item.get("from_hda_id"),
-            })
-        );
-
-        promise
-            .done((model) => {
-                // TODO add to lib
-                // Galaxy.libraries.folderListView.collection.add(model);
-                updateProgress();
-                this.chainCallAddingHdas(hdas_set);
-            })
-            .fail(() => {
-                this.options.chain_call_control.failed_number += 1;
-                updateProgress();
-                this.chainCallAddingHdas(hdas_set);
-            });
-    },
-});
-export default {
-    AddDatasets: AddDatasets,
-};

From 3e5bea11cbb9192044d8d921b785badf9b481e5c Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 2 Aug 2024 14:59:45 +0200
Subject: [PATCH 07/24] =?UTF-8?q?=F0=9F=94=A5:=20remove=20`jstree.scss`=20?=
 =?UTF-8?q?import=20from=20`base.scss`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/style/scss/base.scss   |   1 -
 client/src/style/scss/jstree.scss | 990 ------------------------------
 2 files changed, 991 deletions(-)
 delete mode 100644 client/src/style/scss/jstree.scss

diff --git a/client/src/style/scss/base.scss b/client/src/style/scss/base.scss
index 0a6cd7eb30da..748868bf1b34 100644
--- a/client/src/style/scss/base.scss
+++ b/client/src/style/scss/base.scss
@@ -31,7 +31,6 @@ $fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free/webfonts/";
 @import "library.scss";
 @import "trackster.scss";
 @import "toastr.scss";
-@import "jstree.scss";
 @import "tour.scss";
 @import "flex.scss";
 @import "charts.scss";
diff --git a/client/src/style/scss/jstree.scss b/client/src/style/scss/jstree.scss
deleted file mode 100644
index 1e49dcdc9689..000000000000
--- a/client/src/style/scss/jstree.scss
+++ /dev/null
@@ -1,990 +0,0 @@
-/* jsTree default theme */
-.jstree-node,
-.jstree-children,
-.jstree-container-ul {
-    display: block;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    list-style-image: none;
-}
-.jstree-node {
-    white-space: nowrap;
-}
-.jstree-anchor {
-    display: inline-block;
-    color: black;
-    white-space: nowrap;
-    padding: 0 4px 0 1px;
-    margin: 0;
-    vertical-align: top;
-}
-.jstree-anchor:focus {
-    outline: 0;
-}
-.jstree-anchor,
-.jstree-anchor:link,
-.jstree-anchor:visited,
-.jstree-anchor:hover,
-.jstree-anchor:active {
-    text-decoration: none;
-    color: inherit;
-}
-.jstree-icon {
-    display: inline-block;
-    text-decoration: none;
-    margin: 0;
-    padding: 0;
-    vertical-align: top;
-    text-align: center;
-}
-.jstree-icon:empty {
-    display: inline-block;
-    text-decoration: none;
-    margin: 0;
-    padding: 0;
-    vertical-align: top;
-    text-align: center;
-}
-.jstree-ocl {
-    cursor: pointer;
-}
-.jstree-leaf > .jstree-ocl {
-    cursor: default;
-}
-.jstree .jstree-open > .jstree-children {
-    display: block;
-}
-.jstree .jstree-closed > .jstree-children,
-.jstree .jstree-leaf > .jstree-children {
-    display: none;
-}
-.jstree-anchor > .jstree-themeicon {
-    margin-right: 2px;
-}
-.jstree-no-icons .jstree-themeicon,
-.jstree-anchor > .jstree-themeicon-hidden {
-    display: none;
-}
-.jstree-rtl .jstree-anchor {
-    padding: 0 1px 0 4px;
-}
-.jstree-rtl .jstree-anchor > .jstree-themeicon {
-    margin-left: 2px;
-    margin-right: 0;
-}
-.jstree-rtl .jstree-node {
-    margin-left: 0;
-}
-.jstree-rtl .jstree-container-ul > .jstree-node {
-    margin-right: 0;
-}
-.jstree-wholerow-ul {
-    position: relative;
-    display: inline-block;
-    min-width: 100%;
-}
-.jstree-wholerow-ul .jstree-leaf > .jstree-ocl {
-    cursor: pointer;
-}
-.jstree-wholerow-ul .jstree-anchor,
-.jstree-wholerow-ul .jstree-icon {
-    position: relative;
-}
-.jstree-wholerow-ul .jstree-wholerow {
-    width: 100%;
-    cursor: pointer;
-    position: absolute;
-    left: 0;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-.vakata-context {
-    display: none;
-}
-.vakata-context,
-.vakata-context ul {
-    margin: 0;
-    padding: 2px;
-    position: absolute;
-    background: #f5f5f5;
-    border: 1px solid #979797;
-    -moz-box-shadow: 5px 5px 4px -4px #666666;
-    -webkit-box-shadow: 2px 2px 2px #999999;
-    box-shadow: 2px 2px 2px #999999;
-}
-.vakata-context ul {
-    list-style: none;
-    left: 100%;
-    margin-top: -2.7em;
-    margin-left: -4px;
-}
-.vakata-context .vakata-context-right ul {
-    left: auto;
-    right: 100%;
-    margin-left: auto;
-    margin-right: -4px;
-}
-.vakata-context li {
-    list-style: none;
-    display: inline;
-}
-.vakata-context li > a {
-    display: block;
-    padding: 0 2em 0 2em;
-    text-decoration: none;
-    width: auto;
-    color: black;
-    white-space: nowrap;
-    line-height: 2.4em;
-    -moz-text-shadow: 1px 1px 0 white;
-    -webkit-text-shadow: 1px 1px 0 white;
-    text-shadow: 1px 1px 0 white;
-    -moz-border-radius: 1px;
-    -webkit-border-radius: 1px;
-    border-radius: 1px;
-}
-.vakata-context li > a:hover {
-    position: relative;
-    background-color: #e8eff7;
-    -moz-box-shadow: 0 0 2px #0a6aa1;
-    -webkit-box-shadow: 0 0 2px #0a6aa1;
-    box-shadow: 0 0 2px #0a6aa1;
-}
-.vakata-context li > a.vakata-context-parent {
-    background-image: url("data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAIORI4JlrqN1oMSnmmZDQUAOw==");
-    background-position: right center;
-    background-repeat: no-repeat;
-}
-.vakata-context li > a:focus {
-    outline: 0;
-}
-.vakata-context .vakata-context-hover > a {
-    position: relative;
-    background-color: #e8eff7;
-    -moz-box-shadow: 0 0 2px #0a6aa1;
-    -webkit-box-shadow: 0 0 2px #0a6aa1;
-    box-shadow: 0 0 2px #0a6aa1;
-}
-.vakata-context .vakata-context-separator > a,
-.vakata-context .vakata-context-separator > a:hover {
-    background: white;
-    border: 0;
-    border-top: 1px solid #e2e3e3;
-    height: 1px;
-    min-height: 1px;
-    max-height: 1px;
-    padding: 0;
-    margin: 0 0 0 2.4em;
-    border-left: 1px solid #e0e0e0;
-    -moz-text-shadow: 0 0 0 transparent;
-    -webkit-text-shadow: 0 0 0 transparent;
-    text-shadow: 0 0 0 transparent;
-    -moz-box-shadow: 0 0 0 transparent;
-    -webkit-box-shadow: 0 0 0 transparent;
-    box-shadow: 0 0 0 transparent;
-    -moz-border-radius: 0;
-    -webkit-border-radius: 0;
-    border-radius: 0;
-}
-.vakata-context .vakata-contextmenu-disabled a,
-.vakata-context .vakata-contextmenu-disabled a:hover {
-    color: silver;
-    background-color: transparent;
-    border: 0;
-    box-shadow: 0 0 0;
-}
-.vakata-context li > a > i {
-    text-decoration: none;
-    display: inline-block;
-    width: 2.4em;
-    height: 2.4em;
-    background: transparent;
-    margin: 0 0 0 -2em;
-    vertical-align: top;
-    text-align: center;
-    line-height: 2.4em;
-}
-.vakata-context li > a > i:empty {
-    width: 2.4em;
-    line-height: 2.4em;
-}
-.vakata-context li > a .vakata-contextmenu-sep {
-    display: inline-block;
-    width: 1px;
-    height: 2.4em;
-    background: white;
-    margin: 0 0.5em 0 0;
-    border-left: 1px solid #e2e3e3;
-}
-.vakata-context .vakata-contextmenu-shortcut {
-    font-size: 0.8em;
-    color: silver;
-    opacity: 0.5;
-    display: none;
-}
-.vakata-context-rtl ul {
-    left: auto;
-    right: 100%;
-    margin-left: auto;
-    margin-right: -4px;
-}
-.vakata-context-rtl li > a.vakata-context-parent {
-    background-image: url("data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAINjI+AC7rWHIsPtmoxLAA7");
-    background-position: left center;
-    background-repeat: no-repeat;
-}
-.vakata-context-rtl .vakata-context-separator > a {
-    margin: 0 2.4em 0 0;
-    border-left: 0;
-    border-right: 1px solid #e2e3e3;
-}
-.vakata-context-rtl .vakata-context-left ul {
-    right: auto;
-    left: 100%;
-    margin-left: -4px;
-    margin-right: auto;
-}
-.vakata-context-rtl li > a > i {
-    margin: 0 -2em 0 0;
-}
-.vakata-context-rtl li > a .vakata-contextmenu-sep {
-    margin: 0 0 0 0.5em;
-    border-left-color: white;
-    background: #e2e3e3;
-}
-#jstree-marker {
-    position: absolute;
-    top: 0;
-    left: 0;
-    margin: -5px 0 0 0;
-    padding: 0;
-    border-right: 0;
-    border-top: 5px solid transparent;
-    border-bottom: 5px solid transparent;
-    border-left: 5px solid;
-    width: 0;
-    height: 0;
-    font-size: 0;
-    line-height: 0;
-}
-#jstree-dnd {
-    line-height: 16px;
-    margin: 0;
-    padding: 4px;
-}
-#jstree-dnd .jstree-icon,
-#jstree-dnd .jstree-copy {
-    display: inline-block;
-    text-decoration: none;
-    margin: 0 2px 0 0;
-    padding: 0;
-    width: 16px;
-    height: 16px;
-}
-#jstree-dnd .jstree-ok {
-    background: green;
-}
-#jstree-dnd .jstree-er {
-    background: red;
-}
-#jstree-dnd .jstree-copy {
-    margin: 0 2px 0 2px;
-}
-.jstree-default .jstree-node,
-.jstree-default .jstree-icon {
-    background-repeat: no-repeat;
-    background-color: transparent;
-}
-.jstree-default .jstree-anchor,
-.jstree-default .jstree-wholerow {
-    transition: background-color 0.15s, box-shadow 0.15s;
-}
-.jstree-default .jstree-hovered {
-    background: #e7f4f9;
-    border-radius: 2px;
-    box-shadow: inset 0 0 1px #ccc;
-}
-.jstree-default .jstree-clicked {
-    background: #beebff;
-    border-radius: 2px;
-    box-shadow: inset 0 0 1px #999;
-}
-.jstree-default .jstree-no-icons .jstree-anchor > .jstree-themeicon {
-    display: none;
-}
-.jstree-default .jstree-disabled {
-    background: transparent;
-    color: #666;
-}
-.jstree-default .jstree-disabled.jstree-hovered {
-    background: transparent;
-    box-shadow: none;
-}
-.jstree-default .jstree-disabled.jstree-clicked {
-    background: #efefef;
-}
-.jstree-default .jstree-disabled > .jstree-icon {
-    opacity: 0.8;
-    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='jstree-grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#jstree-grayscale");
-    /* Firefox 10+ */
-    filter: gray;
-    /* IE6-9 */
-    -webkit-filter: grayscale(100%);
-    /* Chrome 19+ & Safari 6+ */
-}
-.jstree-default .jstree-search {
-    font-style: italic;
-    color: #8b0000;
-    font-weight: bold;
-}
-.jstree-default .jstree-no-checkboxes .jstree-checkbox {
-    display: none !important;
-}
-.jstree-default.jstree-checkbox-no-clicked .jstree-clicked {
-    background: transparent;
-    box-shadow: none;
-}
-.jstree-default.jstree-checkbox-no-clicked .jstree-clicked.jstree-hovered {
-    background: #e7f4f9;
-}
-.jstree-default.jstree-checkbox-no-clicked > .jstree-wholerow-ul .jstree-wholerow-clicked {
-    background: transparent;
-}
-.jstree-default.jstree-checkbox-no-clicked > .jstree-wholerow-ul .jstree-wholerow-clicked.jstree-wholerow-hovered {
-    background: #e7f4f9;
-}
-#jstree-dnd.jstree-default .jstree-ok,
-#jstree-dnd.jstree-default .jstree-er {
-    background-image: url("../../assets/images/jstree/32px.png");
-    background-repeat: no-repeat;
-    background-color: transparent;
-}
-#jstree-dnd.jstree-default i {
-    background: transparent;
-    width: 16px;
-    height: 16px;
-}
-#jstree-dnd.jstree-default .jstree-ok {
-    background-position: -9px -71px;
-}
-#jstree-dnd.jstree-default .jstree-er {
-    background-position: -39px -71px;
-}
-.jstree-default > .jstree-striped {
-    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAMAAAB/qqA+AAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMNAMM9s3UAAAAXSURBVHjajcEBAQAAAIKg/H/aCQZ70AUBjAATb6YPDgAAAABJRU5ErkJggg==")
-        left top repeat;
-}
-.jstree-default > .jstree-wholerow-ul .jstree-hovered,
-.jstree-default > .jstree-wholerow-ul .jstree-clicked {
-    background: transparent;
-    box-shadow: none;
-    border-radius: 0;
-}
-.jstree-default .jstree-wholerow {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-}
-.jstree-default .jstree-wholerow-hovered {
-    background: #e7f4f9;
-}
-.jstree-default .jstree-wholerow-clicked {
-    background: #beebff;
-    background: -moz-linear-gradient(top, #beebff 0%, #a8e4ff 100%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #beebff), color-stop(100%, #a8e4ff));
-    background: -webkit-linear-gradient(top, #beebff 0%, #a8e4ff 100%);
-    background: -o-linear-gradient(top, #beebff 0%, #a8e4ff 100%);
-    background: -ms-linear-gradient(top, #beebff 0%, #a8e4ff 100%);
-    background: linear-gradient(to bottom, #beebff 0%, #a8e4ff 100%);
-    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2',GradientType=0 );*/
-}
-.jstree-default .jstree-node {
-    min-height: 24px;
-    line-height: 24px;
-    margin-left: 24px;
-    min-width: 24px;
-}
-.jstree-default .jstree-anchor {
-    line-height: 24px;
-    height: 24px;
-}
-.jstree-default .jstree-icon {
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
-}
-.jstree-default .jstree-icon:empty {
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
-}
-.jstree-default.jstree-rtl .jstree-node {
-    margin-right: 24px;
-}
-.jstree-default .jstree-wholerow {
-    height: 24px;
-}
-.jstree-default .jstree-node,
-.jstree-default .jstree-icon {
-    background-image: url("../../assets/images/jstree/32px.png");
-}
-.jstree-default .jstree-node {
-    background-position: -292px -4px;
-    background-repeat: repeat-y;
-}
-.jstree-default .jstree-last {
-    background: transparent;
-}
-.jstree-default .jstree-open > .jstree-ocl {
-    background-position: -132px -4px;
-}
-.jstree-default .jstree-closed > .jstree-ocl {
-    background-position: -100px -4px;
-}
-.jstree-default .jstree-leaf > .jstree-ocl {
-    background-position: -68px -4px;
-}
-.jstree-default .jstree-themeicon {
-    background-position: -260px -4px;
-}
-.jstree-default > .jstree-no-dots .jstree-node,
-.jstree-default > .jstree-no-dots .jstree-leaf > .jstree-ocl {
-    background: transparent;
-}
-.jstree-default > .jstree-no-dots .jstree-open > .jstree-ocl {
-    background-position: -36px -4px;
-}
-.jstree-default > .jstree-no-dots .jstree-closed > .jstree-ocl {
-    background-position: -4px -4px;
-}
-.jstree-default .jstree-disabled {
-    background: transparent;
-}
-.jstree-default .jstree-disabled.jstree-hovered {
-    background: transparent;
-}
-.jstree-default .jstree-disabled.jstree-clicked {
-    background: #efefef;
-}
-.jstree-default .jstree-checkbox {
-    background-position: -164px -4px;
-}
-.jstree-default .jstree-checkbox:hover {
-    background-position: -164px -36px;
-}
-.jstree-default.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox,
-.jstree-default .jstree-checked > .jstree-checkbox {
-    background-position: -228px -4px;
-}
-.jstree-default.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox:hover,
-.jstree-default .jstree-checked > .jstree-checkbox:hover {
-    background-position: -228px -36px;
-}
-.jstree-default .jstree-anchor > .jstree-undetermined {
-    background-position: -196px -4px;
-}
-.jstree-default .jstree-anchor > .jstree-undetermined:hover {
-    background-position: -196px -36px;
-}
-.jstree-default > .jstree-striped {
-    background-size: auto 48px;
-}
-.jstree-default.jstree-rtl .jstree-node {
-    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
-    background-position: 100% 1px;
-    background-repeat: repeat-y;
-}
-.jstree-default.jstree-rtl .jstree-last {
-    background: transparent;
-}
-.jstree-default.jstree-rtl .jstree-open > .jstree-ocl {
-    background-position: -132px -36px;
-}
-.jstree-default.jstree-rtl .jstree-closed > .jstree-ocl {
-    background-position: -100px -36px;
-}
-.jstree-default.jstree-rtl .jstree-leaf > .jstree-ocl {
-    background-position: -68px -36px;
-}
-.jstree-default.jstree-rtl > .jstree-no-dots .jstree-node,
-.jstree-default.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
-    background: transparent;
-}
-.jstree-default.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
-    background-position: -36px -36px;
-}
-.jstree-default.jstree-rtl > .jstree-no-dots .jstree-closed > .jstree-ocl {
-    background-position: -4px -36px;
-}
-.jstree-default .jstree-themeicon-custom {
-    background-color: transparent;
-    background-image: none;
-    background-position: 0 0;
-}
-.jstree-default > .jstree-container-ul .jstree-loading > .jstree-ocl {
-    background: url("../../assets/images/jstree/throbber.gif") center center no-repeat;
-}
-.jstree-default .jstree-file {
-    background: url("../../assets/images/jstree/32px.png") -100px -68px no-repeat;
-}
-.jstree-default .jstree-folder {
-    background: url("../../assets/images/jstree/32px.png") -260px -4px no-repeat;
-}
-.jstree-default.jstree-rtl .jstree-node {
-    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
-}
-.jstree-default.jstree-rtl .jstree-last {
-    background: transparent;
-}
-.jstree-default-small .jstree-node {
-    min-height: 18px;
-    line-height: 18px;
-    margin-left: 18px;
-    min-width: 18px;
-}
-.jstree-default-small .jstree-anchor {
-    line-height: 18px;
-    height: 18px;
-}
-.jstree-default-small .jstree-icon {
-    width: 18px;
-    height: 18px;
-    line-height: 18px;
-}
-.jstree-default-small .jstree-icon:empty {
-    width: 18px;
-    height: 18px;
-    line-height: 18px;
-}
-.jstree-default-small.jstree-rtl .jstree-node {
-    margin-right: 18px;
-}
-.jstree-default-small .jstree-wholerow {
-    height: 18px;
-}
-.jstree-default-small .jstree-node,
-.jstree-default-small .jstree-icon {
-    background-image: url("../../assets/images/jstree/32px.png");
-}
-.jstree-default-small .jstree-node {
-    background-position: -295px -7px;
-    background-repeat: repeat-y;
-}
-.jstree-default-small .jstree-last {
-    background: transparent;
-}
-.jstree-default-small .jstree-open > .jstree-ocl {
-    background-position: -135px -7px;
-}
-.jstree-default-small .jstree-closed > .jstree-ocl {
-    background-position: -103px -7px;
-}
-.jstree-default-small .jstree-leaf > .jstree-ocl {
-    background-position: -71px -7px;
-}
-.jstree-default-small .jstree-themeicon {
-    background-position: -263px -7px;
-}
-.jstree-default-small > .jstree-no-dots .jstree-node,
-.jstree-default-small > .jstree-no-dots .jstree-leaf > .jstree-ocl {
-    background: transparent;
-}
-.jstree-default-small > .jstree-no-dots .jstree-open > .jstree-ocl {
-    background-position: -39px -7px;
-}
-.jstree-default-small > .jstree-no-dots .jstree-closed > .jstree-ocl {
-    background-position: -7px -7px;
-}
-.jstree-default-small .jstree-disabled {
-    background: transparent;
-}
-.jstree-default-small .jstree-disabled.jstree-hovered {
-    background: transparent;
-}
-.jstree-default-small .jstree-disabled.jstree-clicked {
-    background: #efefef;
-}
-.jstree-default-small .jstree-checkbox {
-    background-position: -167px -7px;
-}
-.jstree-default-small .jstree-checkbox:hover {
-    background-position: -167px -39px;
-}
-.jstree-default-small.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox,
-.jstree-default-small .jstree-checked > .jstree-checkbox {
-    background-position: -231px -7px;
-}
-.jstree-default-small.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox:hover,
-.jstree-default-small .jstree-checked > .jstree-checkbox:hover {
-    background-position: -231px -39px;
-}
-.jstree-default-small .jstree-anchor > .jstree-undetermined {
-    background-position: -199px -7px;
-}
-.jstree-default-small .jstree-anchor > .jstree-undetermined:hover {
-    background-position: -199px -39px;
-}
-.jstree-default-small > .jstree-striped {
-    background-size: auto 36px;
-}
-.jstree-default-small.jstree-rtl .jstree-node {
-    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
-    background-position: 100% 1px;
-    background-repeat: repeat-y;
-}
-.jstree-default-small.jstree-rtl .jstree-last {
-    background: transparent;
-}
-.jstree-default-small.jstree-rtl .jstree-open > .jstree-ocl {
-    background-position: -135px -39px;
-}
-.jstree-default-small.jstree-rtl .jstree-closed > .jstree-ocl {
-    background-position: -103px -39px;
-}
-.jstree-default-small.jstree-rtl .jstree-leaf > .jstree-ocl {
-    background-position: -71px -39px;
-}
-.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-node,
-.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
-    background: transparent;
-}
-.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
-    background-position: -39px -39px;
-}
-.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-closed > .jstree-ocl {
-    background-position: -7px -39px;
-}
-.jstree-default-small .jstree-themeicon-custom {
-    background-color: transparent;
-    background-image: none;
-    background-position: 0 0;
-}
-.jstree-default-small > .jstree-container-ul .jstree-loading > .jstree-ocl {
-    background: url("../../assets/images/jstree/throbber.gif") center center no-repeat;
-}
-.jstree-default-small .jstree-file {
-    background: url("../../assets/images/jstree/32px.png") -103px -71px no-repeat;
-}
-.jstree-default-small .jstree-folder {
-    background: url("../../assets/images/jstree/32px.png") -263px -7px no-repeat;
-}
-.jstree-default-small.jstree-rtl .jstree-node {
-    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAACAQMAAABv1h6PAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMHBgAAiABBI4gz9AAAAABJRU5ErkJggg==");
-}
-.jstree-default-small.jstree-rtl .jstree-last {
-    background: transparent;
-}
-.jstree-default-large .jstree-node {
-    min-height: 32px;
-    line-height: 32px;
-    margin-left: 32px;
-    min-width: 32px;
-}
-.jstree-default-large .jstree-anchor {
-    line-height: 32px;
-    height: 32px;
-}
-.jstree-default-large .jstree-icon {
-    width: 32px;
-    height: 32px;
-    line-height: 32px;
-}
-.jstree-default-large .jstree-icon:empty {
-    width: 32px;
-    height: 32px;
-    line-height: 32px;
-}
-.jstree-default-large.jstree-rtl .jstree-node {
-    margin-right: 32px;
-}
-.jstree-default-large .jstree-wholerow {
-    height: 32px;
-}
-.jstree-default-large .jstree-node,
-.jstree-default-large .jstree-icon {
-    background-image: url("../../assets/images/jstree/32px.png");
-}
-.jstree-default-large .jstree-node {
-    background-position: -288px 0px;
-    background-repeat: repeat-y;
-}
-.jstree-default-large .jstree-last {
-    background: transparent;
-}
-.jstree-default-large .jstree-open > .jstree-ocl {
-    background-position: -128px 0px;
-}
-.jstree-default-large .jstree-closed > .jstree-ocl {
-    background-position: -96px 0px;
-}
-.jstree-default-large .jstree-leaf > .jstree-ocl {
-    background-position: -64px 0px;
-}
-.jstree-default-large .jstree-themeicon {
-    background-position: -256px 0px;
-}
-.jstree-default-large > .jstree-no-dots .jstree-node,
-.jstree-default-large > .jstree-no-dots .jstree-leaf > .jstree-ocl {
-    background: transparent;
-}
-.jstree-default-large > .jstree-no-dots .jstree-open > .jstree-ocl {
-    background-position: -32px 0px;
-}
-.jstree-default-large > .jstree-no-dots .jstree-closed > .jstree-ocl {
-    background-position: 0px 0px;
-}
-.jstree-default-large .jstree-disabled {
-    background: transparent;
-}
-.jstree-default-large .jstree-disabled.jstree-hovered {
-    background: transparent;
-}
-.jstree-default-large .jstree-disabled.jstree-clicked {
-    background: #efefef;
-}
-.jstree-default-large .jstree-checkbox {
-    background-position: -160px 0px;
-}
-.jstree-default-large .jstree-checkbox:hover {
-    background-position: -160px -32px;
-}
-.jstree-default-large.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox,
-.jstree-default-large .jstree-checked > .jstree-checkbox {
-    background-position: -224px 0px;
-}
-.jstree-default-large.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox:hover,
-.jstree-default-large .jstree-checked > .jstree-checkbox:hover {
-    background-position: -224px -32px;
-}
-.jstree-default-large .jstree-anchor > .jstree-undetermined {
-    background-position: -192px 0px;
-}
-.jstree-default-large .jstree-anchor > .jstree-undetermined:hover {
-    background-position: -192px -32px;
-}
-.jstree-default-large > .jstree-striped {
-    background-size: auto 64px;
-}
-.jstree-default-large.jstree-rtl .jstree-node {
-    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
-    background-position: 100% 1px;
-    background-repeat: repeat-y;
-}
-.jstree-default-large.jstree-rtl .jstree-last {
-    background: transparent;
-}
-.jstree-default-large.jstree-rtl .jstree-open > .jstree-ocl {
-    background-position: -128px -32px;
-}
-.jstree-default-large.jstree-rtl .jstree-closed > .jstree-ocl {
-    background-position: -96px -32px;
-}
-.jstree-default-large.jstree-rtl .jstree-leaf > .jstree-ocl {
-    background-position: -64px -32px;
-}
-.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-node,
-.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
-    background: transparent;
-}
-.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
-    background-position: -32px -32px;
-}
-.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-closed > .jstree-ocl {
-    background-position: 0px -32px;
-}
-.jstree-default-large .jstree-themeicon-custom {
-    background-color: transparent;
-    background-image: none;
-    background-position: 0 0;
-}
-.jstree-default-large > .jstree-container-ul .jstree-loading > .jstree-ocl {
-    background: url("../../assets/images/jstree/throbber.gif") center center no-repeat;
-}
-.jstree-default-large .jstree-file {
-    background: url("../../assets/images/jstree/32px.png") -96px -64px no-repeat;
-}
-.jstree-default-large .jstree-folder {
-    background: url("../../assets/images/jstree/32px.png") -256px 0px no-repeat;
-}
-.jstree-default-large.jstree-rtl .jstree-node {
-    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAACAQMAAAAD0EyKAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjgIIGBgABCgCBvVLXcAAAAABJRU5ErkJggg==");
-}
-.jstree-default-large.jstree-rtl .jstree-last {
-    background: transparent;
-}
-@media (max-width: 768px) {
-    #jstree-dnd.jstree-dnd-responsive {
-        line-height: 40px;
-        font-weight: bold;
-        font-size: 1.1em;
-        text-shadow: 1px 1px white;
-    }
-    #jstree-dnd.jstree-dnd-responsive > i {
-        background: transparent;
-        width: 40px;
-        height: 40px;
-    }
-    #jstree-dnd.jstree-dnd-responsive > .jstree-ok {
-        background-image: url("../../assets/images/jstree/40px.png");
-        background-position: 0 -200px;
-        background-size: 120px 240px;
-    }
-    #jstree-dnd.jstree-dnd-responsive > .jstree-er {
-        background-image: url("../../assets/images/jstree/40px.png");
-        background-position: -40px -200px;
-        background-size: 120px 240px;
-    }
-    #jstree-marker.jstree-dnd-responsive {
-        border-left-width: 10px;
-        border-top-width: 10px;
-        border-bottom-width: 10px;
-        margin-top: -10px;
-    }
-}
-@media (max-width: 768px) {
-    .jstree-default-responsive {
-        /*
-		.jstree-open > .jstree-ocl,
-		.jstree-closed > .jstree-ocl { border-radius:20px; background-color:white; }
-		*/
-    }
-    .jstree-default-responsive .jstree-icon {
-        background-image: url("../../assets/images/jstree/40px.png");
-    }
-    .jstree-default-responsive .jstree-node,
-    .jstree-default-responsive .jstree-leaf > .jstree-ocl {
-        background: transparent;
-    }
-    .jstree-default-responsive .jstree-node {
-        min-height: 40px;
-        line-height: 40px;
-        margin-left: 40px;
-        min-width: 40px;
-        white-space: nowrap;
-    }
-    .jstree-default-responsive .jstree-anchor {
-        line-height: 40px;
-        height: 40px;
-    }
-    .jstree-default-responsive .jstree-icon,
-    .jstree-default-responsive .jstree-icon:empty {
-        width: 40px;
-        height: 40px;
-        line-height: 40px;
-    }
-    .jstree-default-responsive > .jstree-container-ul > .jstree-node {
-        margin-left: 0;
-    }
-    .jstree-default-responsive.jstree-rtl .jstree-node {
-        margin-left: 0;
-        margin-right: 40px;
-    }
-    .jstree-default-responsive.jstree-rtl .jstree-container-ul > .jstree-node {
-        margin-right: 0;
-    }
-    .jstree-default-responsive .jstree-ocl,
-    .jstree-default-responsive .jstree-themeicon,
-    .jstree-default-responsive .jstree-checkbox {
-        background-size: 120px 240px;
-    }
-    .jstree-default-responsive .jstree-leaf > .jstree-ocl {
-        background: transparent;
-    }
-    .jstree-default-responsive .jstree-open > .jstree-ocl {
-        background-position: 0 0px !important;
-    }
-    .jstree-default-responsive .jstree-closed > .jstree-ocl {
-        background-position: 0 -40px !important;
-    }
-    .jstree-default-responsive.jstree-rtl .jstree-closed > .jstree-ocl {
-        background-position: -40px 0px !important;
-    }
-    .jstree-default-responsive .jstree-themeicon {
-        background-position: -40px -40px;
-    }
-    .jstree-default-responsive .jstree-checkbox,
-    .jstree-default-responsive .jstree-checkbox:hover {
-        background-position: -40px -80px;
-    }
-    .jstree-default-responsive.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox,
-    .jstree-default-responsive.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox:hover,
-    .jstree-default-responsive .jstree-checked > .jstree-checkbox,
-    .jstree-default-responsive .jstree-checked > .jstree-checkbox:hover {
-        background-position: 0 -80px;
-    }
-    .jstree-default-responsive .jstree-anchor > .jstree-undetermined,
-    .jstree-default-responsive .jstree-anchor > .jstree-undetermined:hover {
-        background-position: 0 -120px;
-    }
-    .jstree-default-responsive .jstree-anchor {
-        font-weight: bold;
-        font-size: 1.1em;
-        text-shadow: 1px 1px white;
-    }
-    .jstree-default-responsive > .jstree-striped {
-        background: transparent;
-    }
-    .jstree-default-responsive .jstree-wholerow {
-        border-top: 1px solid rgba(255, 255, 255, 0.7);
-        border-bottom: 1px solid rgba(64, 64, 64, 0.2);
-        background: #ebebeb;
-        height: 40px;
-    }
-    .jstree-default-responsive .jstree-wholerow-hovered {
-        background: #e7f4f9;
-    }
-    .jstree-default-responsive .jstree-wholerow-clicked {
-        background: #beebff;
-    }
-    .jstree-default-responsive .jstree-children .jstree-last > .jstree-wholerow {
-        box-shadow: inset 0 -6px 3px -5px #666666;
-    }
-    .jstree-default-responsive .jstree-children .jstree-open > .jstree-wholerow {
-        box-shadow: inset 0 6px 3px -5px #666666;
-        border-top: 0;
-    }
-    .jstree-default-responsive .jstree-children .jstree-open + .jstree-open {
-        box-shadow: none;
-    }
-    .jstree-default-responsive .jstree-node,
-    .jstree-default-responsive .jstree-icon,
-    .jstree-default-responsive .jstree-node > .jstree-ocl,
-    .jstree-default-responsive .jstree-themeicon,
-    .jstree-default-responsive .jstree-checkbox {
-        background-image: url("../../assets/images/jstree/40px.png");
-        background-size: 120px 240px;
-    }
-    .jstree-default-responsive .jstree-node {
-        background-position: -80px 0;
-        background-repeat: repeat-y;
-    }
-    .jstree-default-responsive .jstree-last {
-        background: transparent;
-    }
-    .jstree-default-responsive .jstree-leaf > .jstree-ocl {
-        background-position: -40px -120px;
-    }
-    .jstree-default-responsive .jstree-last > .jstree-ocl {
-        background-position: -40px -160px;
-    }
-    .jstree-default-responsive .jstree-themeicon-custom {
-        background-color: transparent;
-        background-image: none;
-        background-position: 0 0;
-    }
-    .jstree-default-responsive .jstree-file {
-        background: url("../../assets/images/jstree/40px.png") 0 -160px no-repeat;
-        background-size: 120px 240px;
-    }
-    .jstree-default-responsive .jstree-folder {
-        background: url("../../assets/images/jstree/40px.png") -40px -40px no-repeat;
-        background-size: 120px 240px;
-    }
-}
-.jstree-default > .jstree-container-ul > .jstree-node {
-    margin-left: 0;
-    margin-right: 0;
-}

From cfaf9bea6a0477d37e8f24f7e03dbfe621756ba6 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 16 Sep 2024 16:01:29 +0200
Subject: [PATCH 08/24] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20FontA?=
 =?UTF-8?q?wesome=20icon=20import=20in=20`FolderTopBar`=20and=20`FormDrill?=
 =?UTF-8?q?downOption`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Form/Elements/FormDrilldown/FormDrilldownOption.vue        | 3 ---
 .../Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue        | 3 ---
 2 files changed, 6 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index 64e16d6a91b7..88dce2ada2bd 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCaretDown, faCaretRight, faFile, faFolder } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BFormCheckbox, BFormRadio } from "bootstrap-vue";
@@ -9,8 +8,6 @@ import { getAllValues, type Option } from "./utilities";
 
 import FormDrilldownList from "./FormDrilldownList.vue";
 
-library.add(faCaretDown, faCaretRight, faFile, faFolder);
-
 interface Props {
     currentValue: string[];
     option: Option;
diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
index 0876aa617bdc..0dee8c8016f0 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
@@ -1,5 +1,4 @@
 <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 {
@@ -32,8 +31,6 @@ import DirectoryDatasetPicker from "@/components/Libraries/LibraryFolder/TopTool
 import ProgressBar from "@/components/ProgressBar.vue";
 import HistoryDatasetPicker from "@/components/SelectionDialog/HistoryDatasetPicker.vue";
 
-library.add(faBook, faCaretDown, faDownload, faHome, faPlus, faTrash);
-
 interface Props {
     metadata: any;
     selected: any[];

From 2cdbbb765df657b8a7afa40573bc5b6fb32e56a7 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 16 Sep 2024 16:08:58 +0200
Subject: [PATCH 09/24] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20remot?=
 =?UTF-8?q?e=20files=20fetching=20logic=20in=20`DirectoryDatasetPicker`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TopToolbar/DirectoryDatasetPicker.vue     | 37 ++++++++++++-------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
index 66d06e7c2f29..4aaefb4c1b7c 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
@@ -14,7 +14,7 @@ import {
 import { computed, ref, watch } from "vue";
 import Multiselect from "vue-multiselect";
 
-import { remoteFilesFetcher } from "@/api/remoteFiles";
+import { GalaxyApi } from "@/api";
 import { type Option } from "@/components/Form/Elements/FormDrilldown/utilities";
 import { type DetailedDatatypes, useDetailedDatatypes } from "@/composables/datatypes";
 import { Toast } from "@/composables/toast";
@@ -61,6 +61,7 @@ const paths = ref<string>("");
 const selectedExtension = ref();
 const options = ref<Option[]>([]);
 const optionsLoading = ref(false);
+const errorMessage = ref<string>("");
 const currentValue = ref<string[]>([]);
 const genomesList = ref<GenomesList>([]);
 const preserveOptions = ref<string[]>([]);
@@ -88,21 +89,27 @@ const importDisable = computed(() => {
 });
 
 async function fetchOptions() {
-    try {
-        optionsLoading.value = true;
+    optionsLoading.value = true;
+
+    const { data, error } = await GalaxyApi().GET("/api/remote_files", {
+        params: {
+            query: {
+                format: "jstree",
+                target: props.target,
+                disable: filesMode.value ? "folders" : "files",
+            },
+        },
+    });
 
-        const { data } = await remoteFilesFetcher({
-            format: "jstree",
-            target: props.target,
-            disable: filesMode.value ? "folders" : "files",
-        });
+    options.value = mapDataToOptions(data);
 
-        options.value = mapDataToOptions(data);
-    } catch (err) {
-        console.error(err);
-    } finally {
-        optionsLoading.value = false;
+    if (error) {
+        console.error(error);
+
+        errorMessage.value = "Failed to load directories";
     }
+
+    optionsLoading.value = false;
 }
 
 function mapDataToOptions(data: any): Option[] {
@@ -314,9 +321,13 @@ watch(
             v-model="paths"
             placeholder="Absolute paths (or paths relative to Galaxy root) separated by newline"
             rows="5" />
+
         <BAlert v-if="optionsLoading" variant="info" show>
             <LoadingSpan message="Loading directories" />
         </BAlert>
+        <BAlert v-else-if="errorMessage" variant="danger" show>
+            {{ errorMessage }}
+        </BAlert>
         <FormDrilldown
             v-else
             :id="filesMode ? 'files' : 'folders'"

From b7d924051e0b5b25b0a395807b1195bbeb6d73df Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 16 Sep 2024 16:11:07 +0200
Subject: [PATCH 10/24] =?UTF-8?q?=E2=9C=A8:=20=20use=20progress=20bar=20on?=
 =?UTF-8?q?=20importing=20datasets=20from=20directories?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TopToolbar/DirectoryDatasetPicker.vue     | 55 +++++++++----------
 .../LibraryFolder/TopToolbar/FolderTopBar.vue | 45 ++++++++++++++-
 2 files changed, 68 insertions(+), 32 deletions(-)

diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
index 4aaefb4c1b7c..a8b10b695212 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import axios from "axios";
 import {
     BAlert,
     BButton,
@@ -18,7 +17,6 @@ import { GalaxyApi } from "@/api";
 import { type Option } from "@/components/Form/Elements/FormDrilldown/utilities";
 import { type DetailedDatatypes, useDetailedDatatypes } from "@/composables/datatypes";
 import { Toast } from "@/composables/toast";
-import { getAppRoot } from "@/onload/loadConfig";
 import { useDbKeyStore } from "@/stores/dbKeyStore";
 
 import FormDrilldown from "@/components/Form/Elements/FormDrilldown/FormDrilldown.vue";
@@ -39,6 +37,8 @@ const auto = {
 
 type GenomesList = { id: string; text: string }[];
 
+type RequestData = Record<string, string | boolean>;
+
 interface Props {
     folderId: string;
     target: "userdir" | "importdir" | "path";
@@ -49,6 +49,7 @@ const props = defineProps<Props>();
 const emit = defineEmits<{
     (e: "reload"): void;
     (e: "onClose"): void;
+    (e: "onSelect", items: RequestData[]): void;
 }>();
 
 const dbKeyStore = useDbKeyStore();
@@ -199,39 +200,33 @@ async function onImport() {
 }
 
 async function importFileOrFolder(validPaths: string[], source: string) {
-    try {
-        importing.value = true;
-
-        for (const path of validPaths) {
-            const reqData: Record<string, any> = {
-                path: path,
-                source: source,
-                dbkey: selectedGenome.value,
-                encoded_folder_id: props.folderId,
-                link_data: preserveOptions.value.includes("link_files"),
-                space_to_tab: preserveOptions.value.includes("space_to_tab"),
-                to_posix_lines: preserveOptions.value.includes("to_posix_lines"),
-                tag_using_filenames: preserveOptions.value.includes("tags_from_filenames"),
-            };
-
-            if (!pathMode.value) {
-                reqData.file_type = selectedExtension.value;
-            }
+    const items: RequestData[] = [];
+
+    for (const path of validPaths) {
+        const reqData: RequestData = {
+            path: path,
+            source: source,
+            dbkey: selectedGenome.value,
+            encoded_folder_id: props.folderId,
+            link_data: preserveOptions.value.includes("link_files"),
+            space_to_tab: preserveOptions.value.includes("space_to_tab"),
+            to_posix_lines: preserveOptions.value.includes("to_posix_lines"),
+            tag_using_filenames: preserveOptions.value.includes("tags_from_filenames"),
+        };
 
-            if (!filesMode.value) {
-                reqData.preserve_dirs = preserveOptions.value.includes("preserve_directory_structure");
-            }
+        if (!pathMode.value) {
+            reqData.file_type = selectedExtension.value.extension;
+        }
 
-            await axios.post(`${getAppRoot()}api/libraries/datasets`, reqData);
+        if (!filesMode.value) {
+            reqData.preserve_dirs = preserveOptions.value.includes("preserve_directory_structure");
         }
 
-        emit("reload");
-        emit("onClose");
-    } catch (err) {
-        console.error(err);
-    } finally {
-        importing.value = false;
+        items.push(reqData);
     }
+
+    emit("onSelect", items);
+    emit("onClose");
 }
 
 watch(
diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
index 0dee8c8016f0..734161fca090 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { faBook, faCaretDown, faDownload, faHome, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import axios from "axios";
 import {
     BAlert,
     BButton,
@@ -22,6 +23,7 @@ import mod_import_dataset from "@/components/Libraries/LibraryFolder/TopToolbar/
 import { type SelectionItem } from "@/components/SelectionDialog/selectionTypes";
 import { useConfig } from "@/composables/config";
 import { Toast } from "@/composables/toast";
+import { getAppRoot } from "@/onload";
 import { useUserStore } from "@/stores/userStore";
 
 import FolderDetails from "@/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.vue";
@@ -259,6 +261,45 @@ async function onAddDatasetsFromHistory(selectedDatasets: SelectionItem[]) {
     emit("setBusy", false);
     emit("fetchFolderContents");
 }
+
+async function onAddDatasetsDirectory(selectedDatasets: Record<string, string | boolean>[]) {
+    resetProgress();
+
+    progress.value = true;
+    progressStatus.total = selectedDatasets.length;
+    progressNote.value = "Adding datasets to the folder";
+
+    emit("setBusy", true);
+
+    for (const dataset of selectedDatasets) {
+        try {
+            progressStatus.runningCount++;
+
+            await axios.post(`${getAppRoot()}api/libraries/datasets`, dataset);
+
+            progressStatus.okCount++;
+        } catch (e) {
+            progressStatus.errorCount++;
+        } finally {
+            progressStatus.runningCount--;
+        }
+    }
+
+    if (progressStatus.errorCount > 0) {
+        progressNote.value = `Added ${progressStatus.okCount} dataset${
+            progressStatus.okCount > 1 ? "s" : ""
+        }, but failed to add ${progressStatus.errorCount} dataset${
+            progressStatus.errorCount > 1 ? "s" : ""
+        } to the folder`;
+    } else {
+        progressNote.value = `Added ${progressStatus.okCount} dataset${
+            progressStatus.okCount > 1 ? "s" : ""
+        } to the folder`;
+    }
+
+    emit("setBusy", false);
+    emit("fetchFolderContents");
+}
 </script>
 
 <template>
@@ -389,7 +430,7 @@ async function onAddDatasetsFromHistory(selectedDatasets: SelectionItem[]) {
             v-else-if="modalShow"
             :target="modalShow"
             :folder-id="props.folderId"
-            @onClose="onAddDatasets"
-            @reload="emit('fetchFolderContents')" />
+            @onSelect="onAddDatasetsDirectory"
+            @onClose="onAddDatasets" />
     </div>
 </template>

From b4e760514525a098b709663928aee2e5c464225f Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 16 Sep 2024 16:25:55 +0200
Subject: [PATCH 11/24] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20unified=20datase?=
 =?UTF-8?q?t=20addition=20logic=20in=20`FolderTopBar`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LibraryFolder/TopToolbar/FolderTopBar.vue | 76 +++++++------------
 1 file changed, 28 insertions(+), 48 deletions(-)

diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
index 734161fca090..ca7b200fb5b0 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
@@ -211,7 +211,10 @@ function resetProgress() {
     progressStatus.runningCount = 0;
 }
 
-async function onAddDatasetsFromHistory(selectedDatasets: SelectionItem[]) {
+async function addDatasets(
+    selectedDatasets: SelectionItem[] | Record<string, string | boolean>[],
+    datasetApiCall: Function
+) {
     resetProgress();
 
     progress.value = true;
@@ -224,22 +227,10 @@ async function onAddDatasetsFromHistory(selectedDatasets: SelectionItem[]) {
         try {
             progressStatus.runningCount++;
 
-            const { error } = await GalaxyApi().POST("/api/folders/{folder_id}/contents", {
-                params: {
-                    path: { folder_id: props.folderId },
-                },
-                body: {
-                    ldda_message: null,
-                    from_hda_id: dataset.id,
-                },
-            });
-
-            if (error) {
-                throw new Error(error.err_msg);
-            }
+            await datasetApiCall(dataset);
 
             progressStatus.okCount++;
-        } catch (err) {
+        } catch (e) {
             progressStatus.errorCount++;
         } finally {
             progressStatus.runningCount--;
@@ -262,43 +253,32 @@ async function onAddDatasetsFromHistory(selectedDatasets: SelectionItem[]) {
     emit("fetchFolderContents");
 }
 
-async function onAddDatasetsDirectory(selectedDatasets: Record<string, string | boolean>[]) {
-    resetProgress();
-
-    progress.value = true;
-    progressStatus.total = selectedDatasets.length;
-    progressNote.value = "Adding datasets to the folder";
-
-    emit("setBusy", true);
-
-    for (const dataset of selectedDatasets) {
-        try {
-            progressStatus.runningCount++;
-
-            await axios.post(`${getAppRoot()}api/libraries/datasets`, dataset);
+function onAddDatasetsFromHistory(selectedDatasets: SelectionItem[]) {
+    const datasetApiCall = async (dataset: SelectionItem) => {
+        const { error } = await GalaxyApi().POST("/api/folders/{folder_id}/contents", {
+            params: {
+                path: { folder_id: props.folderId },
+            },
+            body: {
+                ldda_message: null,
+                from_hda_id: dataset.id,
+            },
+        });
 
-            progressStatus.okCount++;
-        } catch (e) {
-            progressStatus.errorCount++;
-        } finally {
-            progressStatus.runningCount--;
+        if (error) {
+            throw new Error(error.err_msg);
         }
-    }
+    };
 
-    if (progressStatus.errorCount > 0) {
-        progressNote.value = `Added ${progressStatus.okCount} dataset${
-            progressStatus.okCount > 1 ? "s" : ""
-        }, but failed to add ${progressStatus.errorCount} dataset${
-            progressStatus.errorCount > 1 ? "s" : ""
-        } to the folder`;
-    } else {
-        progressNote.value = `Added ${progressStatus.okCount} dataset${
-            progressStatus.okCount > 1 ? "s" : ""
-        } to the folder`;
-    }
+    addDatasets(selectedDatasets, datasetApiCall);
+}
 
-    emit("setBusy", false);
-    emit("fetchFolderContents");
+function onAddDatasetsDirectory(selectedDatasets: Record<string, string | boolean>[]) {
+    const datasetApiCall = async (dataset: Record<string, string | boolean>) => {
+        await axios.post(`${getAppRoot()}api/libraries/datasets`, dataset);
+    };
+
+    addDatasets(selectedDatasets, datasetApiCall);
 }
 </script>
 

From caa4d0ec4739d4f8dd820d456344f4837ace7524 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 16 Sep 2024 16:28:31 +0200
Subject: [PATCH 12/24] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20enhanced=20`Dire?=
 =?UTF-8?q?ctoryDatasetPicker`=20by=20adding=20a=20scroll=20to=20the=20ite?=
 =?UTF-8?q?ms=20list=20and=20making=20the=20import=20button=20dynamic=20to?=
 =?UTF-8?q?=20reflect=20the=20number=20of=20selected=20items=20being=20imp?=
 =?UTF-8?q?ort?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TopToolbar/DirectoryDatasetPicker.vue     | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
index a8b10b695212..0c6ea731b264 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
@@ -88,6 +88,13 @@ const importDisable = computed(() => {
 
     return currentValue.value?.length === 0;
 });
+const okButtonText = computed(() => {
+    if (currentValue.value.length === 0) {
+        return "Import";
+    } else {
+        return `Import ${currentValue.value.length} dataset${currentValue.value.length > 1 ? "s" : ""}`;
+    }
+});
 
 async function fetchOptions() {
     optionsLoading.value = true;
@@ -250,7 +257,7 @@ watch(
 </script>
 
 <template>
-    <BModal :title="title" visible @hide="emit('onClose')">
+    <BModal :title="title" visible scrollable content-class="directory-dataset-picker" @hide="emit('onClose')">
         <BTabs v-if="!pathMode" v-model="activeTab" fill pills>
             <BTab title="Choose Files" />
 
@@ -327,6 +334,7 @@ watch(
             v-else
             :id="filesMode ? 'files' : 'folders'"
             v-model="currentValue"
+            class="items-list"
             show-icons
             :options="options"
             multiple />
@@ -334,9 +342,20 @@ watch(
         <template v-slot:modal-footer>
             <BButton size="sm" variant="secondary" :disabled="importing" @click="emit('onClose')">Close</BButton>
             <BButton size="sm" variant="primary" :disabled="importDisable" @click="onImport">
-                <LoadingSpan v-if="importing" message="Importing" />
-                <span v-else>Import</span>
+                {{ okButtonText }}
             </BButton>
         </template>
     </BModal>
 </template>
+
+<style scoped lang="scss">
+.directory-dataset-picker {
+    display: grid;
+    grid-template-rows: max-content 1fr;
+
+    .items-list {
+        max-height: 100%;
+        overflow-y: auto;
+    }
+}
+</style>

From d31a76076d8d63739873add2a6264187c5529476 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 16 Sep 2024 16:34:49 +0200
Subject: [PATCH 13/24] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20use=20`IconDefin?=
 =?UTF-8?q?ition`=20for=20`leafIcon`=20and=20`branchIcon`=20in=20FormDrill?=
 =?UTF-8?q?downOption`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Form/Elements/FormDrilldown/FormDrilldownOption.vue     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index 88dce2ada2bd..ad4f88184a73 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { faCaretDown, faCaretRight, faFile, faFolder } from "@fortawesome/free-solid-svg-icons";
+import { faCaretDown, faCaretRight, faFile, faFolder, type IconDefinition } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BFormCheckbox, BFormRadio } from "bootstrap-vue";
 import { computed, type ComputedRef, onMounted, ref } from "vue";
@@ -14,8 +14,8 @@ interface Props {
     handleClick: Function;
     multiple: boolean;
     showIcons?: boolean;
-    leafIcon?: string | object;
-    branchIcon?: string | object;
+    leafIcon?: IconDefinition;
+    branchIcon?: IconDefinition;
 }
 
 const props = withDefaults(defineProps<Props>(), {

From 7f622f2f46f22f17ccb4e10ef456d25a9ff37f0a Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 19 Sep 2024 14:56:09 +0200
Subject: [PATCH 14/24] =?UTF-8?q?=E2=9C=A8:=20=20modified=20`SingleItemSel?=
 =?UTF-8?q?ectors`=20to=20utilize=20flexible=20`trackBy`=20and=20`label`?=
 =?UTF-8?q?=20prop,=20revised=20selected=20item=20type,=20and=20update=20i?=
 =?UTF-8?q?ts=20usage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../HistoryOperations/SelectionOperations.vue | 20 +++++++++----------
 .../LibraryFolderDataset/LibraryDataset.vue   |  4 ++--
 client/src/components/SingleItemSelector.vue  | 18 ++++++++++++-----
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
index fca63e70dd68..313846e57546 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
@@ -99,7 +99,7 @@
                     collection-name="Database/Builds"
                     :loading="loadingDbKeys"
                     :items="dbkeys"
-                    :current-item-id="selectedDbKey"
+                    :current-item="selectedDbKey"
                     @update:selected-item="onSelectedDbKey" />
             </DbKeyProvider>
         </b-modal>
@@ -116,7 +116,7 @@
                     collection-name="Data Types"
                     :loading="loadingDatatypes"
                     :items="datatypes"
-                    :current-item-id="selectedDatatype"
+                    :current-item="selectedDatatype"
                     @update:selected-item="onSelectedDatatype" />
             </DatatypesProvider>
         </b-modal>
@@ -186,8 +186,8 @@ export default {
     },
     data: function () {
         return {
-            selectedDbKey: "?",
-            selectedDatatype: "auto",
+            selectedDbKey: { id: "?", text: "unspecified (?)" },
+            selectedDatatype: { id: "auto", text: "Auto-detect" },
             selectedTags: [],
         };
     },
@@ -307,12 +307,12 @@ export default {
             this.runOnSelection(purgeSelectedContent);
         },
         changeDbkeyOfSelected() {
-            this.runOnSelection(changeDbkeyOfSelectedContent, { dbkey: this.selectedDbKey });
-            this.selectedDbKey = "?";
+            this.runOnSelection(changeDbkeyOfSelectedContent, { dbkey: this.selectedDbKey.id });
+            this.selectedDbKey = { id: "?" };
         },
         changeDatatypeOfSelected() {
-            this.runOnSelection(changeDatatypeOfSelectedContent, { datatype: this.selectedDatatype });
-            this.selectedDatatype = "auto";
+            this.runOnSelection(changeDatatypeOfSelectedContent, { datatype: this.selectedDatatype.id });
+            this.selectedDatatype = { id: "auto", text: "Auto-detect" };
         },
         addTagsToSelected() {
             this.runOnSelection(addTagsToSelectedContent, { tags: this.selectedTags });
@@ -354,10 +354,10 @@ export default {
             this.$emit("operation-error", { errorMessage, result });
         },
         onSelectedDbKey(dbkey) {
-            this.selectedDbKey = dbkey.id;
+            this.selectedDbKey = dbkey;
         },
         onSelectedDatatype(datatype) {
-            this.selectedDatatype = datatype.id;
+            this.selectedDatatype = datatype;
         },
 
         // collection creation, fires up a modal
diff --git a/client/src/components/Libraries/LibraryFolder/LibraryFolderDataset/LibraryDataset.vue b/client/src/components/Libraries/LibraryFolder/LibraryFolderDataset/LibraryDataset.vue
index fcf0365d0094..d4cfdedcbd3c 100644
--- a/client/src/components/Libraries/LibraryFolder/LibraryFolderDataset/LibraryDataset.vue
+++ b/client/src/components/Libraries/LibraryFolder/LibraryFolderDataset/LibraryDataset.vue
@@ -83,7 +83,7 @@
                             collection-name="Data Types"
                             :loading="loadingDatatypes"
                             :items="datatypes"
-                            :current-item-id="dataset.file_ext"
+                            :current-item="datatypes?.find((datatype) => datatype.id === dataset.file_ext)"
                             @update:selected-item="onSelectedDatatype" />
                     </DatatypesProvider>
                     <DbKeyProvider
@@ -93,7 +93,7 @@
                             collection-name="Database/Builds"
                             :loading="loadingDbKeys"
                             :items="dbkeys"
-                            :current-item-id="dataset.genome_build"
+                            :current-item="dbkeys?.find((dbkey) => dbkey.id === dataset.genome_build)"
                             @update:selected-item="onSelectedDbKey" />
                     </DbKeyProvider>
                     <b-form-input
diff --git a/client/src/components/SingleItemSelector.vue b/client/src/components/SingleItemSelector.vue
index 5148339547d9..0e7846337252 100644
--- a/client/src/components/SingleItemSelector.vue
+++ b/client/src/components/SingleItemSelector.vue
@@ -5,8 +5,8 @@
             v-if="items"
             v-model="selectedItem"
             :deselect-label="null"
-            track-by="id"
-            label="text"
+            :track-by="trackBy"
+            :label="label"
             :options="items"
             :searchable="true"
             :allow-empty="false"
@@ -54,9 +54,17 @@ export default {
             default: null,
         },
         /** The initially selected item. */
-        currentItemId: {
+        currentItem: {
+            type: Object,
+            default: null,
+        },
+        label: {
+            type: String,
+            default: "text",
+        },
+        trackBy: {
             type: String,
-            required: true,
+            default: "id",
         },
     },
     data() {
@@ -72,7 +80,7 @@ export default {
     },
     watch: {
         items: function () {
-            this.selectedItem = this.items.find((item) => item.id == this.currentItemId);
+            this.selectedItem = this.currentItem;
         },
     },
     methods: {

From 938e5c9e7f8334dea4e2c757a799ac1d16c9b08c Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Thu, 19 Sep 2024 15:09:21 +0200
Subject: [PATCH 15/24] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20replaced=20`Mult?=
 =?UTF-8?q?iselect`=20with=20`SingleItemSelector`,=20revised=20data=20fetc?=
 =?UTF-8?q?hing=20logic,=20improved=20types,=20and=20adjusted=20ui=20in=20?=
 =?UTF-8?q?`DirectoryDatasetPicker`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TopToolbar/DirectoryDatasetPicker.vue     | 99 +++++++++++--------
 1 file changed, 58 insertions(+), 41 deletions(-)

diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
index 0c6ea731b264..dc0e60992f39 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
@@ -11,7 +11,6 @@ import {
     BTabs,
 } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
-import Multiselect from "vue-multiselect";
 
 import { GalaxyApi } from "@/api";
 import { type Option } from "@/components/Form/Elements/FormDrilldown/utilities";
@@ -21,8 +20,9 @@ import { useDbKeyStore } from "@/stores/dbKeyStore";
 
 import FormDrilldown from "@/components/Form/Elements/FormDrilldown/FormDrilldown.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
+import SingleItemSelector from "@/components/SingleItemSelector.vue";
 
-const auto = {
+const autoExtension = {
     id: "auto",
     extension: "auto",
     text: "Auto-detect",
@@ -35,9 +35,21 @@ const auto = {
     descriptionUrl: "",
 };
 
-type GenomesList = { id: string; text: string }[];
-
-type RequestData = Record<string, string | boolean>;
+type DbKey = { id: string; text: string };
+type DbKeyList = DbKey[];
+
+type RequestData = {
+    path: string;
+    source: string;
+    dbkey: string;
+    encoded_folder_id: string;
+    file_type?: string;
+    preserve_dirs?: boolean;
+    link_data: boolean;
+    space_to_tab: boolean;
+    to_posix_lines: boolean;
+    tag_using_filenames: boolean;
+};
 
 interface Props {
     folderId: string;
@@ -57,16 +69,16 @@ const { datatypes, datatypesLoading } = useDetailedDatatypes();
 
 const activeTab = ref(0);
 const importing = ref(false);
-const selectedGenome = ref();
 const paths = ref<string>("");
-const selectedExtension = ref();
 const options = ref<Option[]>([]);
 const optionsLoading = ref(false);
+const selectedDbKey = ref<DbKey>();
+const dbKeyList = ref<DbKeyList>([]);
 const errorMessage = ref<string>("");
 const currentValue = ref<string[]>([]);
-const genomesList = ref<GenomesList>([]);
 const preserveOptions = ref<string[]>([]);
 const extensionsList = ref<DetailedDatatypes[]>([]);
+const selectedExtension = ref<DetailedDatatypes>(autoExtension);
 
 const pathMode = computed(() => {
     return props.target === "path";
@@ -156,15 +168,15 @@ function getFullPathById(id: string): string {
     return traverse(options.value, id);
 }
 
-async function fetchExtAndGenomes() {
+async function fetchExtAndDbKey() {
     try {
         extensionsList.value = datatypes.value;
 
         extensionsList.value.sort((a, b) => (a.extension > b.extension ? 1 : a.extension < b.extension ? -1 : 0));
 
-        extensionsList.value = [auto, ...extensionsList.value];
+        extensionsList.value = [autoExtension, ...extensionsList.value];
 
-        selectedExtension.value = auto;
+        selectedExtension.value = autoExtension;
     } catch (err) {
         console.error(err);
     }
@@ -172,9 +184,11 @@ async function fetchExtAndGenomes() {
     try {
         await dbKeyStore.fetchUploadDbKeys();
 
-        genomesList.value = dbKeyStore.uploadDbKeys;
+        dbKeyList.value = dbKeyStore.uploadDbKeys as DbKeyList;
+
+        selectedDbKey.value = dbKeyStore.uploadDbKeys.find((item: DbKey) => item.id === "?");
 
-        genomesList.value.sort((a, b) => (a.id > b.id ? 1 : a.id < b.id ? -1 : 0));
+        dbKeyList.value.sort((a, b) => (a.id > b.id ? 1 : a.id < b.id ? -1 : 0));
     } catch (err) {
         console.error(err);
     }
@@ -213,7 +227,7 @@ async function importFileOrFolder(validPaths: string[], source: string) {
         const reqData: RequestData = {
             path: path,
             source: source,
-            dbkey: selectedGenome.value,
+            dbkey: selectedDbKey.value?.id || "?",
             encoded_folder_id: props.folderId,
             link_data: preserveOptions.value.includes("link_files"),
             space_to_tab: preserveOptions.value.includes("space_to_tab"),
@@ -246,11 +260,19 @@ watch(
     { immediate: true }
 );
 
+function onSelectDbKey(item: DbKey) {
+    selectedDbKey.value = item;
+}
+
+function onSelectExtension(item: DetailedDatatypes) {
+    selectedExtension.value = item;
+}
+
 watch(
     () => datatypesLoading.value,
     () => {
         if (!datatypesLoading.value) {
-            fetchExtAndGenomes();
+            fetchExtAndDbKey();
         }
     }
 );
@@ -274,7 +296,7 @@ watch(
             All files within the given folders and their sub-folders will be imported into the current folder.
         </BAlert>
 
-        <BFormCheckboxGroup v-model="preserveOptions" switches>
+        <BFormCheckboxGroup v-model="preserveOptions" switches class="directory-dataset-picker-options">
             <BFormCheckbox value="link_files">Link files instead of copying </BFormCheckbox>
             <BFormCheckbox value="to_posix_lines">Convert line endings to POSIX</BFormCheckbox>
             <BFormCheckbox value="space_to_tab">Convert spaces to tabs</BFormCheckbox>
@@ -286,33 +308,23 @@ watch(
 
         <hr />
 
-        You can set extension type and genome for all imported datasets at once:
-        <BFormGroup label="Genome">
-            <Multiselect
-                v-model="selectedGenome"
-                :options="genomesList"
-                label="text"
-                track-by="id"
-                placeholder="Select genome"
-                :close-on-select="true"
-                :preserve-search="true"
-                :searchable="true"
-                :allow-empty="true"
-                :max="1" />
+        You can set database/build and extension type for all imported datasets at once:
+        <BFormGroup label="Database/Build">
+            <SingleItemSelector
+                :current-item="selectedDbKey"
+                collection-name="DB Keys"
+                :items="dbKeyList"
+                @update:selected-item="onSelectDbKey" />
         </BFormGroup>
 
         <BFormGroup label="Extension">
-            <Multiselect
-                v-model="selectedExtension"
-                :options="extensionsList"
+            <SingleItemSelector
+                :current-item="selectedExtension"
+                collection-name="Extensions"
+                :items="extensionsList"
+                track-by="extension"
                 label="extension"
-                track-by="id"
-                placeholder="Select extension"
-                :close-on-select="true"
-                :preserve-search="true"
-                :searchable="true"
-                :allow-empty="true"
-                :max="1" />
+                @update:selected-item="onSelectExtension" />
         </BFormGroup>
 
         <hr />
@@ -334,7 +346,7 @@ watch(
             v-else
             :id="filesMode ? 'files' : 'folders'"
             v-model="currentValue"
-            class="items-list"
+            class="directory-dataset-picker-list"
             show-icons
             :options="options"
             multiple />
@@ -353,7 +365,12 @@ watch(
     display: grid;
     grid-template-rows: max-content 1fr;
 
-    .items-list {
+    .directory-dataset-picker-options {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .directory-dataset-picker-list {
         max-height: 100%;
         overflow-y: auto;
     }

From d74a02564c8194788886bebb0f53536bf36fe249 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 20 Sep 2024 15:24:24 +0200
Subject: [PATCH 16/24] =?UTF-8?q?=E2=9C=A8:=20add=20no-options=20alert=20t?=
 =?UTF-8?q?o=20`FormDrilldown`=20and=20import=20missing=20bootstrap=20comp?=
 =?UTF-8?q?onents?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Elements/FormDrilldown/FormDrilldown.vue  | 39 +++++++++++--------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
index a02f4e4c54f3..6d12579650dd 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { BAlert, BFormCheckbox } from "bootstrap-vue";
 import { computed, type ComputedRef } from "vue";
 
 import { findDescendants, flattenValues, getAllValues, type Option, type Value } from "./utilities";
@@ -93,21 +94,27 @@ function setElementValues(oldArray: string[], newArray: string[], value: string)
 </script>
 
 <template>
-    <div v-if="hasOptions">
-        <b-form-checkbox
-            v-if="multiple"
-            v-localize
-            :checked="selectAllChecked"
-            :indeterminate="selectAllIndeterminate"
-            class="d-inline select-all-checkbox"
-            @change="onSelectAll">
-            Select / Deselect All
-        </b-form-checkbox>
-        <FormDrilldownList
-            :show-icons="showIcons"
-            :multiple="multiple"
-            :current-value="currentValue"
-            :options="options"
-            :handle-click="handleClick" />
+    <div>
+        <div v-if="hasOptions">
+            <BFormCheckbox
+                v-if="multiple"
+                v-localize
+                :checked="selectAllChecked"
+                :indeterminate="selectAllIndeterminate"
+                class="d-inline select-all-checkbox"
+                @change="onSelectAll">
+                Select / Deselect All
+            </BFormCheckbox>
+
+            <FormDrilldownList
+                :show-icons="showIcons"
+                :multiple="multiple"
+                :current-value="currentValue"
+                :options="options"
+                :handle-click="handleClick" />
+        </div>
+        <div v-else>
+            <BAlert show variant="info" class="mt-2"> No options available. </BAlert>
+        </div>
     </div>
 </template>

From bcb9a540b9532a4b77fd446760e57eab81c89ff8 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 20 Sep 2024 15:27:54 +0200
Subject: [PATCH 17/24] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20`DirectoryDatase?=
 =?UTF-8?q?tPicker`=20shows=20error=20on=20fetching=20options=20and=20fix?=
 =?UTF-8?q?=20errors=20when=20there=20is=20no=20option=20available?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TopToolbar/DirectoryDatasetPicker.vue          | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
index dc0e60992f39..60beae545d8c 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
@@ -101,11 +101,9 @@ const importDisable = computed(() => {
     return currentValue.value?.length === 0;
 });
 const okButtonText = computed(() => {
-    if (currentValue.value.length === 0) {
-        return "Import";
-    } else {
-        return `Import ${currentValue.value.length} dataset${currentValue.value.length > 1 ? "s" : ""}`;
-    }
+    const length = currentValue.value?.length || 0;
+
+    return length === 0 ? "Import" : `Import ${length} dataset${length > 1 ? "s" : ""}`;
 });
 
 async function fetchOptions() {
@@ -126,14 +124,14 @@ async function fetchOptions() {
     if (error) {
         console.error(error);
 
-        errorMessage.value = "Failed to load directories";
+        errorMessage.value = "Failed to load directories: " + error?.err_msg;
     }
 
     optionsLoading.value = false;
 }
 
 function mapDataToOptions(data: any): Option[] {
-    return data.map((item: any) => {
+    return data?.map((item: any) => {
         const option: Option = {
             name: item.text,
             fullPath: item.li_attr.full_path,
@@ -343,7 +341,7 @@ watch(
             {{ errorMessage }}
         </BAlert>
         <FormDrilldown
-            v-else
+            v-else-if="!optionsLoading"
             :id="filesMode ? 'files' : 'folders'"
             v-model="currentValue"
             class="directory-dataset-picker-list"

From 1233552455b5cb884dc686122a9eb7eb9831e90c Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Fri, 20 Sep 2024 15:45:47 +0200
Subject: [PATCH 18/24] =?UTF-8?q?=F0=9F=90=9B:=20fix=20`DirectoryDatasetPi?=
 =?UTF-8?q?cker`=20components=20conditions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue      | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
index 60beae545d8c..3ea3f34c3f63 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
@@ -333,15 +333,14 @@ watch(
             v-model="paths"
             placeholder="Absolute paths (or paths relative to Galaxy root) separated by newline"
             rows="5" />
-
-        <BAlert v-if="optionsLoading" variant="info" show>
+        <BAlert v-else-if="optionsLoading" variant="info" show>
             <LoadingSpan message="Loading directories" />
         </BAlert>
         <BAlert v-else-if="errorMessage" variant="danger" show>
             {{ errorMessage }}
         </BAlert>
         <FormDrilldown
-            v-else-if="!optionsLoading"
+            v-else
             :id="filesMode ? 'files' : 'folders'"
             v-model="currentValue"
             class="directory-dataset-picker-list"

From 6f4549f644a7752172cf6e3ea089ee461fa877aa Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 30 Sep 2024 17:53:56 +0200
Subject: [PATCH 19/24] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20add=20unique=20I?=
 =?UTF-8?q?Ds=20to=20drilldown=20options=20in=20`FormDrilldownOption`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Form/Elements/FormDrilldown/FormDrilldownOption.vue          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
index ad4f88184a73..858cee8cbe45 100644
--- a/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
+++ b/client/src/components/Form/Elements/FormDrilldown/FormDrilldownOption.vue
@@ -72,6 +72,7 @@ onMounted(() => {
         <span v-if="!hasOptions" class="align-indent"></span>
         <component
             :is="isComponent"
+            :id="`drilldown-option-${option.name}`"
             class="drilldown-option d-inline"
             value="true"
             :disabled="option.disabled"

From 9fd2c0c60e0c4e834ce01a11bd15193d0e522a52 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 30 Sep 2024 17:55:42 +0200
Subject: [PATCH 20/24] =?UTF-8?q?=F0=9F=8E=A8:=20update=20navigation=20sel?=
 =?UTF-8?q?ectors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/utils/navigation/navigation.yml        | 15 +++++++++++----
 .../selenium/test_library_to_collections.py       |  4 ++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 69e06bdb21e3..1991d9c35a94 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -1031,7 +1031,7 @@ libraries:
       add_to_history_collection: '.add-to-history-collection'
       # TODO: Most of these aren't very good selectors but the same DOM elements
       # are reused without adding specific classes, IDs, or roles to anything.
-      import_modal: '.modal'
+      import_modal: '.directory-dataset-picker'
       import_datasets_from_history_modal: '.selection-dialog-modal'
       import_datasets_from_history_modal_history_search: '.selection-dialog-modal .search-query'
       import_datasets_from_history_modal_dataset_search: '.selection-dialog-modal input[placeholder="search datasets"]'
@@ -1040,8 +1040,15 @@ libraries:
       import_datasets_from_history_modal_select_list_item_by_index: '.selection-dialog-modal table tbody tr[aria-rowindex="${row_index}"] td[aria-colindex="1"]'
       import_datasets_from_history_modal_ok: '.selection-dialog-modal [data-description="selection dialog ok"]'
       import_datasets_from_history_modal_cancel: '.selection-dialog-modal [data-description="selection dialog cancel"]'
-      import_datasets_ok_button: '.modal-footer .buttons #button-0'
-      import_datasets_cancel_button: '.modal-footer .buttons #button-1'
+      add_to_history_as_collection:
+        type: xpath
+        selector: '//button[contains(text(), "Continue")]'
+      import_datasets_ok_button:
+        type: xpath
+        selector: '//button[contains(text(), "Import")]'
+      import_datasets_cancel_button:
+        type: xpath
+        selector: '//button[contains(text(), "Close")]'
       export_to_history_options: '#library-collection-type-select'
       export_to_history_paired_option: 'option[value="${collection_option}"]'
       export_to_history_collection_name: '.collection-name'
@@ -1066,7 +1073,7 @@ libraries:
       delete_btn: '.toolbtn-bulk-delete'
       toast_msg: '.b-toast'
       toast_warning: '.b-toast-warning'
-      select_import_dir_item: 'li[full_path="${name}"] .jstree-anchor'
+      select_import_dir_item: '[for="drilldown-option-${name}"]'
       import_dir_btn:
         type: xpath
         selector: '//button[contains(text(), "Import")]'
diff --git a/lib/galaxy_test/selenium/test_library_to_collections.py b/lib/galaxy_test/selenium/test_library_to_collections.py
index 2b2359c3088c..e46ccc905ccc 100644
--- a/lib/galaxy_test/selenium/test_library_to_collections.py
+++ b/lib/galaxy_test/selenium/test_library_to_collections.py
@@ -63,7 +63,7 @@ def collection_export(self, is_new_history=False, collection_option=None):
                 collection_option=collection_option
             ).wait_for_and_click()
         self.screenshot(f"libraries_to_collection_landing_is_new_history={is_new_history}")
-        self.components.libraries.folder.import_datasets_ok_button.wait_for_and_click()
+        self.components.libraries.folder.add_to_history_as_collection.wait_for_and_click()
         self.build_collection_and_assert()
         if is_new_history:
             assert self.history_panel_name_element().text == random_name
@@ -78,7 +78,7 @@ def list_of_pairs_export(self, is_new_history=False):
             collection_option="list:paired"
         ).wait_for_and_click()
         self.screenshot(f"test_export_pairs_list={is_new_history}")
-        self.components.libraries.folder.import_datasets_ok_button.wait_for_and_click()
+        self.components.libraries.folder.add_to_history_as_collection.wait_for_and_click()
         self.components.libraries.folder.clear_filters.wait_for_and_click()
         self.collection_builder_click_paired_item("forward", 0)
         self.collection_builder_click_paired_item("reverse", 1)

From 60ea778a1e2a26ac0a682174e3a38603ceb6c4a4 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 30 Sep 2024 22:08:37 +0200
Subject: [PATCH 21/24] =?UTF-8?q?=F0=9F=8E=A8:=20update=20navigation=20sel?=
 =?UTF-8?q?ector=20for=20non=20exists=20user=20import=20directory=20in=20l?=
 =?UTF-8?q?ibraries?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/utils/navigation/navigation.yml                 | 4 +++-
 test/integration_selenium/test_user_library_permissions.py | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 1991d9c35a94..baec643030f6 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -1072,7 +1072,9 @@ libraries:
       download_button: '#download-btn'
       delete_btn: '.toolbtn-bulk-delete'
       toast_msg: '.b-toast'
-      toast_warning: '.b-toast-warning'
+      alert_not_exists_user_import_dir:
+        type: xpath
+        selector: //div[contains(@class, "alert-danger") and contains(normalize-space(text()), "Your user import directory does not exist")]
       select_import_dir_item: '[for="drilldown-option-${name}"]'
       import_dir_btn:
         type: xpath
diff --git a/test/integration_selenium/test_user_library_permissions.py b/test/integration_selenium/test_user_library_permissions.py
index 328c67b84a2f..c3c24962eff4 100644
--- a/test/integration_selenium/test_user_library_permissions.py
+++ b/test/integration_selenium/test_user_library_permissions.py
@@ -57,7 +57,7 @@ def test_user_library_import_dir_warning(self):
         self.wait_for_selector_absent_or_hidden(self.modal_body_selector())
 
         # assert 'user import folder was not created' warning
-        self.components.libraries.folder.toast_warning.wait_for_visible()
+        self.components.libraries.folder.alert_not_exists_user_import_dir.wait_for_visible()
 
     @selenium_test
     def test_user_library_dataset_permissions(self):

From 5859880eb08bdab725d36595ce73c5b3c7bd96af Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 7 Oct 2024 00:26:48 +0200
Subject: [PATCH 22/24] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20improve=20`Libra?=
 =?UTF-8?q?ries/LibraryFolder/FolderTopBar`=20`ImportSource`=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: David López <46503462+davelopez@users.noreply.github.com>
---
 .../Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
index ca7b200fb5b0..d102b857b2ec 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
@@ -63,7 +63,7 @@ const { config, isConfigLoaded } = useConfig();
 const userStore = useUserStore();
 const { isAdmin } = storeToRefs(userStore);
 
-type ImportSource = "history" | "userdir" | "importdir" | "path" | "";
+type ImportSource = "history" | "userdir" | "importdir" | "path" | undefined;
 const modalShow = ref<ImportSource>();
 const progress = ref(false);
 const progressNote = ref("");
@@ -200,7 +200,7 @@ async function importToHistoryModal(isCollection: boolean) {
     }
 }
 
-function onAddDatasets(source: ImportSource = "") {
+function onAddDatasets(source?: ImportSource) {
     modalShow.value = source;
 }
 

From a44d583e9d098fe45961d6eede523e5f5ad9a826 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 7 Oct 2024 00:31:59 +0200
Subject: [PATCH 23/24] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20update`mapDataTo?=
 =?UTF-8?q?Options`=20method=20input=20type,=20=20in=20use=20`errorMessage?=
 =?UTF-8?q?AsString`=20and=20drop=20unnessary=20try/catch=20blocks=20in=20?=
 =?UTF-8?q?`DirectoryDatasetPicker`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: David López <46503462+davelopez@users.noreply.github.com>
---
 .../TopToolbar/DirectoryDatasetPicker.vue     | 35 ++++++++-----------
 1 file changed, 14 insertions(+), 21 deletions(-)

diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
index 3ea3f34c3f63..31e0d011a69b 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
@@ -13,10 +13,12 @@ import {
 import { computed, ref, watch } from "vue";
 
 import { GalaxyApi } from "@/api";
+import { type components } from "@/api/schema";
 import { type Option } from "@/components/Form/Elements/FormDrilldown/utilities";
 import { type DetailedDatatypes, useDetailedDatatypes } from "@/composables/datatypes";
 import { Toast } from "@/composables/toast";
 import { useDbKeyStore } from "@/stores/dbKeyStore";
+import { errorMessageAsString } from "@/utils/simple-error";
 
 import FormDrilldown from "@/components/Form/Elements/FormDrilldown/FormDrilldown.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
@@ -35,6 +37,7 @@ const autoExtension = {
     descriptionUrl: "",
 };
 
+type ListUriResponse = components["schemas"]["ListUriResponse"];
 type DbKey = { id: string; text: string };
 type DbKeyList = DbKey[];
 
@@ -119,18 +122,16 @@ async function fetchOptions() {
         },
     });
 
-    options.value = mapDataToOptions(data);
+    options.value = mapDataToOptions(data as ListUriResponse);
 
     if (error) {
-        console.error(error);
-
-        errorMessage.value = "Failed to load directories: " + error?.err_msg;
+        errorMessage.value = errorMessageAsString(error, "Failed to load directories.");
     }
 
     optionsLoading.value = false;
 }
 
-function mapDataToOptions(data: any): Option[] {
+function mapDataToOptions(data: ListUriResponse): Option[] {
     return data?.map((item: any) => {
         const option: Option = {
             name: item.text,
@@ -167,29 +168,21 @@ function getFullPathById(id: string): string {
 }
 
 async function fetchExtAndDbKey() {
-    try {
-        extensionsList.value = datatypes.value;
+    extensionsList.value = datatypes.value;
 
-        extensionsList.value.sort((a, b) => (a.extension > b.extension ? 1 : a.extension < b.extension ? -1 : 0));
+    extensionsList.value.sort((a, b) => (a.extension > b.extension ? 1 : a.extension < b.extension ? -1 : 0));
 
-        extensionsList.value = [autoExtension, ...extensionsList.value];
+    extensionsList.value = [autoExtension, ...extensionsList.value];
 
-        selectedExtension.value = autoExtension;
-    } catch (err) {
-        console.error(err);
-    }
+    selectedExtension.value = autoExtension;
 
-    try {
-        await dbKeyStore.fetchUploadDbKeys();
+    await dbKeyStore.fetchUploadDbKeys();
 
-        dbKeyList.value = dbKeyStore.uploadDbKeys as DbKeyList;
+    dbKeyList.value = dbKeyStore.uploadDbKeys as DbKeyList;
 
-        selectedDbKey.value = dbKeyStore.uploadDbKeys.find((item: DbKey) => item.id === "?");
+    selectedDbKey.value = dbKeyStore.uploadDbKeys.find((item: DbKey) => item.id === "?");
 
-        dbKeyList.value.sort((a, b) => (a.id > b.id ? 1 : a.id < b.id ? -1 : 0));
-    } catch (err) {
-        console.error(err);
-    }
+    dbKeyList.value.sort((a, b) => (a.id > b.id ? 1 : a.id < b.id ? -1 : 0));
 }
 
 async function onImport() {

From 19d2ba42f91ef52b79d60ae10c7e97399feeb830 Mon Sep 17 00:00:00 2001
From: Alireza Heidari <itisalirh@gmail.com>
Date: Mon, 7 Oct 2024 13:48:39 +0200
Subject: [PATCH 24/24] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20using=20any=20fo?=
 =?UTF-8?q?r=20`fetchOptions`=20data=20in=20`DirectoryDatasetPicker`=20bec?=
 =?UTF-8?q?ause=20there=20is=20no=20model=20for=20the=20jstree=20response?=
 =?UTF-8?q?=20in=20the=20backend?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: David López <46503462+davelopez@users.noreply.github.com>
---
 .../LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue     | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
index 31e0d011a69b..80423a10e859 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/DirectoryDatasetPicker.vue
@@ -13,7 +13,6 @@ import {
 import { computed, ref, watch } from "vue";
 
 import { GalaxyApi } from "@/api";
-import { type components } from "@/api/schema";
 import { type Option } from "@/components/Form/Elements/FormDrilldown/utilities";
 import { type DetailedDatatypes, useDetailedDatatypes } from "@/composables/datatypes";
 import { Toast } from "@/composables/toast";
@@ -37,7 +36,6 @@ const autoExtension = {
     descriptionUrl: "",
 };
 
-type ListUriResponse = components["schemas"]["ListUriResponse"];
 type DbKey = { id: string; text: string };
 type DbKeyList = DbKey[];
 
@@ -122,7 +120,7 @@ async function fetchOptions() {
         },
     });
 
-    options.value = mapDataToOptions(data as ListUriResponse);
+    options.value = mapDataToOptions(data);
 
     if (error) {
         errorMessage.value = errorMessageAsString(error, "Failed to load directories.");
@@ -131,7 +129,7 @@ async function fetchOptions() {
     optionsLoading.value = false;
 }
 
-function mapDataToOptions(data: ListUriResponse): Option[] {
+function mapDataToOptions(data: any): Option[] {
     return data?.map((item: any) => {
         const option: Option = {
             name: item.text,