Merge pull request #15245 from ElectronicBlueberry/upload-modal-refactor

Fix UploadModalContent "__v_isRef" is not defined

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

@@ -1,9 +1,9 @@
 import Collection from "./Collection.vue";
-import { mountWithApp } from "./testHelpers";
+import { mountWithDetails } from "./testHelpers";
 
 describe("Collection.vue", () => {
     it("loads with correct initial state", async () => {
-        const { wrapper } = mountWithApp(Collection);
+        const { wrapper } = mountWithDetails(Collection);
         expect(wrapper.vm.counterAnnounce).toBe(0);
         expect(wrapper.vm.showHelper).toBe(true);
         expect(wrapper.vm.extensions[0].id).toBe("ab1");
@@ -14,21 +14,19 @@ describe("Collection.vue", () => {
     });
 
     it("does render FTP is site set", async () => {
-        const { wrapper } = mountWithApp(Collection);
+        const { wrapper } = mountWithDetails(Collection);
         expect(wrapper.find("#btn-ftp").element).toBeVisible();
     });
 
     it("doesn't render FTP is no site set", async () => {
-        const { wrapper } = mountWithApp(Collection, {
-            currentFtp: () => {
-                return null;
-            },
+        const { wrapper } = mountWithDetails(Collection, {
+            currentFtp: null,
         });
         expect(wrapper.findAll("#btn-ftp").length).toBe(0);
     });
 
     it("resets properly", async () => {
-        const { wrapper, localVue } = mountWithApp(Collection);
+        const { wrapper, localVue } = mountWithDetails(Collection);
         expect(wrapper.vm.showHelper).toBe(true);
         await localVue.nextTick();
         await wrapper.find("#btn-new").trigger("click");
@@ -43,7 +41,7 @@ describe("Collection.vue", () => {
     });
 
     it("respects lazyLoadMax limit", async () => {
-        const { wrapper, localVue } = mountWithApp(Collection, {}, { lazyLoadMax: 2 });
+        const { wrapper, localVue } = mountWithDetails(Collection, {}, { lazyLoadMax: 2 });
         expect(wrapper.findAll(".ui-limitloader").length).toBe(1);
         await localVue.nextTick();
         await wrapper.find("#btn-new").trigger("click");

client/src/components/Upload/Collection.vue

@@ -134,8 +134,8 @@ export default {
             uploadUrl: null,
             topInfo: "",
             showHelper: true,
-            extension: this.app.defaultExtension,
-            genome: this.app.defaultDbKey,
+            extension: this.details.defaultExtension,
+            genome: this.details.defaultDbKey,
             collectionType: "list",
             listExtensions: [],
             listGenomes: [],
@@ -168,7 +168,7 @@ export default {
             return result;
         },
         appModel() {
-            return this.app.model;
+            return this.details.model;
         },
     },
     watch: {
@@ -221,7 +221,7 @@ export default {
             ondragleave: () => {
                 this.highlightBox = false;
             },
-            chunkSize: this.app.chunkUploadSize,
+            chunkSize: this.details.chunkUploadSize,
         });
         this.collection.on("remove", (model) => {
             this._eventRemove(model);
@@ -289,8 +289,8 @@ export default {
                 this.counterError = 0;
                 this.counterRunning = 0;
                 this.uploadbox.reset();
-                this.extension = this.app.defaultExtension;
-                this.genome = this.app.defaultDbKey;
+                this.extension = this.details.defaultExtension;
+                this.genome = this.details.defaultDbKey;
                 this.appModel.set("percentage", 0);
                 this._updateStateForCounters();
             }

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

@@ -1,9 +1,9 @@
 import Composite from "./Composite.vue";
-import { mountWithApp } from "./testHelpers";
+import { mountWithDetails } from "./testHelpers";
 
 describe("Composite.vue", () => {
     it("loads with correct initial state", async () => {
-        const { wrapper } = mountWithApp(Composite);
+        const { wrapper } = mountWithDetails(Composite);
         expect(wrapper.find("#btn-start").classes()).toEqual(expect.arrayContaining(["disabled"]));
         expect(wrapper.vm.showHelper).toBe(true);
         expect(wrapper.vm.readyStart).toBe(false);

client/src/components/Upload/Composite.vue

@@ -72,7 +72,7 @@ export default {
     data() {
         return {
             extension: "_select_",
-            genome: this.app.defaultDbKey,
+            genome: this.details.defaultDbKey,
             listExtensions: [],
             listGenomes: [],
             running: false,
@@ -160,7 +160,7 @@ export default {
                 });
             });
             submitUpload({
-                url: this.app.uploadPath,
+                url: this.details.uploadPath,
                 data: uploadModelsToPayload(this.collection.filter(), this.history_id, true),
                 success: (message) => {
                     this._eventSuccess(message);
@@ -178,8 +178,8 @@ export default {
         _eventReset: function () {
             if (this.collection.where({ status: "running" }).length == 0) {
                 this.collection.reset();
-                this.extension = this.app.defaultExtension;
-                this.genome = this.app.defaultDbKey;
+                this.extension = this.details.defaultExtension;
+                this.genome = this.details.defaultDbKey;
                 this.renderNonReactiveComponents();
             }
         },

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

@@ -1,5 +1,5 @@
 import Default from "./Default.vue";
-import { mountWithApp } from "./testHelpers";
+import { mountWithDetails } from "./testHelpers";
 import Backbone from "backbone";
 
 jest.mock("app");
@@ -10,7 +10,7 @@ UploadRow.mockImplementation(Backbone.View);
 
 describe("Default.vue", () => {
     it("loads with correct initial state", async () => {
-        const { wrapper } = mountWithApp(Default);
+        const { wrapper } = mountWithDetails(Default);
         expect(wrapper.vm.counterAnnounce).toBe(0);
         expect(wrapper.vm.showHelper).toBe(true);
         expect(wrapper.vm.extensions[0].id).toBe("ab1");
@@ -20,23 +20,21 @@ describe("Default.vue", () => {
     });
 
     it("does render FTP is site set", async () => {
-        const { wrapper } = mountWithApp(Default);
+        const { wrapper } = mountWithDetails(Default);
         expect(wrapper.find("#btn-ftp").element).toBeVisible();
         await wrapper.find("#btn-ftp").trigger("click");
         // TODO: test popover appears... not sure best way to do this...
     });
 
     it("doesn't render FTP is no site set", async () => {
-        const { wrapper } = mountWithApp(Default, {
-            currentFtp: () => {
-                return null;
-            },
+        const { wrapper } = mountWithDetails(Default, {
+            currentFtp: null,
         });
         expect(wrapper.findAll("#btn-ftp").length).toBe(0);
     });
 
     it("resets properly", async () => {
-        const { wrapper, localVue } = mountWithApp(Default);
+        const { wrapper, localVue } = mountWithDetails(Default);
         expect(wrapper.vm.showHelper).toBe(true);
         await localVue.nextTick();
         await wrapper.find("#btn-new").trigger("click");
@@ -47,7 +45,7 @@ describe("Default.vue", () => {
     });
 
     it("renders a limitloader element if lazyLoadMax set", async () => {
-        const { wrapper } = mountWithApp(Default, {}, { lazyLoadMax: 2 });
+        const { wrapper } = mountWithDetails(Default, {}, { lazyLoadMax: 2 });
         expect(wrapper.findAll(".ui-limitloader").length).toBe(1);
         // hard to actually test the functionality like in Collection.test.js
         // because we're stubbing out all of UploadRow.

client/src/components/Upload/Default.vue

@@ -123,8 +123,8 @@ export default {
             topInfo: "",
             highlightBox: false,
             showHelper: true,
-            extension: this.app.defaultExtension,
-            genome: this.app.defaultDbKey,
+            extension: this.details.defaultExtension,
+            genome: this.details.defaultDbKey,
             listExtensions: [],
             listGenomes: [],
             running: false,
@@ -151,7 +151,7 @@ export default {
             return result;
         },
         appModel() {
-            return this.app.model;
+            return this.details.model;
         },
     },
     watch: {
@@ -205,7 +205,7 @@ export default {
             ondragleave: () => {
                 this.highlightBox = false;
             },
-            chunkSize: this.app.chunkUploadSize,
+            chunkSize: this.details.chunkUploadSize,
         });
         this.collection.on("remove", (model) => {
             this._eventRemove(model);
@@ -241,8 +241,8 @@ export default {
                 this.counterError = 0;
                 this.counterRunning = 0;
                 this.uploadbox.reset();
-                this.extension = this.app.defaultExtension;
-                this.genome = this.app.defaultDbKey;
+                this.extension = this.details.defaultExtension;
+                this.genome = this.details.defaultDbKey;
                 this.appModel.set("percentage", 0);
                 this._updateStateForCounters();
             }

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

@@ -1,14 +1,14 @@
 import RulesInput from "./RulesInput.vue";
-import { mountWithApp } from "./testHelpers";
+import { mountWithDetails } from "./testHelpers";
 
 describe("RulesInput.vue", () => {
     it("loads with correct initial state", async () => {
-        const { wrapper } = mountWithApp(RulesInput);
+        const { wrapper } = mountWithDetails(RulesInput);
         expect(wrapper.find("#btn-reset").classes()).toEqual(expect.arrayContaining(["disabled"]));
     });
 
     it("enables reset when sourceContent is populated", async () => {
-        const { wrapper } = mountWithApp(RulesInput);
+        const { wrapper } = mountWithDetails(RulesInput);
         const textInput = wrapper.find(".upload-rule-source-content");
         expect(textInput.element.value).toBe("");
         await textInput.setValue("a b c d");

client/src/components/Upload/UploadBoxMixin.js

@@ -22,10 +22,6 @@ export default {
         Select2,
     },
     props: {
-        app: {
-            type: Object,
-            required: true,
-        },
         lazyLoadMax: {
             type: Number,
             default: null,
@@ -38,6 +34,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        details: {
+            type: Object,
+            required: true,
+        },
     },
     computed: {
         btnFilesTitle() {
@@ -55,12 +55,7 @@ export default {
             return this.hasCallback ? "Cancel" : "Close";
         },
         history_id() {
-            const storeId = this.$store?.getters["history/currentHistoryId"];
-            if (storeId) {
-                return storeId;
-            }
-            const legacyId = this.app.currentHistory();
-            return legacyId;
+            return this.details.history_id;
         },
     },
     methods: {
@@ -119,7 +114,7 @@ export default {
                 }
             });
             if (list.length > 0) {
-                const data = uploadModelsToPayload(list, this.history_id);
+                const data = uploadModelsToPayload(list, this.details.history_id);
                 axios
                     .post(`${getAppRoot()}api/tools/fetch`, data)
                     .then((message) => {
@@ -308,7 +303,7 @@ export default {
             return $(this.$refs.uploadTable);
         },
         extensionDetails(extension) {
-            return findExtension(this.app.effectiveExtensions, extension);
+            return findExtension(this.details.effectiveExtensions, extension);
         },
         initExtensionInfo() {
             $(this.$refs.footerExtensionInfo)
@@ -332,10 +327,10 @@ export default {
             this.collection = new UploadModel.Collection();
         },
         initAppProperties() {
-            this.listExtensions = this.app.effectiveExtensions;
-            this.listGenomes = this.app.listGenomes;
-            this.ftpUploadSite = this.app.currentFtp();
-            this.fileSourcesConfigured = this.app.fileSourcesConfigured;
+            this.listExtensions = this.details.effectiveExtensions;
+            this.listGenomes = this.details.listGenomes;
+            this.ftpUploadSite = this.details.currentFtp;
+            this.fileSourcesConfigured = this.details.fileSourcesConfigured;
         },
         initFtpPopover() {
             // add ftp file viewer
@@ -351,7 +346,7 @@ export default {
             this.collection.each((model) => {
                 if (
                     model.get("status") == "init" &&
-                    (model.get("extension") == this.app.defaultExtension || !defaults_only)
+                    (model.get("extension") == this.details.defaultExtension || !defaults_only)
                 ) {
                     model.set("extension", extension);
                 }
@@ -359,7 +354,10 @@ export default {
         },
         updateGenome: function (genome, defaults_only) {
             this.collection.each((model) => {
-                if (model.get("status") == "init" && (model.get("genome") == this.app.defaultDbKey || !defaults_only)) {
+                if (
+                    model.get("status") == "init" &&
+                    (model.get("genome") == this.details.defaultDbKey || !defaults_only)
+                ) {
                     model.set("genome", genome);
                 }
             });

client/src/components/Upload/UploadModalContent.vue

@@ -3,7 +3,7 @@
         <b-tab v-if="showRegular" id="regular" title="Regular" button-id="tab-title-link-regular">
             <default
                 ref="regular"
-                :app="this"
+                :details="details"
                 :lazy-load-max="50"
                 :multiple="multiple"
                 :has-callback="hasCallback"
@@ -11,13 +11,13 @@
                 v-on="$listeners" />
         </b-tab>
         <b-tab v-if="showComposite" id="composite" title="Composite" button-id="tab-title-link-composite">
-            <composite :app="this" :has-callback="hasCallback" :selectable="selectable" v-on="$listeners" />
+            <composite :details="details" :has-callback="hasCallback" :selectable="selectable" v-on="$listeners" />
         </b-tab>
         <b-tab v-if="showCollection" id="collection" title="Collection" button-id="tab-title-link-collection">
-            <collection :app="this" :has-callback="hasCallback" :selectable="selectable" v-on="$listeners" />
+            <collection :details="details" :has-callback="hasCallback" :selectable="selectable" v-on="$listeners" />
         </b-tab>
         <b-tab v-if="showRules" id="rule-based" title="Rule-based" button-id="tab-title-link-rule-based">
-            <rules-input :app="this" :has-callback="hasCallback" :selectable="selectable" v-on="$listeners" />
+            <rules-input :details="details" :has-callback="hasCallback" :selectable="selectable" v-on="$listeners" />
         </b-tab>
     </b-tabs>
     <div v-else>
@@ -135,6 +135,23 @@ export default {
             }
             return this.multiple;
         },
+        currentFtp() {
+            return this.currentUserId && this.ftpUploadSite;
+        },
+        details() {
+            return {
+                effectiveExtensions: this.effectiveExtensions,
+                listGenomes: this.listGenomes,
+                currentFtp: this.currentFtp,
+                fileSourcesConfigured: this.fileSourcesConfigured,
+                defaultExtension: this.defaultExtension,
+                defaultDbKey: this.defaultDbKey,
+                uploadPath: this.uploadPath,
+                model: this.model,
+                chunkUploadSize: this.chunkUploadSize,
+                history_id: this.currentHistoryId,
+            };
+        },
     },
     created() {
         this.model = new Backbone.Model({
@@ -192,9 +209,6 @@ export default {
         this.id = String(this._uid);
     },
     methods: {
-        currentFtp: function () {
-            return this.currentUserId && this.ftpUploadSite;
-        },
         /**
          * Package API data from array of backbone models
          * @param{Array} items - Upload items/rows filtered from a collection

client/src/components/Upload/testHelpers.js

@@ -4,12 +4,10 @@ import "utils/uploadbox";
 import { mount, createLocalVue } from "@vue/test-utils";
 import BootstrapVue from "bootstrap-vue";
 
-export const createMockApp = (options = {}) => {
+export const createMockDetails = (options = {}) => {
     return _.defaults(options, {
         defaultExtension: "auto",
-        currentFtp: () => {
-            return "ftp://localhost";
-        },
+        currentFtp: "ftp://localhost",
         model: new Backbone.Model(),
         effectiveExtensions: [
             { id: "ab1", text: "ab1", description: "A binary sequence file in 'ab1' format with a '.ab1'" },
@@ -34,9 +32,9 @@ export const createMockApp = (options = {}) => {
     });
 };
 
-export function mountWithApp(component, options = {}, propsData_ = {}) {
-    const app = createMockApp(options);
-    const propsData = _.defaults(propsData_, { app });
+export function mountWithDetails(component, options = {}, propsData_ = {}) {
+    const details = createMockDetails(options);
+    const propsData = _.defaults(propsData_, { details });
 
     const localVue = createLocalVue();
     localVue.use(BootstrapVue);

lib/galaxy/selenium/navigates_galaxy.py

@@ -1938,7 +1938,7 @@ class NavigatesGalaxy(HasDriver):
                     break
             else:
                 # Pick first match. We're replacing select2 anyway ...
-                select_elem = elem
+                select_elem = candidate_elements[0]
             action_chains = self.action_chains()
             action_chains.move_to_element(select_elem).click().perform()
         self.wait_for_selector_absent_or_hidden("#select2-drop")