Merge pull request #12040 from Nerdinacan/standardize-mounts

Normalize Vue mounts in analysis, admin endpoints

client/src/components/Form/FormCardTool.vue

@@ -198,7 +198,7 @@ export default {
         // add tool menu webhooks
         Webhooks.load({
             type: "tool-menu",
-            callback: function (webhooks) {
+            callback: (webhooks) => {
                 webhooks.each((model) => {
                     const webhook = model.toJSON();
                     if (webhook.activate && webhook.config.function) {

client/src/components/Libraries/index.js

@@ -0,0 +1,8 @@
+import router from "./LibraryFolderRouter";
+
+export const Libraries = {
+    router,
+    render: (h) => h("router-view"),
+};
+
+export default Libraries;

client/src/components/admin/DataManager/DataManager.vue

@@ -82,11 +82,15 @@
 import { getAppRoot } from "onload/loadConfig";
 import axios from "axios";
 import Alert from "components/Alert.vue";
+import { debounce } from "underscore";
 
 export default {
     components: {
         Alert,
     },
+    props: {
+        debouncePeriod: { type: Number, required: false, default: 100 },
+    },
     data() {
         return {
             dataManagers: [],
@@ -95,7 +99,7 @@ export default {
             viewOnly: false,
             message: "",
             status: "",
-            loading: true,
+            loading: false,
         };
     },
     computed: {
@@ -110,21 +114,34 @@ export default {
         kebabCase(s) {
             return s.toLowerCase().replace(/ /g, "-");
         },
+        load() {
+            this.loading = true;
+            axios
+                .get(`${getAppRoot()}data_manager/data_managers_list`)
+                .then((response) => {
+                    console.log("response", response);
+                    this.dataManagers = response.data.dataManagers;
+                    this.dataTables = response.data.dataTables;
+                    this.viewOnly = response.data.viewOnly;
+                    this.message = response.data.message;
+                    this.status = response.data.status;
+                })
+                .catch((error) => {
+                    console.error(error);
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
     },
     created() {
-        axios
-            .get(`${getAppRoot()}data_manager/data_managers_list`)
-            .then((response) => {
-                this.dataManagers = response.data.dataManagers;
-                this.dataTables = response.data.dataTables;
-                this.viewOnly = response.data.viewOnly;
-                this.message = response.data.message;
-                this.status = response.data.status;
-                this.loading = false;
-            })
-            .catch((error) => {
-                console.error(error);
-            });
+        console.log("created");
+        this.debouncedLoad = debounce(this.load, this.debouncePeriod);
+        this.debouncedLoad();
+    },
+    beforeRouteEnter(to, from, next) {
+        console.log("beforeRouteEnter");
+        next((vm) => vm.debouncedLoad());
     },
 };
 </script>

client/src/components/admin/DataManager/DataManagerJobs.vue

@@ -117,7 +117,7 @@ export default {
             return [
                 {
                     text: "Data Managers",
-                    to: "/",
+                    to: { name: "DataManager" },
                 },
                 {
                     text: this.dataManager["name"] + " ( " + this.dataManager["description"] + " )",

client/src/components/admin/DataManager/DataManagerRouter.js

@@ -12,11 +12,6 @@ export default new VueRouter({
     mode: "history",
     base: `${getAppRoot()}admin/data_manager`,
     routes: [
-        {
-            path: "/",
-            name: "DataManager",
-            component: DataManager,
-        },
         {
             path: "/jobs/:id",
             name: "DataManagerJobs",
@@ -35,9 +30,14 @@ export default new VueRouter({
             component: DataManagerTable,
             props: true,
         },
+        {
+            path: "/",
+            name: "DataManager",
+            component: DataManager,
+        },
         {
             path: "*",
-            redirect: "/",
+            redirect: { name: "DataManager" },
         },
     ],
 });

client/src/components/admin/DataManager/index.js

@@ -0,0 +1,14 @@
+import router from "./DataManagerRouter";
+import DataManagerView from "./DataManagerView";
+
+export const DataManager = {
+    router,
+    render: (h) => h(DataManagerView),
+    created() {
+        if (router.currentRoute.name !== "DataManager") {
+            router.push({ name: "DataManager" });
+        }
+    },
+};
+
+export default DataManager;

client/src/entry/admin/AdminRouter.js

@@ -11,15 +11,13 @@ import Jobs from "components/admin/Jobs.vue";
 import ActiveInvocations from "components/admin/ActiveInvocations.vue";
 import Landing from "components/admin/Dependencies/Landing.vue";
 import AdminHome from "components/admin/Home.vue";
-import DataManagerView from "components/admin/DataManager/DataManagerView.vue";
-import DataManagerRouter from "components/admin/DataManager/DataManagerRouter";
+import DataManager from "components/admin/DataManager";
 import Register from "components/login/Register.vue";
 import ErrorStack from "components/admin/ErrorStack.vue";
 import DisplayApplications from "components/admin/DisplayApplications.vue";
 import ResetMetadata from "components/admin/ResetMetadata.vue";
 import Toolshed from "components/Toolshed/Index.vue";
-import Vue from "vue";
-import store from "store";
+import { mountVueComponent } from "utils/mountVueComponent";
 
 export const getAdminRouter = (Galaxy, options) => {
     const galaxyRoot = getAppRoot();
@@ -108,10 +106,10 @@ export const getAdminRouter = (Galaxy, options) => {
         },
 
         _display_vue_helper: function (component, propsData = {}) {
-            const instance = Vue.extend(component);
             const container = document.createElement("div");
             this.page.display(container);
-            new instance({ store, propsData }).$mount(container);
+            const mountFn = mountVueComponent(component);
+            return mountFn(propsData, container);
         },
 
         show_data_tables: function () {
@@ -146,16 +144,13 @@ export const getAdminRouter = (Galaxy, options) => {
             this._display_vue_helper(ResetMetadata);
         },
 
-        show_data_manager: function (path) {
-            const Galaxy = getGalaxyInstance();
-            console.log("show_data_manager");
-            const vueMount = document.createElement("div");
-            this.page.display(vueMount);
-            // always set the route back to the base, i.e.
-            // `${galaxyRoot}admin/data_manager`
-            Galaxy.debug("show_data_manager: path='" + path + "'");
-            DataManagerRouter.replace(path || "/");
-            new Vue({ router: DataManagerRouter, render: (h) => h(DataManagerView) }).$mount(vueMount);
+        // Because this has a router in it, we need to be careful about destroying it properly
+        dataManagerInstance: null,
+        show_data_manager: function () {
+            if (this.dataManagerInstance) {
+                this.dataManagerInstance.$destroy();
+            }
+            this.dataManagerInstance = this._display_vue_helper(DataManager);
         },
 
         show_forms: function () {

client/src/entry/analysis/AnalysisRouter.js

@@ -48,10 +48,8 @@ import DisplayStructure from "components/DisplayStructured.vue";
 import { CloudAuth } from "components/User/CloudAuth";
 import { ExternalIdentities } from "components/User/ExternalIdentities";
 import Confirmation from "components/login/Confirmation.vue";
-import LibraryFolderRouter from "components/Libraries/LibraryFolderRouter";
-import Vue from "vue";
-import store from "store";
-import VueRouterMain from "./VueRouterMain.vue";
+import Libraries from "components/Libraries";
+import { mountVueComponent } from "utils/mountVueComponent";
 
 /** Routes */
 export const getAnalysisRouter = (Galaxy) => {
@@ -110,24 +108,14 @@ export const getAnalysisRouter = (Galaxy) => {
         },
 
         _display_vue_helper: function (component, propsData = {}, active_tab = null, noPadding = false) {
-            const instance = Vue.extend(component);
             const container = document.createElement("div");
             if (active_tab) {
                 container.active_tab = active_tab;
             }
             this.page.display(container, noPadding);
-            new instance({ store, propsData }).$mount(container);
-        },
-        _display_vue_router: function (router, propsData = {}, active_tab = null, noPadding = false) {
-            const container = document.createElement("div");
-            if (active_tab) {
-                container.active_tab = active_tab;
-            }
-            this.page.display(container, noPadding);
-            new Vue({
-                router: router,
-                render: (h) => h(VueRouterMain),
-            }).$mount(container);
+
+            const mountFn = mountVueComponent(component);
+            return mountFn(propsData, container);
         },
 
         show_tours: function (tour_id) {
@@ -161,10 +149,10 @@ export const getAnalysisRouter = (Galaxy) => {
             this._display_vue_helper(InteractiveTools);
         },
 
-        show_library_folder: function (folder_id) {
+        show_library_folder: function () {
             this.page.toolPanel?.component.hide(0);
             this.page.panels.right.hide();
-            this._display_vue_router(LibraryFolderRouter, { folder_id: folder_id });
+            this._display_vue_helper(Libraries);
         },
 
         show_cloud_auth: function () {

client/src/entry/analysis/VueRouterMain.vue

@@ -1,3 +0,0 @@
-<template>
-    <router-view />
-</template>