Task validation now happens when the task is loaded into view, to ensure that the validation messages are shown properly.

src/modules/manager/workflowTemplates/components/TasksEditor.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback } from "react";
 import {
   TaskDefinition,
   TaskMetadata,
@@ -25,21 +25,45 @@ export const TaskEditor: React.FC<TaskEditorProps> = ({
     {},
   );
 
+  const runValidation = useCallback(
+    (
+      bubbleUp = true,
+      taskToValidate: TaskDefinition,
+      tasksList: TaskDefinition[],
+      tasksMetadataList: TaskMetadata[],
+    ) => {
+      const errors = validateTask(taskToValidate, tasksList, tasksMetadataList);
+      setFieldErrors(errors);
+
+      if (bubbleUp) {
+        onValidate(
+          taskToValidate.config.guid as string,
+          Object.keys(errors).length === 0,
+        );
+      }
+    },
+  );
+
+  React.useEffect(() => {
+    runValidation(true, task, tasks, tasksMetadata);
+  }, [runValidation, task, tasks, tasksMetadata]);
+
   const handleTaskChange = (updatedTask: TaskDefinition) => {
     // Update the task list
     const updatedTasks = tasks.map((t) =>
       t.config.guid === updatedTask.config.guid ? updatedTask : t,
     );
 
-    // Run validation
-    const errors = validateTask(updatedTask, updatedTasks, tasksMetadata);
-    setFieldErrors(errors);
+    runValidation(true, updatedTask, updatedTasks, tasksMetadata);
+    // // Run validation
+    // const errors = validateTask(updatedTask, updatedTasks, tasksMetadata);
+    // setFieldErrors(errors);
 
-    // Bubble validity up
-    onValidate(
-      updatedTask.config.guid as string,
-      Object.keys(errors).length === 0,
-    );
+    // // Bubble validity up
+    // onValidate(
+    //   updatedTask.config.guid as string,
+    //   Object.keys(errors).length === 0,
+    // );
 
     // Bubble updated task up
     onChange(updatedTask);