Replace History Dataset Picker in Library Folder

client/src/components/FilesDialog/FilesDialog.test.ts

@@ -4,7 +4,7 @@ import flushPromises from "flush-promises";
 import { getLocalVue } from "tests/jest/helpers";
 
 import { useServerMock } from "@/api/client/__mocks__";
-import { SELECTION_STATES, type SelectionItem } from "@/components/SelectionDialog/selectionTypes";
+import { SELECTION_STATES, type SelectionItem, type SelectionState } from "@/components/SelectionDialog/selectionTypes";
 
 /**
  * The following imports mock a remote file resource directory structure,
@@ -57,7 +57,7 @@ jest.mock("@/composables/config", () => ({
 const { server, http } = useServerMock();
 
 interface RowElement extends SelectionItem, Element {
-    _rowVariant: string;
+    _rowVariant: SelectionState;
 }
 
 function paramsToKey(query: { target?: string | null; recursive?: string | null; writeable?: string | null }): string {
@@ -392,7 +392,7 @@ class Utils {
     }
 
     expectSelectAllIconStatusToBe(status: string) {
-        expect(this.getSelectionDialog().props("selectAllIcon")).toBe(status);
+        expect(this.getSelectionDialog().props("selectAllVariant")).toBe(status);
     }
 
     expectNoErrorMessage() {

client/src/components/FilesDialog/FilesDialog.vue

@@ -16,6 +16,7 @@ import {
     type ItemsProviderContext,
     SELECTION_STATES,
     type SelectionItem,
+    type SelectionState,
 } from "@/components/SelectionDialog/selectionTypes";
 import { useConfig } from "@/composables/config";
 import { useFileSources } from "@/composables/fileSources";
@@ -73,7 +74,7 @@ const showDetails = ref(true);
 const isBusy = ref(false);
 const currentDirectory = ref<SelectionItem>();
 const showFTPHelper = ref(false);
-const selectAllIcon = ref(SELECTION_STATES.UNSELECTED);
+const selectAllIcon = ref<SelectionState>(SELECTION_STATES.UNSELECTED);
 const urlTracker = ref(new UrlTracker(""));
 const totalItems = ref(0);
 
@@ -415,7 +416,7 @@ onMounted(() => {
         :modal-static="modalStatic"
         :multiple="multiple"
         :options-show="optionsShow"
-        :select-all-icon="selectAllIcon"
+        :select-all-variant="selectAllIcon"
         :show-select-icon="undoShow && multiple"
         :undo-show="undoShow"
         @onCancel="() => (modalShow = false)"

client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue

@@ -4,15 +4,15 @@ import { faBook, faCaretDown, faDownload, faHome, faPlus, faTrash } from "@forta
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BDropdown, BDropdownDivider, BDropdownGroup, BDropdownItem, BFormCheckbox } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
-import { computed, onMounted, ref } from "vue";
+import { computed, ref } from "vue";
 
-import { getGalaxyInstance } from "@/app";
 import { Services } from "@/components/Libraries/LibraryFolder/services";
 import mod_add_datasets from "@/components/Libraries/LibraryFolder/TopToolbar/add-datasets";
 import { deleteSelectedItems } from "@/components/Libraries/LibraryFolder/TopToolbar/delete-selected";
 import download from "@/components/Libraries/LibraryFolder/TopToolbar/download";
 import mod_import_collection from "@/components/Libraries/LibraryFolder/TopToolbar/import-to-history/import-collection";
 import mod_import_dataset from "@/components/Libraries/LibraryFolder/TopToolbar/import-to-history/import-dataset";
+import { useConfig } from "@/composables/config";
 import { type DetailedDatatypes, useDetailedDatatypes } from "@/composables/datatypes";
 import { Toast } from "@/composables/toast";
 import { useDbKeyStore } from "@/stores/dbKeyStore";
@@ -21,6 +21,7 @@ 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 HistoryDatasetPicker from "@/components/Libraries/LibraryFolder/TopToolbar/HistoryDatasetPicker.vue";
 
 library.add(faBook, faCaretDown, faDownload, faHome, faPlus, faTrash);
 
@@ -51,18 +52,18 @@ const emit = defineEmits<{
     (e: "update:includeDeleted", value: boolean): void;
 }>();
 
+const { config, isConfigLoaded } = useConfig();
+
 const userStore = useUserStore();
 const { isAdmin } = storeToRefs(userStore);
 
 const { datatypes } = useDetailedDatatypes();
 
 const dbKeyStore = useDbKeyStore();
 
-const libraryImportDir = ref(false);
-const allowLibraryPathPaste = ref(false);
+const modalShow = ref("");
 const genomesList = ref<GenomesList>([]);
 const extensionsList = ref<DetailedDatatypes[]>([]);
-const userLibraryImportDirAvailable = ref(false);
 const auto = ref({
     id: "auto",
     extension: "auto",
@@ -76,18 +77,19 @@ const auto = ref({
     description_url: "",
 });
 
-const Galaxy = getGalaxyInstance();
-
 const services = new Services();
 
+const libraryImportDir = computed(() => isConfigLoaded && config.value?.library_import_dir);
+const allowLibraryPathPaste = computed(() => isConfigLoaded && config.value?.allow_library_path_paste);
+const userLibraryImportDirAvailable = computed(() => isConfigLoaded && config.value?.user_library_import_dir_available);
 const containsFileOrFolder = computed(() => {
     return props.folderContents.find((el) => el.type === "folder" || el.type === "file");
 });
 const canDelete = computed(() => {
     return !!(containsFileOrFolder.value && isAdmin.value);
 });
 const datasetManipulation = computed(() => {
-    return !!(containsFileOrFolder.value && Galaxy.user);
+    return !!(containsFileOrFolder.value && userStore.currentUser);
 });
 const totalRows = computed(() => {
     return props.metadata?.total_rows ?? 0;
@@ -201,6 +203,10 @@ async function importToHistoryModal(isCollection: boolean) {
     }
 }
 
+function onAddDatasets(source: string = "") {
+    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();
@@ -240,12 +246,6 @@ async function fetchExtAndGenomes() {
         console.error(err);
     }
 }
-
-onMounted(async () => {
-    libraryImportDir.value = Galaxy.config.library_import_dir;
-    allowLibraryPathPaste.value = Galaxy.config.allow_library_path_paste;
-    userLibraryImportDirAvailable.value = Galaxy.config.user_library_import_dir_available;
-});
 </script>
 
 <template>
@@ -285,7 +285,7 @@ onMounted(async () => {
                             <FontAwesomeIcon :icon="faCaretDown" />
                         </template>
 
-                        <BDropdownItem @click="addDatasets('history')"> from History </BDropdownItem>
+                        <BDropdownItem @click="onAddDatasets('history')"> from History </BDropdownItem>
 
                         <BDropdownItem v-if="userLibraryImportDirAvailable" @click="addDatasets('userdir')">
                             from User Directory
@@ -356,5 +356,11 @@ onMounted(async () => {
             v-if="props.metadata && props.metadata.full_path"
             :full_path="props.metadata.full_path"
             :current-id="props.folderId" />
+
+        <HistoryDatasetPicker
+            v-if="modalShow === 'history'"
+            :folder-id="props.folderId"
+            @onClose="onAddDatasets"
+            @reload="emit('fetchFolderContents')" />
     </div>
 </template>