Function TaskRow

site/src/pages/TasksPage/TasksTable.tsx:180–325

({ task, checked, onCheckChange })

};

const TaskRow: FC<TaskRowProps> = ({ task, checked, onCheckChange }) => {
	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
	const templateDisplayName = task.template_display_name ?? task.template_name;
	const navigate = useNavigate();

	const showPause = canPauseTask(task.status) && task.workspace_id;
	const pauseDisabled = isPauseDisabled(task.status);
	const showResume = canResumeTask(task.status) && task.workspace_id;

	const queryClient = useQueryClient();
	const pauseMutation = useMutation({
		...pauseTask(task, queryClient),
		onError: (error: unknown) => {
			toast.error(getErrorMessage(error, "Failed to pause task."), {
				description: getErrorDetail(error),
			});
		},
	});
	const resumeMutation = useMutation({
		...resumeTask(task, queryClient),
		onError: (error: unknown) => {
			toast.error(getErrorMessage(error, "Failed to resume task."), {
				description: getErrorDetail(error),
			});
		},
	});

	const taskPageLink = `/tasks/${task.owner_name}/${task.id}`;
	// Discard role, breaks Chromatic.
	const { role, ...clickableRowProps } = useClickableTableRow({
		onClick: () => {
			navigate(taskPageLink);
		},
	});

	return (
		<>
			<TableRow
				key={task.id}
				data-testid={`task-${task.id}`}
				{...clickableRowProps}
			>
				<TableCell>
					<div className="flex items-center gap-5">
						<Checkbox
							data-testid={`checkbox-${task.id}`}
							checked={checked}
							onClick={(e) => {
								e.stopPropagation();
							}}
							onCheckedChange={(checked) => {
								onCheckChange(task.id, Boolean(checked));
							}}
							aria-label={`Select task ${task.initial_prompt}`}
						/>
						<AvatarData
							title={
								<span className="block max-w-[520px] truncate">