Vueify Generic Form Wrapper

client/package.json

@@ -82,7 +82,6 @@
     "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.3.1",
     "vue-rx": "^6.2.0",
-    "vue-scrollto": "^2.20.0",
     "vuedraggable": "2.24.1",
     "vueisotope": "^3.1.2",
     "vuex": "^3.4.0",

client/src/components/Form/FormGeneric.vue

@@ -0,0 +1,139 @@
+<template>
+    <UrlDataProvider :url="url" v-slot="{ result: config, loading }" @error="onError">
+        <div :id="id" v-if="!loading">
+            <b-alert v-if="config.message" :variant="configMessageVariant(config)" show>
+                {{ config.message }}
+            </b-alert>
+            <b-alert v-if="messageText" :variant="messageVariant" show>
+                {{ messageText }}
+            </b-alert>
+            <FormCard :title="configTitle(config)" :icon="configIcon(config)">
+                <template v-slot:body>
+                    <FormDisplay :inputs="config.inputs" :replace-params="replaceParams" @onChange="onChange" />
+                </template>
+            </FormCard>
+            <div class="mt-3">
+                <b-button id="submit" variant="primary" class="mr-1" @click="onSubmit()">
+                    <span :class="submitIconClass" />{{ submitTitle | l }}
+                </b-button>
+                <b-button v-if="cancelRedirect" @click="onCancel()">
+                    <span class="mr-1 fa fa-times" />{{ "Cancel" | l }}
+                </b-button>
+            </div>
+        </div>
+    </UrlDataProvider>
+</template>
+
+<script>
+import { getAppRoot } from "onload/loadConfig";
+import { submitData } from "./services";
+import { UrlDataProvider } from "components/providers/UrlDataProvider";
+import { visitInputs } from "components/Form/utilities";
+import FormCard from "components/Form/FormCard";
+import FormDisplay from "components/Form/FormDisplay";
+
+export default {
+    props: {
+        id: {
+            type: String,
+            required: false,
+        },
+        title: {
+            type: String,
+            required: false,
+        },
+        icon: {
+            type: String,
+            required: false,
+        },
+        submitIcon: {
+            type: String,
+            default: "fa-save",
+        },
+        submitTitle: {
+            type: String,
+            default: "Save",
+        },
+        cancelRedirect: {
+            type: String,
+            required: false,
+        },
+        url: {
+            type: String,
+            required: true,
+        },
+        redirect: {
+            type: String,
+            required: true,
+        },
+    },
+    components: {
+        FormCard,
+        FormDisplay,
+        UrlDataProvider,
+    },
+    data() {
+        return {
+            messageText: null,
+            messageVariant: null,
+            formData: {},
+            replaceParams: null,
+        };
+    },
+    computed: {
+        submitIconClass() {
+            return `mr-1 fa ${this.submitIcon}`;
+        },
+    },
+    methods: {
+        configTitle(options) {
+            return this.title || options.title;
+        },
+        configIcon(options) {
+            return this.icon || options.icon;
+        },
+        configMessageVariant(options) {
+            return options.status || "warning";
+        },
+        onChange(formData) {
+            this.formData = formData;
+        },
+        onCancel() {
+            window.location = `${getAppRoot()}${this.cancelRedirect}`;
+        },
+        onSubmit() {
+            submitData(this.url, this.formData).then((response) => {
+                let params = {};
+                if (response.id) {
+                    params.id = response.id;
+                } else {
+                    params = {
+                        message: response.message,
+                        status: "success",
+                        persistent: false,
+                    };
+                }
+                if (this.redirect) {
+                    const urlParams = new URLSearchParams(params);
+                    window.location = `${getAppRoot()}${this.redirect}?${urlParams.toString()}`;
+                } else {
+                    const replaceParams = {};
+                    visitInputs(response.inputs, (input, name) => {
+                        replaceParams[name] = input.value;
+                    });
+                    this.replaceParams = replaceParams;
+                    this.showMessage(response.message);
+                }
+            }, this.onError);
+        },
+        onError(error) {
+            this.showMessage(error || `Failed to load resource ${this.url}.`, "danger");
+        },
+        showMessage(message, variant = "success") {
+            this.messageText = message;
+            this.messageVariant = variant;
+            document.querySelector(".center-panel").scrollTop = 0;
+        },
+    },
+};
+</script>

client/src/components/Form/services.js

@@ -0,0 +1,12 @@
+import axios from "axios";
+import { rethrowSimple } from "utils/simple-error";
+import { getAppRoot } from "onload/loadConfig";
+
+export async function submitData(url, payload) {
+    try {
+        const { data } = await axios.put(`${getAppRoot()}${url}`, payload);
+        return data;
+    } catch (e) {
+        rethrowSimple(e);
+    }
+}

client/src/components/Tool/ToolForm.vue

@@ -89,7 +89,6 @@
 </template>
 
 <script>
-import Scroller from "vue-scrollto";
 import { getGalaxyInstance } from "app";
 import { getToolFormData, updateToolFormData, submitJob } from "./services";
 import { allowCachedJobs } from "./utilities";
@@ -287,7 +286,7 @@ export default {
                     if ([true, "true"].includes(config.enable_tool_recommendations)) {
                         this.showRecommendation = true;
                     }
-                    Scroller.scrollTo("body");
+                    document.querySelector(".center-panel").scrollTop = 0;
                 },
                 (e) => {
                     this.showExecuting = false;

client/src/components/User/UserPreferencesModel.js

@@ -30,8 +30,8 @@ export const getUserPreferencesModel = (user_id) => {
             id: "manage-third-party-identities",
             description: _l("Connect or disconnect access to your third-party identities."),
             icon: "fa-id-card-o",
-            submit_title: "Disconnect identity",
-            submit_icon: "fa-trash",
+            submitTitle: "Disconnect identity",
+            submitIcon: "fa-trash",
             shouldRender: config.enable_oidc,
         },
         permissions: {
@@ -41,7 +41,7 @@ export const getUserPreferencesModel = (user_id) => {
                 "Grant others default access to newly created histories. Changes made here will only affect histories created after these settings have been stored.",
             url: `api/users/${user_id}/permissions/inputs`,
             icon: "fa-users",
-            submit_title: "Save Permissions",
+            submitTitle: "Save Permissions",
             redirect: "user",
             shouldRender: !config.single_user,
         },
@@ -58,16 +58,16 @@ export const getUserPreferencesModel = (user_id) => {
             description: _l("Access your current API key or create a new one."),
             url: `api/users/${user_id}/api_key/inputs`,
             icon: "fa-key",
-            submit_title: "Create a new Key",
-            submit_icon: "fa-check",
+            submitTitle: "Create a new Key",
+            submitIcon: "fa-check",
         },
         cloud_auth: {
             id: "edit-preferences-cloud-auth",
             title: _l("Manage Cloud Authorization"),
             description: _l("Add or modify the configuration that grants Galaxy to access your cloud-based resources."),
             icon: "fa-cloud",
-            submit_title: "Create a new Key",
-            submit_icon: "fa-check",
+            submitTitle: "Create a new Key",
+            submitIcon: "fa-check",
             shouldRender: config.enable_account_interface,
         },
         toolbox_filters: {
@@ -76,7 +76,7 @@ export const getUserPreferencesModel = (user_id) => {
             description: _l("Customize your Toolbox by displaying or omitting sets of Tools."),
             url: `api/users/${user_id}/toolbox_filters/inputs`,
             icon: "fa-filter",
-            submit_title: "Save Filters",
+            submitTitle: "Save Filters",
             redirect: "user",
             shouldRender: !!config.has_user_tool_filters,
         },

client/src/components/Workflow/Editor/Index.vue

@@ -113,7 +113,7 @@
                                 />
                             </div>
                         </div>
-                        <div class="unified-panel-body workflow-right">
+                        <div class="unified-panel-body workflow-right" ref="right-panel">
                             <div class="m-1">
                                 <FormTool
                                     v-if="hasActiveNodeTool"
@@ -335,6 +335,7 @@ export default {
                 node.makeActive();
                 this.activeNode = node;
                 this.canvasManager.drawOverview();
+                this.$refs["right-panel"].scrollTop = 0;
             }
         },
         onDeactivate() {

client/src/components/providers/UrlDataProvider.js

@@ -0,0 +1,15 @@
+import axios from "axios";
+import { getAppRoot } from "onload/loadConfig";
+import { SingleQueryProvider } from "components/providers/SingleQueryProvider";
+import { rethrowSimple } from "utils/simple-error";
+
+async function urlData({ url }) {
+    try {
+        const { data } = await axios.get(`${getAppRoot()}${url}`);
+        return data;
+    } catch (e) {
+        rethrowSimple(e);
+    }
+}
+
+export const UrlDataProvider = SingleQueryProvider(urlData);

client/src/entry/admin/AdminRouter.js

@@ -1,7 +1,7 @@
 import { getGalaxyInstance } from "app";
 import { getAppRoot } from "onload";
 import _l from "utils/localization";
-import FormWrapper from "mvc/form/form-wrapper";
+import FormGeneric from "components/Form/FormGeneric";
 import GridView from "mvc/grid/grid-view";
 import QueryStringParsing from "utils/query-string-parsing";
 import Router from "layout/router";
@@ -164,7 +164,7 @@ export const getAdminRouter = (Galaxy, options) => {
                     title: _l("Reset passwords"),
                     url: `admin/reset_user_password${id}`,
                     icon: "fa-user",
-                    submit_title: "Save new password",
+                    submitTitle: "Save new password",
                     redirect: "admin/users",
                 },
                 manage_roles_and_groups_for_user: {
@@ -225,7 +225,7 @@ export const getAdminRouter = (Galaxy, options) => {
                     redirect: "admin/forms",
                 },
             };
-            this.page.display(new FormWrapper.View(form_defs[form_id]));
+            this._display_vue_helper(FormGeneric, form_defs[form_id]);
         },
     });
 };