everything except legacy navigation plugin

client/src/components/Upload/Collection.vue

@@ -122,13 +122,11 @@ import _ from "underscore";
 import { getGalaxyInstance } from "app";
 import UploadRow from "mvc/upload/collection/collection-row";
 import UploadBoxMixin from "./UploadBoxMixin";
-import Vue from "vue";
-import BootstrapVue from "bootstrap-vue";
-
-Vue.use(BootstrapVue);
+import { BButton } from "bootstrap-vue";
 
 export default {
     mixins: [UploadBoxMixin],
+    components: { BButton },
     data() {
         return {
             topInfo: "",
@@ -213,6 +211,14 @@ export default {
         appModel() {
             return this.app.model;
         },
+        history_id() {
+            const storeId = this.$store?.getters["betaHistory/currentHistoryId"];
+            if (storeId) {
+                return storeId;
+            }
+            const legacyId = this.app.currentHistory();
+            return legacyId;
+        },
     },
     watch: {
         extension: function (value) {
@@ -274,7 +280,7 @@ export default {
             });
             this.appModel.set({ percentage: 0, status: "success" });
             this.counterRunning = this.counterAnnounce;
-            this.history_id = this.app.currentHistory();
+
             // package ftp files separately, and remove them from queue
             this._uploadFtp();
             this.uploadbox.start();

client/src/components/Upload/Default.test.js

@@ -1,14 +1,14 @@
 import Default from "./Default.vue";
 import { mountWithApp } from "./testHelpers";
-import { __RewireAPI__ as rewire } from "./Default";
 import Backbone from "backbone";
 
-describe("Default.vue", () => {
-    beforeEach(() => {
-        // Use of select2 in default-row requires this mock.
-        rewire.__Rewire__("UploadRow", Backbone.View);
-    });
+jest.mock("app");
 
+import UploadRow from "mvc/upload/default/default-row";
+jest.mock("mvc/upload/default/default-row");
+UploadRow.mockImplementation(Backbone.View);
+
+describe("Default.vue", () => {
     it("loads with correct initial state", async () => {
         const { wrapper } = mountWithApp(Default);
         expect(wrapper.vm.counterAnnounce).toBe(0);

client/src/components/Upload/Default.vue

@@ -114,13 +114,11 @@ import _ from "underscore";
 import { getGalaxyInstance } from "app";
 import UploadRow from "mvc/upload/default/default-row";
 import UploadBoxMixin from "./UploadBoxMixin";
-import Vue from "vue";
-import BootstrapVue from "bootstrap-vue";
-
-Vue.use(BootstrapVue);
+import { BButton } from "bootstrap-vue";
 
 export default {
     mixins: [UploadBoxMixin],
+    components: { BButton },
     props: {
         multiple: {
             type: Boolean,
@@ -210,6 +208,13 @@ export default {
         appModel() {
             return this.app.model;
         },
+        history_id() {
+            const storeId = this.$store?.getters["betaHistory/currentHistoryId"];
+            if (storeId) {
+                return storeId;
+            }
+            return this.app.currentHistoryId;
+        },
     },
     watch: {
         extension: function (value) {
@@ -265,7 +270,7 @@ export default {
 
                 this.appModel.set({ percentage: 0, status: "success" });
                 this.counterRunning = this.counterAnnounce;
-                this.history_id = this.app.currentHistory();
+
                 // package ftp files separately, and remove them from queue
                 this._uploadFtp();
 

client/src/components/Upload/RulesInput.vue

@@ -74,8 +74,6 @@
 import _l from "utils/localization";
 import { getGalaxyInstance } from "app";
 import UploadBoxMixin from "./UploadBoxMixin";
-import Vue from "vue";
-import BootstrapVue from "bootstrap-vue";
 import UploadUtils from "mvc/upload/upload-utils";
 import axios from "axios";
 import { getAppRoot } from "onload/loadConfig";
@@ -83,13 +81,13 @@ import { filesDialog } from "utils/data";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faEdit } from "@fortawesome/free-solid-svg-icons";
+import { BButton, BLink } from "bootstrap-vue";
+
 library.add(faEdit);
 
-Vue.use(BootstrapVue);
-
 export default {
-    components: { FontAwesomeIcon },
     mixins: [UploadBoxMixin],
+    components: { BLink, BButton, FontAwesomeIcon },
     data() {
         return {
             l: _l,

client/src/components/Upload/UploadModal.test.js

@@ -1,8 +1,9 @@
 import MockAdapter from "axios-mock-adapter";
 import axios from "axios";
 import UploadModal from "./UploadModal.vue";
-
+import store from "../../store";
 import { shallowMount, createLocalVue } from "@vue/test-utils";
+import BootstrapVue from "bootstrap-vue";
 
 jest.mock("app");
 
@@ -13,11 +14,11 @@ const propsData = {
 
 describe("UploadModal.vue", () => {
     let wrapper;
-    let localVue;
     let axiosMock;
 
-    beforeEach(() => {
+    beforeEach(async () => {
         axiosMock = new MockAdapter(axios);
+
         const fastaResponse = {
             description_url: "https://wiki.galaxyproject.org/Learn/Datatypes#Fasta",
             display_in_upload: true,
@@ -26,7 +27,9 @@ describe("UploadModal.vue", () => {
                 "A sequence in FASTA format consists of a single-line description, followed by lines of sequence data. The first character of the description line is a greater-than ('>') symbol in the first column. All lines should be shorter than 80 characters.",
         };
         const datatypesResponse = [fastaResponse];
+
         axiosMock.onGet(`/api/datatypes?extension_only=False`).reply(200, datatypesResponse);
+
         const genomesResponse = [
             ["Scarlet macaw Jun 2013 (SMACv1.1/araMac1) (araMac1)", "araMac1"],
             ["Cat Dec. 2008 (NHGRI/GTB V17e/felCat4) (felCat4)", "felCat4"],
@@ -34,15 +37,19 @@ describe("UploadModal.vue", () => {
         ];
         axiosMock.onGet(`/api/genomes`).reply(200, genomesResponse);
 
-        localVue = createLocalVue();
-        wrapper = shallowMount(UploadModal, {
-            propsData: propsData,
-            localVue: localVue,
+        const localVue = createLocalVue();
+        localVue.use(BootstrapVue);
+
+        wrapper = await shallowMount(UploadModal, {
+            store,
+            propsData,
+            localVue,
         });
     });
 
     afterEach(() => {
         axiosMock.restore();
+        axiosMock.reset();
     });
 
     it("should load with correct defaults", async () => {
@@ -51,16 +58,12 @@ describe("UploadModal.vue", () => {
     });
 
     it("should fetch datatypes and parse them", async () => {
-        await localVue.nextTick();
-        await localVue.nextTick();
         expect(wrapper.vm.listExtensions.length).toBe(2);
         expect(wrapper.vm.listExtensions[0].id).toBe("auto");
         expect(wrapper.vm.listExtensions[1].id).toBe("fasta");
     });
 
     it("should fetch genomes and parse them", async () => {
-        await localVue.nextTick();
-        await localVue.nextTick();
         expect(wrapper.vm.listGenomes.length).toBe(3);
     });
 });

client/src/components/Upload/UploadModal.vue

@@ -35,11 +35,8 @@
 </template>
 
 <script>
-import Backbone from "backbone";
-import $ from "jquery";
 import _l from "utils/localization";
-import Vue from "vue";
-import BootstrapVue from "bootstrap-vue";
+import Backbone from "backbone";
 import { getGalaxyInstance } from "app";
 import UploadUtils from "mvc/upload/upload-utils";
 import { getDatatypesMapper } from "components/Datatypes";
@@ -48,8 +45,8 @@ import Collection from "./Collection";
 import Default from "./Default";
 import RulesInput from "./RulesInput";
 import LoadingSpan from "components/LoadingSpan";
-
-Vue.use(BootstrapVue);
+import { mapState } from "vuex";
+import { BModal, BTabs, BTab } from "bootstrap-vue";
 
 export default {
     components: {
@@ -58,6 +55,9 @@ export default {
         Default,
         RulesInput,
         LoadingSpan,
+        BModal,
+        BTabs,
+        BTab
     },
     props: {
         modalStatic: {
@@ -121,8 +121,6 @@ export default {
         return {
             id: "",
             title: _l("Download from web or upload from disk"),
-            historyAvailable: false,
-            currentUser: null,
             listGenomes: [],
             listExtensions: [],
             genomesSet: false,
@@ -131,7 +129,7 @@ export default {
             datatypesMapperReady: true,
         };
     },
-    created: function () {
+    created() {
         this.model = new Backbone.Model({
             label: "Load Data",
             percentage: 0,
@@ -139,7 +137,6 @@ export default {
             onunload: function () {},
             onclick: function () {},
         });
-        $(window).on("beforeunload", () => this.model.get("onunload")());
 
         // load extensions
         UploadUtils.getUploadDatatypes(
@@ -157,7 +154,6 @@ export default {
             this.listGenomes = listGenomes;
         }, this.defaultGenome);
 
-        this.initStateWhenHistoryReady();
         if (this.formats !== null) {
             this.datatypesMapperReady = false;
             getDatatypesMapper().then((datatypesMapper) => {
@@ -168,13 +164,39 @@ export default {
             this.datatypesMapperReady = true;
         }
     },
+    beforeDestroy() {
+        const modelUnload = this.model.get("onunload");
+        modelUnload();
+    },
     computed: {
+        ...mapState("user", {
+            currentUserId: (state) => state.currentUser.id,
+        }),
+
+        currentHistoryId() {
+            // TODO: currentHistory is only in Vuex if beta is enabled
+            // Remove when no longer in beta
+            if ("betaHistory/currentHistoryId" in this.$store.getters) {
+                return this.$store.getters["betaHistory/currentHistoryId"];
+            } else {
+                const Galaxy = getGalaxyInstance();
+                const legacyId = Galaxy.currHistoryPanel?.model.get("id");
+                return legacyId;
+            }
+        },
+
+        historyAvailable() {
+            return Boolean(this.currentHistoryId);
+        },
+
         ready() {
             return this.genomesSet && this.extensionsSet && this.historyAvailable && this.datatypesMapperReady;
         },
+
         unrestricted() {
             return this.formats === null && this.multiple;
         },
+
         effectiveExtensions() {
             if (this.formats === null || !this.datatypesMapperReady) {
                 return this.listExtensions;
@@ -243,25 +265,10 @@ export default {
                 this.hide();
             }
         },
-        initStateWhenHistoryReady() {
-            const Galaxy = getGalaxyInstance();
-            if (!Galaxy.currHistoryPanel || !Galaxy.currHistoryPanel.model) {
-                window.setTimeout(() => {
-                    this.initStateWhenHistoryReady();
-                }, 500);
-                return;
-            }
-            this.historyAvailable = true;
-            this.currentUser = Galaxy.user.id;
-        },
         currentFtp: function () {
-            return this.currentUser && this.ftpUploadSite;
-        },
-        /** Refresh user and current history */
-        currentHistory: function () {
-            const Galaxy = getGalaxyInstance();
-            return this.currentUser && Galaxy.currHistoryPanel.model.get("id");
+            return this.currentUserId && this.ftpUploadSite;
         },
+
         /**
          * Package API data from array of models
          * @param{Array} items - Upload items/rows filtered from a collection
@@ -271,7 +278,7 @@ export default {
             var data = {
                 payload: {
                     tool_id: "upload1",
-                    history_id: history_id || this.currentHistory(),
+                    history_id: history_id || this.currentHistoryId,
                     inputs: {},
                 },
                 files: [],
@@ -335,5 +342,3 @@ export default {
     },
 };
 </script>
-
-<style></style>

client/src/components/Upload/config.js

@@ -4,7 +4,7 @@ import { getAppRoot } from "onload";
 export function initializeUploadDefaults(propsData = {}) {
     const Galaxy = getGalaxyInstance();
     const appRoot = getAppRoot();
-    return Object.assign(propsData, {
+    return Object.assign({}, propsData, {
         uploadPath: Galaxy.config.nginx_upload_path || `${appRoot}api/tools`,
         chunkUploadSize: Galaxy.config.chunk_upload_size,
         fileSourcesConfigured: Galaxy.config.file_sources_configured,

client/src/components/Upload/mount.js

@@ -1,6 +1,7 @@
 import Vue from "vue";
 import UploadModal from "./UploadModal";
 import { initializeUploadDefaults } from "./config";
+import store from "../../store";
 
 export function mount(propsData = {}) {
     propsData = initializeUploadDefaults(propsData);
@@ -9,5 +10,6 @@ export function mount(propsData = {}) {
     document.getElementsByTagName("body")[0].appendChild(vm);
     new instance({
         propsData: propsData,
+        store,
     }).$mount(vm);
 }

client/src/components/Upload/testHelpers.js

@@ -2,10 +2,10 @@ import _ from "underscore";
 import Backbone from "backbone";
 import "utils/uploadbox";
 import { mount, createLocalVue } from "@vue/test-utils";
-import { getNewAttachNode } from "jest/helpers";
+import BootstrapVue from "bootstrap-vue";
 
-export function mountWithApp(component, options = {}, propsData_ = {}) {
-    const app = _.defaults(options, {
+export const createMockApp = (options = {}) => {
+    return _.defaults(options, {
         defaultExtension: "auto",
         currentFtp: () => {
             return "ftp://localhost";
@@ -32,15 +32,22 @@ export function mountWithApp(component, options = {}, propsData_ = {}) {
             },
         ],
     });
+};
+
+export function mountWithApp(component, options = {}, propsData_ = {}) {
+    const app = createMockApp(options);
     const propsData = _.defaults(propsData_, { app });
+
     const localVue = createLocalVue();
+    localVue.use(BootstrapVue);
+
     const wrapper = mount(component, {
         propsData,
         localVue,
-        attachTo: getNewAttachNode(),
         stubs: {
             select2: true,
         },
     });
+
     return { wrapper, localVue };
 }