Consolidate label related functions in outputlabel vue component

client/src/components/Workflow/Editor/Forms/FormDefault.vue

@@ -43,16 +43,14 @@
                 help="Add an annotation or notes to this step. Annotations are available when a workflow is viewed."
                 @input="onAnnotation"
             />
-            <FormDisplay v-if="!isSubworkflow" :id="id" :inputs="inputs" @onChange="onChange" />
-            <div v-else>
+            <FormDisplay :id="id" :inputs="inputs" @onChange="onChange" />
+            <div v-if="isSubworkflow">
                 <FormOutputLabel
-                    v-for="(output, index) in outputs"
+                    v-for="(output, index) in node.outputs"
                     :key="index"
                     :name="output.name"
-                    :label="getOutputLabel(output)"
-                    :error="outputLabelError"
+                    :active-outputs="node.activeOutputs"
                     :show-details="true"
-                    @onLabel="onOutputLabel"
                 />
             </div>
         </template>
@@ -64,8 +62,8 @@ import FormDisplay from "components/Form/FormDisplay";
 import FormCard from "components/Form/FormCard";
 import FormElement from "components/Form/FormElement";
 import FormOutputLabel from "./FormOutputLabel";
-import WorkflowIcons from "components/Workflow/icons";
 import { checkLabels } from "components/Workflow/Editor/modules/utilities";
+import WorkflowIcons from "components/Workflow/icons";
 
 export default {
     components: {
@@ -88,11 +86,6 @@ export default {
             required: true,
         },
     },
-    data() {
-        return {
-            outputLabelError: null,
-        };
-    },
     computed: {
         node() {
             return this.getNode();
@@ -115,18 +108,8 @@ export default {
         errorLabel() {
             return checkLabels(this.node.id, this.node.label, this.workflow.nodes);
         },
-        activeOutputs() {
-            return this.node.activeOutputs;
-        },
-        outputs() {
-            return this.node.outputs;
-        },
     },
     methods: {
-        getOutputLabel(output) {
-            const activeOutput = this.activeOutputs.get(output.name);
-            return activeOutput && activeOutput.label;
-        },
         onAnnotation(newAnnotation) {
             this.$emit("onAnnotation", this.node.id, newAnnotation);
         },
@@ -149,13 +132,6 @@ export default {
                 inputs: values,
             });
         },
-        onOutputLabel(pjaKey, outputName, newLabel) {
-            if (this.node.labelOutput(outputName, newLabel)) {
-                this.outputLabelError = null;
-            } else {
-                this.outputLabelError = `Duplicate output label '${newLabel}' will be ignored.`;
-            }
-        },
     },
 };
 </script>

client/src/components/Workflow/Editor/Forms/FormOutput.vue

@@ -1,7 +1,7 @@
 <template>
     <FormCard :title="outputTitle" collapsible :expanded.sync="expanded">
         <template v-slot:body>
-            <FormOutputLabel :name="outputName" :label="outputLabel" :error="outputLabelError" @onLabel="onLabel" />
+            <FormOutputLabel :name="outputName" :active-outputs="activeOutputs" />
             <FormElement
                 :id="actionNames.RenameDatasetAction__newname"
                 :value="formData[actionNames.RenameDatasetAction__newname]"
@@ -140,6 +140,10 @@ export default {
             type: Object,
             required: true,
         },
+        activeOutputs: {
+            type: Object,
+            required: true,
+        },
     },
     data() {
         return {
@@ -216,9 +220,6 @@ export default {
         onInput(value, pjaKey) {
             this.$emit("onInput", value, pjaKey);
         },
-        onLabel(id, name, label) {
-            this.$emit("onLabel", id, name, label);
-        },
         onDatatype(newDatatype) {
             this.$emit("onDatatype", this.actionNames.ChangeDatatypeAction__newtype, this.outputName, newDatatype);
         },

client/src/components/Workflow/Editor/Forms/FormOutputLabel.vue

@@ -1,11 +1,10 @@
 <template>
     <FormElement
-        :id="id"
         :value="label"
         :error="error"
         :title="title"
         type="text"
-        help="This will provide a short name to describe the output - this must be unique across workflows."
+        help="Provide a short, unique name to describe this output."
         @input="onInput"
     />
 </template>
@@ -26,30 +25,36 @@ export default {
             type: Boolean,
             default: false,
         },
-        label: {
-            type: String,
+        activeOutputs: {
+            type: Object,
             default: null,
         },
-        error: {
-            type: String,
-            required: null,
-        },
+    },
+    data() {
+        return {
+            error: null,
+        };
     },
     computed: {
-        id() {
-            return `__label__${this.name}`;
-        },
         title() {
             if (this.showDetails) {
-                return `Set Label for: ${this.name}`;
+                return `Label for: '${this.name}'`;
             } else {
                 return "Label";
             }
         },
+        label() {
+            const activeOutput = this.activeOutputs.get(this.name);
+            return activeOutput && activeOutput.label;
+        },
     },
     methods: {
         onInput(newLabel) {
-            this.$emit("onLabel", this.id, this.name, newLabel);
+            if (this.activeOutputs.labelOutput(this.name, newLabel)) {
+                this.error = null;
+            } else {
+                this.error = `Duplicate output label '${newLabel}' will be ignored.`;
+            }
         },
     },
 };

client/src/components/Workflow/Editor/Forms/FormSection.vue

@@ -20,13 +20,11 @@
             v-for="(output, index) in outputs"
             :key="index"
             :output-name="output.name"
-            :output-label="getOutputLabel(output)"
-            :output-label-error="outputLabelError"
+            :active-outputs="node.activeOutputs"
             :inputs="node.inputs"
             :datatypes="datatypes"
             :form-data="formData"
             @onInput="onInput"
-            @onLabel="onLabel"
             @onDatatype="onDatatype"
         />
     </div>
@@ -58,7 +56,6 @@ export default {
     data() {
         return {
             formData: {},
-            outputLabelError: null,
         };
     },
     created() {
@@ -71,9 +68,6 @@ export default {
         postJobActions() {
             return this.node.postJobActions;
         },
-        activeOutputs() {
-            return this.node.activeOutputs;
-        },
         outputs() {
             return this.node.outputs;
         },
@@ -124,10 +118,6 @@ export default {
                 delete pjas[this.emailPayloadKey];
             }
         },
-        getOutputLabel(output) {
-            const activeOutput = this.activeOutputs.get(output.name);
-            return activeOutput && activeOutput.label;
-        },
         onInput(value, pjaKey) {
             let changed = false;
             const exists = pjaKey in this.formData;
@@ -147,13 +137,6 @@ export default {
                 this.$emit("onChange", this.formData, true);
             }
         },
-        onLabel(pjaKey, outputName, newLabel) {
-            if (this.node.labelOutput(outputName, newLabel)) {
-                this.outputLabelError = null;
-            } else {
-                this.outputLabelError = `Duplicate output label '${newLabel}' will be ignored.`;
-            }
-        },
         onDatatype(pjaKey, outputName, newDatatype) {
             this.onInput(newDatatype, pjaKey);
         },

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

@@ -113,7 +113,7 @@
                             </div>
                         </div>
                         <div class="unified-panel-body workflow-right" ref="right-panel">
-                            <div class="m-1">
+                            <div class="m-2">
                                 <FormTool
                                     v-if="hasActiveNodeTool"
                                     :key="activeNodeId"

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

@@ -323,9 +323,6 @@ export default {
             this.setData(data);
             this.showLoading = false;
         },
-        labelOutput(outputName, label) {
-            return this.activeOutputs.labelOutput(outputName, label);
-        },
         onScrollTo() {
             this.scrolledTo = true;
             setTimeout(() => {