From c54e5fad403835ac68c6c41e6841658fc1189044 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 27 May 2021 12:42:43 -0400
Subject: [PATCH 01/58] Replace legacy tool form wrapper with Vue component

---
 client/package.json                         |   1 +
 client/src/components/Form/Form.vue         |  81 +++-
 client/src/components/Form/FormCardTool.vue |   2 +
 client/src/components/Form/FormElement.vue  |  11 +-
 client/src/components/Tool/services.js      |  39 ++
 client/src/entry/analysis/AnalysisRouter.js |   4 +-
 client/src/mvc/form/form-input.js           |   4 +-
 client/src/mvc/form/form-view.js            |   2 +-
 client/src/mvc/tool/tool-form.js            | 472 --------------------
 client/tests/qunit/tests/form_tests.js      |  18 +-
 client/yarn.lock                            |  12 +
 11 files changed, 154 insertions(+), 492 deletions(-)
 delete mode 100644 client/src/mvc/tool/tool-form.js

diff --git a/client/package.json b/client/package.json
index b0ef323b5aa..2faba245fb7 100644
--- a/client/package.json
+++ b/client/package.json
@@ -81,6 +81,7 @@
     "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",
diff --git a/client/src/components/Form/Form.vue b/client/src/components/Form/Form.vue
index 078671ffa80..a9bc63db550 100644
--- a/client/src/components/Form/Form.vue
+++ b/client/src/components/Form/Form.vue
@@ -3,6 +3,7 @@
 </template>
 
 <script>
+import { getGalaxyInstance } from "app";
 import Form from "mvc/form/form-view";
 
 export default {
@@ -27,18 +28,96 @@ export default {
             type: Boolean,
             default: false,
         },
+        validationErrors: {
+            type: Object,
+            default: null,
+        },
+    },
+    data() {
+        return {
+            formData: {},
+        };
     },
     watch: {
         id() {
             this.onRender();
         },
+        validationErrors() {
+            if (this.form) {
+                this.form.trigger("reset");
+                const matchedErrors = this.form.data.matchResponse(this.validationErrors);
+                for (const input_id in matchedErrors) {
+                    this.form.highlight(input_id, matchedErrors[input_id]);
+                }
+            }
+        },
+        validation() {
+            if (this.form) {
+                this.form.trigger("reset");
+                if (this.validation) {
+                    this.form.highlight(this.validation[0], this.validation[1], true);
+                }
+            }
+        },
     },
     mounted() {
         this.onRender();
     },
+    beforeDestroy() {
+        const Galaxy = getGalaxyInstance();
+        this.form.stopListening(Galaxy.currHistoryPanel.collection);
+    },
+    computed: {
+        validation() {
+            let batch_n = -1;
+            let batch_src = null;
+            for (const job_input_id in this.formData) {
+                const input_value = this.formData[job_input_id];
+                const input_id = this.form.data.match(job_input_id);
+                const input_field = this.form.field_list[input_id];
+                const input_def = this.form.input_list[input_id];
+                if (!input_id || !input_def || !input_field) {
+                    continue;
+                }
+                if (!input_def.optional && input_value == null && input_def.type != "hidden") {
+                    return [input_id, "Please provide a value for this option."];
+                }
+                if (input_field.validate) {
+                    const message = input_field.validate();
+                    if (message) {
+                        return [input_id, message];
+                    }
+                }
+                if (input_value && input_value.batch) {
+                    const n = input_value.values.length;
+                    const src = n > 0 && input_value.values[0] && input_value.values[0].src;
+                    if (src) {
+                        if (batch_src === null) {
+                            batch_src = src;
+                        } else if (batch_src !== src) {
+                            return [
+                                input_id,
+                                "Please select either dataset or dataset list fields for all batch mode fields.",
+                            ];
+                        }
+                    }
+                    if (batch_n === -1) {
+                        batch_n = n;
+                    } else if (batch_n !== n) {
+                        return [
+                            input_id,
+                            `Please make sure that you select the same number of inputs for all batch mode fields. This field contains <b>${n}</b> selection(s) while a previous field contains <b>${batch_n}</b>.`,
+                        ];
+                    }
+                }
+            }
+            return null;
+        },
+    },
     methods: {
         onChange() {
-            this.$emit("onChange", this.form.data.create());
+            this.formData = this.form.data.create();
+            this.$emit("onChange", this.formData);
         },
         onRender() {
             this.$nextTick(() => {
diff --git a/client/src/components/Form/FormCardTool.vue b/client/src/components/Form/FormCardTool.vue
index ffc3640f60d..228e4ce6a98 100644
--- a/client/src/components/Form/FormCardTool.vue
+++ b/client/src/components/Form/FormCardTool.vue
@@ -6,6 +6,7 @@
                     <b-dropdown
                         no-caret
                         right
+                        id="options"
                         role="button"
                         title="Options"
                         variant="link"
@@ -89,6 +90,7 @@
                 <slot name="body" />
             </div>
         </div>
+        <slot name="buttons" />
         <div class="m-1">
             <ToolHelp :content="options.help" />
             <ToolFooter
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 9235cbe2c38..2827231ab94 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -6,16 +6,19 @@
         </div>
         <div class="ui-form-title">{{ title }}</div>
         <div class="ui-form-field">
-            <FormInput :id="id" :value="value" :area="area" @onChange="onChange" />
+            <FormInput v-if="type == 'text'" :id="id" :value="value" :area="area" @onChange="onChange" />
+            <FormBoolean v-else-if="type == 'boolean'" :id="id" :value="value" @onChange="onChange" />
             <span class="ui-form-info form-text text-muted mt-2">{{ help }}</span>
         </div>
     </div>
 </template>
 <script>
-import FormInput from "./FormInput";
+import FormBoolean from "./Elements/FormBoolean";
+import FormInput from "./Elements/FormInput";
 
 export default {
     components: {
+        FormBoolean,
         FormInput,
     },
     props: {
@@ -43,6 +46,10 @@ export default {
             type: String,
             default: null,
         },
+        type: {
+            type: String,
+            default: "text",
+        },
     },
     computed: {
         hasError() {
diff --git a/client/src/components/Tool/services.js b/client/src/components/Tool/services.js
index 7fc0c2f230e..d8a78e45779 100644
--- a/client/src/components/Tool/services.js
+++ b/client/src/components/Tool/services.js
@@ -1,6 +1,45 @@
+import $ from "jquery";
 import axios from "axios";
 import { rethrowSimple } from "utils/simple-error";
 import { getAppRoot } from "onload/loadConfig";
+import { getGalaxyInstance } from "app";
+
+/** Tools data request helper **/
+export async function getTool(tool_id, tool_version, job_id) {
+    const galaxy = getGalaxyInstance();
+    let url = "";
+    let data = {};
+
+    // build request url and collect request data
+    if (job_id) {
+        url = `${getAppRoot()}api/jobs/${job_id}/build_for_rerun`;
+    } else {
+        url = `${getAppRoot()}api/tools/${tool_id}/build`;
+        data = $.extend({}, galaxy.params);
+        data["tool_id"] && delete data["tool_id"];
+    }
+    tool_version && (data["tool_version"] = tool_version);
+
+    // attach data to request url
+    if (!$.isEmptyObject(data)) {
+        url += url.indexOf("?") == -1 ? "?" : "&";
+        url += $.param(data, true);
+    }
+
+    // request tool data
+    try {
+        const { data } = await axios.get(url);
+        return data;
+    } catch (e) {
+        rethrowSimple(e);
+    }
+}
+
+export async function submitJob(jobDetails) {
+    const url = `${getAppRoot()}api/tools`;
+    const { data } = await axios.post(url, jobDetails);
+    return data;
+}
 
 export async function addFavorite(userId, toolId) {
     const url = `${getAppRoot()}api/users/${userId}/favorites/tools`;
diff --git a/client/src/entry/analysis/AnalysisRouter.js b/client/src/entry/analysis/AnalysisRouter.js
index 63e71476752..d0e31fa7618 100644
--- a/client/src/entry/analysis/AnalysisRouter.js
+++ b/client/src/entry/analysis/AnalysisRouter.js
@@ -15,7 +15,7 @@ import { getGalaxyInstance } from "app";
 import { getAppRoot } from "onload";
 import decodeUriComponent from "decode-uri-component";
 import Router from "layout/router";
-import ToolForm from "mvc/tool/tool-form";
+import ToolForm from "components/Tool/ToolForm";
 import FormWrapper from "mvc/form/form-wrapper";
 import Sharing from "components/Sharing.vue";
 import UserPreferences from "components/User/UserPreferences.vue";
@@ -427,7 +427,7 @@ export const getAnalysisRouter = (Galaxy) => {
             if (params.version) {
                 params.version = decodeUriComponent(params.version);
             }
-            this.page.display(new ToolForm.View(params));
+            this._display_vue_helper(ToolForm, params);
         },
 
         /** load the center panel iframe using the given url */
diff --git a/client/src/mvc/form/form-input.js b/client/src/mvc/form/form-input.js
index 8d337c2ccec..a4f84d75328 100644
--- a/client/src/mvc/form/form-input.js
+++ b/client/src/mvc/form/form-input.js
@@ -121,7 +121,7 @@ export default Backbone.View.extend({
         // render error messages
         var error_text = this.model.get("error_text");
         this.$error[error_text ? "show" : "hide"]();
-        this.$el[error_text ? "addClass" : "removeClass"]("alert alert-danger");
+        this.$el[error_text ? "addClass" : "removeClass"]("alert alert-info");
         this.$error_text.html(error_text);
         // render backdrop
         this.$backdrop[this.model.get("backdrop") ? "show" : "hide"]();
@@ -186,7 +186,7 @@ export default Backbone.View.extend({
             .append(
                 $("<div/>")
                     .addClass("ui-form-error")
-                    .append($("<span/>").addClass("fa fa-arrow-down mr-1"))
+                    .append($("<span/>").addClass("fa fa-exclamation mr-1"))
                     .append($("<span/>").addClass("ui-form-error-text"))
             )
             .append(
diff --git a/client/src/mvc/form/form-view.js b/client/src/mvc/form/form-view.js
index efaf8d6d6d6..e7b14bd92b1 100644
--- a/client/src/mvc/form/form-view.js
+++ b/client/src/mvc/form/form-view.js
@@ -54,7 +54,7 @@ export default Backbone.View.extend({
     highlight: function (input_id, message, silent) {
         var input_element = this.element_list[input_id];
         if (input_element) {
-            input_element.error(message || "Please verify this parameter.");
+            input_element.error(message || "Please verify this option.");
             this.portlet.expand();
             this.trigger("expand", input_id);
             if (!silent) {
diff --git a/client/src/mvc/tool/tool-form.js b/client/src/mvc/tool/tool-form.js
deleted file mode 100644
index e1bb04265ec..00000000000
--- a/client/src/mvc/tool/tool-form.js
+++ /dev/null
@@ -1,472 +0,0 @@
-/* This is the regular tool form */
-
-import _ from "underscore";
-import $ from "jquery";
-import Backbone from "backbone";
-import { getAppRoot } from "onload/loadConfig";
-import { getGalaxyInstance } from "app";
-import _l from "utils/localization";
-import Utils from "utils/utils";
-import Ui from "mvc/ui/ui-misc";
-import Modal from "mvc/ui/ui-modal";
-import ToolFormBase from "mvc/tool/tool-form-base";
-import Webhooks from "mvc/webhooks";
-import Vue from "vue";
-import ToolEntryPoints from "components/ToolEntryPoints/ToolEntryPoints";
-import ToolRecommendation from "components/ToolRecommendation";
-
-const View = Backbone.View.extend({
-    initialize: function (options) {
-        const Galaxy = getGalaxyInstance();
-        this.modal = Galaxy.modal || new Modal.View();
-        this.form = new ToolFormBase(
-            Utils.merge(
-                {
-                    setupToolMicrodata: true,
-                    listen_to_history: true,
-                    always_refresh: false,
-                    buildmodel: (process, form) => {
-                        const options = form.model.attributes;
-
-                        // build request url
-                        let build_url = "";
-                        let build_data = {};
-                        const job_id = options.job_id;
-                        if (job_id) {
-                            build_url = `${getAppRoot()}api/jobs/${job_id}/build_for_rerun`;
-                        } else {
-                            build_url = `${getAppRoot()}api/tools/${options.id}/build`;
-                            build_data = $.extend({}, Galaxy.params);
-                            build_data["tool_id"] && delete build_data["tool_id"];
-                        }
-                        options.version && (build_data["tool_version"] = options.version);
-
-                        // get initial model
-                        Utils.get({
-                            url: build_url,
-                            data: build_data,
-                            success: (data) => {
-                                if (!data.display) {
-                                    window.location = getAppRoot();
-                                    return;
-                                }
-
-                                // we can rely on tool_id, only if it's installed from toolshed
-                                // if no version provided and tool_id is not in toolshed style, don't show the warning
-                                const client_version =
-                                    options.version ||
-                                    (options.tool_id && options.tool_id.match(/^(toolshed)\./)
-                                        ? options.tool_id
-                                        : false);
-
-                                if (
-                                    data.versions &&
-                                    client_version &&
-                                    !data.versions.includes(client_version.replace(/.*\//, ""))
-                                ) {
-                                    data.message = `Requested version unavailable.`;
-                                }
-
-                                form.model.set(data);
-                                this._customize(form);
-                                Galaxy.emit.debug("tool-form-base::_buildModel()", "Initial tool model ready.", data);
-                                process.resolve();
-                            },
-                            error: (response, status) => {
-                                const error_message = (response && response.err_msg) || "Uncaught error.";
-                                if (status == 401) {
-                                    window.location = `${getAppRoot()}user/login?${$.param({
-                                        redirect: `${getAppRoot()}?tool_id=${options.id}`,
-                                    })}`;
-                                } else if (form.$el.is(":empty")) {
-                                    form.$el.prepend(
-                                        new Ui.Message({
-                                            message: error_message,
-                                            status: "danger",
-                                            persistent: true,
-                                        }).$el
-                                    );
-                                } else {
-                                    Galaxy.modal &&
-                                        Galaxy.modal.show({
-                                            title: _l("Tool request failed"),
-                                            body: error_message,
-                                            buttons: {
-                                                Close: () => {
-                                                    Galaxy.modal.hide();
-                                                },
-                                            },
-                                        });
-                                }
-                                Galaxy.emit.debug(
-                                    "tool-form-base::_buildModel()",
-                                    "Initial tool model request failed.",
-                                    response
-                                );
-                                process.reject();
-                            },
-                        });
-                    },
-                    postchange: (process, form) => {
-                        const current_state = {
-                            tool_id: form.model.get("id"),
-                            tool_version: form.model.get("version"),
-                            inputs: $.extend(true, {}, form.data.create()),
-                        };
-                        form.wait(true);
-                        Galaxy.emit.debug("tool-form::postchange()", "Sending current state.", current_state);
-                        Utils.request({
-                            type: "POST",
-                            url: `${getAppRoot()}api/tools/${form.model.get("id")}/build`,
-                            data: current_state,
-                            success: (data) => {
-                                form.update(data);
-                                form.wait(false);
-                                Galaxy.emit.debug("tool-form::postchange()", "Received new model.", data);
-                                process.resolve();
-                            },
-                            error: (response) => {
-                                Galaxy.emit.debug("tool-form::postchange()", "Refresh request failed.", response);
-                                process.reject();
-                            },
-                        });
-                    },
-                },
-                options
-            )
-        );
-        this.deferred = this.form.deferred;
-        this.setElement("<div/>");
-        this.$el.append(this.form.$el);
-    },
-
-    _customize: function (form) {
-        const Galaxy = getGalaxyInstance();
-        const options = form.model.attributes;
-        var inputs = options.inputs;
-        /* only append notification interface if
-           Galaxy has the server mail configured
-        */
-        if (Galaxy.config.server_mail_configured && !Galaxy.user.isAnonymous()) {
-            inputs.push({
-                name: `send_email_notification`,
-                label: _l("Email notification"),
-                type: "boolean",
-                value: "false",
-                ignore: "false",
-                help: _l("Send an email notification when the job completes."),
-            });
-        }
-
-        // build execute button
-        const execute_button = new Ui.Button({
-            icon: "fa-check",
-            tooltip: `Execute: ${options.name} (${options.version})`,
-            title: _l("Execute"),
-            cls: "btn btn-primary",
-            wait_cls: "btn btn-info",
-            onclick: () => {
-                execute_button.wait();
-                form.portlet.disable();
-                this.submit(options, () => {
-                    execute_button.unwait();
-                    form.portlet.enable();
-                });
-            },
-        });
-        options.buttons = { execute: execute_button };
-
-        // remap feature
-        if (options.job_id && options.job_remap) {
-            let label;
-            let help;
-            if (options.job_remap === "job_produced_collection_elements") {
-                label = "Replace elements in collection ?";
-                help =
-                    "The previous run of this tool failed. Use this option to replace the failed element(s) in the dataset collection that were produced during the previous tool run.";
-            } else {
-                label = "Resume dependencies from this job ?";
-                help =
-                    "The previous run of this tool failed and other tools were waiting for it to finish successfully. Use this option to resume those tools using the new output(s) of this tool run.";
-            }
-            options.inputs.push({
-                label: label,
-                name: "rerun_remap_job_id",
-                type: "select",
-                display: "radio",
-                ignore: "__ignore__",
-                value: "__ignore__",
-                options: [
-                    ["Yes", options.job_id],
-                    ["No", "__ignore__"],
-                ],
-                help: help,
-            });
-        }
-
-        // Job Re-use Options
-        let extra_user_preferences = {};
-        if (Galaxy.user.attributes.preferences && "extra_user_preferences" in Galaxy.user.attributes.preferences) {
-            extra_user_preferences = JSON.parse(Galaxy.user.attributes.preferences.extra_user_preferences);
-        }
-        const use_cached_job =
-            "use_cached_job|use_cached_job_checkbox" in extra_user_preferences
-                ? extra_user_preferences["use_cached_job|use_cached_job_checkbox"]
-                : false;
-        if (use_cached_job === "true") {
-            options.inputs.push({
-                label: "BETA: Attempt to re-use jobs with identical parameters ?",
-                help: "This may skip executing jobs that you have already run",
-                name: "use_cached_job",
-                type: "select",
-                display: "radio",
-                ignore: "__ignore__",
-                value: "__ignore__",
-                options: [
-                    ["No", false],
-                    ["Yes", true],
-                ],
-            });
-        }
-    },
-
-    /** Submit a regular job.
-     * @param{dict}     options   - Specifies tool id and version
-     * @param{function} callback  - Called when request has completed
-     */
-    submit: function (options, callback) {
-        const Galaxy = getGalaxyInstance();
-        const history_id = Galaxy.currHistoryPanel && Galaxy.currHistoryPanel.model.id;
-        const job_def = {
-            history_id: history_id,
-            tool_id: options.id,
-            tool_version: options.version,
-            inputs: this.form.data.create(),
-        };
-        this.form.trigger("reset");
-        if (!this.validate(job_def)) {
-            Galaxy.emit.debug("tool-form::submit()", "Submission canceled. Validation failed.");
-            callback && callback();
-            return;
-        }
-        if (options.action !== `${getAppRoot()}tool_runner/index`) {
-            const $f = $("<form/>").attr({
-                action: options.action,
-                method: options.method,
-                enctype: options.enctype,
-            });
-            _.each(job_def.inputs, (value, key) => {
-                $f.append($("<input/>").attr({ name: key, value: value }));
-            });
-            $f.hide().appendTo("body").submit().remove();
-            callback && callback();
-            return;
-        }
-        Galaxy.emit.debug("tool-form::submit()", "Validation complete.", job_def);
-        Utils.request({
-            type: "POST",
-            url: `${getAppRoot()}api/tools`,
-            data: job_def,
-            success: (response) => {
-                callback && callback();
-                this.$el.children().hide();
-                if (response.produces_entry_points) {
-                    for (const job of response.jobs) {
-                        const toolEntryPointsInstance = Vue.extend(ToolEntryPoints);
-                        const vm = document.createElement("div");
-                        this.$el.append(vm);
-                        const instance = new toolEntryPointsInstance({
-                            propsData: {
-                                jobId: job.id,
-                            },
-                        });
-                        instance.$mount(vm);
-                    }
-                }
-                this.$el.append(this._templateSuccess(response, job_def));
-                const enable_tool_recommendations = Galaxy.config.enable_tool_recommendations;
-                if (enable_tool_recommendations === true || enable_tool_recommendations === "true") {
-                    // show tool recommendations
-                    const ToolRecommendationInstance = Vue.extend(ToolRecommendation);
-                    const vm = document.createElement("div");
-                    this.$el.append(vm);
-                    const instance = new ToolRecommendationInstance({
-                        propsData: {
-                            toolId: job_def.tool_id,
-                        },
-                    });
-                    instance.$mount(vm);
-                }
-                this.$el.parent().scrollTop(0);
-                // Show Webhook if job is running
-                if (response.jobs && response.jobs.length > 0) {
-                    this.$el.append($("<div/>", { id: "webhook-view" }));
-                    new Webhooks.WebhookView({
-                        type: "tool",
-                        toolId: job_def.tool_id,
-                    });
-                }
-                if (Galaxy.currHistoryPanel) {
-                    this.form.stopListening(Galaxy.currHistoryPanel.collection);
-                    Galaxy.currHistoryPanel.refreshContents();
-                }
-            },
-            error: (response) => {
-                callback && callback();
-                Galaxy.emit.debug("tool-form::submit", "Submission failed.", response);
-                let input_found = false;
-                if (response && response.err_data) {
-                    const error_messages = this.form.data.matchResponse(response.err_data);
-                    for (const input_id in error_messages) {
-                        this.form.highlight(input_id, error_messages[input_id]);
-                        input_found = true;
-                        break;
-                    }
-                }
-                if (!input_found) {
-                    this.modal.show({
-                        title: _l("Job submission failed"),
-                        body: this._templateError(job_def, response && response.err_msg),
-                        buttons: {
-                            Close: () => {
-                                this.modal.hide();
-                            },
-                        },
-                    });
-                }
-            },
-        });
-    },
-
-    /** Validate job dictionary.
-     * @param{dict}     job_def   - Job execution dictionary
-     */
-    validate: function (job_def) {
-        const Galaxy = getGalaxyInstance();
-        const job_inputs = job_def.inputs;
-        let batch_n = -1;
-        let batch_src = null;
-        for (const job_input_id in job_inputs) {
-            const input_value = job_inputs[job_input_id];
-            const input_id = this.form.data.match(job_input_id);
-            const input_field = this.form.field_list[input_id];
-            const input_def = this.form.input_list[input_id];
-            if (!input_id || !input_def || !input_field) {
-                Galaxy.emit.debug("tool-form::validate()", "Retrieving input objects failed.");
-                continue;
-            }
-            if (!input_def.optional && input_value == null && input_def.type != "hidden") {
-                this.form.highlight(input_id, "This input requires a value.");
-                return false;
-            }
-            if (input_field.validate) {
-                const message = input_field.validate();
-                if (message) {
-                    this.form.highlight(input_id, message);
-                    return false;
-                }
-            }
-            if (input_value && input_value.batch) {
-                const n = input_value.values.length;
-                const src = n > 0 && input_value.values[0] && input_value.values[0].src;
-                if (src) {
-                    if (batch_src === null) {
-                        batch_src = src;
-                    } else if (batch_src !== src) {
-                        this.form.highlight(
-                            input_id,
-                            "Please select either dataset or dataset list fields for all batch mode fields."
-                        );
-                        return false;
-                    }
-                }
-                if (batch_n === -1) {
-                    batch_n = n;
-                } else if (batch_n !== n) {
-                    this.form.highlight(
-                        input_id,
-                        `Please make sure that you select the same number of inputs for all batch mode fields. This field contains <b>${n}</b> selection(s) while a previous field contains <b>${batch_n}</b>.`
-                    );
-                    return false;
-                }
-            }
-        }
-        return true;
-    },
-
-    _getInputs: function (job_def) {
-        const inputs = [];
-        const index = {};
-        for (const i in job_def.inputs) {
-            const input = job_def.inputs[i];
-            if (input && Array.isArray(input.values)) {
-                for (const j of input.values) {
-                    if (j.src && !index[j.id]) {
-                        inputs.push(j);
-                        index[j.id] = true;
-                    }
-                }
-            }
-        }
-        return inputs;
-    },
-
-    _templateRow: function (list, title) {
-        let blurb = "";
-        if (list.length > 0) {
-            blurb += `<p>${title}:</p>`;
-            list.sort((a, b) => {
-                b.hid - a.hid;
-            });
-            blurb += `<ul>`;
-            for (const item of list) {
-                const rowString = `${item.hid}: ${_.escape(item.name)}`;
-                blurb += `<li><b>${rowString}</b></li>`;
-            }
-            blurb += `</ul>`;
-        }
-        return blurb;
-    },
-
-    _templateSuccess: function (response, job_def) {
-        const njobs = response && response.jobs ? response.jobs.length : 0;
-        if (njobs > 0) {
-            const inputs = this._getInputs(job_def);
-            const ninputs = inputs.length;
-            const noutputs = response.outputs.length;
-            const njobsText = njobs > 1 ? `${njobs} jobs` : `1 job`;
-            const ninputsText = ninputs > 1 ? `${ninputs} inputs` : `this input`;
-            const noutputsText = noutputs > 1 ? `${noutputs} outputs` : `this output`;
-            const tool_name = this.form.model.get("name");
-            return `<div class="donemessagelarge">
-                        <p>
-                            Executed <b>${tool_name}</b> and successfully added ${njobsText} to the queue.
-                        </p>
-                        ${this._templateRow(inputs, `The tool uses ${ninputsText}`)}
-                        ${this._templateRow(response.outputs, `It produces ${noutputsText}`)}
-                        <p>
-                            You can check the status of queued jobs and view the resulting data by refreshing the History panel. When the job has been run the status will change from 'running' to 'finished' if completed successfully or 'error' if problems were encountered.
-                        </p>
-                    </div>`;
-        } else {
-            return this._templateError(response, "Invalid success response. No jobs found.");
-        }
-    },
-
-    _templateError: function (response, err_msg) {
-        return $("<div/>")
-            .addClass("errormessagelarge")
-            .append(
-                $("<p/>").text(
-                    `The server could not complete the request. Please contact the Galaxy Team if this error persists. ${
-                        err_msg || ""
-                    }`
-                )
-            )
-            .append($("<pre/>").text(JSON.stringify(response, null, 4)));
-    },
-});
-
-export default {
-    View: View,
-};
diff --git a/client/tests/qunit/tests/form_tests.js b/client/tests/qunit/tests/form_tests.js
index 2023ebb6f61..1968121230e 100644
--- a/client/tests/qunit/tests/form_tests.js
+++ b/client/tests/qunit/tests/form_tests.js
@@ -8,9 +8,10 @@ import testApp from "../test-app";
 import InputElement from "mvc/form/form-input";
 import Ui from "mvc/ui/ui-misc";
 import FormData from "mvc/form/form-data";
-import ToolForm from "mvc/tool/tool-form";
+import Form from "mvc/form/form-view";
 import Utils from "utils/utils";
 import { getAppRoot } from "onload/loadConfig";
+import toolsTestBuild from "../test-data/json/tools.test.build";
 
 QUnit.module("Form test", {
     beforeEach: function () {
@@ -32,16 +33,9 @@ QUnit.module("Form test", {
     },
 });
 
-QUnit.test("tool-form", function (assert) {
-    var toolform = new ToolForm.View({ id: "test" });
-    $("body").prepend(toolform.$el);
-    window.fakeserver.respond();
-
-    var form = toolform.form;
-    assert.ok(
-        form.$(".portlet-title-text").html() == `<b itemprop="name">_name</b> <span itemprop="description">_description</span> (Galaxy Version _version)`,
-        "Title correct"
-    );
+QUnit.test("form", function (assert) {
+    var form = new Form(toolsTestBuild);
+    $("body").prepend(form.$el);
     var tour_ids = [];
     $("[tour_id]").each(function () {
         tour_ids.push($(this).attr("tour_id"));
@@ -90,7 +84,7 @@ QUnit.test("data", function (assert) {
     Utils.get({
         url: getAppRoot() + "api/tools/test/build",
         success: function (response) {
-            FormData.visitInputs(response.inputs, function (node, name, context) {
+            FormData.visitInputs(response.inputs, function (node, name) {
                 visits.push({ name: name, node: node });
             });
         },
diff --git a/client/yarn.lock b/client/yarn.lock
index a6c52c2924a..69b5628a8a7 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -3239,6 +3239,11 @@ better-assert@~1.0.0:
   dependencies:
     callsite "1.0.0"
 
+bezier-easing@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/bezier-easing/-/bezier-easing-2.1.0.tgz#c04dfe8b926d6ecaca1813d69ff179b7c2025d86"
+  integrity sha1-wE3+i5JtbsrKGBPWn/F5t8ICXYY=
+
 big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
@@ -15173,6 +15178,13 @@ vue-rx@^6.2.0:
   resolved "https://registry.yarnpkg.com/vue-rx/-/vue-rx-6.2.0.tgz#c3b86462b252626edd16417385bb9054a3a23acb"
   integrity sha512-tpKUcqS5IUYS+HsdbR5TlE5LL9PK4zwlplEtmMeydnbqaUTa9ciLMplJXAtFSiQw1vuURoyEJmCXqMxaVEIloQ==
 
+vue-scrollto@^2.20.0:
+  version "2.20.0"
+  resolved "https://registry.yarnpkg.com/vue-scrollto/-/vue-scrollto-2.20.0.tgz#3ba52239a62710c97003d12d4393f1f3393cd5cc"
+  integrity sha512-7i+AGKJTThZnMEkhIPgrZjyAX+fXV7/rGdg+CV283uZZwCxwiMXaBLTmIc5RTA4uwGnT+E6eJle3mXQfM2OD3A==
+  dependencies:
+    bezier-easing "2.1.0"
+
 vue-style-loader@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"

From e6645ec152b71a2ac6c605630e067cf5daeab173 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 27 May 2021 12:45:31 -0400
Subject: [PATCH 02/58] Add new component files for tool form rewrite

---
 .../src/components/Common/ButtonSpinner.vue   |  36 +++
 client/src/components/Common/Webhook.vue      |  27 ++
 .../components/Form/Elements/FormBoolean.vue  |  34 +++
 .../Form/Elements/FormInput.test.js           |  38 +++
 .../components/Form/Elements/FormInput.vue    |  37 +++
 .../components/Form/Elements/Input.test.js    |  38 +++
 client/src/components/Tool/ToolForm.vue       | 275 ++++++++++++++++++
 client/src/components/Tool/ToolSuccess.vue    |  79 +++++
 client/src/components/Tool/utilities.js       |  13 +
 9 files changed, 577 insertions(+)
 create mode 100644 client/src/components/Common/ButtonSpinner.vue
 create mode 100644 client/src/components/Common/Webhook.vue
 create mode 100644 client/src/components/Form/Elements/FormBoolean.vue
 create mode 100644 client/src/components/Form/Elements/FormInput.test.js
 create mode 100644 client/src/components/Form/Elements/FormInput.vue
 create mode 100644 client/src/components/Form/Elements/Input.test.js
 create mode 100644 client/src/components/Tool/ToolForm.vue
 create mode 100644 client/src/components/Tool/ToolSuccess.vue
 create mode 100644 client/src/components/Tool/utilities.js

diff --git a/client/src/components/Common/ButtonSpinner.vue b/client/src/components/Common/ButtonSpinner.vue
new file mode 100644
index 00000000000..c316d4005ed
--- /dev/null
+++ b/client/src/components/Common/ButtonSpinner.vue
@@ -0,0 +1,36 @@
+<template>
+    <b-button v-if="wait" variant="info" disabled>
+        <font-awesome-icon icon="spinner" class="mr-2" spin />Please wait...
+    </b-button>
+    <b-button v-else variant="primary" @click="$emit('onClick')">
+        <font-awesome-icon icon="check" class="mr-2" />{{ title }}
+    </b-button>
+</template>
+<script>
+import Vue from "vue";
+import BootstrapVue from "bootstrap-vue";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCheck, faSpinner } from "@fortawesome/free-solid-svg-icons";
+
+Vue.use(BootstrapVue);
+
+library.add(faCheck);
+library.add(faSpinner);
+
+export default {
+    components: {
+        FontAwesomeIcon,
+    },
+    props: {
+        title: {
+            type: String,
+            required: true,
+        },
+        wait: {
+            type: Boolean,
+            default: false,
+        },
+    },
+};
+</script>
diff --git a/client/src/components/Common/Webhook.vue b/client/src/components/Common/Webhook.vue
new file mode 100644
index 00000000000..72cdbceadb8
--- /dev/null
+++ b/client/src/components/Common/Webhook.vue
@@ -0,0 +1,27 @@
+<template>
+    <div ref="webhook" id="webhook-view" />
+</template>
+<script>
+import Webhooks from "mvc/webhooks";
+
+export default {
+    props: {
+        type: {
+            type: String,
+            required: true,
+        },
+        toolId: {
+            type: String,
+            default: null,
+        },
+    },
+    mounted() {
+        const el = this.$refs["webhook"];
+        new Webhooks.WebhookView({
+            el,
+            type: "tool",
+            toolId: this.toolId,
+        });
+    },
+};
+</script>
diff --git a/client/src/components/Form/Elements/FormBoolean.vue b/client/src/components/Form/Elements/FormBoolean.vue
new file mode 100644
index 00000000000..6e3b3366ee7
--- /dev/null
+++ b/client/src/components/Form/Elements/FormBoolean.vue
@@ -0,0 +1,34 @@
+<template>
+    <b-form-checkbox v-model="currentValue" size="lg" switch @onChange="onChange" />
+</template>
+
+<script>
+import Vue from "vue";
+import BootstrapVue from "bootstrap-vue";
+
+Vue.use(BootstrapVue);
+
+export default {
+    props: {
+        value: {
+            type: Boolean,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            currentValue: this.value,
+        };
+    },
+    watch: {
+        value(newValue) {
+            this.currentValue = newValue;
+        },
+    },
+    methods: {
+        onChange() {
+            this.$emit("onChange", this.currentValue);
+        },
+    },
+};
+</script>
diff --git a/client/src/components/Form/Elements/FormInput.test.js b/client/src/components/Form/Elements/FormInput.test.js
new file mode 100644
index 00000000000..ebe24aa5960
--- /dev/null
+++ b/client/src/components/Form/Elements/FormInput.test.js
@@ -0,0 +1,38 @@
+import { mount } from "@vue/test-utils";
+import { getLocalVue } from "jest/helpers";
+import FormInput from "./FormInput";
+
+jest.mock("app");
+
+const localVue = getLocalVue();
+
+describe("FormInput", () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(FormInput, {
+            propsData: {
+                id: "input",
+                value: "initial_value",
+            },
+            localVue,
+        });
+    });
+
+    it("check initial value and value change", async () => {
+        const input = wrapper.find("input");
+        expect(input.element.value).toBe("initial_value");
+        await input.setValue("new_value");
+        expect(input.element.value).toBe("new_value");
+        expect(wrapper.emitted().onChange[0][0]).toBe("new_value");
+    });
+
+    it("check switching to text area", async () => {
+        await wrapper.setProps({ area: true });
+        const input = wrapper.find("textarea");
+        expect(input.element.value).toBe("initial_value");
+        await input.setValue("new_value");
+        expect(input.element.value).toBe("new_value");
+        expect(wrapper.emitted().onChange[0][0]).toBe("new_value");
+    });
+});
diff --git a/client/src/components/Form/Elements/FormInput.vue b/client/src/components/Form/Elements/FormInput.vue
new file mode 100644
index 00000000000..ee344d00eb5
--- /dev/null
+++ b/client/src/components/Form/Elements/FormInput.vue
@@ -0,0 +1,37 @@
+<template>
+    <textarea v-if="area" class="ui-input" v-model="currentValue" @input="onChange" @change="onChange" />
+    <input v-else class="ui-input" v-model="currentValue" @input="onChange" @change="onChange" />
+</template>
+<script>
+export default {
+    props: {
+        id: {
+            type: String,
+            required: true,
+        },
+        value: {
+            type: String,
+            default: "",
+        },
+        area: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            currentValue: this.value,
+        };
+    },
+    watch: {
+        value(newValue) {
+            this.currentValue = newValue;
+        },
+    },
+    methods: {
+        onChange() {
+            this.$emit("onChange", this.currentValue);
+        },
+    },
+};
+</script>
diff --git a/client/src/components/Form/Elements/Input.test.js b/client/src/components/Form/Elements/Input.test.js
new file mode 100644
index 00000000000..ebe24aa5960
--- /dev/null
+++ b/client/src/components/Form/Elements/Input.test.js
@@ -0,0 +1,38 @@
+import { mount } from "@vue/test-utils";
+import { getLocalVue } from "jest/helpers";
+import FormInput from "./FormInput";
+
+jest.mock("app");
+
+const localVue = getLocalVue();
+
+describe("FormInput", () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(FormInput, {
+            propsData: {
+                id: "input",
+                value: "initial_value",
+            },
+            localVue,
+        });
+    });
+
+    it("check initial value and value change", async () => {
+        const input = wrapper.find("input");
+        expect(input.element.value).toBe("initial_value");
+        await input.setValue("new_value");
+        expect(input.element.value).toBe("new_value");
+        expect(wrapper.emitted().onChange[0][0]).toBe("new_value");
+    });
+
+    it("check switching to text area", async () => {
+        await wrapper.setProps({ area: true });
+        const input = wrapper.find("textarea");
+        expect(input.element.value).toBe("initial_value");
+        await input.setValue("new_value");
+        expect(input.element.value).toBe("new_value");
+        expect(wrapper.emitted().onChange[0][0]).toBe("new_value");
+    });
+});
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
new file mode 100644
index 00000000000..aa8d3f590c6
--- /dev/null
+++ b/client/src/components/Tool/ToolForm.vue
@@ -0,0 +1,275 @@
+<template>
+    <CurrentUser v-slot="{ user }">
+        <div>
+            <LoadingSpan v-if="showLoading" message="Loading Tool" />
+            <div v-if="showEntryPoints">
+                <ToolEntryPoints v-for="job in entryPoints" :job-id="job.id" :key="job.id" />
+            </div>
+            <ToolSuccess v-if="showSuccess" :job-def="jobDef" :job-response="jobResponse" :tool-name="toolName" />
+            <Webhook v-if="showSuccess" type="tool" :tool-id="jobDef.tool_id" />
+            <div v-if="showError" class="errormessagelarge">
+                <p>
+                    The server could not complete the request. Please contact the Galaxy Team if this error persists.
+                    {{ errorTitle | l }}
+                </p>
+                <pre>{{ errorContentPretty }}</pre>
+            </div>
+            <ToolRecommendation v-if="showRecommendation" :tool-id="id" />
+            <FormCardTool
+                v-if="showForm"
+                :id="formConfig.id"
+                :user="user"
+                :version="formConfig.version"
+                :title="formConfig.name"
+                :description="formConfig.description"
+                :options="formConfig"
+                :message-text="messageText"
+                :message-variant="messageVariant"
+                @onChangeVersion="onChangeVersion"
+                @onUpdateFavorites="onUpdateFavorites"
+                itemscope="itemscope"
+                itemtype="https://schema.org/CreativeWork"
+            >
+                <template v-slot:body>
+                    <Form
+                        :id="formConfig.id"
+                        :inputs="inputs"
+                        :validation-errors="validationErrors"
+                        @onChange="onChange"
+                    />
+                    <FormElement
+                        v-if="emailAllowed"
+                        id="send_email_notification"
+                        title="Email notification"
+                        help="Send an email notification when the job completes."
+                        type="boolean"
+                        value="false"
+                        @onChange="onChangeEmail"
+                    />
+                    <FormElement
+                        v-if="remapAllowed"
+                        id="rerun_remap_job_id"
+                        :title="remapTitle"
+                        :help="remapHelp"
+                        type="boolean"
+                        value="false"
+                        @onChange="onChangeRemap"
+                    />
+                    <FormElement
+                        v-if="reuseAllowed"
+                        id="use_cached_job"
+                        title="Attempt to re-use jobs with identical parameters?"
+                        help="This may skip executing jobs that you have already run."
+                        type="boolean"
+                        value="false"
+                        @onChange="onChangeReuse"
+                    />
+                </template>
+                <template v-slot:buttons>
+                    <ButtonSpinner id="execute" title="Execute" @onClick="onExecute" :wait="showExecuting" />
+                </template>
+            </FormCardTool>
+        </div>
+    </CurrentUser>
+</template>
+
+<script>
+import Scroller from "vue-scrollto";
+import { getAppRoot } from "onload/loadConfig";
+import { getGalaxyInstance } from "app";
+import { getTool, submitJob } from "./services";
+import { send } from "./utilities";
+import ButtonSpinner from "components/Common/ButtonSpinner";
+import CurrentUser from "components/providers/CurrentUser";
+import LoadingSpan from "components/LoadingSpan";
+import Form from "components/Form/Form";
+import FormCardTool from "components/Form/FormCardTool";
+import FormElement from "components/Form/FormElement";
+import ToolSuccess from "./ToolSuccess";
+import Webhook from "components/Common/Webhook";
+
+export default {
+    components: {
+        ButtonSpinner,
+        CurrentUser,
+        LoadingSpan,
+        Form,
+        FormCardTool,
+        FormElement,
+        ToolSuccess,
+        Webhook,
+    },
+    props: {
+        id: {
+            type: String,
+            default: null,
+        },
+        version: {
+            type: String,
+            default: null,
+        },
+        job_id: {
+            type: String,
+            default: null,
+        },
+    },
+    data() {
+        return {
+            showLoading: true,
+            showForm: false,
+            showEntryPoints: false,
+            showRecommendation: false,
+            showSuccess: false,
+            showError: false,
+            showExecuting: false,
+            error: null,
+            formConfig: {},
+            formData: {},
+            errorTitle: "",
+            errorContent: null,
+            messageVariant: "",
+            messageText: "",
+            reuse: false,
+            email: false,
+            remap: false,
+            entryPoints: [],
+            jobDef: {},
+            jobResponse: {},
+            validationErrors: {},
+        };
+    },
+    created() {
+        this.requestTool();
+    },
+    computed: {
+        toolName() {
+            return this.formConfig.name;
+        },
+        errorContentPretty() {
+            return JSON.stringify(this.errorContent, null, 4);
+        },
+        emailAllowed() {
+            const Galaxy = getGalaxyInstance();
+            return Galaxy.config.server_mail_configured && !Galaxy.user.isAnonymous();
+        },
+        inputs() {
+            return this.formConfig.inputs;
+        },
+        remapAllowed() {
+            return this.job_id && this.formConfig.job_remap;
+        },
+        remapLabel() {
+            if (this.formConfig.job_remap === "job_produced_collection_elements") {
+                return "Replace elements in collection ?";
+            } else {
+                return "Resume dependencies from this job ?";
+            }
+        },
+        remapHelp() {
+            if (this.formConfig.job_remap === "job_produced_collection_elements") {
+                return "The previous run of this tool failed. Use this option to replace the failed element(s) in the dataset collection that were produced during the previous tool run.";
+            } else {
+                return "The previous run of this tool failed and other tools were waiting for it to finish successfully. Use this option to resume those tools using the new output(s) of this tool run.";
+            }
+        },
+        reuseAllowed() {
+            const Galaxy = getGalaxyInstance();
+            if (Galaxy.user.attributes.preferences && "extra_user_preferences" in Galaxy.user.attributes.preferences) {
+                const extra_user_preferences = JSON.parse(Galaxy.user.attributes.preferences.extra_user_preferences);
+                const keyCached = "use_cached_job|use_cached_job_checkbox";
+                const hasCachedJobs = keyCached in extra_user_preferences;
+                return hasCachedJobs ? extra_user_preferences[keyCached] : false;
+            } else {
+                return false;
+            }
+        },
+    },
+    methods: {
+        onChange(newData) {
+            this.formData = newData;
+        },
+        onChangeVersion(newVersion) {
+            this.requestTool(newVersion);
+        },
+        onChangeEmail(email) {
+            this.email = email;
+        },
+        onChangeRemap(remap) {
+            this.remap = remap ? this.job_id : null;
+        },
+        onChangeReuse(reuse) {
+            this.reuse = reuse;
+        },
+        onUpdateFavorites(user, newFavorites) {
+            user.preferences["favorites"] = newFavorites;
+        },
+        requestTool(newVersion) {
+            const version = newVersion || this.version;
+            getTool(this.id, version, this.job_id).then((data) => {
+                this.formConfig = data;
+                this.showLoading = false;
+                this.showForm = true;
+                if (newVersion) {
+                    this.messageVariant = "success";
+                    this.messageText = `Now you are using '${data.name}' version ${data.version}, id '${data.id}'.`;
+                }
+            });
+        },
+        onExecute() {
+            this.showExecuting = true;
+            const options = this.formData;
+            const Galaxy = getGalaxyInstance();
+            const history_id = Galaxy.currHistoryPanel && Galaxy.currHistoryPanel.model.id;
+            const jobDef = {
+                history_id: history_id,
+                tool_id: this.formConfig.id,
+                tool_version: this.formConfig.version,
+                inputs: this.formData,
+            };
+            if (this.formConfig.action !== `${getAppRoot()}tool_runner/index`) {
+                send(options, jobDef);
+                return;
+            }
+            Galaxy.emit.debug("tool-form::submit()", "Validation complete.", jobDef);
+            submitJob(jobDef).then(
+                (jobResponse) => {
+                    if (Galaxy.currHistoryPanel) {
+                        Galaxy.currHistoryPanel.refreshContents();
+                    }
+                    this.showForm = false;
+                    if (jobResponse.produces_entry_points) {
+                        this.showEntryPoints = true;
+                        this.entryPoints = jobResponse.jobs;
+                    }
+                    const nJobs = jobResponse && jobResponse.jobs ? jobResponse.jobs.length : 0;
+                    if (nJobs > 0) {
+                        this.showSuccess = true;
+                        this.jobDef = jobDef;
+                        this.jobResponse = jobResponse;
+                    } else {
+                        this.showError = true;
+                        this.errorTitle = "Invalid success response. No jobs found.";
+                        this.errorContent = jobResponse;
+                    }
+                    if ([true, "true"].includes(Galaxy.config.enable_tool_recommendations)) {
+                        this.showRecommendation = true;
+                    }
+                    Scroller.scrollTo("body");
+                },
+                (e) => {
+                    this.showExecuting = false;
+                    const errorData = e && e.response && e.response.data && e.response.data.err_data;
+                    if (errorData) {
+                        this.validationErrors = errorData;
+                    } else {
+                        this.showError = true;
+                        this.showForm = false;
+                        this.errorTitle = "Job submission failed";
+                        this.errorContent = this.jobDef;
+                    }
+                }
+            );
+        },
+    },
+};
+</script>
diff --git a/client/src/components/Tool/ToolSuccess.vue b/client/src/components/Tool/ToolSuccess.vue
new file mode 100644
index 00000000000..eeb9e8e3ed6
--- /dev/null
+++ b/client/src/components/Tool/ToolSuccess.vue
@@ -0,0 +1,79 @@
+<template>
+    <div class="donemessagelarge">
+        <p>
+            Executed <b>{{ toolName }}</b> and successfully added {{ nJobsText }} to the queue.
+        </p>
+        <p>The tool uses {{ nInputsText }}:</p>
+        <ul>
+            <li v-for="item of inputs" :key="item.hid">
+                <b>{{ item.hid }}: {{ item.name }}</b>
+            </li>
+        </ul>
+        <p>It produces {{ nOutputsText }}:</p>
+        <ul>
+            <li v-for="item of jobResponse.outputs" :key="item.hid">
+                <b>{{ item.hid }}: {{ item.name }}</b>
+            </li>
+        </ul>
+        <p>
+            You can check the status of queued jobs and view the resulting data by refreshing the History panel. When
+            the job has been run the status will change from 'running' to 'finished' if completed successfully or
+            'error' if problems were encountered.
+        </p>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        jobDef: {
+            type: Object,
+            required: true,
+        },
+        jobResponse: {
+            type: Object,
+            required: true,
+        },
+        toolName: {
+            type: String,
+            required: true,
+        },
+    },
+    computed: {
+        inputs() {
+            const inputs = [];
+            const index = {};
+            for (const i in this.jobDef.inputs) {
+                const input = this.jobDef.inputs[i];
+                if (input && Array.isArray(input.values)) {
+                    for (const j of input.values) {
+                        if (j.src && !index[j.id]) {
+                            inputs.push(j);
+                            index[j.id] = true;
+                        }
+                    }
+                }
+            }
+            return inputs;
+        },
+        nInputs() {
+            return this.inputs.length;
+        },
+        nOutputs() {
+            return this.jobResponse && this.jobResponse.outputs ? this.jobResponse.outputs.length : 0;
+        },
+        nJobs() {
+            return this.jobResponse && this.jobResponse.jobs ? this.jobResponse.jobs.length : 0;
+        },
+        nJobsText() {
+            return this.nJobs > 1 ? `${this.njobs} jobs` : `1 job`;
+        },
+        nInputsText() {
+            return this.nInputs > 1 ? `${this.nInputs} inputs` : `this input`;
+        },
+        nOutputsText() {
+            return this.nOutputs > 1 ? `${this.nOutputs} outputs` : `this output`;
+        },
+    },
+};
+</script>
diff --git a/client/src/components/Tool/utilities.js b/client/src/components/Tool/utilities.js
new file mode 100644
index 00000000000..db25be8f17e
--- /dev/null
+++ b/client/src/components/Tool/utilities.js
@@ -0,0 +1,13 @@
+import $ from "jquery";
+
+export function send(options, job_def) {
+    const $f = $("<form/>").attr({
+        action: options.action,
+        method: options.method,
+        enctype: options.enctype,
+    });
+    Object.entries(job_def.inputs).forEach(([value, key]) => {
+        $f.append($("<input/>").attr({ name: key, value: value }));
+    });
+    $f.hide().appendTo("body").submit().remove();
+}

From aa320638ea3ef8de7e38daa5cf92ae51011c48f3 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 27 May 2021 12:54:38 -0400
Subject: [PATCH 03/58] Fix webhook type parsing in webhook wrapper component

---
 client/src/components/Common/Webhook.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Common/Webhook.vue b/client/src/components/Common/Webhook.vue
index 72cdbceadb8..a3885849690 100644
--- a/client/src/components/Common/Webhook.vue
+++ b/client/src/components/Common/Webhook.vue
@@ -19,7 +19,7 @@ export default {
         const el = this.$refs["webhook"];
         new Webhooks.WebhookView({
             el,
-            type: "tool",
+            type: this.type,
             toolId: this.toolId,
         });
     },

From ac866bf206b9430c0d1d4e6e72c547281eac3ad5 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 27 May 2021 13:35:21 -0400
Subject: [PATCH 04/58] Create parameters for tool request without jquery

---
 client/src/components/Tool/services.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Tool/services.js b/client/src/components/Tool/services.js
index d8a78e45779..58d7194037a 100644
--- a/client/src/components/Tool/services.js
+++ b/client/src/components/Tool/services.js
@@ -1,4 +1,3 @@
-import $ from "jquery";
 import axios from "axios";
 import { rethrowSimple } from "utils/simple-error";
 import { getAppRoot } from "onload/loadConfig";
@@ -6,7 +5,7 @@ import { getGalaxyInstance } from "app";
 
 /** Tools data request helper **/
 export async function getTool(tool_id, tool_version, job_id) {
-    const galaxy = getGalaxyInstance();
+    const Galaxy = getGalaxyInstance();
     let url = "";
     let data = {};
 
@@ -15,15 +14,15 @@ export async function getTool(tool_id, tool_version, job_id) {
         url = `${getAppRoot()}api/jobs/${job_id}/build_for_rerun`;
     } else {
         url = `${getAppRoot()}api/tools/${tool_id}/build`;
-        data = $.extend({}, galaxy.params);
+        data = Object.assign({}, Galaxy.params);
         data["tool_id"] && delete data["tool_id"];
     }
     tool_version && (data["tool_version"] = tool_version);
 
     // attach data to request url
-    if (!$.isEmptyObject(data)) {
-        url += url.indexOf("?") == -1 ? "?" : "&";
-        url += $.param(data, true);
+    if (Object.entries(data).length != 0) {
+        const params = new URLSearchParams(data);
+        url = `${url}?${params.toString()}`;
     }
 
     // request tool data

From 076d1b155bf26ecf2e16ebe84753567d29ed7a55 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 27 May 2021 13:41:52 -0400
Subject: [PATCH 05/58] Fix tool dropdown selector in selenium navigation

---
 client/src/components/Form/FormCardTool.vue | 3 +--
 lib/galaxy/selenium/navigation.yml          | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Form/FormCardTool.vue b/client/src/components/Form/FormCardTool.vue
index 228e4ce6a98..c19d2c272b0 100644
--- a/client/src/components/Form/FormCardTool.vue
+++ b/client/src/components/Form/FormCardTool.vue
@@ -6,12 +6,11 @@
                     <b-dropdown
                         no-caret
                         right
-                        id="options"
                         role="button"
                         title="Options"
                         variant="link"
                         aria-label="View all Options"
-                        class="float-right"
+                        class="tool-dropdown float-right"
                         size="sm"
                         v-b-tooltip.hover
                     >
diff --git a/lib/galaxy/selenium/navigation.yml b/lib/galaxy/selenium/navigation.yml
index 547ad7d1a73..f22b87fb314 100644
--- a/lib/galaxy/selenium/navigation.yml
+++ b/lib/galaxy/selenium/navigation.yml
@@ -361,7 +361,7 @@ registration:
 
 tool_form:
   selectors:
-    options: '#options [data-toggle="dropdown"]'
+    options: '.tool-dropdown'
     execute: 'button#execute'
     parameter_div: 'div.ui-form-element[tour_id="${parameter}"]'
     parameter_textarea: 'div.ui-form-element[tour_id="${parameter}"] textarea'

From 21ff5238635c65115f0cd5f50431c9c888925049 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 27 May 2021 13:53:01 -0400
Subject: [PATCH 06/58] Rename tool card for consistency

---
 .../components/{Form/FormCardTool.vue => Tool/ToolCard.vue} | 2 +-
 client/src/components/Tool/ToolForm.vue                     | 6 +++---
 client/src/components/Workflow/Editor/Forms/FormTool.vue    | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)
 rename client/src/components/{Form/FormCardTool.vue => Tool/ToolCard.vue} (99%)

diff --git a/client/src/components/Form/FormCardTool.vue b/client/src/components/Tool/ToolCard.vue
similarity index 99%
rename from client/src/components/Form/FormCardTool.vue
rename to client/src/components/Tool/ToolCard.vue
index c19d2c272b0..ac756f73f31 100644
--- a/client/src/components/Form/FormCardTool.vue
+++ b/client/src/components/Tool/ToolCard.vue
@@ -106,7 +106,7 @@
 <script>
 import ariaAlert from "utils/ariaAlert";
 import { copyLink, downloadTool, openLink } from "./utilities";
-import FormMessage from "./FormMessage";
+import FormMessage from "components/Form/FormMessage";
 import ToolFooter from "components/Tool/ToolFooter";
 import ToolHelp from "components/Tool/ToolHelp";
 import Webhooks from "mvc/webhooks";
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index aa8d3f590c6..b3b8f92853c 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -15,7 +15,7 @@
                 <pre>{{ errorContentPretty }}</pre>
             </div>
             <ToolRecommendation v-if="showRecommendation" :tool-id="id" />
-            <FormCardTool
+            <ToolCard
                 v-if="showForm"
                 :id="formConfig.id"
                 :user="user"
@@ -68,7 +68,7 @@
                 <template v-slot:buttons>
                     <ButtonSpinner id="execute" title="Execute" @onClick="onExecute" :wait="showExecuting" />
                 </template>
-            </FormCardTool>
+            </ToolCard>
         </div>
     </CurrentUser>
 </template>
@@ -79,11 +79,11 @@ import { getAppRoot } from "onload/loadConfig";
 import { getGalaxyInstance } from "app";
 import { getTool, submitJob } from "./services";
 import { send } from "./utilities";
+import ToolCard from "./ToolCard";
 import ButtonSpinner from "components/Common/ButtonSpinner";
 import CurrentUser from "components/providers/CurrentUser";
 import LoadingSpan from "components/LoadingSpan";
 import Form from "components/Form/Form";
-import FormCardTool from "components/Form/FormCardTool";
 import FormElement from "components/Form/FormElement";
 import ToolSuccess from "./ToolSuccess";
 import Webhook from "components/Common/Webhook";
diff --git a/client/src/components/Workflow/Editor/Forms/FormTool.vue b/client/src/components/Workflow/Editor/Forms/FormTool.vue
index 45f81bdf325..54ff87df4ba 100644
--- a/client/src/components/Workflow/Editor/Forms/FormTool.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormTool.vue
@@ -1,6 +1,6 @@
 <template>
     <CurrentUser v-slot="{ user }">
-        <FormCardTool
+        <ToolCard
             :id="node.config_form.id"
             :user="user"
             :version="node.config_form.version"
@@ -46,14 +46,14 @@
                     @onChangeOutputDatatype="onChangeOutputDatatype"
                 />
             </template>
-        </FormCardTool>
+        </ToolCard>
     </CurrentUser>
 </template>
 
 <script>
 import CurrentUser from "components/providers/CurrentUser";
 import Form from "components/Form/Form";
-import FormCardTool from "components/Form/FormCardTool";
+import ToolCard from "components/Tool/ToolCard";
 import FormSection from "./FormSection";
 import FormElement from "components/Form/FormElement";
 import { getModule } from "components/Workflow/Editor/modules/services";

From 201cbc8c890a077fc1e6a025d8bdc89bc9d6c8dc Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 27 May 2021 14:49:12 -0400
Subject: [PATCH 07/58] Fix reference in workflow editor test case

---
 client/src/components/Workflow/Editor/Forms/FormTool.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Workflow/Editor/Forms/FormTool.vue b/client/src/components/Workflow/Editor/Forms/FormTool.vue
index 54ff87df4ba..b5734bbae91 100644
--- a/client/src/components/Workflow/Editor/Forms/FormTool.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormTool.vue
@@ -64,7 +64,7 @@ export default {
     components: {
         CurrentUser,
         Form,
-        FormCardTool,
+        ToolCard,
         FormElement,
         FormSection,
     },

From d093a705fcb86e0a9990663701581c5a32f3bcbb Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 27 May 2021 15:40:40 -0400
Subject: [PATCH 08/58] Fix component import in Tool Form component

---
 client/src/components/Tool/ToolForm.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index b3b8f92853c..8f8e388ba57 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -94,7 +94,7 @@ export default {
         CurrentUser,
         LoadingSpan,
         Form,
-        FormCardTool,
+        ToolCard,
         FormElement,
         ToolSuccess,
         Webhook,

From a2025333baee69a74b6468892104bcd40915090e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 27 May 2021 16:43:41 -0400
Subject: [PATCH 09/58] Move utilities to tool card location

---
 client/src/components/Form/utilities.js | 14 --------------
 client/src/components/Tool/utilities.js | 14 ++++++++++++++
 lib/galaxy/selenium/navigation.yml      |  2 +-
 3 files changed, 15 insertions(+), 15 deletions(-)
 delete mode 100644 client/src/components/Form/utilities.js

diff --git a/client/src/components/Form/utilities.js b/client/src/components/Form/utilities.js
deleted file mode 100644
index d0d4e736c5b..00000000000
--- a/client/src/components/Form/utilities.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { getAppRoot } from "onload/loadConfig";
-import { copy } from "utils/clipboard";
-
-export function copyLink(toolId, message) {
-    copy(`${window.location.origin + getAppRoot()}root?tool_id=${toolId}`, message);
-}
-
-export function downloadTool(toolId) {
-    window.location.href = `${getAppRoot()}api/tools/${toolId}/download`;
-}
-
-export function openLink(url) {
-    window.open(url);
-}
diff --git a/client/src/components/Tool/utilities.js b/client/src/components/Tool/utilities.js
index db25be8f17e..0c8fb372b77 100644
--- a/client/src/components/Tool/utilities.js
+++ b/client/src/components/Tool/utilities.js
@@ -1,4 +1,18 @@
 import $ from "jquery";
+import { getAppRoot } from "onload/loadConfig";
+import { copy } from "utils/clipboard";
+
+export function copyLink(toolId, message) {
+    copy(`${window.location.origin + getAppRoot()}root?tool_id=${toolId}`, message);
+}
+
+export function downloadTool(toolId) {
+    window.location.href = `${getAppRoot()}api/tools/${toolId}/download`;
+}
+
+export function openLink(url) {
+    window.open(url);
+}
 
 export function send(options, job_def) {
     const $f = $("<form/>").attr({
diff --git a/lib/galaxy/selenium/navigation.yml b/lib/galaxy/selenium/navigation.yml
index f22b87fb314..81c9a798f51 100644
--- a/lib/galaxy/selenium/navigation.yml
+++ b/lib/galaxy/selenium/navigation.yml
@@ -369,7 +369,7 @@ tool_form:
     about: '.tool-footer'
 
   labels:
-    generate_tour: 'Generate Tour'
+    generate_tour: ' Generate Tour'
 
 workflows:
 

From 65f0335d96ebe684e42f8d81a1f13ba8fea34dd7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 28 May 2021 12:14:38 -0400
Subject: [PATCH 10/58] Unify dropdown item icon margins and used fixed icon
 width

---
 client/src/components/Tool/ToolCard.vue       | 28 +++++++++----------
 .../components/Workflow/Editor/Options.vue    | 12 ++++----
 client/src/style/scss/overrides.scss          |  5 ++++
 lib/galaxy/selenium/navigation.yml            |  2 +-
 4 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/client/src/components/Tool/ToolCard.vue b/client/src/components/Tool/ToolCard.vue
index ac756f73f31..aa43e3184da 100644
--- a/client/src/components/Tool/ToolCard.vue
+++ b/client/src/components/Tool/ToolCard.vue
@@ -17,19 +17,17 @@
                         <template v-slot:button-content>
                             <span class="fa fa-caret-down" />
                         </template>
-                        <b-dropdown-item @click="onCopyLink"> <span class="fa fa-chain" /> Copy Link </b-dropdown-item>
-                        <b-dropdown-item @click="onCopyId">
-                            <span class="fa fa-files-o" /> Copy Tool ID
-                        </b-dropdown-item>
-                        <b-dropdown-item v-if="showDownload" @click="onDownload">
-                            <span class="fa fa-download" /> Download
-                        </b-dropdown-item>
-                        <b-dropdown-item v-if="showLink" @click="onLink">
-                            <span class="fa fa-external-link" /> See in Tool Shed
-                        </b-dropdown-item>
-                        <b-dropdown-item v-for="w of webhookDetails" :key="w.title" @click="w.onclick">
-                            <span :class="w.icon" /> {{ w.title }}
-                        </b-dropdown-item>
+                        <b-dropdown-item @click="onCopyLink"> <icon class="fa-chain" />Copy Link</b-dropdown-item>
+                        <b-dropdown-item @click="onCopyId"><icon class="fa-files-o" />Copy Tool ID</b-dropdown-item>
+                        <b-dropdown-item v-if="showDownload" @click="onDownload"
+                            ><icon class="fa-download" />Download</b-dropdown-item
+                        >
+                        <b-dropdown-item v-if="showLink" @click="onLink"
+                            ><icon class="fa-external-link" />See in Tool Shed</b-dropdown-item
+                        >
+                        <b-dropdown-item v-for="w of webhookDetails" :key="w.title" @click="w.onclick"
+                            ><icon :class="w.icon" />{{ w.title }}</b-dropdown-item
+                        >
                     </b-dropdown>
                     <b-dropdown
                         v-if="showVersions"
@@ -47,8 +45,8 @@
                             <span class="fa fa-cubes" />
                         </template>
                         <b-dropdown-item v-for="v of availableVersions" :key="v" @click="$emit('onChangeVersion', v)">
-                            <span class="fa fa-cube" /> Switch to {{ v }}
-                        </b-dropdown-item>
+                            <icon class="fa-cube" />Switch to {{ v }}</b-dropdown-item
+                        >
                     </b-dropdown>
                     <b-button
                         v-if="showAddFavorite"
diff --git a/client/src/components/Workflow/Editor/Options.vue b/client/src/components/Workflow/Editor/Options.vue
index 552d1eda949..a4fd6d29edf 100644
--- a/client/src/components/Workflow/Editor/Options.vue
+++ b/client/src/components/Workflow/Editor/Options.vue
@@ -52,19 +52,17 @@
                 <span class="fa fa-cog" />
             </template>
             <b-dropdown-item href="#" @click="$emit('onSaveAs')"
-                ><span class="fa fa-floppy-o mr-1" />Save As...</b-dropdown-item
+                ><icon class="fa-floppy-o" />Save As...</b-dropdown-item
             >
             <b-dropdown-item href="#" @click="$emit('onLayout')"
-                ><span class="fa fa-align-left mr-1" />Auto Layout</b-dropdown-item
-            >
-            <b-dropdown-item href="#" @click="$emit('onLint')"
-                ><span class="fa fa-magic mr-1" />Best Practices</b-dropdown-item
+                ><icon class="fa-align-left" />Auto Layout</b-dropdown-item
             >
+            <b-dropdown-item href="#" @click="$emit('onLint')"><icon class="fa-magic" />Best Practices</b-dropdown-item>
             <b-dropdown-item href="#" @click="$emit('onUpgrade')"
-                ><span class="fa fa-recycle mr-1" />Upgrade Workflow</b-dropdown-item
+                ><icon class="fa-recycle" />Upgrade Workflow</b-dropdown-item
             >
             <b-dropdown-item href="#" @click="$emit('onDownload')"
-                ><span class="fa fa-download mr-1" />Download</b-dropdown-item
+                ><icon class="fa-download" />Download</b-dropdown-item
             >
         </b-dropdown>
         <b-button
diff --git a/client/src/style/scss/overrides.scss b/client/src/style/scss/overrides.scss
index 9593a7323db..6e6a9648dbb 100644
--- a/client/src/style/scss/overrides.scss
+++ b/client/src/style/scss/overrides.scss
@@ -35,6 +35,11 @@ pre {
 .dropdown-menu {
     .dropdown-item {
         text-decoration: none;
+        icon {
+            @extend .fa;
+            @extend .fa-fw;
+            @extend .mr-2;
+        }
     }
 }
 
diff --git a/lib/galaxy/selenium/navigation.yml b/lib/galaxy/selenium/navigation.yml
index 81c9a798f51..f22b87fb314 100644
--- a/lib/galaxy/selenium/navigation.yml
+++ b/lib/galaxy/selenium/navigation.yml
@@ -369,7 +369,7 @@ tool_form:
     about: '.tool-footer'
 
   labels:
-    generate_tour: ' Generate Tour'
+    generate_tour: 'Generate Tour'
 
 workflows:
 

From 60dfd029c3fa5fee39352508d3e61ac9afd035c4 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 1 Jun 2021 12:02:57 -0400
Subject: [PATCH 11/58] Fix webhhook attachments to tool dropdown menu

---
 client/src/components/Tool/ToolCard.vue           | 14 +++++++-------
 client/src/components/Workflow/Editor/Options.vue | 12 +++++++-----
 client/src/style/scss/overrides.scss              |  3 +--
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/client/src/components/Tool/ToolCard.vue b/client/src/components/Tool/ToolCard.vue
index aa43e3184da..a1aa4b768ef 100644
--- a/client/src/components/Tool/ToolCard.vue
+++ b/client/src/components/Tool/ToolCard.vue
@@ -17,16 +17,16 @@
                         <template v-slot:button-content>
                             <span class="fa fa-caret-down" />
                         </template>
-                        <b-dropdown-item @click="onCopyLink"> <icon class="fa-chain" />Copy Link</b-dropdown-item>
-                        <b-dropdown-item @click="onCopyId"><icon class="fa-files-o" />Copy Tool ID</b-dropdown-item>
+                        <b-dropdown-item @click="onCopyLink"><span class="fa fa-chain" />Copy Link</b-dropdown-item>
+                        <b-dropdown-item @click="onCopyId"><span class="fa fa-files-o" />Copy Tool ID</b-dropdown-item>
                         <b-dropdown-item v-if="showDownload" @click="onDownload"
-                            ><icon class="fa-download" />Download</b-dropdown-item
+                            ><span class="fa fa-download" />Download</b-dropdown-item
                         >
                         <b-dropdown-item v-if="showLink" @click="onLink"
-                            ><icon class="fa-external-link" />See in Tool Shed</b-dropdown-item
+                            ><span class="fa fa-external-link" />See in Tool Shed</b-dropdown-item
                         >
                         <b-dropdown-item v-for="w of webhookDetails" :key="w.title" @click="w.onclick"
-                            ><icon :class="w.icon" />{{ w.title }}</b-dropdown-item
+                            ><span :class="w.icon" />{{ w.title }}</b-dropdown-item
                         >
                     </b-dropdown>
                     <b-dropdown
@@ -45,7 +45,7 @@
                             <span class="fa fa-cubes" />
                         </template>
                         <b-dropdown-item v-for="v of availableVersions" :key="v" @click="$emit('onChangeVersion', v)">
-                            <icon class="fa-cube" />Switch to {{ v }}</b-dropdown-item
+                            <i class="fa-cube" />Switch to {{ v }}</b-dropdown-item
                         >
                     </b-dropdown>
                     <b-button
@@ -204,7 +204,7 @@ export default {
                         this.webhookDetails.push({
                             icon: `fa ${webhook.config.icon}`,
                             title: webhook.config.title,
-                            onclick: function () {
+                            onclick: () => {
                                 const func = new Function("options", webhook.config.function);
                                 func(this.options);
                             },
diff --git a/client/src/components/Workflow/Editor/Options.vue b/client/src/components/Workflow/Editor/Options.vue
index a4fd6d29edf..da81a9dbc16 100644
--- a/client/src/components/Workflow/Editor/Options.vue
+++ b/client/src/components/Workflow/Editor/Options.vue
@@ -52,17 +52,19 @@
                 <span class="fa fa-cog" />
             </template>
             <b-dropdown-item href="#" @click="$emit('onSaveAs')"
-                ><icon class="fa-floppy-o" />Save As...</b-dropdown-item
+                ><span class="fa fa-floppy-o" />Save As...</b-dropdown-item
             >
             <b-dropdown-item href="#" @click="$emit('onLayout')"
-                ><icon class="fa-align-left" />Auto Layout</b-dropdown-item
+                ><span class="fa fa-align-left" />Auto Layout</b-dropdown-item
+            >
+            <b-dropdown-item href="#" @click="$emit('onLint')"
+                ><span class="fa fa-magic" />Best Practices</b-dropdown-item
             >
-            <b-dropdown-item href="#" @click="$emit('onLint')"><icon class="fa-magic" />Best Practices</b-dropdown-item>
             <b-dropdown-item href="#" @click="$emit('onUpgrade')"
-                ><icon class="fa-recycle" />Upgrade Workflow</b-dropdown-item
+                ><span class="fa fa-recycle" />Upgrade Workflow</b-dropdown-item
             >
             <b-dropdown-item href="#" @click="$emit('onDownload')"
-                ><icon class="fa-download" />Download</b-dropdown-item
+                ><span class="fa fa-download" />Download</b-dropdown-item
             >
         </b-dropdown>
         <b-button
diff --git a/client/src/style/scss/overrides.scss b/client/src/style/scss/overrides.scss
index 6e6a9648dbb..637584c2382 100644
--- a/client/src/style/scss/overrides.scss
+++ b/client/src/style/scss/overrides.scss
@@ -35,8 +35,7 @@ pre {
 .dropdown-menu {
     .dropdown-item {
         text-decoration: none;
-        icon {
-            @extend .fa;
+        .fa {
             @extend .fa-fw;
             @extend .mr-2;
         }

From 4fb49d6cb5a18de12e45502975bffb2ba2800986 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 2 Jun 2021 13:19:26 -0400
Subject: [PATCH 12/58] Add history listener to tool form component

---
 client/src/components/Tool/ToolForm.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 8f8e388ba57..d0229e9e7e1 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -136,10 +136,17 @@ export default {
             jobDef: {},
             jobResponse: {},
             validationErrors: {},
+            currentVersion: this.version,
         };
     },
     created() {
         this.requestTool();
+        const Galaxy = getGalaxyInstance();
+        if (Galaxy.currHistoryPanel) {
+            Galaxy.currHistoryPanel.collection.on("change", () => {
+                this.requestTool();
+            });
+        }
     },
     computed: {
         toolName() {
@@ -204,8 +211,8 @@ export default {
             user.preferences["favorites"] = newFavorites;
         },
         requestTool(newVersion) {
-            const version = newVersion || this.version;
-            getTool(this.id, version, this.job_id).then((data) => {
+            this.currentVersion = newVersion || this.currentVersion;
+            getTool(this.id, currentVersion, this.job_id).then((data) => {
                 this.formConfig = data;
                 this.showLoading = false;
                 this.showForm = true;

From 7cdffe4b68bf9ae378a1a12945340b40467a6916 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 2 Jun 2021 20:54:32 -0400
Subject: [PATCH 13/58] Fix tool state update handling in tool form

---
 client/src/components/Form/Form.vue     | 10 ++++++----
 client/src/components/Tool/ToolForm.vue | 14 +++++++++++---
 client/src/components/Tool/services.js  | 15 +++++++++++++++
 client/src/mvc/form/form-view.js        |  4 ++--
 4 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Form/Form.vue b/client/src/components/Form/Form.vue
index a9bc63db550..8563c483e22 100644
--- a/client/src/components/Form/Form.vue
+++ b/client/src/components/Form/Form.vue
@@ -64,8 +64,7 @@ export default {
         this.onRender();
     },
     beforeDestroy() {
-        const Galaxy = getGalaxyInstance();
-        this.form.stopListening(Galaxy.currHistoryPanel.collection);
+        this.form.off();
     },
     computed: {
         validation() {
@@ -128,13 +127,16 @@ export default {
                     initial_errors: this.initialErrors,
                     text_enable: this.textEnable,
                     text_disable: this.textDisable,
-                }).on("change", this.onChange);
+                    onchange: () => {
+                        this.onChange();
+                    },
+                });
                 this.onChange();
             });
         },
         parseUpdate(data) {
             this.$nextTick(() => {
-                this.form.update(data, false);
+                this.form.update(data);
             });
         },
         parseErrors(data) {
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index d0229e9e7e1..f93a7b2c0bd 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -36,6 +36,7 @@
                         :inputs="inputs"
                         :validation-errors="validationErrors"
                         @onChange="onChange"
+                        ref="form"
                     />
                     <FormElement
                         v-if="emailAllowed"
@@ -77,7 +78,7 @@
 import Scroller from "vue-scrollto";
 import { getAppRoot } from "onload/loadConfig";
 import { getGalaxyInstance } from "app";
-import { getTool, submitJob } from "./services";
+import { getTool, submitJob, updateTool } from "./services";
 import { send } from "./utilities";
 import ToolCard from "./ToolCard";
 import ButtonSpinner from "components/Common/ButtonSpinner";
@@ -144,7 +145,7 @@ export default {
         const Galaxy = getGalaxyInstance();
         if (Galaxy.currHistoryPanel) {
             Galaxy.currHistoryPanel.collection.on("change", () => {
-                this.requestTool();
+                this.onUpdate();
             });
         }
     },
@@ -194,6 +195,13 @@ export default {
     methods: {
         onChange(newData) {
             this.formData = newData;
+            this.onUpdate();
+        },
+        onUpdate() {
+            updateTool(this.id, this.currentVersion, this.formData).then((data) => {
+                const form = this.$refs["form"];
+                form.parseUpdate(data, true);
+            });
         },
         onChangeVersion(newVersion) {
             this.requestTool(newVersion);
@@ -212,7 +220,7 @@ export default {
         },
         requestTool(newVersion) {
             this.currentVersion = newVersion || this.currentVersion;
-            getTool(this.id, currentVersion, this.job_id).then((data) => {
+            getTool(this.id, this.currentVersion, this.job_id).then((data) => {
                 this.formConfig = data;
                 this.showLoading = false;
                 this.showForm = true;
diff --git a/client/src/components/Tool/services.js b/client/src/components/Tool/services.js
index 58d7194037a..1c34dab0630 100644
--- a/client/src/components/Tool/services.js
+++ b/client/src/components/Tool/services.js
@@ -3,6 +3,21 @@ import { rethrowSimple } from "utils/simple-error";
 import { getAppRoot } from "onload/loadConfig";
 import { getGalaxyInstance } from "app";
 
+export async function updateTool(tool_id, tool_version, inputs) {
+    const current_state = {
+        tool_id: tool_id,
+        tool_version: tool_version,
+        inputs: inputs,
+    };
+    const url = `${getAppRoot()}api/tools/${tool_id}/build`;
+    try {
+        const { data } = await axios.post(url, current_state);
+        return data;
+    } catch (e) {
+        rethrowSimple(e);
+    }
+}
+
 /** Tools data request helper **/
 export async function getTool(tool_id, tool_version, job_id) {
     const Galaxy = getGalaxyInstance();
diff --git a/client/src/mvc/form/form-view.js b/client/src/mvc/form/form-view.js
index e7b14bd92b1..78bd6dd1c6e 100644
--- a/client/src/mvc/form/form-view.js
+++ b/client/src/mvc/form/form-view.js
@@ -26,13 +26,13 @@ export default Backbone.View.extend({
     },
 
     /** Update available options */
-    update: function (new_model, triggerChange = true) {
+    update: function (new_model) {
         var self = this;
         this.data.matchModel(new_model, (node, input_id) => {
             var field = self.field_list[input_id];
             if (field.update) {
                 field.update(node);
-                triggerChange && field.trigger("change");
+                field.trigger("change");
                 const Galaxy = getGalaxyInstance();
                 Galaxy.emit.debug("form-view::update()", `Updating input: ${input_id}`);
             }

From 77db9ed2ac01aec22ed6424f3f51bc3dc28194c8 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 2 Jun 2021 21:03:06 -0400
Subject: [PATCH 14/58] Add watcher to update tool state options for form
 components

---
 client/src/components/Form/Form.vue                      | 8 ++++++++
 client/src/components/Tool/ToolForm.vue                  | 5 ++---
 client/src/components/Workflow/Editor/Forms/FormTool.vue | 7 +++----
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Form/Form.vue b/client/src/components/Form/Form.vue
index 8563c483e22..064f7b7872c 100644
--- a/client/src/components/Form/Form.vue
+++ b/client/src/components/Form/Form.vue
@@ -32,6 +32,10 @@ export default {
             type: Object,
             default: null,
         },
+        formConfig: {
+            type: Object,
+            default: null,
+        },
     },
     data() {
         return {
@@ -59,6 +63,10 @@ export default {
                 }
             }
         },
+        formConfig() {
+            this.parseUpdate(this.formConfig);
+            this.parseErrors(this.formConfig);
+        },
     },
     mounted() {
         this.onRender();
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index f93a7b2c0bd..a1a5a875029 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -35,8 +35,8 @@
                         :id="formConfig.id"
                         :inputs="inputs"
                         :validation-errors="validationErrors"
+                        :form-config="formConfig"
                         @onChange="onChange"
-                        ref="form"
                     />
                     <FormElement
                         v-if="emailAllowed"
@@ -199,8 +199,7 @@ export default {
         },
         onUpdate() {
             updateTool(this.id, this.currentVersion, this.formData).then((data) => {
-                const form = this.$refs["form"];
-                form.parseUpdate(data, true);
+                this.formConfig = data;
             });
         },
         onChangeVersion(newVersion) {
diff --git a/client/src/components/Workflow/Editor/Forms/FormTool.vue b/client/src/components/Workflow/Editor/Forms/FormTool.vue
index b5734bbae91..27c73564b86 100644
--- a/client/src/components/Workflow/Editor/Forms/FormTool.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormTool.vue
@@ -33,10 +33,10 @@
                     :id="id"
                     :inputs="inputs"
                     :initial-errors="true"
+                    :form-config="formConfig"
                     text-enable="Set in Advance"
                     text-disable="Set at Runtime"
                     @onChange="onChange"
-                    ref="form"
                 />
                 <FormSection
                     :id="id"
@@ -88,6 +88,7 @@ export default {
             sectionValues: {},
             messageVariant: "",
             messageText: "",
+            formConfig: {},
         };
     },
     computed: {
@@ -161,9 +162,7 @@ export default {
                 inputs: Object.assign({}, this.mainValues, this.sectionValues),
             }).then((data) => {
                 this.$emit("onSetData", this.node.id, data);
-                const form = this.$refs["form"];
-                form.parseUpdate(data.config_form);
-                form.parseErrors(data.config_form);
+                this.formConfig = data;
                 if (newVersion) {
                     const options = data.config_form;
                     this.messageVariant = "success";

From cd2ae5c01babaaa8deca56eb75a02c413a94964b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 2 Jun 2021 21:08:12 -0400
Subject: [PATCH 15/58] Fix style of version change dropdown

---
 client/src/components/Tool/ToolCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Tool/ToolCard.vue b/client/src/components/Tool/ToolCard.vue
index a1aa4b768ef..0fafec27465 100644
--- a/client/src/components/Tool/ToolCard.vue
+++ b/client/src/components/Tool/ToolCard.vue
@@ -45,7 +45,7 @@
                             <span class="fa fa-cubes" />
                         </template>
                         <b-dropdown-item v-for="v of availableVersions" :key="v" @click="$emit('onChangeVersion', v)">
-                            <i class="fa-cube" />Switch to {{ v }}</b-dropdown-item
+                            <span class="fa fa-cube" />Switch to {{ v }}</b-dropdown-item
                         >
                     </b-dropdown>
                     <b-button

From 273fe60a2eb746a8c15fb20fee0ea399dbcea757 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 2 Jun 2021 21:20:15 -0400
Subject: [PATCH 16/58] Allow optional error highlighting on data change

---
 client/src/components/Form/Form.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Form/Form.vue b/client/src/components/Form/Form.vue
index 064f7b7872c..ddc7ff78f78 100644
--- a/client/src/components/Form/Form.vue
+++ b/client/src/components/Form/Form.vue
@@ -65,7 +65,9 @@ export default {
         },
         formConfig() {
             this.parseUpdate(this.formConfig);
-            this.parseErrors(this.formConfig);
+            if (this.initialErrors) {
+                this.parseErrors(this.formConfig);
+            }
         },
     },
     mounted() {

From c7b920e796f56fbfed88caa99e6e5c33c06a5fa9 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 2 Jun 2021 23:59:10 -0400
Subject: [PATCH 17/58] Remove unused reference to global galaxy object in form
 component

---
 client/src/components/Form/Form.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/Form/Form.vue b/client/src/components/Form/Form.vue
index ddc7ff78f78..0a210b29860 100644
--- a/client/src/components/Form/Form.vue
+++ b/client/src/components/Form/Form.vue
@@ -3,7 +3,6 @@
 </template>
 
 <script>
-import { getGalaxyInstance } from "app";
 import Form from "mvc/form/form-view";
 
 export default {

From cbdca0b491f867d8e1ca56d113474ed1d8c3e597 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 4 Jun 2021 14:28:43 -0400
Subject: [PATCH 18/58] Fix potentially section key duplication, occurs during
 testing

---
 client/src/components/Panels/ToolBox.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 73167474b32..fca9bd812ce 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -28,10 +28,10 @@
             <div class="toolMenuContainer">
                 <div class="toolMenu">
                     <tool-section
-                        v-for="section in sections"
+                        v-for="(section, key) in sections"
                         :category="section"
                         :query-filter="queryFilter"
-                        :key="section.id"
+                        :key="key"
                         @onClick="onOpen"
                     />
                 </div>

From baac74de6d26e9723ff6d5252911e3b2f350fa66 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 4 Jun 2021 15:25:48 -0400
Subject: [PATCH 19/58] Remove default bootstrap vue imports

---
 client/src/components/Common/ButtonSpinner.vue      | 3 ---
 client/src/components/Form/Elements/FormBoolean.vue | 5 -----
 2 files changed, 8 deletions(-)

diff --git a/client/src/components/Common/ButtonSpinner.vue b/client/src/components/Common/ButtonSpinner.vue
index c316d4005ed..a9f1d40109d 100644
--- a/client/src/components/Common/ButtonSpinner.vue
+++ b/client/src/components/Common/ButtonSpinner.vue
@@ -8,13 +8,10 @@
 </template>
 <script>
 import Vue from "vue";
-import BootstrapVue from "bootstrap-vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheck, faSpinner } from "@fortawesome/free-solid-svg-icons";
 
-Vue.use(BootstrapVue);
-
 library.add(faCheck);
 library.add(faSpinner);
 
diff --git a/client/src/components/Form/Elements/FormBoolean.vue b/client/src/components/Form/Elements/FormBoolean.vue
index 6e3b3366ee7..d135c5d7f82 100644
--- a/client/src/components/Form/Elements/FormBoolean.vue
+++ b/client/src/components/Form/Elements/FormBoolean.vue
@@ -3,11 +3,6 @@
 </template>
 
 <script>
-import Vue from "vue";
-import BootstrapVue from "bootstrap-vue";
-
-Vue.use(BootstrapVue);
-
 export default {
     props: {
         value: {

From 598c88a7056393e8d66ace46c5c35a8430e40fa3 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 4 Jun 2021 15:27:12 -0400
Subject: [PATCH 20/58] Remove duplicate input component files and tests

---
 .../components/Form/Elements/Input.test.js    | 38 -------------------
 client/src/components/Form/FormInput.test.js  | 38 -------------------
 client/src/components/Form/FormInput.vue      | 37 ------------------
 3 files changed, 113 deletions(-)
 delete mode 100644 client/src/components/Form/Elements/Input.test.js
 delete mode 100644 client/src/components/Form/FormInput.test.js
 delete mode 100644 client/src/components/Form/FormInput.vue

diff --git a/client/src/components/Form/Elements/Input.test.js b/client/src/components/Form/Elements/Input.test.js
deleted file mode 100644
index ebe24aa5960..00000000000
--- a/client/src/components/Form/Elements/Input.test.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { getLocalVue } from "jest/helpers";
-import FormInput from "./FormInput";
-
-jest.mock("app");
-
-const localVue = getLocalVue();
-
-describe("FormInput", () => {
-    let wrapper;
-
-    beforeEach(() => {
-        wrapper = mount(FormInput, {
-            propsData: {
-                id: "input",
-                value: "initial_value",
-            },
-            localVue,
-        });
-    });
-
-    it("check initial value and value change", async () => {
-        const input = wrapper.find("input");
-        expect(input.element.value).toBe("initial_value");
-        await input.setValue("new_value");
-        expect(input.element.value).toBe("new_value");
-        expect(wrapper.emitted().onChange[0][0]).toBe("new_value");
-    });
-
-    it("check switching to text area", async () => {
-        await wrapper.setProps({ area: true });
-        const input = wrapper.find("textarea");
-        expect(input.element.value).toBe("initial_value");
-        await input.setValue("new_value");
-        expect(input.element.value).toBe("new_value");
-        expect(wrapper.emitted().onChange[0][0]).toBe("new_value");
-    });
-});
diff --git a/client/src/components/Form/FormInput.test.js b/client/src/components/Form/FormInput.test.js
deleted file mode 100644
index ebe24aa5960..00000000000
--- a/client/src/components/Form/FormInput.test.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { mount } from "@vue/test-utils";
-import { getLocalVue } from "jest/helpers";
-import FormInput from "./FormInput";
-
-jest.mock("app");
-
-const localVue = getLocalVue();
-
-describe("FormInput", () => {
-    let wrapper;
-
-    beforeEach(() => {
-        wrapper = mount(FormInput, {
-            propsData: {
-                id: "input",
-                value: "initial_value",
-            },
-            localVue,
-        });
-    });
-
-    it("check initial value and value change", async () => {
-        const input = wrapper.find("input");
-        expect(input.element.value).toBe("initial_value");
-        await input.setValue("new_value");
-        expect(input.element.value).toBe("new_value");
-        expect(wrapper.emitted().onChange[0][0]).toBe("new_value");
-    });
-
-    it("check switching to text area", async () => {
-        await wrapper.setProps({ area: true });
-        const input = wrapper.find("textarea");
-        expect(input.element.value).toBe("initial_value");
-        await input.setValue("new_value");
-        expect(input.element.value).toBe("new_value");
-        expect(wrapper.emitted().onChange[0][0]).toBe("new_value");
-    });
-});
diff --git a/client/src/components/Form/FormInput.vue b/client/src/components/Form/FormInput.vue
deleted file mode 100644
index ed25eb4917b..00000000000
--- a/client/src/components/Form/FormInput.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-    <textarea v-if="area" class="ui-input" v-model="currentValue" @input="onChange" @change="onChange" />
-    <input v-else class="ui-input" v-model="currentValue" @input="onChange" @change="onChange" />
-</template>
-<script>
-export default {
-    props: {
-        id: {
-            type: String,
-            required: true,
-        },
-        value: {
-            type: String,
-            default: "",
-        },
-        area: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    watch: {
-        value(newValue) {
-            this.currentValue = newValue;
-        },
-    },
-    data() {
-        return {
-            currentValue: this.value,
-        };
-    },
-    methods: {
-        onChange() {
-            this.$emit("onChange", this.currentValue);
-        },
-    },
-};
-</script>

From 857a7dbf274ab45851acad77fd5310c449abb763 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 4 Jun 2021 15:51:22 -0400
Subject: [PATCH 21/58] Remove default vue import from button component

---
 client/src/components/Common/ButtonSpinner.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/Common/ButtonSpinner.vue b/client/src/components/Common/ButtonSpinner.vue
index a9f1d40109d..ed6ae7707c0 100644
--- a/client/src/components/Common/ButtonSpinner.vue
+++ b/client/src/components/Common/ButtonSpinner.vue
@@ -7,7 +7,6 @@
     </b-button>
 </template>
 <script>
-import Vue from "vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheck, faSpinner } from "@fortawesome/free-solid-svg-icons";

From 1efef4640c38d84b46cdeda5cd78f3eb271d1fb8 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 4 Jun 2021 15:55:10 -0400
Subject: [PATCH 22/58] Fix masthead minor icon margins

---
 client/src/style/scss/base.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/style/scss/base.scss b/client/src/style/scss/base.scss
index 49433ed6d73..f7b71f82d12 100644
--- a/client/src/style/scss/base.scss
+++ b/client/src/style/scss/base.scss
@@ -364,8 +364,8 @@ body {
                     .nav-note {
                         @extend .font-weight-bold;
                         @extend .position-absolute;
-                        left: 2.2rem;
-                        top: 2.2rem;
+                        left: 1.9rem;
+                        top: 1.9rem;
                         font-size: 0.6rem;
                     }
                 }

From 4f567ca475f2e1ad3df2ea47081202bde516eae7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 8 Jun 2021 14:48:13 -0400
Subject: [PATCH 23/58] Highlight one issue at a time in tool form, fix id
 parsing, remove legacy helpers

---
 client/src/components/Form/Form.vue     | 21 +++++++--------------
 client/src/components/Tool/ToolForm.vue |  4 ++--
 2 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/client/src/components/Form/Form.vue b/client/src/components/Form/Form.vue
index 0a210b29860..5fadf091e78 100644
--- a/client/src/components/Form/Form.vue
+++ b/client/src/components/Form/Form.vue
@@ -51,6 +51,7 @@ export default {
                 const matchedErrors = this.form.data.matchResponse(this.validationErrors);
                 for (const input_id in matchedErrors) {
                     this.form.highlight(input_id, matchedErrors[input_id]);
+                    break;
                 }
             }
         },
@@ -63,10 +64,12 @@ export default {
             }
         },
         formConfig() {
-            this.parseUpdate(this.formConfig);
-            if (this.initialErrors) {
-                this.parseErrors(this.formConfig);
-            }
+            this.$nextTick(() => {
+                this.form.update(this.formConfig);
+                if (this.initialErrors) {
+                    this.form.errors(this.formConfig);
+                }
+            });
         },
     },
     mounted() {
@@ -143,16 +146,6 @@ export default {
                 this.onChange();
             });
         },
-        parseUpdate(data) {
-            this.$nextTick(() => {
-                this.form.update(data);
-            });
-        },
-        parseErrors(data) {
-            this.$nextTick(() => {
-                this.form.errors(data);
-            });
-        },
     },
 };
 </script>
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index a1a5a875029..6432369a917 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -14,7 +14,7 @@
                 </p>
                 <pre>{{ errorContentPretty }}</pre>
             </div>
-            <ToolRecommendation v-if="showRecommendation" :tool-id="id" />
+            <ToolRecommendation v-if="showRecommendation" :tool-id="formConfig.id" />
             <ToolCard
                 v-if="showForm"
                 :id="formConfig.id"
@@ -198,7 +198,7 @@ export default {
             this.onUpdate();
         },
         onUpdate() {
-            updateTool(this.id, this.currentVersion, this.formData).then((data) => {
+            updateTool(this.formConfig.id, this.currentVersion, this.formData).then((data) => {
                 this.formConfig = data;
             });
         },

From e1105576660e4c0c9327baf9ecaa3ec4e0db8a63 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 10 Jun 2021 16:44:54 -0400
Subject: [PATCH 24/58] Improve validation handling, in some cases the backend
 does not properly validate tool inputs

---
 client/src/components/Form/Form.vue     | 33 ++++++++++++++-----------
 client/src/components/Tool/ToolForm.vue | 13 +++++++++-
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Form/Form.vue b/client/src/components/Form/Form.vue
index 5fadf091e78..09d42bd6f16 100644
--- a/client/src/components/Form/Form.vue
+++ b/client/src/components/Form/Form.vue
@@ -27,6 +27,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        validationScrollTo: {
+            type: Array,
+            default: null,
+        },
         validationErrors: {
             type: Object,
             default: null,
@@ -45,22 +49,17 @@ export default {
         id() {
             this.onRender();
         },
-        validationErrors() {
-            if (this.form) {
-                this.form.trigger("reset");
-                const matchedErrors = this.form.data.matchResponse(this.validationErrors);
-                for (const input_id in matchedErrors) {
-                    this.form.highlight(input_id, matchedErrors[input_id]);
-                    break;
-                }
-            }
+        validationScrollTo() {
+            this.onHighlight(this.validationScrollTo);
         },
         validation() {
-            if (this.form) {
-                this.form.trigger("reset");
-                if (this.validation) {
-                    this.form.highlight(this.validation[0], this.validation[1], true);
-                }
+            this.onHighlight(this.validation, true);
+            this.$emit("onValidation", this.validation);
+        },
+        validationErrors() {
+            const matchedErrors = Object.entries(this.form.data.matchResponse(this.validationErrors));
+            if (matchedErrors.length > 0) {
+                this.onHighlight(matchedErrors[0]);
             }
         },
         formConfig() {
@@ -146,6 +145,12 @@ export default {
                 this.onChange();
             });
         },
+        onHighlight(validation, silent = false) {
+            this.form.trigger("reset");
+            if (validation && validation.length == 2) {
+                this.form.highlight(validation[0], validation[1], silent);
+            }
+        },
     },
 };
 </script>
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 6432369a917..be0a1c50701 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -35,8 +35,10 @@
                         :id="formConfig.id"
                         :inputs="inputs"
                         :validation-errors="validationErrors"
+                        :validation-scroll-to="validationScrollTo"
                         :form-config="formConfig"
                         @onChange="onChange"
+                        @onValidation="onValidation"
                     />
                     <FormElement
                         v-if="emailAllowed"
@@ -136,7 +138,9 @@ export default {
             entryPoints: [],
             jobDef: {},
             jobResponse: {},
-            validationErrors: {},
+            validationInternal: null,
+            validationScrollTo: null,
+            validationErrors: null,
             currentVersion: this.version,
         };
     },
@@ -193,6 +197,9 @@ export default {
         },
     },
     methods: {
+        onValidation(validationInternal) {
+            this.validationInternal = validationInternal;
+        },
         onChange(newData) {
             this.formData = newData;
             this.onUpdate();
@@ -230,6 +237,10 @@ export default {
             });
         },
         onExecute() {
+            if (this.validationInternal) {
+                this.validationScrollTo = this.validationInternal.slice();
+                return;
+            }
             this.showExecuting = true;
             const options = this.formData;
             const Galaxy = getGalaxyInstance();

From 84b932e26f0986cabf8ed87dc3696c90e3270e39 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 10 Jun 2021 19:47:48 -0400
Subject: [PATCH 25/58] Fix checkbox event parsing, add test case

---
 .../Form/Elements/FormBoolean.test.js         | 34 +++++++++++++++++++
 .../components/Form/Elements/FormBoolean.vue  |  2 +-
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/Form/Elements/FormBoolean.test.js

diff --git a/client/src/components/Form/Elements/FormBoolean.test.js b/client/src/components/Form/Elements/FormBoolean.test.js
new file mode 100644
index 00000000000..4198b752506
--- /dev/null
+++ b/client/src/components/Form/Elements/FormBoolean.test.js
@@ -0,0 +1,34 @@
+import { mount } from "@vue/test-utils";
+import { getLocalVue } from "jest/helpers";
+import FormBoolean from "./FormBoolean";
+import Vue from "vue";
+
+jest.mock("app");
+
+const localVue = getLocalVue();
+
+describe("FormBoolean", () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(FormBoolean, {
+            propsData: {
+                value: false,
+            },
+            localVue,
+        });
+    });
+
+    it("check initial value and value change", async () => {
+        const input = wrapper.find("input");
+        expect(wrapper.vm.currentValue).toBe(false);
+        wrapper.setProps({ value: true });
+        await Vue.nextTick();
+        expect(wrapper.vm.currentValue).toBe(true);
+        input.trigger("click");
+        expect(input.element.checked).toBe(false);
+        input.trigger("click");
+        expect(input.element.checked).toBe(true);
+        expect(wrapper.emitted().onChange[0][0]).toBe(true);
+    });
+});
diff --git a/client/src/components/Form/Elements/FormBoolean.vue b/client/src/components/Form/Elements/FormBoolean.vue
index d135c5d7f82..0d18aaa0076 100644
--- a/client/src/components/Form/Elements/FormBoolean.vue
+++ b/client/src/components/Form/Elements/FormBoolean.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-form-checkbox v-model="currentValue" size="lg" switch @onChange="onChange" />
+    <b-form-checkbox v-model="currentValue" size="lg" switch @change="onChange" />
 </template>
 
 <script>

From 33a34b172e960dcb7cae0a4cef9b1d85839ad00d Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 10 Jun 2021 20:02:19 -0400
Subject: [PATCH 26/58] Add default form card component test case

---
 client/src/components/Form/FormCard.test.js | 31 +++++++++++++++++++++
 client/src/components/Form/FormCard.vue     |  5 ----
 2 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 client/src/components/Form/FormCard.test.js

diff --git a/client/src/components/Form/FormCard.test.js b/client/src/components/Form/FormCard.test.js
new file mode 100644
index 00000000000..1d514d7c0c8
--- /dev/null
+++ b/client/src/components/Form/FormCard.test.js
@@ -0,0 +1,31 @@
+import { mount } from "@vue/test-utils";
+import { getLocalVue } from "jest/helpers";
+import FormCard from "./FormCard";
+
+jest.mock("app");
+
+const localVue = getLocalVue();
+
+describe("FormCard", () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(FormCard, {
+            propsData: {
+                title: "title",
+                description: "description",
+                icon: "icon-class",
+            },
+            localVue,
+        });
+    });
+
+    it("check help text", async () => {
+        const title = wrapper.find(".portlet-title-text > b");
+        expect(title.text()).toBe("title");
+        const description = wrapper.find(".portlet-title-text > span");
+        expect(description.text()).toBe("description");
+        const icon = wrapper.find(".portlet-title-icon");
+        expect(icon.classes()).toContain("icon-class");
+    });
+});
diff --git a/client/src/components/Form/FormCard.vue b/client/src/components/Form/FormCard.vue
index 05443ec7630..6f145f5cd69 100644
--- a/client/src/components/Form/FormCard.vue
+++ b/client/src/components/Form/FormCard.vue
@@ -8,7 +8,6 @@
                 <i :class="['portlet-title-icon fa mr-1', icon]" style="display: inline"></i>
                 <span class="portlet-title-text">
                     <b itemprop="name">{{ title }}</b> <span itemprop="description">{{ description }}</span>
-                    {{ version }}
                 </span>
             </div>
         </div>
@@ -28,10 +27,6 @@ export default {
             type: String,
             required: false,
         },
-        version: {
-            type: String,
-            required: false,
-        },
         icon: {
             type: String,
             default: "fa-wrench",

From cd3094eeb3b05d8b537a974255a9b057a5edc1b6 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 11 Jun 2021 13:13:56 -0400
Subject: [PATCH 27/58] Add tool card rendering test case

---
 client/src/components/Form/FormCard.test.js   |  2 +-
 .../src/components/Form/FormElement.test.js   |  2 +-
 client/src/components/Tool/ToolCard.test.js   | 52 +++++++++++++++++++
 client/src/components/Tool/ToolFooter.vue     |  6 +--
 4 files changed, 57 insertions(+), 5 deletions(-)
 create mode 100644 client/src/components/Tool/ToolCard.test.js

diff --git a/client/src/components/Form/FormCard.test.js b/client/src/components/Form/FormCard.test.js
index 1d514d7c0c8..5603ebc8727 100644
--- a/client/src/components/Form/FormCard.test.js
+++ b/client/src/components/Form/FormCard.test.js
@@ -20,7 +20,7 @@ describe("FormCard", () => {
         });
     });
 
-    it("check help text", async () => {
+    it("check props", async () => {
         const title = wrapper.find(".portlet-title-text > b");
         expect(title.text()).toBe("title");
         const description = wrapper.find(".portlet-title-text > span");
diff --git a/client/src/components/Form/FormElement.test.js b/client/src/components/Form/FormElement.test.js
index 34f8c604732..90c4e295f01 100644
--- a/client/src/components/Form/FormElement.test.js
+++ b/client/src/components/Form/FormElement.test.js
@@ -22,7 +22,7 @@ describe("FormElement", () => {
         });
     });
 
-    it("check help text", async () => {
+    it("check props", async () => {
         const help = wrapper.find(".ui-form-info");
         expect(help.text()).toBe("help_text");
         const error = wrapper.find(".ui-form-error-text");
diff --git a/client/src/components/Tool/ToolCard.test.js b/client/src/components/Tool/ToolCard.test.js
new file mode 100644
index 00000000000..a4327befcbb
--- /dev/null
+++ b/client/src/components/Tool/ToolCard.test.js
@@ -0,0 +1,52 @@
+import { mount } from "@vue/test-utils";
+import { getLocalVue } from "jest/helpers";
+import ToolCard from "./ToolCard";
+
+jest.mock("app");
+
+const localVue = getLocalVue();
+
+describe("ToolCard", () => {
+    let wrapper;
+
+    beforeEach(() => {
+        wrapper = mount(ToolCard, {
+            propsData: {
+                id: "identifier",
+                user: {
+                    id: "user.id",
+                    email: "user.email",
+                    is_admin: true,
+                    preferences: {},
+                },
+                version: "version",
+                title: "title",
+                description: "description",
+                sustainVersion: false,
+                options: {
+                    id: "options.id",
+                    versions: [],
+                    sharable_url: "options.sharable_url",
+                    help: "options.help",
+                    citations: null,
+                },
+                messageText: "messageText",
+                messageVariant: "warning",
+            },
+            localVue,
+        });
+    });
+
+    it("check props", async () => {
+        const title = wrapper.find(".portlet-title-text > b");
+        expect(title.text()).toBe("title");
+        const description = wrapper.find(".portlet-title-text > span");
+        expect(description.text()).toBe("description");
+        const icon = wrapper.find(".portlet-title-icon");
+        expect(icon.classes()).toContain("fa-wrench");
+        const dropdownHeader = wrapper.find(".tool-dropdown");
+        expect(dropdownHeader.attributes("title")).toBe("Options");
+        const dropdownItems = wrapper.findAll(".dropdown-item");
+        expect(dropdownItems.length).toBe(4);
+    });
+});
diff --git a/client/src/components/Tool/ToolFooter.vue b/client/src/components/Tool/ToolFooter.vue
index 22d097f2704..991b9788be3 100644
--- a/client/src/components/Tool/ToolFooter.vue
+++ b/client/src/components/Tool/ToolFooter.vue
@@ -76,9 +76,9 @@ import { faQuestion, faCopy, faAngleDoubleDown, faAngleDoubleUp } from "@fortawe
 library.add(faQuestion, faCopy, faAngleDoubleDown, faAngleDoubleUp);
 
 import { getCitations } from "components/Citation/services";
-import Citation from "components/Citation/Citation.vue";
-import License from "components/License/License.vue";
-import Creators from "components/SchemaOrg/Creators.vue";
+import Citation from "components/Citation/Citation";
+import License from "components/License/License";
+import Creators from "components/SchemaOrg/Creators";
 import { copy } from "utils/clipboard";
 
 export default {

From 3a6271cbc56c3e79e60a8c5d110ba0432a090aaa Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 17 Jun 2021 19:41:32 -0400
Subject: [PATCH 28/58] Fix typo in title

---
 client/src/components/Tool/ToolCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Tool/ToolCard.vue b/client/src/components/Tool/ToolCard.vue
index 0fafec27465..809bc1eb122 100644
--- a/client/src/components/Tool/ToolCard.vue
+++ b/client/src/components/Tool/ToolCard.vue
@@ -77,7 +77,7 @@
                     <i class="portlet-title-icon fa mr-1 fa-wrench" style="display: inline"></i>
                     <span class="portlet-title-text">
                         <b itemprop="name">{{ title }}</b> <span itemprop="description">{{ description }}</span> (Galaxy
-                        Verson {{ version }})
+                        Version {{ version }})
                     </span>
                 </div>
             </div>

From df654abfd726dd167578617348d03fbcd7b12a2f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 24 Jun 2021 21:14:01 -0400
Subject: [PATCH 29/58] Use config and user provider in tool form component,
 add history id to tool request

---
 client/src/components/Tool/ToolForm.vue | 181 +++++++++++++-----------
 client/src/components/Tool/services.js  |   3 +-
 2 files changed, 98 insertions(+), 86 deletions(-)

diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index be0a1c50701..ecd502f18da 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -1,79 +1,82 @@
 <template>
-    <CurrentUser v-slot="{ user }">
-        <div>
-            <LoadingSpan v-if="showLoading" message="Loading Tool" />
-            <div v-if="showEntryPoints">
-                <ToolEntryPoints v-for="job in entryPoints" :job-id="job.id" :key="job.id" />
+    <ConfigProvider v-slot="{ config }">
+        <CurrentUser v-slot="{ user }">
+            <div>
+                <LoadingSpan v-if="showLoading" message="Loading Tool" />
+                <div v-if="showEntryPoints">
+                    <ToolEntryPoints v-for="job in entryPoints" :job-id="job.id" :key="job.id" />
+                </div>
+                <ToolSuccess v-if="showSuccess" :job-def="jobDef" :job-response="jobResponse" :tool-name="toolName" />
+                <Webhook v-if="showSuccess" type="tool" :tool-id="jobDef.tool_id" />
+                <div v-if="showError" class="errormessagelarge">
+                    <p>
+                        The server could not complete the request. Please contact the Galaxy Team if this error
+                        persists.
+                        {{ errorTitle | l }}
+                    </p>
+                    <pre>{{ errorContentPretty }}</pre>
+                </div>
+                <ToolRecommendation v-if="showRecommendation" :tool-id="formConfig.id" />
+                <ToolCard
+                    v-if="showForm"
+                    :id="formConfig.id"
+                    :user="user"
+                    :version="formConfig.version"
+                    :title="formConfig.name"
+                    :description="formConfig.description"
+                    :options="formConfig"
+                    :message-text="messageText"
+                    :message-variant="messageVariant"
+                    @onChangeVersion="onChangeVersion"
+                    @onUpdateFavorites="onUpdateFavorites"
+                    itemscope="itemscope"
+                    itemtype="https://schema.org/CreativeWork"
+                >
+                    <template v-slot:body>
+                        <Form
+                            :id="formConfig.id"
+                            :inputs="inputs"
+                            :validation-errors="validationErrors"
+                            :validation-scroll-to="validationScrollTo"
+                            :form-config="formConfig"
+                            @onChange="onChange"
+                            @onValidation="onValidation"
+                        />
+                        <FormElement
+                            v-if="emailAllowed(config, user)"
+                            id="send_email_notification"
+                            title="Email notification"
+                            help="Send an email notification when the job completes."
+                            type="boolean"
+                            value="false"
+                            @onChange="onChangeEmail"
+                        />
+                        <FormElement
+                            v-if="remapAllowed"
+                            id="rerun_remap_job_id"
+                            :title="remapTitle"
+                            :help="remapHelp"
+                            type="boolean"
+                            value="false"
+                            @onChange="onChangeRemap"
+                        />
+                        <FormElement
+                            v-if="reuseAllowed(user)"
+                            id="use_cached_job"
+                            title="Attempt to re-use jobs with identical parameters?"
+                            help="This may skip executing jobs that you have already run."
+                            type="boolean"
+                            value="false"
+                            @onChange="onChangeReuse"
+                        />
+                    </template>
+                    <template v-slot:buttons>
+                        <ButtonSpinner id="execute" title="Execute" @onClick="onExecute" :wait="showExecuting" />
+                    </template>
+                </ToolCard>
             </div>
-            <ToolSuccess v-if="showSuccess" :job-def="jobDef" :job-response="jobResponse" :tool-name="toolName" />
-            <Webhook v-if="showSuccess" type="tool" :tool-id="jobDef.tool_id" />
-            <div v-if="showError" class="errormessagelarge">
-                <p>
-                    The server could not complete the request. Please contact the Galaxy Team if this error persists.
-                    {{ errorTitle | l }}
-                </p>
-                <pre>{{ errorContentPretty }}</pre>
-            </div>
-            <ToolRecommendation v-if="showRecommendation" :tool-id="formConfig.id" />
-            <ToolCard
-                v-if="showForm"
-                :id="formConfig.id"
-                :user="user"
-                :version="formConfig.version"
-                :title="formConfig.name"
-                :description="formConfig.description"
-                :options="formConfig"
-                :message-text="messageText"
-                :message-variant="messageVariant"
-                @onChangeVersion="onChangeVersion"
-                @onUpdateFavorites="onUpdateFavorites"
-                itemscope="itemscope"
-                itemtype="https://schema.org/CreativeWork"
-            >
-                <template v-slot:body>
-                    <Form
-                        :id="formConfig.id"
-                        :inputs="inputs"
-                        :validation-errors="validationErrors"
-                        :validation-scroll-to="validationScrollTo"
-                        :form-config="formConfig"
-                        @onChange="onChange"
-                        @onValidation="onValidation"
-                    />
-                    <FormElement
-                        v-if="emailAllowed"
-                        id="send_email_notification"
-                        title="Email notification"
-                        help="Send an email notification when the job completes."
-                        type="boolean"
-                        value="false"
-                        @onChange="onChangeEmail"
-                    />
-                    <FormElement
-                        v-if="remapAllowed"
-                        id="rerun_remap_job_id"
-                        :title="remapTitle"
-                        :help="remapHelp"
-                        type="boolean"
-                        value="false"
-                        @onChange="onChangeRemap"
-                    />
-                    <FormElement
-                        v-if="reuseAllowed"
-                        id="use_cached_job"
-                        title="Attempt to re-use jobs with identical parameters?"
-                        help="This may skip executing jobs that you have already run."
-                        type="boolean"
-                        value="false"
-                        @onChange="onChangeReuse"
-                    />
-                </template>
-                <template v-slot:buttons>
-                    <ButtonSpinner id="execute" title="Execute" @onClick="onExecute" :wait="showExecuting" />
-                </template>
-            </ToolCard>
-        </div>
-    </CurrentUser>
+        </CurrentUser>
+    </ConfigProvider>
 </template>
 
 <script>
@@ -85,6 +88,7 @@ import { send } from "./utilities";
 import ToolCard from "./ToolCard";
 import ButtonSpinner from "components/Common/ButtonSpinner";
 import CurrentUser from "components/providers/CurrentUser";
+import ConfigProvider from "components/providers/ConfigProvider";
 import LoadingSpan from "components/LoadingSpan";
 import Form from "components/Form/Form";
 import FormElement from "components/Form/FormElement";
@@ -95,6 +99,7 @@ export default {
     components: {
         ButtonSpinner,
         CurrentUser,
+        ConfigProvider,
         LoadingSpan,
         Form,
         ToolCard,
@@ -115,6 +120,10 @@ export default {
             type: String,
             default: null,
         },
+        history_id: {
+            type: String,
+            default: null,
+        },
     },
     data() {
         return {
@@ -160,10 +169,6 @@ export default {
         errorContentPretty() {
             return JSON.stringify(this.errorContent, null, 4);
         },
-        emailAllowed() {
-            const Galaxy = getGalaxyInstance();
-            return Galaxy.config.server_mail_configured && !Galaxy.user.isAnonymous();
-        },
         inputs() {
             return this.formConfig.inputs;
         },
@@ -184,10 +189,18 @@ export default {
                 return "The previous run of this tool failed and other tools were waiting for it to finish successfully. Use this option to resume those tools using the new output(s) of this tool run.";
             }
         },
-        reuseAllowed() {
-            const Galaxy = getGalaxyInstance();
-            if (Galaxy.user.attributes.preferences && "extra_user_preferences" in Galaxy.user.attributes.preferences) {
-                const extra_user_preferences = JSON.parse(Galaxy.user.attributes.preferences.extra_user_preferences);
+    },
+    methods: {
+        emailAllowed(config, user) {
+            return config.server_mail_configured && !user.isAnonymous();
+        },
+        reuseAllowed(user) {
+            if (
+                user.attributes &&
+                user.attributes.preferences &&
+                "extra_user_preferences" in user.attributes.preferences
+            ) {
+                const extra_user_preferences = JSON.parse(user.attributes.preferences.extra_user_preferences);
                 const keyCached = "use_cached_job|use_cached_job_checkbox";
                 const hasCachedJobs = keyCached in extra_user_preferences;
                 return hasCachedJobs ? extra_user_preferences[keyCached] : false;
@@ -195,8 +208,6 @@ export default {
                 return false;
             }
         },
-    },
-    methods: {
         onValidation(validationInternal) {
             this.validationInternal = validationInternal;
         },
@@ -226,7 +237,7 @@ export default {
         },
         requestTool(newVersion) {
             this.currentVersion = newVersion || this.currentVersion;
-            getTool(this.id, this.currentVersion, this.job_id).then((data) => {
+            getTool(this.id, this.currentVersion, this.job_id, this.history_id).then((data) => {
                 this.formConfig = data;
                 this.showLoading = false;
                 this.showForm = true;
diff --git a/client/src/components/Tool/services.js b/client/src/components/Tool/services.js
index 1c34dab0630..09243581fd5 100644
--- a/client/src/components/Tool/services.js
+++ b/client/src/components/Tool/services.js
@@ -19,7 +19,7 @@ export async function updateTool(tool_id, tool_version, inputs) {
 }
 
 /** Tools data request helper **/
-export async function getTool(tool_id, tool_version, job_id) {
+export async function getTool(tool_id, tool_version, job_id, history_id) {
     const Galaxy = getGalaxyInstance();
     let url = "";
     let data = {};
@@ -32,6 +32,7 @@ export async function getTool(tool_id, tool_version, job_id) {
         data = Object.assign({}, Galaxy.params);
         data["tool_id"] && delete data["tool_id"];
     }
+    history_id && (data["history_id"] = history_id);
     tool_version && (data["tool_version"] = tool_version);
 
     // attach data to request url

From ce7af4cc3b063abe687cec31ce041cb040db4710 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 24 Jun 2021 21:16:15 -0400
Subject: [PATCH 30/58] Use updateToolFormData and getToolFormData as names in
 tool form services

---
 client/src/components/Tool/ToolForm.vue | 6 +++---
 client/src/components/Tool/services.js  | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index ecd502f18da..ee8638bffa8 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -83,7 +83,7 @@
 import Scroller from "vue-scrollto";
 import { getAppRoot } from "onload/loadConfig";
 import { getGalaxyInstance } from "app";
-import { getTool, submitJob, updateTool } from "./services";
+import { getToolFormData, updateToolFormData, submitJob } from "./services";
 import { send } from "./utilities";
 import ToolCard from "./ToolCard";
 import ButtonSpinner from "components/Common/ButtonSpinner";
@@ -216,7 +216,7 @@ export default {
             this.onUpdate();
         },
         onUpdate() {
-            updateTool(this.formConfig.id, this.currentVersion, this.formData).then((data) => {
+            updateToolFormData(this.formConfig.id, this.currentVersion, this.formData).then((data) => {
                 this.formConfig = data;
             });
         },
@@ -237,7 +237,7 @@ export default {
         },
         requestTool(newVersion) {
             this.currentVersion = newVersion || this.currentVersion;
-            getTool(this.id, this.currentVersion, this.job_id, this.history_id).then((data) => {
+            getToolFormData(this.id, this.currentVersion, this.job_id, this.history_id).then((data) => {
                 this.formConfig = data;
                 this.showLoading = false;
                 this.showForm = true;
diff --git a/client/src/components/Tool/services.js b/client/src/components/Tool/services.js
index 09243581fd5..ca718530fe6 100644
--- a/client/src/components/Tool/services.js
+++ b/client/src/components/Tool/services.js
@@ -3,7 +3,7 @@ import { rethrowSimple } from "utils/simple-error";
 import { getAppRoot } from "onload/loadConfig";
 import { getGalaxyInstance } from "app";
 
-export async function updateTool(tool_id, tool_version, inputs) {
+export async function updateToolFormData(tool_id, tool_version, inputs) {
     const current_state = {
         tool_id: tool_id,
         tool_version: tool_version,
@@ -19,7 +19,7 @@ export async function updateTool(tool_id, tool_version, inputs) {
 }
 
 /** Tools data request helper **/
-export async function getTool(tool_id, tool_version, job_id, history_id) {
+export async function getToolFormData(tool_id, tool_version, job_id, history_id) {
     const Galaxy = getGalaxyInstance();
     let url = "";
     let data = {};

From 7897b1f4e7a7b616a13a8f34d7d16beacac733d4 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 24 Jun 2021 21:30:11 -0400
Subject: [PATCH 31/58] Remove unused jest app handling in tests

---
 client/src/components/Form/Elements/FormBoolean.test.js | 2 --
 client/src/components/Form/FormCard.test.js             | 2 --
 client/src/components/Tool/ToolCard.test.js             | 2 --
 3 files changed, 6 deletions(-)

diff --git a/client/src/components/Form/Elements/FormBoolean.test.js b/client/src/components/Form/Elements/FormBoolean.test.js
index 4198b752506..92f83734326 100644
--- a/client/src/components/Form/Elements/FormBoolean.test.js
+++ b/client/src/components/Form/Elements/FormBoolean.test.js
@@ -3,8 +3,6 @@ import { getLocalVue } from "jest/helpers";
 import FormBoolean from "./FormBoolean";
 import Vue from "vue";
 
-jest.mock("app");
-
 const localVue = getLocalVue();
 
 describe("FormBoolean", () => {
diff --git a/client/src/components/Form/FormCard.test.js b/client/src/components/Form/FormCard.test.js
index 5603ebc8727..303e4f7c5cd 100644
--- a/client/src/components/Form/FormCard.test.js
+++ b/client/src/components/Form/FormCard.test.js
@@ -2,8 +2,6 @@ import { mount } from "@vue/test-utils";
 import { getLocalVue } from "jest/helpers";
 import FormCard from "./FormCard";
 
-jest.mock("app");
-
 const localVue = getLocalVue();
 
 describe("FormCard", () => {
diff --git a/client/src/components/Tool/ToolCard.test.js b/client/src/components/Tool/ToolCard.test.js
index a4327befcbb..6e3638b9530 100644
--- a/client/src/components/Tool/ToolCard.test.js
+++ b/client/src/components/Tool/ToolCard.test.js
@@ -2,8 +2,6 @@ import { mount } from "@vue/test-utils";
 import { getLocalVue } from "jest/helpers";
 import ToolCard from "./ToolCard";
 
-jest.mock("app");
-
 const localVue = getLocalVue();
 
 describe("ToolCard", () => {

From 67727619d4d68a6a60e2360d4641c97833d77d4b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 24 Jun 2021 21:36:21 -0400
Subject: [PATCH 32/58] Set default value for description in form card

---
 client/src/components/Form/FormCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Form/FormCard.vue b/client/src/components/Form/FormCard.vue
index 6f145f5cd69..1562b2e8161 100644
--- a/client/src/components/Form/FormCard.vue
+++ b/client/src/components/Form/FormCard.vue
@@ -25,7 +25,7 @@ export default {
         },
         description: {
             type: String,
-            required: false,
+            default: null,
         },
         icon: {
             type: String,

From b6a14f8bdb1f77586057a6fdbe9dac1a9cecca74 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 24 Jun 2021 21:42:18 -0400
Subject: [PATCH 33/58] Use localization directive for tool form dropdown
 options

---
 client/src/components/Tool/ToolCard.vue | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Tool/ToolCard.vue b/client/src/components/Tool/ToolCard.vue
index 809bc1eb122..850cfd2050a 100644
--- a/client/src/components/Tool/ToolCard.vue
+++ b/client/src/components/Tool/ToolCard.vue
@@ -17,16 +17,22 @@
                         <template v-slot:button-content>
                             <span class="fa fa-caret-down" />
                         </template>
-                        <b-dropdown-item @click="onCopyLink"><span class="fa fa-chain" />Copy Link</b-dropdown-item>
-                        <b-dropdown-item @click="onCopyId"><span class="fa fa-files-o" />Copy Tool ID</b-dropdown-item>
+                        <b-dropdown-item @click="onCopyLink"
+                            ><span class="fa fa-chain" /><span v-localize>Copy Link</span>
+                        </b-dropdown-item>
+                        <b-dropdown-item @click="onCopyId"
+                            ><span class="fa fa-files-o" /><span v-localize>Copy Tool ID</span>
+                        </b-dropdown-item>
                         <b-dropdown-item v-if="showDownload" @click="onDownload"
-                            ><span class="fa fa-download" />Download</b-dropdown-item
-                        >
+                            ><span class="fa fa-download" /><span v-localize>Download</span>
+                        </b-dropdown-item>
                         <b-dropdown-item v-if="showLink" @click="onLink"
-                            ><span class="fa fa-external-link" />See in Tool Shed</b-dropdown-item
+                            ><span class="fa fa-external-link" /><span v-localize
+                                >See in Tool Shed</span
+                            ></b-dropdown-item
                         >
                         <b-dropdown-item v-for="w of webhookDetails" :key="w.title" @click="w.onclick"
-                            ><span :class="w.icon" />{{ w.title }}</b-dropdown-item
+                            ><span :class="w.icon" />{{ w.title | l }}</b-dropdown-item
                         >
                     </b-dropdown>
                     <b-dropdown
@@ -45,7 +51,7 @@
                             <span class="fa fa-cubes" />
                         </template>
                         <b-dropdown-item v-for="v of availableVersions" :key="v" @click="$emit('onChangeVersion', v)">
-                            <span class="fa fa-cube" />Switch to {{ v }}</b-dropdown-item
+                            <span class="fa fa-cube" /><span v-localize>Switch to </span>{{ v }}</b-dropdown-item
                         >
                     </b-dropdown>
                     <b-button

From 149eb84cfad1442717d77f6a237d5082936621b6 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 25 Jun 2021 13:11:31 -0400
Subject: [PATCH 34/58] Rename Form component to FormDisplay component

---
 client/src/components/Form/{Form.vue => FormDisplay.vue}    | 0
 client/src/components/Markdown/MarkdownVisualization.vue    | 6 +++---
 client/src/components/Tool/ToolForm.vue                     | 6 +++---
 client/src/components/Workflow/Editor/Forms/FormDefault.vue | 6 +++---
 client/src/components/Workflow/Editor/Forms/FormSection.vue | 4 ++--
 client/src/components/Workflow/Editor/Forms/FormTool.vue    | 6 +++---
 6 files changed, 14 insertions(+), 14 deletions(-)
 rename client/src/components/Form/{Form.vue => FormDisplay.vue} (100%)

diff --git a/client/src/components/Form/Form.vue b/client/src/components/Form/FormDisplay.vue
similarity index 100%
rename from client/src/components/Form/Form.vue
rename to client/src/components/Form/FormDisplay.vue
diff --git a/client/src/components/Markdown/MarkdownVisualization.vue b/client/src/components/Markdown/MarkdownVisualization.vue
index b9c5bcce32d..358508fa1bd 100644
--- a/client/src/components/Markdown/MarkdownVisualization.vue
+++ b/client/src/components/Markdown/MarkdownVisualization.vue
@@ -19,7 +19,7 @@
             @ok="onOk"
             @cancel="onCancel"
         >
-            <Form :inputs="formInputs" @onChange="onChange" />
+            <FormDisplay :inputs="formInputs" @onChange="onChange" />
         </b-modal>
     </span>
 </template>
@@ -29,7 +29,7 @@ import Vue from "vue";
 import BootstrapVue from "bootstrap-vue";
 import MarkdownSelector from "./MarkdownSelector";
 import DataDialog from "components/DataDialog/DataDialog";
-import Form from "components/Form/Form";
+import FormDisplay from "components/Form/FormDisplay";
 
 Vue.use(BootstrapVue);
 
@@ -37,7 +37,7 @@ export default {
     components: {
         MarkdownSelector,
         DataDialog,
-        Form,
+        FormDisplay,
     },
     props: {
         argumentName: {
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index ee8638bffa8..61074740480 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -33,7 +33,7 @@
                     itemtype="https://schema.org/CreativeWork"
                 >
                     <template v-slot:body>
-                        <Form
+                        <FormDisplay
                             :id="formConfig.id"
                             :inputs="inputs"
                             :validation-errors="validationErrors"
@@ -90,7 +90,7 @@ import ButtonSpinner from "components/Common/ButtonSpinner";
 import CurrentUser from "components/providers/CurrentUser";
 import ConfigProvider from "components/providers/ConfigProvider";
 import LoadingSpan from "components/LoadingSpan";
-import Form from "components/Form/Form";
+import FormDisplay from "components/Form/FormDisplay";
 import FormElement from "components/Form/FormElement";
 import ToolSuccess from "./ToolSuccess";
 import Webhook from "components/Common/Webhook";
@@ -101,7 +101,7 @@ export default {
         CurrentUser,
         ConfigProvider,
         LoadingSpan,
-        Form,
+        FormDisplay,
         ToolCard,
         FormElement,
         ToolSuccess,
diff --git a/client/src/components/Workflow/Editor/Forms/FormDefault.vue b/client/src/components/Workflow/Editor/Forms/FormDefault.vue
index fa9d6be0061..ac46cad7a6c 100644
--- a/client/src/components/Workflow/Editor/Forms/FormDefault.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormDefault.vue
@@ -44,13 +44,13 @@
                 help="Add an annotation or notes to this step. Annotations are available when a workflow is viewed."
                 @onChange="onAnnotation"
             />
-            <Form :id="id" :inputs="inputs" @onChange="onChange" />
+            <FormDisplay :id="id" :inputs="inputs" @onChange="onChange" />
         </template>
     </FormCard>
 </template>
 
 <script>
-import Form from "components/Form/Form";
+import FormDisplay from "components/Form/FormDisplay";
 import FormCard from "components/Form/FormCard";
 import FormElement from "components/Form/FormElement";
 import FormMessage from "components/Form/FormMessage";
@@ -60,7 +60,7 @@ import WorkflowIcons from "components/Workflow/icons";
 
 export default {
     components: {
-        Form,
+        FormDisplay,
         FormCard,
         FormElement,
         FormMessage,
diff --git a/client/src/components/Workflow/Editor/Forms/FormSection.vue b/client/src/components/Workflow/Editor/Forms/FormSection.vue
index 8c5a082427c..0d2b71e5878 100644
--- a/client/src/components/Workflow/Editor/Forms/FormSection.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormSection.vue
@@ -1,9 +1,9 @@
 <template>
-    <Form :id="id" :inputs="inputs" ref="form" @onChange="onChange" />
+    <FormDisplay :id="id" :inputs="inputs" ref="form" @onChange="onChange" />
 </template>
 
 <script>
-import Form from "components/Form/Form";
+import FormDisplay from "components/Form/FormDisplay";
 import makeSection from "./makeSection";
 
 export default {
diff --git a/client/src/components/Workflow/Editor/Forms/FormTool.vue b/client/src/components/Workflow/Editor/Forms/FormTool.vue
index 27c73564b86..4f82fec5aed 100644
--- a/client/src/components/Workflow/Editor/Forms/FormTool.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormTool.vue
@@ -29,7 +29,7 @@
                     help="Add an annotation or notes to this step. Annotations are available when a workflow is viewed."
                     @onChange="onAnnotation"
                 />
-                <Form
+                <FormDisplay
                     :id="id"
                     :inputs="inputs"
                     :initial-errors="true"
@@ -52,7 +52,7 @@
 
 <script>
 import CurrentUser from "components/providers/CurrentUser";
-import Form from "components/Form/Form";
+import FormDisplay from "components/Form/FormDisplay";
 import ToolCard from "components/Tool/ToolCard";
 import FormSection from "./FormSection";
 import FormElement from "components/Form/FormElement";
@@ -63,7 +63,7 @@ import Utils from "utils/utils";
 export default {
     components: {
         CurrentUser,
-        Form,
+        FormDisplay,
         ToolCard,
         FormElement,
         FormSection,

From c105214d16ee8bfdcf9c7c4666285de9c2d300f7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 25 Jun 2021 14:37:34 -0400
Subject: [PATCH 35/58] Fix imported FormDisplay component name

---
 client/src/components/Workflow/Editor/Forms/FormSection.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Workflow/Editor/Forms/FormSection.vue b/client/src/components/Workflow/Editor/Forms/FormSection.vue
index 0d2b71e5878..c49fe7768f6 100644
--- a/client/src/components/Workflow/Editor/Forms/FormSection.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormSection.vue
@@ -8,7 +8,7 @@ import makeSection from "./makeSection";
 
 export default {
     components: {
-        Form,
+        FormDisplay,
     },
     props: {
         id: {

From 2bd585dcf9dc1605ff646824ea9500d83d6e486f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 28 Jun 2021 10:45:19 -0400
Subject: [PATCH 36/58] Add optional tooltip to tool execution button

---
 client/src/components/Common/ButtonSpinner.vue |  6 +++++-
 client/src/components/Tool/ToolForm.vue        | 11 ++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Common/ButtonSpinner.vue b/client/src/components/Common/ButtonSpinner.vue
index ed6ae7707c0..56531098ef6 100644
--- a/client/src/components/Common/ButtonSpinner.vue
+++ b/client/src/components/Common/ButtonSpinner.vue
@@ -2,7 +2,7 @@
     <b-button v-if="wait" variant="info" disabled>
         <font-awesome-icon icon="spinner" class="mr-2" spin />Please wait...
     </b-button>
-    <b-button v-else variant="primary" @click="$emit('onClick')">
+    <b-button v-else variant="primary" v-b-tooltip.hover.bottom :title="tooltip" @click="$emit('onClick')">
         <font-awesome-icon icon="check" class="mr-2" />{{ title }}
     </b-button>
 </template>
@@ -27,6 +27,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        tooltip: {
+            type: String,
+            default: null,
+        },
     },
 };
 </script>
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 61074740480..566c4808344 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -71,7 +71,13 @@
                         />
                     </template>
                     <template v-slot:buttons>
-                        <ButtonSpinner id="execute" title="Execute" @onClick="onExecute" :wait="showExecuting" />
+                        <ButtonSpinner
+                            id="execute"
+                            title="Execute"
+                            @onClick="onExecute"
+                            :wait="showExecuting"
+                            :tooltip="tooltip"
+                        />
                     </template>
                 </ToolCard>
             </div>
@@ -166,6 +172,9 @@ export default {
         toolName() {
             return this.formConfig.name;
         },
+        tooltip() {
+            return `Execute: ${this.formConfig.name} (${this.formConfig.version})`;
+        },
         errorContentPretty() {
             return JSON.stringify(this.errorContent, null, 4);
         },

From 82e82d99c33b8f00626be31e583b30a328b5778a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 28 Jun 2021 11:30:11 -0400
Subject: [PATCH 37/58] Access url parameters for tool form without using
 global galaxy object

---
 client/src/components/Tool/services.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Tool/services.js b/client/src/components/Tool/services.js
index ca718530fe6..651bb7c7a57 100644
--- a/client/src/components/Tool/services.js
+++ b/client/src/components/Tool/services.js
@@ -1,7 +1,6 @@
 import axios from "axios";
 import { rethrowSimple } from "utils/simple-error";
 import { getAppRoot } from "onload/loadConfig";
-import { getGalaxyInstance } from "app";
 
 export async function updateToolFormData(tool_id, tool_version, inputs) {
     const current_state = {
@@ -20,7 +19,6 @@ export async function updateToolFormData(tool_id, tool_version, inputs) {
 
 /** Tools data request helper **/
 export async function getToolFormData(tool_id, tool_version, job_id, history_id) {
-    const Galaxy = getGalaxyInstance();
     let url = "";
     let data = {};
 
@@ -29,8 +27,13 @@ export async function getToolFormData(tool_id, tool_version, job_id, history_id)
         url = `${getAppRoot()}api/jobs/${job_id}/build_for_rerun`;
     } else {
         url = `${getAppRoot()}api/tools/${tool_id}/build`;
-        data = Object.assign({}, Galaxy.params);
-        data["tool_id"] && delete data["tool_id"];
+        const queryString = window.location.search;
+        const params = new URLSearchParams(queryString);
+        for (const [key, value] of params.entries()) {
+            if (key != "tool_id") {
+                data[key] = value;
+            }
+        }
     }
     history_id && (data["history_id"] = history_id);
     tool_version && (data["tool_version"] = tool_version);

From 973806309779198084b5db1ccbe5fe4fec5e6584 Mon Sep 17 00:00:00 2001
From: Oleg Zharkov <oleg.zharkov22@gmail.com>
Date: Mon, 28 Jun 2021 20:43:38 +0200
Subject: [PATCH 38/58] reduce a few custom events

---
 .../components/Form/Elements/FormBoolean.vue  | 23 +++++++----------
 .../components/Form/Elements/FormInput.vue    | 25 ++++++++-----------
 client/src/components/Form/FormElement.vue    | 21 ++++++++++------
 client/src/components/Tool/ToolForm.vue       | 11 +++-----
 .../Workflow/Editor/Forms/FormDefault.vue     |  4 +--
 .../Workflow/Editor/Forms/FormTool.vue        |  4 +--
 6 files changed, 41 insertions(+), 47 deletions(-)

diff --git a/client/src/components/Form/Elements/FormBoolean.vue b/client/src/components/Form/Elements/FormBoolean.vue
index 0d18aaa0076..b926c2c3738 100644
--- a/client/src/components/Form/Elements/FormBoolean.vue
+++ b/client/src/components/Form/Elements/FormBoolean.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-form-checkbox v-model="currentValue" size="lg" switch @change="onChange" />
+    <b-form-checkbox v-model="currentValue" size="lg" switch />
 </template>
 
 <script>
@@ -10,19 +10,14 @@ export default {
             required: true,
         },
     },
-    data() {
-        return {
-            currentValue: this.value,
-        };
-    },
-    watch: {
-        value(newValue) {
-            this.currentValue = newValue;
-        },
-    },
-    methods: {
-        onChange() {
-            this.$emit("onChange", this.currentValue);
+    computed: {
+        currentValue: {
+            get() {
+                return this.value;
+            },
+            set(val) {
+                this.$emit("input", val);
+            },
         },
     },
 };
diff --git a/client/src/components/Form/Elements/FormInput.vue b/client/src/components/Form/Elements/FormInput.vue
index ee344d00eb5..05758a19b28 100644
--- a/client/src/components/Form/Elements/FormInput.vue
+++ b/client/src/components/Form/Elements/FormInput.vue
@@ -1,6 +1,6 @@
 <template>
-    <textarea v-if="area" class="ui-input" v-model="currentValue" @input="onChange" @change="onChange" />
-    <input v-else class="ui-input" v-model="currentValue" @input="onChange" @change="onChange" />
+    <textarea v-if="area" class="ui-input" v-model="currentValue" />
+    <input v-else class="ui-input" v-model="currentValue" />
 </template>
 <script>
 export default {
@@ -18,19 +18,14 @@ export default {
             default: false,
         },
     },
-    data() {
-        return {
-            currentValue: this.value,
-        };
-    },
-    watch: {
-        value(newValue) {
-            this.currentValue = newValue;
-        },
-    },
-    methods: {
-        onChange() {
-            this.$emit("onChange", this.currentValue);
+    computed: {
+        currentValue: {
+            get() {
+                return this.value;
+            },
+            set(val) {
+                this.$emit("input", val);
+            },
         },
     },
 };
diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index 2827231ab94..ffd3d4d6711 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -6,8 +6,8 @@
         </div>
         <div class="ui-form-title">{{ title }}</div>
         <div class="ui-form-field">
-            <FormInput v-if="type == 'text'" :id="id" :value="value" :area="area" @onChange="onChange" />
-            <FormBoolean v-else-if="type == 'boolean'" :id="id" :value="value" @onChange="onChange" />
+            <FormInput v-if="type == 'text'" :id="id" :area="area" v-model="currentValue" />
+            <FormBoolean v-else-if="type == 'boolean'" :id="id" v-model="currentValue" />
             <span class="ui-form-info form-text text-muted mt-2">{{ help }}</span>
         </div>
     </div>
@@ -52,6 +52,18 @@ export default {
         },
     },
     computed: {
+        currentValue: {
+            get() {
+                if (this.type === "boolean") {
+                    return typeof this.value == "boolean" ? this.value : this.value === "true";
+                } else {
+                    return this.value;
+                }
+            },
+            set(val) {
+                this.$emit("input", val);
+            },
+        },
         hasError() {
             return !!this.error;
         },
@@ -63,10 +75,5 @@ export default {
             }
         },
     },
-    methods: {
-        onChange(value) {
-            this.$emit("onChange", value);
-        },
-    },
 };
 </script>
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 566c4808344..e6fcec4df10 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -49,7 +49,7 @@
                             help="Send an email notification when the job completes."
                             type="boolean"
                             value="false"
-                            @onChange="onChangeEmail"
+                            v-model="email"
                         />
                         <FormElement
                             v-if="remapAllowed"
@@ -58,7 +58,7 @@
                             :help="remapHelp"
                             type="boolean"
                             value="false"
-                            @onChange="onChangeRemap"
+                            @input="onChangeRemap"
                         />
                         <FormElement
                             v-if="reuseAllowed(user)"
@@ -67,7 +67,7 @@
                             help="This may skip executing jobs that you have already run."
                             type="boolean"
                             value="false"
-                            @onChange="onChangeReuse"
+                            v-model="reuse"
                         />
                     </template>
                     <template v-slot:buttons>
@@ -201,7 +201,7 @@ export default {
     },
     methods: {
         emailAllowed(config, user) {
-            return config.server_mail_configured && !user.isAnonymous();
+            return config.server_mail_configured && !user.isAnonymous;
         },
         reuseAllowed(user) {
             if (
@@ -232,9 +232,6 @@ export default {
         onChangeVersion(newVersion) {
             this.requestTool(newVersion);
         },
-        onChangeEmail(email) {
-            this.email = email;
-        },
         onChangeRemap(remap) {
             this.remap = remap ? this.job_id : null;
         },
diff --git a/client/src/components/Workflow/Editor/Forms/FormDefault.vue b/client/src/components/Workflow/Editor/Forms/FormDefault.vue
index ac46cad7a6c..226b2a11a82 100644
--- a/client/src/components/Workflow/Editor/Forms/FormDefault.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormDefault.vue
@@ -33,7 +33,7 @@
                 :value="node.label"
                 title="Label"
                 help="Add a step label."
-                @onChange="onLabel"
+                @input="onLabel"
                 :error="errorLabel"
             />
             <FormElement
@@ -42,7 +42,7 @@
                 title="Step Annotation"
                 :area="true"
                 help="Add an annotation or notes to this step. Annotations are available when a workflow is viewed."
-                @onChange="onAnnotation"
+                @input="onAnnotation"
             />
             <FormDisplay :id="id" :inputs="inputs" @onChange="onChange" />
         </template>
diff --git a/client/src/components/Workflow/Editor/Forms/FormTool.vue b/client/src/components/Workflow/Editor/Forms/FormTool.vue
index 4f82fec5aed..70caeb2084d 100644
--- a/client/src/components/Workflow/Editor/Forms/FormTool.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormTool.vue
@@ -18,7 +18,7 @@
                     :value="node.label"
                     title="Label"
                     help="Add a step label."
-                    @onChange="onLabel"
+                    @input="onLabel"
                     :error="errorLabel"
                 />
                 <FormElement
@@ -27,7 +27,7 @@
                     title="Step Annotation"
                     :area="true"
                     help="Add an annotation or notes to this step. Annotations are available when a workflow is viewed."
-                    @onChange="onAnnotation"
+                    @input="onAnnotation"
                 />
                 <FormDisplay
                     :id="id"

From 4a5fc2ac9760cc1fd8952cd4967b2fe4fd2a4639 Mon Sep 17 00:00:00 2001
From: Aysam Guerler <aysam.guerler@gmail.com>
Date: Tue, 29 Jun 2021 14:36:53 -0400
Subject: [PATCH 39/58] Update client/src/components/Tool/ToolForm.vue

Co-authored-by: Oleg Zharkov <jos.to.new@gmail.com>
---
 client/src/components/Tool/ToolForm.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 566c4808344..fdea342ffc8 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -201,7 +201,7 @@ export default {
     },
     methods: {
         emailAllowed(config, user) {
-            return config.server_mail_configured && !user.isAnonymous();
+            return config.server_mail_configured && !user.isAnonymous;
         },
         reuseAllowed(user) {
             if (

From 906e0df8bb0391e0fb46c17d6756c5293591305f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 29 Jun 2021 14:41:31 -0400
Subject: [PATCH 40/58] Adjust access to user preferences to differences
 between user provider and user object

---
 client/src/components/Tool/ToolForm.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index fdea342ffc8..3daa9558605 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -205,11 +205,10 @@ export default {
         },
         reuseAllowed(user) {
             if (
-                user.attributes &&
-                user.attributes.preferences &&
-                "extra_user_preferences" in user.attributes.preferences
+                user.preferences &&
+                "extra_user_preferences" in user.preferences
             ) {
-                const extra_user_preferences = JSON.parse(user.attributes.preferences.extra_user_preferences);
+                const extra_user_preferences = JSON.parse(user.preferences.extra_user_preferences);
                 const keyCached = "use_cached_job|use_cached_job_checkbox";
                 const hasCachedJobs = keyCached in extra_user_preferences;
                 return hasCachedJobs ? extra_user_preferences[keyCached] : false;

From ad69622049c7190b47b5966f087ca721f46035e9 Mon Sep 17 00:00:00 2001
From: Oleg Zharkov <oleg.zharkov22@gmail.com>
Date: Wed, 30 Jun 2021 17:31:43 +0200
Subject: [PATCH 41/58] fix tests

---
 client/src/components/Form/Elements/FormBoolean.test.js | 2 +-
 client/src/components/Form/Elements/FormInput.test.js   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Form/Elements/FormBoolean.test.js b/client/src/components/Form/Elements/FormBoolean.test.js
index 92f83734326..90149c2442c 100644
--- a/client/src/components/Form/Elements/FormBoolean.test.js
+++ b/client/src/components/Form/Elements/FormBoolean.test.js
@@ -27,6 +27,6 @@ describe("FormBoolean", () => {
         expect(input.element.checked).toBe(false);
         input.trigger("click");
         expect(input.element.checked).toBe(true);
-        expect(wrapper.emitted().onChange[0][0]).toBe(true);
+        expect(wrapper.emitted().input[0][0]).toBe(true);
     });
 });
diff --git a/client/src/components/Form/Elements/FormInput.test.js b/client/src/components/Form/Elements/FormInput.test.js
index ebe24aa5960..c9b7eb9247b 100644
--- a/client/src/components/Form/Elements/FormInput.test.js
+++ b/client/src/components/Form/Elements/FormInput.test.js
@@ -24,7 +24,7 @@ describe("FormInput", () => {
         expect(input.element.value).toBe("initial_value");
         await input.setValue("new_value");
         expect(input.element.value).toBe("new_value");
-        expect(wrapper.emitted().onChange[0][0]).toBe("new_value");
+        expect(wrapper.emitted().input[0][0]).toBe("new_value");
     });
 
     it("check switching to text area", async () => {
@@ -33,6 +33,6 @@ describe("FormInput", () => {
         expect(input.element.value).toBe("initial_value");
         await input.setValue("new_value");
         expect(input.element.value).toBe("new_value");
-        expect(wrapper.emitted().onChange[0][0]).toBe("new_value");
+        expect(wrapper.emitted().input[0][0]).toBe("new_value");
     });
 });

From 51ac6d512eba84fb1195ee55e6c902bf678226db Mon Sep 17 00:00:00 2001
From: Oleg Zharkov <oleg.zharkov22@gmail.com>
Date: Wed, 30 Jun 2021 17:45:09 +0200
Subject: [PATCH 42/58] fix lint

---
 client/src/components/Tool/ToolForm.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index bdb52bd1501..68531edc9aa 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -204,10 +204,7 @@ export default {
             return config.server_mail_configured && !user.isAnonymous;
         },
         reuseAllowed(user) {
-            if (
-                user.preferences &&
-                "extra_user_preferences" in user.preferences
-            ) {
+            if (user.preferences && "extra_user_preferences" in user.preferences) {
                 const extra_user_preferences = JSON.parse(user.preferences.extra_user_preferences);
                 const keyCached = "use_cached_job|use_cached_job_checkbox";
                 const hasCachedJobs = keyCached in extra_user_preferences;

From 9cf5e6e99f77e6967c941a754d2af64323e4c278 Mon Sep 17 00:00:00 2001
From: Oleg Zharkov <oleg.zharkov22@gmail.com>
Date: Wed, 30 Jun 2021 17:45:27 +0200
Subject: [PATCH 43/58] fix prop type

---
 client/src/components/Form/FormElement.vue | 2 +-
 client/src/components/Tool/ToolForm.vue    | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index ffd3d4d6711..bef60f11d36 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -27,7 +27,7 @@ export default {
             required: true,
         },
         value: {
-            type: String,
+            type: [String, Boolean],
             default: "",
         },
         title: {
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 68531edc9aa..1089a45adc7 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -48,7 +48,7 @@
                             title="Email notification"
                             help="Send an email notification when the job completes."
                             type="boolean"
-                            value="false"
+                            :value="false"
                             v-model="email"
                         />
                         <FormElement
@@ -57,7 +57,7 @@
                             :title="remapTitle"
                             :help="remapHelp"
                             type="boolean"
-                            value="false"
+                            :value="false"
                             @input="onChangeRemap"
                         />
                         <FormElement
@@ -66,7 +66,7 @@
                             title="Attempt to re-use jobs with identical parameters?"
                             help="This may skip executing jobs that you have already run."
                             type="boolean"
-                            value="false"
+                            :value="false"
                             v-model="reuse"
                         />
                     </template>

From 6b8bbf99982b611e13a281fa1deaef379ea3f948 Mon Sep 17 00:00:00 2001
From: Oleg Zharkov <oleg.zharkov22@gmail.com>
Date: Wed, 30 Jun 2021 19:24:26 +0200
Subject: [PATCH 44/58] validation

---
 client/src/components/Form/FormDisplay.vue | 2 +-
 client/src/components/Tool/ToolForm.vue    | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue
index 09d42bd6f16..c86307d2778 100644
--- a/client/src/components/Form/FormDisplay.vue
+++ b/client/src/components/Form/FormDisplay.vue
@@ -54,7 +54,7 @@ export default {
         },
         validation() {
             this.onHighlight(this.validation, true);
-            this.$emit("onValidation", this.validation);
+            this.$emit("input", this.validation);
         },
         validationErrors() {
             const matchedErrors = Object.entries(this.form.data.matchResponse(this.validationErrors));
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 1089a45adc7..76c59c3ce28 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -40,7 +40,7 @@
                             :validation-scroll-to="validationScrollTo"
                             :form-config="formConfig"
                             @onChange="onChange"
-                            @onValidation="onValidation"
+                            v-model="validationInternal"
                         />
                         <FormElement
                             v-if="emailAllowed(config, user)"
@@ -213,9 +213,6 @@ export default {
                 return false;
             }
         },
-        onValidation(validationInternal) {
-            this.validationInternal = validationInternal;
-        },
         onChange(newData) {
             this.formData = newData;
             this.onUpdate();

From a85d6d47a858ed2c6f564999fba6ced3609a1145 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 30 Jun 2021 15:36:06 -0400
Subject: [PATCH 45/58] This is a legacy option in the code path which allows
 tools to submit the form data to an arbritrary url, this does not seemed to
 be used anywhere

---
 client/src/components/Tool/ToolForm.vue |  5 -----
 client/src/components/Tool/utilities.js | 12 ------------
 2 files changed, 17 deletions(-)

diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 76c59c3ce28..fe7e677f3e3 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -90,7 +90,6 @@ import Scroller from "vue-scrollto";
 import { getAppRoot } from "onload/loadConfig";
 import { getGalaxyInstance } from "app";
 import { getToolFormData, updateToolFormData, submitJob } from "./services";
-import { send } from "./utilities";
 import ToolCard from "./ToolCard";
 import ButtonSpinner from "components/Common/ButtonSpinner";
 import CurrentUser from "components/providers/CurrentUser";
@@ -261,10 +260,6 @@ export default {
                 tool_version: this.formConfig.version,
                 inputs: this.formData,
             };
-            if (this.formConfig.action !== `${getAppRoot()}tool_runner/index`) {
-                send(options, jobDef);
-                return;
-            }
             Galaxy.emit.debug("tool-form::submit()", "Validation complete.", jobDef);
             submitJob(jobDef).then(
                 (jobResponse) => {
diff --git a/client/src/components/Tool/utilities.js b/client/src/components/Tool/utilities.js
index 0c8fb372b77..9a40fecd5b3 100644
--- a/client/src/components/Tool/utilities.js
+++ b/client/src/components/Tool/utilities.js
@@ -13,15 +13,3 @@ export function downloadTool(toolId) {
 export function openLink(url) {
     window.open(url);
 }
-
-export function send(options, job_def) {
-    const $f = $("<form/>").attr({
-        action: options.action,
-        method: options.method,
-        enctype: options.enctype,
-    });
-    Object.entries(job_def.inputs).forEach(([value, key]) => {
-        $f.append($("<input/>").attr({ name: key, value: value }));
-    });
-    $f.hide().appendTo("body").submit().remove();
-}

From 74ac9fec969fb8b5bf116e84394886d949b5691c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 30 Jun 2021 15:50:57 -0400
Subject: [PATCH 46/58] Fix linting, remove unused imports

---
 client/src/components/Tool/ToolForm.vue | 2 --
 client/src/components/Tool/services.js  | 2 +-
 client/src/components/Tool/utilities.js | 1 -
 3 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index fe7e677f3e3..1c0b73049cb 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -87,7 +87,6 @@
 
 <script>
 import Scroller from "vue-scrollto";
-import { getAppRoot } from "onload/loadConfig";
 import { getGalaxyInstance } from "app";
 import { getToolFormData, updateToolFormData, submitJob } from "./services";
 import ToolCard from "./ToolCard";
@@ -251,7 +250,6 @@ export default {
                 return;
             }
             this.showExecuting = true;
-            const options = this.formData;
             const Galaxy = getGalaxyInstance();
             const history_id = Galaxy.currHistoryPanel && Galaxy.currHistoryPanel.model.id;
             const jobDef = {
diff --git a/client/src/components/Tool/services.js b/client/src/components/Tool/services.js
index 651bb7c7a57..f8df815e275 100644
--- a/client/src/components/Tool/services.js
+++ b/client/src/components/Tool/services.js
@@ -20,7 +20,7 @@ export async function updateToolFormData(tool_id, tool_version, inputs) {
 /** Tools data request helper **/
 export async function getToolFormData(tool_id, tool_version, job_id, history_id) {
     let url = "";
-    let data = {};
+    const data = {};
 
     // build request url and collect request data
     if (job_id) {
diff --git a/client/src/components/Tool/utilities.js b/client/src/components/Tool/utilities.js
index 9a40fecd5b3..d0d4e736c5b 100644
--- a/client/src/components/Tool/utilities.js
+++ b/client/src/components/Tool/utilities.js
@@ -1,4 +1,3 @@
-import $ from "jquery";
 import { getAppRoot } from "onload/loadConfig";
 import { copy } from "utils/clipboard";
 

From 65f67f4fd378877f3a82d715ef05a726e832ce09 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 1 Jul 2021 11:42:28 -0400
Subject: [PATCH 47/58] Use on validation custom event for form display

---
 client/src/components/Form/FormDisplay.vue | 2 +-
 client/src/components/Tool/ToolForm.vue    | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue
index c86307d2778..09d42bd6f16 100644
--- a/client/src/components/Form/FormDisplay.vue
+++ b/client/src/components/Form/FormDisplay.vue
@@ -54,7 +54,7 @@ export default {
         },
         validation() {
             this.onHighlight(this.validation, true);
-            this.$emit("input", this.validation);
+            this.$emit("onValidation", this.validation);
         },
         validationErrors() {
             const matchedErrors = Object.entries(this.form.data.matchResponse(this.validationErrors));
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 1c0b73049cb..548239139bf 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -40,7 +40,7 @@
                             :validation-scroll-to="validationScrollTo"
                             :form-config="formConfig"
                             @onChange="onChange"
-                            v-model="validationInternal"
+                            @onValidation="validationInternal"
                         />
                         <FormElement
                             v-if="emailAllowed(config, user)"
@@ -211,6 +211,9 @@ export default {
                 return false;
             }
         },
+        onValidation(validationInternal) {
+            this.validationInternal = validationInternal;
+        },
         onChange(newData) {
             this.formData = newData;
             this.onUpdate();

From 6797a0381b5ee9591df8b79b19018bf3bedb36dd Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 2 Jul 2021 11:34:10 -0400
Subject: [PATCH 48/58] Fix validation handler, use parsed history id

---
 client/src/components/Tool/ToolForm.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 548239139bf..625291b4c6c 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -40,7 +40,7 @@
                             :validation-scroll-to="validationScrollTo"
                             :form-config="formConfig"
                             @onChange="onChange"
-                            @onValidation="validationInternal"
+                            @onValidation="onValidation"
                         />
                         <FormElement
                             v-if="emailAllowed(config, user)"
@@ -254,9 +254,8 @@ export default {
             }
             this.showExecuting = true;
             const Galaxy = getGalaxyInstance();
-            const history_id = Galaxy.currHistoryPanel && Galaxy.currHistoryPanel.model.id;
             const jobDef = {
-                history_id: history_id,
+                history_id: this.history_id,
                 tool_id: this.formConfig.id,
                 tool_version: this.formConfig.version,
                 inputs: this.formData,

From c534a53daaae4dbc3383ff1d229c09ca8ac61a2c Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 2 Jul 2021 12:00:22 -0400
Subject: [PATCH 49/58] Remove Galaxy object from Tool Form, user history
 provider instead

---
 client/src/components/Tool/ToolForm.vue | 186 ++++++++++++------------
 1 file changed, 92 insertions(+), 94 deletions(-)

diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 625291b4c6c..0e753c0b91e 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -1,93 +1,99 @@
 <template>
     <ConfigProvider v-slot="{ config }">
         <CurrentUser v-slot="{ user }">
-            <div>
-                <LoadingSpan v-if="showLoading" message="Loading Tool" />
-                <div v-if="showEntryPoints">
-                    <ToolEntryPoints v-for="job in entryPoints" :job-id="job.id" :key="job.id" />
+            <UserHistories v-if="user" :user="user" v-slot="{ currentHistory }">
+                <div>
+                    <LoadingSpan v-if="showLoading" message="Loading Tool" />
+                    <div v-if="showEntryPoints">
+                        <ToolEntryPoints v-for="job in entryPoints" :job-id="job.id" :key="job.id" />
+                    </div>
+                    <ToolSuccess
+                        v-if="showSuccess"
+                        :job-def="jobDef"
+                        :job-response="jobResponse"
+                        :tool-name="toolName"
+                    />
+                    <Webhook v-if="showSuccess" type="tool" :tool-id="jobDef.tool_id" />
+                    <div v-if="showError" class="errormessagelarge">
+                        <p>
+                            The server could not complete the request. Please contact the Galaxy Team if this error
+                            persists.
+                            {{ errorTitle | l }}
+                        </p>
+                        <pre>{{ errorContentPretty }}</pre>
+                    </div>
+                    <ToolRecommendation v-if="showRecommendation" :tool-id="formConfig.id" />
+                    <ToolCard
+                        v-if="showForm"
+                        :id="formConfig.id"
+                        :user="user"
+                        :version="formConfig.version"
+                        :title="formConfig.name"
+                        :description="formConfig.description"
+                        :options="formConfig"
+                        :message-text="messageText"
+                        :message-variant="messageVariant"
+                        @onChangeVersion="onChangeVersion"
+                        @onUpdateFavorites="onUpdateFavorites"
+                        itemscope="itemscope"
+                        itemtype="https://schema.org/CreativeWork"
+                    >
+                        <template v-slot:body>
+                            <FormDisplay
+                                :id="formConfig.id"
+                                :inputs="inputs"
+                                :validation-errors="validationErrors"
+                                :validation-scroll-to="validationScrollTo"
+                                :form-config="formConfig"
+                                @onChange="onChange"
+                                @onValidation="onValidation"
+                            />
+                            <FormElement
+                                v-if="emailAllowed(config, user)"
+                                id="send_email_notification"
+                                title="Email notification"
+                                help="Send an email notification when the job completes."
+                                type="boolean"
+                                :value="false"
+                                v-model="email"
+                            />
+                            <FormElement
+                                v-if="remapAllowed"
+                                id="rerun_remap_job_id"
+                                :title="remapTitle"
+                                :help="remapHelp"
+                                type="boolean"
+                                :value="false"
+                                @input="onChangeRemap"
+                            />
+                            <FormElement
+                                v-if="reuseAllowed(user)"
+                                id="use_cached_job"
+                                title="Attempt to re-use jobs with identical parameters?"
+                                help="This may skip executing jobs that you have already run."
+                                type="boolean"
+                                :value="false"
+                                v-model="reuse"
+                            />
+                        </template>
+                        <template v-slot:buttons>
+                            <ButtonSpinner
+                                id="execute"
+                                title="Execute"
+                                @onClick="onExecute(config, currentHistory.id)"
+                                :wait="showExecuting"
+                                :tooltip="tooltip"
+                            />
+                        </template>
+                    </ToolCard>
                 </div>
-                <ToolSuccess v-if="showSuccess" :job-def="jobDef" :job-response="jobResponse" :tool-name="toolName" />
-                <Webhook v-if="showSuccess" type="tool" :tool-id="jobDef.tool_id" />
-                <div v-if="showError" class="errormessagelarge">
-                    <p>
-                        The server could not complete the request. Please contact the Galaxy Team if this error
-                        persists.
-                        {{ errorTitle | l }}
-                    </p>
-                    <pre>{{ errorContentPretty }}</pre>
-                </div>
-                <ToolRecommendation v-if="showRecommendation" :tool-id="formConfig.id" />
-                <ToolCard
-                    v-if="showForm"
-                    :id="formConfig.id"
-                    :user="user"
-                    :version="formConfig.version"
-                    :title="formConfig.name"
-                    :description="formConfig.description"
-                    :options="formConfig"
-                    :message-text="messageText"
-                    :message-variant="messageVariant"
-                    @onChangeVersion="onChangeVersion"
-                    @onUpdateFavorites="onUpdateFavorites"
-                    itemscope="itemscope"
-                    itemtype="https://schema.org/CreativeWork"
-                >
-                    <template v-slot:body>
-                        <FormDisplay
-                            :id="formConfig.id"
-                            :inputs="inputs"
-                            :validation-errors="validationErrors"
-                            :validation-scroll-to="validationScrollTo"
-                            :form-config="formConfig"
-                            @onChange="onChange"
-                            @onValidation="onValidation"
-                        />
-                        <FormElement
-                            v-if="emailAllowed(config, user)"
-                            id="send_email_notification"
-                            title="Email notification"
-                            help="Send an email notification when the job completes."
-                            type="boolean"
-                            :value="false"
-                            v-model="email"
-                        />
-                        <FormElement
-                            v-if="remapAllowed"
-                            id="rerun_remap_job_id"
-                            :title="remapTitle"
-                            :help="remapHelp"
-                            type="boolean"
-                            :value="false"
-                            @input="onChangeRemap"
-                        />
-                        <FormElement
-                            v-if="reuseAllowed(user)"
-                            id="use_cached_job"
-                            title="Attempt to re-use jobs with identical parameters?"
-                            help="This may skip executing jobs that you have already run."
-                            type="boolean"
-                            :value="false"
-                            v-model="reuse"
-                        />
-                    </template>
-                    <template v-slot:buttons>
-                        <ButtonSpinner
-                            id="execute"
-                            title="Execute"
-                            @onClick="onExecute"
-                            :wait="showExecuting"
-                            :tooltip="tooltip"
-                        />
-                    </template>
-                </ToolCard>
-            </div>
+            </UserHistories>
         </CurrentUser>
     </ConfigProvider>
 </template>
 
 <script>
 import Scroller from "vue-scrollto";
-import { getGalaxyInstance } from "app";
 import { getToolFormData, updateToolFormData, submitJob } from "./services";
 import ToolCard from "./ToolCard";
 import ButtonSpinner from "components/Common/ButtonSpinner";
@@ -97,6 +103,7 @@ import LoadingSpan from "components/LoadingSpan";
 import FormDisplay from "components/Form/FormDisplay";
 import FormElement from "components/Form/FormElement";
 import ToolSuccess from "./ToolSuccess";
+import UserHistories from "components/History/providers/UserHistories";
 import Webhook from "components/Common/Webhook";
 
 export default {
@@ -109,6 +116,7 @@ export default {
         ToolCard,
         FormElement,
         ToolSuccess,
+        UserHistories,
         Webhook,
     },
     props: {
@@ -159,12 +167,6 @@ export default {
     },
     created() {
         this.requestTool();
-        const Galaxy = getGalaxyInstance();
-        if (Galaxy.currHistoryPanel) {
-            Galaxy.currHistoryPanel.collection.on("change", () => {
-                this.onUpdate();
-            });
-        }
     },
     computed: {
         toolName() {
@@ -247,25 +249,21 @@ export default {
                 }
             });
         },
-        onExecute() {
+        onExecute(config, historyId) {
             if (this.validationInternal) {
                 this.validationScrollTo = this.validationInternal.slice();
                 return;
             }
             this.showExecuting = true;
-            const Galaxy = getGalaxyInstance();
             const jobDef = {
-                history_id: this.history_id,
+                history_id: historyId,
                 tool_id: this.formConfig.id,
                 tool_version: this.formConfig.version,
                 inputs: this.formData,
             };
-            Galaxy.emit.debug("tool-form::submit()", "Validation complete.", jobDef);
+            console.debug("toolForm::onExecute()", jobDef);
             submitJob(jobDef).then(
                 (jobResponse) => {
-                    if (Galaxy.currHistoryPanel) {
-                        Galaxy.currHistoryPanel.refreshContents();
-                    }
                     this.showForm = false;
                     if (jobResponse.produces_entry_points) {
                         this.showEntryPoints = true;
@@ -281,7 +279,7 @@ export default {
                         this.errorTitle = "Invalid success response. No jobs found.";
                         this.errorContent = jobResponse;
                     }
-                    if ([true, "true"].includes(Galaxy.config.enable_tool_recommendations)) {
+                    if ([true, "true"].includes(config.enable_tool_recommendations)) {
                         this.showRecommendation = true;
                     }
                     Scroller.scrollTo("body");

From 2f6dfc52fccd75d9aee165df5af8a87c07f805a0 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 2 Jul 2021 13:08:19 -0400
Subject: [PATCH 50/58] Attempt to resolve failing test case with current
 history

---
 client/src/components/Tool/ToolForm.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 0e753c0b91e..f03787ba581 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -94,6 +94,7 @@
 
 <script>
 import Scroller from "vue-scrollto";
+import { getGalaxyInstance } from "app";
 import { getToolFormData, updateToolFormData, submitJob } from "./services";
 import ToolCard from "./ToolCard";
 import ButtonSpinner from "components/Common/ButtonSpinner";
@@ -255,6 +256,7 @@ export default {
                 return;
             }
             this.showExecuting = true;
+            const Galaxy = getGalaxyInstance();
             const jobDef = {
                 history_id: historyId,
                 tool_id: this.formConfig.id,
@@ -264,6 +266,9 @@ export default {
             console.debug("toolForm::onExecute()", jobDef);
             submitJob(jobDef).then(
                 (jobResponse) => {
+                    if (Galaxy.currHistoryPanel) {
+                        Galaxy.currHistoryPanel.refreshContents();
+                    }
                     this.showForm = false;
                     if (jobResponse.produces_entry_points) {
                         this.showEntryPoints = true;

From 90fd09e95f945091129ffc8a23951fed7a4e6eb7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 2 Jul 2021 13:11:38 -0400
Subject: [PATCH 51/58] Remove unused helper in tool form

---
 client/src/components/Tool/ToolForm.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index f03787ba581..6dd157cff1b 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -232,9 +232,6 @@ export default {
         onChangeRemap(remap) {
             this.remap = remap ? this.job_id : null;
         },
-        onChangeReuse(reuse) {
-            this.reuse = reuse;
-        },
         onUpdateFavorites(user, newFavorites) {
             user.preferences["favorites"] = newFavorites;
         },

From 2946bbf132c94815a9d4280be0faaece415a3d85 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 6 Jul 2021 10:11:36 -0400
Subject: [PATCH 52/58] Restore history update listener

---
 client/src/components/Tool/ToolForm.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 6dd157cff1b..28d18f9a2ef 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -168,6 +168,12 @@ export default {
     },
     created() {
         this.requestTool();
+        const Galaxy = getGalaxyInstance();
+        if (Galaxy.currHistoryPanel) {
+            Galaxy.currHistoryPanel.collection.on("change", () => {
+                this.onUpdate();
+            });
+        }
     },
     computed: {
         toolName() {

From 4da9a03d6ac716938d451de292e5383cd3ba04b7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 6 Jul 2021 10:35:32 -0400
Subject: [PATCH 53/58] Attempt to resolve input type dependency in form
 element wrapper

---
 client/src/components/Form/FormElement.vue | 12 ++++--------
 client/src/components/Tool/ToolForm.vue    |  2 +-
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Form/FormElement.vue b/client/src/components/Form/FormElement.vue
index bef60f11d36..89abca8ca1e 100644
--- a/client/src/components/Form/FormElement.vue
+++ b/client/src/components/Form/FormElement.vue
@@ -28,15 +28,15 @@ export default {
         },
         value: {
             type: [String, Boolean],
-            default: "",
+            default: null,
         },
         title: {
             type: String,
-            default: "",
+            default: null,
         },
         help: {
             type: String,
-            default: "",
+            default: null,
         },
         area: {
             type: Boolean,
@@ -54,11 +54,7 @@ export default {
     computed: {
         currentValue: {
             get() {
-                if (this.type === "boolean") {
-                    return typeof this.value == "boolean" ? this.value : this.value === "true";
-                } else {
-                    return this.value;
-                }
+                return this.value;
             },
             set(val) {
                 this.$emit("input", val);
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 28d18f9a2ef..1ae35da205c 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -191,7 +191,7 @@ export default {
         remapAllowed() {
             return this.job_id && this.formConfig.job_remap;
         },
-        remapLabel() {
+        remapTitle() {
             if (this.formConfig.job_remap === "job_produced_collection_elements") {
                 return "Replace elements in collection ?";
             } else {

From 31419e2ecb9669c8e30c6a723eeac00981af0267 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Tue, 6 Jul 2021 10:59:01 -0400
Subject: [PATCH 54/58] Replace custom error message with bootstrap vue alert

---
 client/src/components/Tool/ToolForm.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 1ae35da205c..6e8c780682d 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -14,14 +14,14 @@
                         :tool-name="toolName"
                     />
                     <Webhook v-if="showSuccess" type="tool" :tool-id="jobDef.tool_id" />
-                    <div v-if="showError" class="errormessagelarge">
+                    <b-alert v-if="showError" show variant="danger">
+                        <h4>{{ errorTitle | l }}</h4>
                         <p>
                             The server could not complete the request. Please contact the Galaxy Team if this error
                             persists.
-                            {{ errorTitle | l }}
                         </p>
                         <pre>{{ errorContentPretty }}</pre>
-                    </div>
+                    </b-alert>
                     <ToolRecommendation v-if="showRecommendation" :tool-id="formConfig.id" />
                     <ToolCard
                         v-if="showForm"
@@ -150,7 +150,7 @@ export default {
             error: null,
             formConfig: {},
             formData: {},
-            errorTitle: "",
+            errorTitle: null,
             errorContent: null,
             messageVariant: "",
             messageText: "",

From fb864c0eff92252a015138ec3e6234c638504b78 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 8 Jul 2021 16:03:07 -0400
Subject: [PATCH 55/58] Use v-model to access remap option, selectively add
 optional execution flags to inputs

---
 client/src/components/Tool/ToolForm.vue | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 6e8c780682d..087d528729e 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -64,7 +64,7 @@
                                 :help="remapHelp"
                                 type="boolean"
                                 :value="false"
-                                @input="onChangeRemap"
+                                v-model="remap"
                             />
                             <FormElement
                                 v-if="reuseAllowed(user)"
@@ -235,9 +235,6 @@ export default {
         onChangeVersion(newVersion) {
             this.requestTool(newVersion);
         },
-        onChangeRemap(remap) {
-            this.remap = remap ? this.job_id : null;
-        },
         onUpdateFavorites(user, newFavorites) {
             user.preferences["favorites"] = newFavorites;
         },
@@ -264,8 +261,19 @@ export default {
                 history_id: historyId,
                 tool_id: this.formConfig.id,
                 tool_version: this.formConfig.version,
-                inputs: this.formData,
+                inputs: {
+                    ...this.formData
+                },
             };
+            if (this.email) {
+                jobDef.inputs["send_email_notification"] = true;
+            }
+            if (this.remap) {
+                jobDef.inputs["rerun_remap_job_id"] = this.job_id;
+            }
+            if (this.reuse) {
+                jobDef.inputs["use_cached_job"] = true;
+            }
             console.debug("toolForm::onExecute()", jobDef);
             submitJob(jobDef).then(
                 (jobResponse) => {

From 90187dce9a6e78cc5d8e6a5272a31337d8d3ed00 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 9 Jul 2021 02:46:44 -0400
Subject: [PATCH 56/58] Fix lint

---
 client/src/components/Tool/ToolForm.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 087d528729e..282d702b1b0 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -262,7 +262,7 @@ export default {
                 tool_id: this.formConfig.id,
                 tool_version: this.formConfig.version,
                 inputs: {
-                    ...this.formData
+                    ...this.formData,
                 },
             };
             if (this.email) {

From 996e0a55c91ac6e7b324ec7eb5986fcfaaefcf4e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 11 Jul 2021 12:55:26 -0400
Subject: [PATCH 57/58] Add mock config provider, add test case for tool form

---
 client/src/components/Tool/ToolForm.test.js   | 61 +++++++++++++++++++
 client/src/components/Tool/ToolForm.vue       |  5 +-
 .../providers/MockConfigProvider.js           |  9 +++
 client/src/mvc/form/form-view.js              |  7 +--
 4 files changed, 73 insertions(+), 9 deletions(-)
 create mode 100644 client/src/components/Tool/ToolForm.test.js
 create mode 100644 client/src/components/providers/MockConfigProvider.js

diff --git a/client/src/components/Tool/ToolForm.test.js b/client/src/components/Tool/ToolForm.test.js
new file mode 100644
index 00000000000..4845fe1e9a8
--- /dev/null
+++ b/client/src/components/Tool/ToolForm.test.js
@@ -0,0 +1,61 @@
+import MockAdapter from "axios-mock-adapter";
+import axios from "axios";
+import { mount } from "@vue/test-utils";
+import { getLocalVue } from "jest/helpers";
+import ToolForm from "./ToolForm";
+import MockCurrentUser from "../providers/MockCurrentUser";
+import MockConfigProvider from "../providers/MockConfigProvider";
+import MockCurrentHistory from "../History/providers/UserHistories/MockCurrentHistory";
+import Vue from "vue";
+
+const localVue = getLocalVue();
+
+describe("ToolForm", () => {
+    let wrapper;
+    let axiosMock;
+
+    beforeEach(() => {
+        axiosMock = new MockAdapter(axios);
+
+        const toolData = {
+            id: "tool_id",
+            name: "tool_name",
+            version: "version",
+            inputs: [],
+            help: "help_text",
+        };
+        axiosMock.onGet(`/api/tools/tool_id/build?tool_version=version`).reply(200, toolData);
+
+        const citations = [];
+        axiosMock.onGet(`/api/tools/tool_id/citations`).reply(200, citations);
+
+        wrapper = mount(ToolForm, {
+            propsData: {
+                id: "tool_id",
+                version: "version",
+            },
+            localVue,
+            stubs: {
+                CurrentUser: MockCurrentUser({ id: "fakeuser" }),
+                UserHistories: MockCurrentHistory({ id: "fakehistory" }),
+                ConfigProvider: MockConfigProvider({ id: "fakeconfig" }),
+                FormDisplay: true,
+            }
+        });
+    });
+
+    afterEach(() => {
+        axiosMock.restore();
+        axiosMock.reset();
+    });
+
+    it("check props", async () => {
+        await Vue.nextTick();
+        const button = wrapper.find(".btn-primary");
+        expect(button.attributes("title")).toBe("Execute: tool_name (version)");
+        const dropdown = wrapper.findAll(".dropdown-item");
+        expect(dropdown.length).toBe(2);
+        const help = wrapper.find(".form-help");
+        expect(help.text()).toBe("help_text");
+    });
+});
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 282d702b1b0..29f5de66e28 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -54,7 +54,6 @@
                                 title="Email notification"
                                 help="Send an email notification when the job completes."
                                 type="boolean"
-                                :value="false"
                                 v-model="email"
                             />
                             <FormElement
@@ -63,7 +62,6 @@
                                 :title="remapTitle"
                                 :help="remapHelp"
                                 type="boolean"
-                                :value="false"
                                 v-model="remap"
                             />
                             <FormElement
@@ -72,7 +70,6 @@
                                 title="Attempt to re-use jobs with identical parameters?"
                                 help="This may skip executing jobs that you have already run."
                                 type="boolean"
-                                :value="false"
                                 v-model="reuse"
                             />
                         </template>
@@ -169,7 +166,7 @@ export default {
     created() {
         this.requestTool();
         const Galaxy = getGalaxyInstance();
-        if (Galaxy.currHistoryPanel) {
+        if (Galaxy && Galaxy.currHistoryPanel) {
             Galaxy.currHistoryPanel.collection.on("change", () => {
                 this.onUpdate();
             });
diff --git a/client/src/components/providers/MockConfigProvider.js b/client/src/components/providers/MockConfigProvider.js
new file mode 100644
index 00000000000..0126446102b
--- /dev/null
+++ b/client/src/components/providers/MockConfigProvider.js
@@ -0,0 +1,9 @@
+const MockConfigProvider = (fakeConfig) => ({
+    render() {
+        return this.$scopedSlots.default({
+            config: fakeConfig,
+        });
+    },
+});
+
+export default MockConfigProvider;
diff --git a/client/src/mvc/form/form-view.js b/client/src/mvc/form/form-view.js
index 78bd6dd1c6e..fe0bc26a869 100644
--- a/client/src/mvc/form/form-view.js
+++ b/client/src/mvc/form/form-view.js
@@ -8,7 +8,6 @@ import Portlet from "mvc/ui/ui-portlet";
 import Ui from "mvc/ui/ui-misc";
 import FormSection from "mvc/form/form-section";
 import FormData from "mvc/form/form-data";
-import { getGalaxyInstance } from "app";
 
 export default Backbone.View.extend({
     initialize: function (options) {
@@ -33,8 +32,7 @@ export default Backbone.View.extend({
             if (field.update) {
                 field.update(node);
                 field.trigger("change");
-                const Galaxy = getGalaxyInstance();
-                Galaxy.emit.debug("form-view::update()", `Updating input: ${input_id}`);
+                console.debug("form-view::update()", `Updating input: ${input_id}`);
             }
         });
     },
@@ -157,7 +155,6 @@ export default Backbone.View.extend({
                 message: options.message,
             });
         }
-        const Galaxy = getGalaxyInstance();
-        Galaxy.emit.debug("form-view::initialize()", "Completed");
+        console.debug("form-view::initialize()", "Completed");
     },
 });

From 67341aa2b4004eb617490db9931a73eee7368b1a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Sun, 11 Jul 2021 21:06:14 -0400
Subject: [PATCH 58/58] Run prettier

---
 client/src/components/Tool/ToolForm.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Tool/ToolForm.test.js b/client/src/components/Tool/ToolForm.test.js
index 4845fe1e9a8..15cf8df15f7 100644
--- a/client/src/components/Tool/ToolForm.test.js
+++ b/client/src/components/Tool/ToolForm.test.js
@@ -40,7 +40,7 @@ describe("ToolForm", () => {
                 UserHistories: MockCurrentHistory({ id: "fakehistory" }),
                 ConfigProvider: MockConfigProvider({ id: "fakeconfig" }),
                 FormDisplay: true,
-            }
+            },
         });
     });