93 lines
2.6 KiB
TypeScript
93 lines
2.6 KiB
TypeScript
import React from "react";
|
|
import {
|
|
TaskDefinition,
|
|
TaskMetadata,
|
|
} from "../services/WorkflowTemplateService";
|
|
import AddTaskButton from "./AddTaskButton";
|
|
import { SelectableList } from "../../../../components/common/SelectableList";
|
|
import { sortTasksTopologically } from "./workflowGraphUtils";
|
|
import { useCapabilityDefaults, validateTask } from "./useCapabilityDefaults";
|
|
import ValidationErrorIcon from "../../../../components/validationErrorIcon";
|
|
|
|
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 className="task-list-container">
|
|
<div className="task-list-header">
|
|
<AddTaskButton tasksMetadata={tasksMetadata} onAdd={handleAddTask} />
|
|
</div>
|
|
|
|
<div className="task-list-content">
|
|
<SelectableList
|
|
items={sortedTasks}
|
|
selectedValue={selectedTask}
|
|
renderLabel={(x) => {
|
|
if (x) {
|
|
return (
|
|
<>
|
|
{x.config.name as string}
|
|
|
|
{
|
|
<ValidationErrorIcon
|
|
visible={
|
|
validTasksList[x.config.guid as string] === false
|
|
}
|
|
/>
|
|
}
|
|
</>
|
|
);
|
|
} else return <></>;
|
|
}}
|
|
onSelect={(item) => onSelectTask(item)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TaskList;
|