Merge pull request #12124 from mvdbeek/workflow_run_form_error_handling

[21.05] Add failed-to-submit error handling for simplified workflow run form

client/src/components/Workflow/Run/WorkflowRun.test.js

@@ -58,4 +58,23 @@ describe("WorkflowRun.vue", () => {
         expect(model.hasStepVersionChanges).toBe(false);
         expect(model.wpInputs.wf_param.label).toBe("wf_param");
     });
+
+    it("displays submission error", async () => {
+        // waits for vue to render wrapper
+        await localVue.nextTick();
+
+        expect(wrapper.vm.loading).toBe(true);
+        expect(wrapper.vm.error).toBeNull();
+        expect(wrapper.vm.model).toBeNull();
+
+        await watchForChange({ vm: wrapper.vm, propName: "loading" });
+
+        expect(wrapper.vm.error).toBeNull();
+        expect(wrapper.vm.loading).toBe(false);
+        expect(wrapper.find("b-alert-stub").exists()).toBe(false);
+        wrapper.vm.handleSubmissionError("Some exception here");
+        await localVue.nextTick();
+        expect(wrapper.vm.submissionError).toBe("Some exception here");
+        expect(wrapper.find("b-alert-stub").attributes("variant")).toEqual("danger");
+    });
 });

client/src/components/Workflow/Run/WorkflowRun.vue

@@ -25,6 +25,9 @@
                         instance. To upgrade your workflow and dismiss this message simply edit the workflow and re-save
                         it.
                     </b-alert>
+                    <b-alert v-if="submissionError" variant="danger" show>
+                        Workflow submission failed: {{ submissionError }}
+                    </b-alert>
                 </div>
                 <!-- h4 as a class here looks odd but it was in the Backbone -->
                 <div class="ui-form-composite-header h4">
@@ -56,6 +59,7 @@
                         :target-history="simpleFormTargetHistory"
                         :use-job-cache="simpleFormUseJobCache"
                         @submissionSuccess="handleInvocations"
+                        @submissionError="handleSubmissionError"
                     />
                     <!-- Options to default one way or the other, disable if admins want, etc.. -->
                     <a href="#" @click="showAdvanced">Expand to full workflow form.</a>
@@ -111,6 +115,7 @@ export default {
             runButtonPercentage: -1,
             invocations: null,
             simpleForm: null,
+            submissionError: null,
             model: null,
         };
     },
@@ -160,6 +165,7 @@ export default {
     methods: {
         execute() {
             this.$refs.runform.execute();
+            this.submissionError = null;
         },
         setRunButtonStatus(enabled, waitText, percentage) {
             this.runButtonEnabled = enabled;
@@ -169,6 +175,9 @@ export default {
         handleInvocations(invocations) {
             this.invocations = invocations;
         },
+        handleSubmissionError(error) {
+            this.submissionError = errorMessageAsString(error);
+        },
         showAdvanced() {
             this.simpleForm = false;
         },

client/src/components/Workflow/Run/WorkflowRunFormSimple.vue

@@ -105,6 +105,7 @@ export default {
                 })
                 .catch((error) => {
                     console.log(error);
+                    this.$emit("submissionError", error);
                 });
         },
     },