Create new component for displaying Task Names in a unified mannor throughout the application

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

@@ -9,6 +9,7 @@ import { SelectableList } from "../../../../components/common/SelectableList";
 import { sortTasksTopologically } from "./workflowGraphUtils";
 import { useCapabilityDefaults, validateTask } from "./useCapabilityDefaults";
 import ValidationErrorIcon from "../../../../components/validationErrorIcon";
+import TaskNameDisplayPanel from "./TaskNameDisplayPanel";
 
 interface TaskListProps {
   tasks: TaskDefinition[];
@@ -104,20 +105,13 @@ const TaskList: React.FC<TaskListProps> = ({
           selectedValue={selectedTask}
           renderLabel={(x) => {
             if (x) {
-              const meta = taskMetadataByType.get(x.type);
-
               return (
-                <>
-                  <FontAwesomeStringIcon icon={meta?.icon} />
-                  {x.config.name as string}
-                  {
-                    <ValidationErrorIcon
-                      visible={
-                        validTasksList[x.config.guid as string] === false
-                      }
-                    />
+                <TaskNameDisplayPanel
+                  task={x}
+                  showValidationErrorIcon={
+                    validTasksList[x.config.guid as string] === false
                   }
-                </>
+                />
               );
             } else return <></>;
           }}

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

@@ -0,0 +1,49 @@
+import { useEffect } from "react";
+import templateVersionsService, {
+  TaskMetadata,
+  TaskDefinition,
+} from "../services/WorkflowTemplateService";
+import React from "react";
+import FontAwesomeStringIcon from "../../../../components/common/FontAwesomeStringIcon";
+import ValidationErrorIcon from "../../../../components/validationErrorIcon";
+
+export interface TaskNameDisplayPanel {
+  task: TaskDefinition;
+  showValidationErrorIcon: boolean;
+}
+
+const TaskNameDisplayPanel: React.FC<TaskNameDisplayPanel> = ({
+  task,
+  showValidationErrorIcon = false,
+}) => {
+  const [tasksMetadata, setTasksMetadata] = React.useState<TaskMetadata[]>([]);
+
+  useEffect(() => {
+    const fetchTaskMetadata = async () => {
+      const meta = await templateVersionsService.getTaskMetadata("GeneralTask");
+      setTasksMetadata(meta);
+    };
+
+    fetchTaskMetadata();
+  }, []);
+
+  const taskMetadataByType = React.useMemo(() => {
+    const map = new Map<string, TaskMetadata>();
+    tasksMetadata.forEach((meta) => {
+      map.set(meta.taskType, meta);
+    });
+    return map;
+  }, [tasksMetadata]);
+
+  const meta = taskMetadataByType.get(task.type);
+
+  return (
+    <div>
+      <FontAwesomeStringIcon icon={meta?.icon} />
+      {task.config.name as string}
+      {<ValidationErrorIcon visible={showValidationErrorIcon} />}
+    </div>
+  );
+};
+
+export default TaskNameDisplayPanel;

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

@@ -7,6 +7,7 @@ import ValidationErrorIcon from "../../../../components/validationErrorIcon";
 import { sortTasksTopologically } from "./workflowGraphUtils";
 import { useTranslation } from "react-i18next";
 import { Namespaces } from "../../../../i18n/i18n";
+import TaskNameDisplayPanel from "./TaskNameDisplayPanel";
 
 interface VisualiserTabProps {
   data: CreateWorkflowTemplateVersion;
@@ -684,10 +685,12 @@ const VisualiserTab: React.FC<VisualiserTabProps> = ({
                       onMouseLeave={() => setHoveredGuid(null)}
                     >
                       <div className="visualiser-node-content">
-                        <ValidationErrorIcon
-                          visible={taskValidation[guid] === false}
+                        <TaskNameDisplayPanel
+                          task={task}
+                          showValidationErrorIcon={
+                            taskValidation[guid] === false
+                          }
                         />
-                        <span>{(task.config.name as string) || task.type}</span>
                       </div>
                     </div>
                   );