From 963dc0d05851afa248e071a455004c3264b741c1 Mon Sep 17 00:00:00 2001
From: John Chilton <jmchilton@gmail.com>
Date: Thu, 28 Mar 2024 15:28:27 -0400
Subject: [PATCH] Include output labels when updating report markdown for label
 changes.

---
 .../Workflow/Editor/Forms/FormDefault.vue         | 15 +++++++++++++--
 .../Workflow/Editor/Forms/FormOutput.vue          |  5 ++++-
 .../Workflow/Editor/Forms/FormOutputLabel.vue     |  8 ++++++++
 .../Workflow/Editor/Forms/FormSection.vue         |  4 ++++
 .../components/Workflow/Editor/Forms/FormTool.vue |  6 +++++-
 client/src/components/Workflow/Editor/Index.vue   | 12 +++++++++++-
 6 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Workflow/Editor/Forms/FormDefault.vue b/client/src/components/Workflow/Editor/Forms/FormDefault.vue
index 8ec5d71f984f..72e786d3b6d3 100644
--- a/client/src/components/Workflow/Editor/Forms/FormDefault.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormDefault.vue
@@ -51,7 +51,8 @@
                     :key="index"
                     :name="output.name"
                     :step="step"
-                    :show-details="true" />
+                    :show-details="true"
+                    @onOutputLabel="onOutputLabel" />
             </div>
         </template>
     </FormCard>
@@ -78,7 +79,14 @@ const props = defineProps<{
     step: Step;
     datatypes: DatatypesMapperModel["datatypes"];
 }>();
-const emit = defineEmits(["onAnnotation", "onLabel", "onAttemptRefactor", "onEditSubworkflow", "onSetData"]);
+const emit = defineEmits([
+    "onAnnotation",
+    "onLabel",
+    "onAttemptRefactor",
+    "onEditSubworkflow",
+    "onSetData",
+    "onOutputLabel",
+]);
 const stepRef = toRef(props, "step");
 const { stepId, contentId, annotation, label, name, type, configForm } = useStepProps(stepRef);
 const { stepStore } = useWorkflowStores();
@@ -117,4 +125,7 @@ function onChange(values: any) {
         inputs: values,
     });
 }
+function onOutputLabel(oldValue: string | null, newValue: string | null) {
+    emit("onOutputLabel", oldValue, newValue);
+}
 </script>
diff --git a/client/src/components/Workflow/Editor/Forms/FormOutput.vue b/client/src/components/Workflow/Editor/Forms/FormOutput.vue
index a0e41c37eb40..554b218df6ef 100644
--- a/client/src/components/Workflow/Editor/Forms/FormOutput.vue
+++ b/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" :step="step" />
+            <FormOutputLabel :name="outputName" :step="step" @onOutputLabel="onOutputLabel" />
             <FormElement
                 :id="actionNames.RenameDatasetAction__newname"
                 :value="formData[actionNames.RenameDatasetAction__newname]"
@@ -204,6 +204,9 @@ export default {
         onInput(value, pjaKey) {
             this.$emit("onInput", value, pjaKey);
         },
+        onOutputLabel(oldValue, newValue) {
+            this.$emit("onOutputLabel", oldValue, newValue);
+        },
         onDatatype(newDatatype) {
             this.$emit("onDatatype", this.actionNames.ChangeDatatypeAction__newtype, this.outputName, newDatatype);
         },
diff --git a/client/src/components/Workflow/Editor/Forms/FormOutputLabel.vue b/client/src/components/Workflow/Editor/Forms/FormOutputLabel.vue
index 7225b787b0d2..87f5bcd74453 100644
--- a/client/src/components/Workflow/Editor/Forms/FormOutputLabel.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormOutputLabel.vue
@@ -29,6 +29,10 @@ const props = withDefaults(
     }
 );
 
+const emit = defineEmits<{
+    (e: "onOutputLabel", oldValue: string | null, newValue: string | null): void;
+}>();
+
 const { stepStore } = useWorkflowStores();
 
 const error: Ref<string | undefined> = ref(undefined);
@@ -54,12 +58,14 @@ function onInput(newLabel: string | undefined | null) {
     }
 
     if (newLabel === "") {
+        const oldLabel = label.value || null;
         // user deleted existing label, we inactivate this as output
         const strippedWorkflowOutputs = (props.step.workflow_outputs || []).filter(
             (workflowOutput) => workflowOutput.output_name !== props.name
         );
         stepStore.updateStep({ ...props.step, workflow_outputs: strippedWorkflowOutputs });
         error.value = undefined;
+        emit("onOutputLabel", oldLabel, null);
         return;
     }
 
@@ -74,6 +80,8 @@ function onInput(newLabel: string | undefined | null) {
             output_name: props.name,
         });
         stepStore.updateStep({ ...props.step, workflow_outputs: newWorkflowOutputs });
+        const oldLabel = label.value || null;
+        emit("onOutputLabel", oldLabel, newLabel || null);
         error.value = undefined;
     } else if (existingWorkflowOutput.stepId !== props.step.id) {
         error.value = `Duplicate output label '${newLabel}' will be ignored.`;
diff --git a/client/src/components/Workflow/Editor/Forms/FormSection.vue b/client/src/components/Workflow/Editor/Forms/FormSection.vue
index 8c6837f82f71..d7b96dfc9591 100644
--- a/client/src/components/Workflow/Editor/Forms/FormSection.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormSection.vue
@@ -23,6 +23,7 @@
             :datatypes="datatypes"
             :form-data="formData"
             @onInput="onInput"
+            @onOutputLabel="onOutputLabel"
             @onDatatype="onDatatype" />
     </div>
 </template>
@@ -148,6 +149,9 @@ export default {
                 delete pjas[this.emailPayloadKey];
             }
         },
+        onOutputLabel(oldValue, newValue) {
+            this.$emit("onOutputLabel", oldValue, newValue);
+        },
         onInput(value, pjaKey) {
             let changed = false;
             const exists = pjaKey in this.formData;
diff --git a/client/src/components/Workflow/Editor/Forms/FormTool.vue b/client/src/components/Workflow/Editor/Forms/FormTool.vue
index 0a10578d2e8d..919cbad7a7b0 100644
--- a/client/src/components/Workflow/Editor/Forms/FormTool.vue
+++ b/client/src/components/Workflow/Editor/Forms/FormTool.vue
@@ -46,6 +46,7 @@
                     :step="step"
                     :datatypes="datatypes"
                     :post-job-actions="postJobActions"
+                    @onOutputLabel="onOutputLabel"
                     @onChange="onChangePostJobActions" />
             </div>
         </template>
@@ -88,7 +89,7 @@ export default {
             required: true,
         },
     },
-    emits: ["onSetData", "onUpdateStep", "onChangePostJobActions", "onAnnotation", "onLabel"],
+    emits: ["onSetData", "onUpdateStep", "onChangePostJobActions", "onAnnotation", "onLabel", "onOutputLabel"],
     setup(props, { emit }) {
         const { stepId, annotation, label, stepInputs, stepOutputs, configForm, postJobActions } = useStepProps(
             toRef(props, "step")
@@ -163,6 +164,9 @@ export default {
         onLabel(newLabel) {
             this.$emit("onLabel", this.stepId, newLabel);
         },
+        onOutputLabel(oldValue, newValue) {
+            this.$emit("onOutputLabel", oldValue, newValue);
+        },
         /**
          * Change event is triggered on component creation and input changes.
          * @param { Object } values contains flat key-value pairs `prefixed-name=value`
diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index 34ebf3ff1bce..b045017acc9c 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -95,6 +95,7 @@
                             @onChangePostJobActions="onChangePostJobActions"
                             @onAnnotation="onAnnotation"
                             @onLabel="onLabel"
+                            @onOutputLabel="onOutputLabel"
                             @onUpdateStep="onUpdateStep"
                             @onSetData="onSetData" />
                         <FormDefault
@@ -105,6 +106,7 @@
                             @onLabel="onLabel"
                             @onEditSubworkflow="onEditSubworkflow"
                             @onAttemptRefactor="onAttemptRefactor"
+                            @onOutputLabel="onOutputLabel"
                             @onUpdateStep="onUpdateStep"
                             @onSetData="onSetData" />
                         <WorkflowAttributes
@@ -642,6 +644,13 @@ export default {
                     this.onUpdateStep(step);
                 });
         },
+        onOutputLabel(oldValue, newValue) {
+            const newMarkdown = replaceLabel(this.markdownText, "output", oldValue, newValue);
+            if (newMarkdown !== this.markdownText) {
+                this.debouncedToast("Output label updated in workflow report.", 1500);
+            }
+            this.onReportUpdate(newMarkdown);
+        },
         onLabel(nodeId, newLabel) {
             const step = { ...this.steps[nodeId], label: newLabel };
             const oldLabel = this.steps[nodeId].label;
@@ -649,9 +658,10 @@ export default {
             const stepType = this.steps[nodeId].type;
             const isInput = ["data_input", "data_collection_input", "parameter_input"].indexOf(stepType) >= 0;
             const labelType = isInput ? "input" : "step";
+            const labelTypeTitle = isInput ? "Input" : "Step";
             const newMarkdown = replaceLabel(this.markdownText, labelType, oldLabel, newLabel);
             if (newMarkdown !== this.markdownText) {
-                this.debouncedToast("Label updated in workflow report.", 1500);
+                this.debouncedToast(`${labelTypeTitle} label updated in workflow report.`, 1500);
             }
             this.onReportUpdate(newMarkdown);
         },