Upgraded the Tasks tab, so that the item selected can be loaded into the editor

src/components/common/SelectableList.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 export interface SelectableListProps<T> {
   items: T[];
-  selectedValue?: t | null;
+  selectedValue?: T | null;
   renderLabel: (item: T) => React.ReactNode;
   onSelect: (item: T) => void;
 }

src/modules/manager/workflowTemplates/WorkflowTemplateDetails.tsx

@@ -59,6 +59,7 @@ const WorkflowTemplateDetails: React.FC<{ editMode: boolean }> = ({
       .label(t("ActivityNameTemplate")),
     description: Joi.string().required().allow("").label(t("Description")),
     domainId: Joi.required(),
+    tasks: Joi.array().required(),
   };
 
   // -----------------------------

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import {
   TaskDefinition,
   TaskMetadata,
@@ -12,13 +12,19 @@ interface TaskListProps {
   tasks: TaskDefinition[];
   taskType: string;
   onChange: (tasks: TaskDefinition[]) => void;
+  selectedTask: TaskDefinition | null;
+  onSelectTask: (task: TaskDefinition | null) => void;
 }
 
-const TaskList: React.FC<TaskListProps> = ({ tasks, taskType, onChange }) => {
+const TaskList: React.FC<TaskListProps> = ({
+  tasks,
+  taskType,
+  onChange,
+  selectedTask,
+  onSelectTask,
+}) => {
   const { t: tTaskType } = useTranslation(Namespaces.TaskTypes);
 
-  const [currentTask, setCurrentTask] = useState<TaskDefinition | null>(null);
-
   const formatNewTaskName = (
     displayName: string,
     tasks: TaskDefinition<Record<string, unknown>>[],
@@ -39,7 +45,7 @@ const TaskList: React.FC<TaskListProps> = ({ tasks, taskType, onChange }) => {
     };
 
     if (tasks.length === 0) {
-      setCurrentTask(newTask);
+      onSelectTask(newTask);
     }
     onChange([...tasks, newTask]);
   };
@@ -50,9 +56,9 @@ const TaskList: React.FC<TaskListProps> = ({ tasks, taskType, onChange }) => {
 
       <SelectableList
         items={tasks}
-        selectedValue={currentTask}
+        selectedValue={selectedTask}
         renderLabel={(x) => x.config.name as string}
-        onSelect={(item) => setCurrentTask(item)}
+        onSelect={(item) => onSelectTask(item)}
       />
     </div>
   );

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

@@ -1,3 +1,4 @@
+import React, { useEffect, useState } from "react";
 import {
   CreateWorkflowTemplateVersion,
   TaskDefinition,
@@ -17,7 +18,40 @@ const TasksTab: React.FC<TasksTabProps> = ({
   isEditMode,
   onTasksChange,
 }) => {
-  const tasks = data.tasks ?? [];
+  const tasks = data.tasks;
+  const [selectedTask, setSelectedTask] = useState<TaskDefinition | null>(null);
+
+  useEffect(() => {
+    if (tasks.length === 0) {
+      if (selectedTask !== null) {
+        setSelectedTask(null);
+      }
+      return;
+    }
+
+    if (!selectedTask) {
+      setSelectedTask(tasks[0]);
+      return;
+    }
+
+    const selectedGuid = (selectedTask.config as any)?.guid;
+    if (selectedGuid) {
+      const match = tasks.find(
+        (task) => (task.config as any)?.guid === selectedGuid,
+      );
+
+      if (match && match !== selectedTask) {
+        setSelectedTask(match);
+      } else if (!match) {
+        setSelectedTask(tasks[0]);
+      }
+      return;
+    }
+
+    if (!tasks.includes(selectedTask)) {
+      setSelectedTask(tasks[0]);
+    }
+  }, [tasks, selectedTask]);
 
   const handleTasksChange = (newTasks: TaskDefinition[]) => {
     // Update the parent form state
@@ -25,12 +59,17 @@ const TasksTab: React.FC<TasksTabProps> = ({
   };
 
   return (
-    <div>
-      <TaskList
-        tasks={tasks}
-        taskType="GeneralTask"
-        onChange={handleTasksChange}
-      />
+    <div className="two-column-grid">
+      <div className="fit-content-width">
+        <TaskList
+          tasks={tasks}
+          taskType="GeneralTask"
+          onChange={handleTasksChange}
+          selectedTask={selectedTask}
+          onSelectTask={setSelectedTask}
+        />
+      </div>
+      <div>{selectedTask?.config.name as string}</div>
     </div>
   );
 };