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

84 lines
2.4 KiB
TypeScript

import React from "react";
import {
TaskDefinition,
TaskMetadata,
} from "../services/WorkflowTemplateService";
import AddTaskButton from "./AddTaskButton";
import { SelectableList } from "../../../../components/common/SelectableList";
import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { sortTasksTopologically } from "./workflowGraphUtils";
import { useCapabilityDefaults, validateTask } from "./useCapabilityDefaults";
interface TaskListProps {
tasks: TaskDefinition[];
validTasksList: Record<string, boolean>;
tasksMetadata: TaskMetadata[];
onChange: (tasks: TaskDefinition[]) => void;
selectedTask: TaskDefinition | null;
onSelectTask: (task: TaskDefinition | null) => void;
onValidate: (taskId: string, isValid: boolean) => void;
}
const TaskList: React.FC<TaskListProps> = ({
tasks,
validTasksList,
tasksMetadata,
onChange,
selectedTask,
onSelectTask,
onValidate,
}) => {
const runDefaults = useCapabilityDefaults(tasksMetadata);
const handleAddTask = (selectedType: TaskMetadata) => {
const newTask: TaskDefinition = {
type: selectedType.taskType,
config: {
guid: crypto.randomUUID(),
},
};
//Assign the default values for the task here.
selectedType.capabilities.forEach((capability) => {
runDefaults(capability, newTask, tasks);
});
const updatedTasks = [...tasks, newTask];
const errors = validateTask(newTask, updatedTasks, tasksMetadata);
onValidate(newTask.config.guid as string, Object.keys(errors).length === 0);
onChange(updatedTasks);
onSelectTask(newTask);
};
const sortedTasks = sortTasksTopologically(tasks);
return (
<div>
<AddTaskButton tasksMetadata={tasksMetadata} onAdd={handleAddTask} />
<SelectableList
items={sortedTasks}
selectedValue={selectedTask}
renderLabel={(x) => (
<>
{x.config.name as string}
{validTasksList[x.config.guid as string] === false && (
<span className="error-icon">
<FontAwesomeIcon icon={faExclamationCircle} />
</span>
)}
</>
)}
onSelect={(item) => onSelectTask(item)}
/>
</div>
);
};
export default TaskList;