@elyx-code/editor-ui 0.0.2

package/src/components/draggable-entity-card/TestEntityButton.tsx

@@ -0,0 +1,946 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import './draggable-entity-card.css';
+import {
+	ENTITY_COLORS,
+	ENTITY_TEST_FA_ICON_NAMES,
+	entityDisabledReasonToShortReadableError,
+	getCanvasEntityDraggableContainerDOMId,
+	getCanvasEntityExecutionNodeId,
+	highlightElementIndefinetly,
+	highlightElementSuccess,
+	removeHighlightElementIndefinetly,
+	removeHighlightElementSuccess,
+} from '../../services/editor/ui';
+import { Canvas } from '../../lib/canvas';
+import LoadingClock from '../../assets/Clock-11.1s-28px.svg';
+import './test-entity-button.css';
+import {
+	ChangeSet,
+	DefinitionEntityState,
+	DraggableExecutableEntityState,
+	EntityType,
+	getParentCanvasEntity,
+	GlobalEventState,
+	ProjectState,
+	ENTRY_POINT_TYPES,
+	checkIsMethod,
+	VARIABLE_TYPES,
+	VariableState,
+	CanvasEntityDisabledReason,
+	CanvasEntityTestingDisabledReason,
+	TERMINATION_TYPES,
+	StateMutationAction,
+	EntityInstanceErrorCode,
+} from '@elyx-code/project-logic-tree';
+import { ConnectionNodeType, EditorService } from '../../services/editor';
+import { Test } from '../../services/execution/test-instance';
+import CanvasPopup, { useCanvasPopup } from '../../services/editor/CanvasPopup';
+import CanvasPopupBaseComponent from '../../lib/popup/CanvasPopupBaseComponent';
+import { CanvasEntityElement } from '../../services/editor/CanvasElement';
+import { mergeRefs } from '../../utils/react';
+import { ExecutionState } from '../../services/execution';
+import { Logger } from '@elyx-code/common-ts-utils';
+
+export interface ITestEntityButtonProps {
+	canvasElement: CanvasEntityElement;
+	entity: DraggableExecutableEntityState;
+	project: EditorService;
+	parentDisabledReasons: CanvasEntityDisabledReason[];
+}
+
+function resolveInstantTestExecutionCommandLabel() {
+	if (navigator.userAgent.indexOf('Mac') !== -1) {
+		return '⌘ + click';
+	} else if (navigator.userAgent.indexOf('Windows') !== -1) {
+		return 'ctrl + click';
+	} else {
+		return '';
+	}
+}
+
+export default function TestEntityButton(props: ITestEntityButtonProps) {
+	const rootElementRef = useRef(null);
+	const [hasDragged, setHasDragged] = useState(false);
+	const [hasEnded, setHasEnded] = useState(false);
+	const isExecuting = props.project.test?.state === ExecutionState.Running;
+	const instantExecHintText = resolveInstantTestExecutionCommandLabel();
+
+	const canBeAddedToCurrentTest = props.project.test?.getCanBeAddedToTest(
+		props.entity,
+	);
+	const canBeRemovedFromCurrentTest =
+		props.project.test?.getCanBeRemovedFromTest(props.entity);
+
+	const entity = props.entity;
+	const entityColor = ENTITY_COLORS[entity.type];
+
+	// Check if it is a method, meaning, a function inside another entity
+	const isMethod = checkIsMethod(props.entity);
+
+	const [updateKey, setValue] = useState(0);
+
+	const useForceUpdate = () => {
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	const resolveTooltipContent = (): React.ReactNode => {
+		if (!!props.project.canvas?.activeConnectionDrawing) {
+			return null;
+		}
+
+		if (
+			props.entity.type === EntityType.FunctionDeclaration &&
+			props.entity.isExtendedMethod
+		) {
+			return (
+				<p
+					style={{
+						margin: 0,
+						padding: 0,
+						fontSize: '16px',
+						fontWeight: 'bold',
+					}}
+				>
+					Navigate on the canvas to the base trigger that this node represents
+				</p>
+			);
+		}
+		if (isExecuting) {
+			return (
+				<p
+					style={{
+						margin: 0,
+						padding: 0,
+						fontSize: '16px',
+						fontWeight: 'bold',
+					}}
+				>
+					Executing logic...
+				</p>
+			);
+		} else if (canBeRemovedFromCurrentTest) {
+			return (
+				<p
+					style={{
+						margin: 0,
+						padding: 0,
+						fontSize: '16px',
+						fontWeight: 'bold',
+					}}
+				>
+					Remove from current test
+				</p>
+			);
+		} else if (canBeAddedToCurrentTest) {
+			return (
+				<p
+					style={{
+						margin: 0,
+						padding: 0,
+						fontSize: '16px',
+						fontWeight: 'bold',
+					}}
+				>
+					Add to current test
+				</p>
+			);
+		} else if (
+			!!props.project.test &&
+			props.entity.type === EntityType.VariableDeclaration &&
+			props.entity.variableInstances.some((instance) =>
+				props.project.test?.hasEntity(instance),
+			)
+		) {
+			return (
+				<>
+					<p
+						style={{
+							margin: 0,
+							padding: 0,
+							fontSize: '16px',
+							fontWeight: 'bold',
+						}}
+					>
+						This variable declaration must remain part of the test
+					</p>
+					<br />
+					<p style={{ margin: 0, padding: 0, fontSize: '16px' }}>
+						Since at least one of its instances is being executed in the test
+					</p>
+				</>
+			);
+		} else if (
+			VARIABLE_TYPES.includes(props.entity.type) &&
+			!(props.entity as VariableState).successCalls.length &&
+			!(props.entity as VariableState).errorCalls.length &&
+			!(props.entity as VariableState).calledBy.length
+		) {
+			return (
+				<p
+					style={{
+						margin: 0,
+						padding: 0,
+						fontSize: '16px',
+						fontWeight: 'bold',
+					}}
+				>
+					This variable doesn't call any other logic
+				</p>
+			);
+		} else if (TERMINATION_TYPES.includes(entity.type)) {
+			return (
+				<>
+					<p
+						style={{
+							margin: 0,
+							padding: 0,
+							fontSize: '16px',
+							fontWeight: 'bold',
+						}}
+					>
+						Click and drag
+					</p>
+					<br />
+					<p style={{ margin: 0, padding: 0, fontSize: '16px' }}>
+						To connect to a caller node
+					</p>
+				</>
+			);
+		} else if (
+			entity.type === EntityType.VariableDeclaration &&
+			entity.parent === entity.project
+		) {
+			return (
+				<>
+					<p
+						style={{
+							margin: 0,
+							padding: 0,
+							fontSize: '16px',
+							fontWeight: 'bold',
+						}}
+					>
+						Test this logic
+					</p>
+					<br />
+					<p style={{ margin: 0, padding: 0, fontSize: '16px' }}>
+						Click to start test setup
+					</p>
+					{instantExecHintText && (
+						<>
+							<br />
+							<p style={{ margin: 0, padding: 0, fontSize: '16px' }}>
+								Or {instantExecHintText} to run instantly
+							</p>
+						</>
+					)}
+					<br />
+					{/* Line */}
+					<hr
+						style={{
+							width: '100%',
+							border: '1px solid rgba(255, 255, 255, 0.5)',
+							margin: '12px 0',
+						}}
+					/>
+					<p
+						style={{
+							margin: 0,
+							padding: 0,
+							fontSize: '16px',
+							fontWeight: 'bold',
+						}}
+					>
+						Cannot connect to caller
+					</p>
+					<br />
+					<p style={{ margin: 0, padding: 0, fontSize: '16px' }}>
+						Variable declarations at a global scope
+					</p>
+					<p style={{ margin: 0, padding: 0, fontSize: '16px' }}>
+						cannot be called for its initialization
+					</p>
+				</>
+			);
+		} else {
+			return (
+				<>
+					<p
+						style={{
+							margin: 0,
+							padding: 0,
+							fontSize: '16px',
+							fontWeight: 'bold',
+						}}
+					>
+						Test this logic
+					</p>
+					<br />
+					<p style={{ margin: 0, padding: 0, fontSize: '16px' }}>
+						Click to start test setup
+					</p>
+					{instantExecHintText && (
+						<>
+							<br />
+							<p style={{ margin: 0, padding: 0, fontSize: '16px' }}>
+								Or {instantExecHintText} to run instantly
+							</p>
+						</>
+					)}
+					{!ENTRY_POINT_TYPES.includes(props.entity.type) && (
+						<>
+							<br />
+							{/* Line */}
+							<hr
+								style={{
+									width: '100%',
+									border: '1px solid rgba(255, 255, 255, 0.5)',
+									margin: '12px 0',
+								}}
+							/>
+							<p
+								style={{
+									margin: 0,
+									padding: 0,
+									fontSize: '16px',
+									fontWeight: 'bold',
+								}}
+							>
+								Click and drag
+							</p>
+							<br />
+							<p style={{ margin: 0, padding: 0, fontSize: '16px' }}>
+								To connect to a caller node
+							</p>
+						</>
+					)}
+				</>
+			);
+		}
+	};
+
+	const memoizedCanvasPopupBody = useCallback(
+		(popup: CanvasPopup) => (
+			<CanvasPopupBaseComponent
+				containerClasses={['tooltip', 'tooltip--large-font']}
+			>
+				<div
+					style={{
+						display: 'flex',
+						padding: '8px',
+						alignItems: 'center',
+						flexDirection: 'column',
+					}}
+				>
+					{resolveTooltipContent()}
+				</div>
+			</CanvasPopupBaseComponent>
+		),
+		[props.entity, props.project],
+	);
+
+	const canvasPopup = useCanvasPopup(
+		{
+			editor: props.project,
+			id: 'canvas--test-entity-button--' + props.entity.id,
+			arrowClasses: ['tooltip-arrow'],
+			anchorQuerySelector: '#' + getCanvasEntityExecutionNodeId(props.entity),
+			parentCanvasObject: props.canvasElement.draggableObject,
+			placement: 'top',
+		},
+		memoizedCanvasPopupBody,
+	)
+		.onBeforeShow(() => {
+			if (!!resolveTooltipContent()) {
+				return true;
+			}
+
+			return false;
+		})
+		.setupHover({
+			closeDelay: 80,
+			openDelay: 600,
+		});
+
+	const unCollapseBranch = async (e: MouseEvent) => {
+		const previousCollapsedState = (props.entity as GlobalEventState).collapsed;
+
+		let actionName = StateMutationAction.HideTriggerBody;
+
+		if (entity.parent?.type === EntityType.Loop) {
+			actionName = StateMutationAction.HideLoopBody;
+		} else if (entity.type === EntityType.FunctionDeclaration) {
+			actionName = StateMutationAction.HideFuncDeclBody;
+		} else if (entity.type === EntityType.GlobalEvent) {
+			actionName = StateMutationAction.HideGlobalEventBody;
+		}
+
+		const changeSet = props.project.logic.addChangeSet(
+			new ChangeSet(
+				props.project.logic,
+				ProjectState.sessionAuthor,
+				new Date().toISOString(),
+				entity,
+				false,
+				actionName,
+			),
+		);
+
+		// @ts-ignore
+		props.entity.metaSync(
+			{
+				collapsed: !previousCollapsedState,
+			},
+			changeSet,
+		);
+
+		props.project.canvas?.unselect(props.canvasElement.draggableObject);
+
+		await props.project.renderFromExisting(
+			props.entity,
+			changeSet,
+			async () => {
+				forceUpdate();
+				Test.handleEntityTestButtonClick(e as MouseEvent, props);
+			},
+		);
+
+		props.project.renderAndCloseChangeSet(changeSet);
+	};
+
+	const resolveIconString = () => {
+		if (
+			props.entity.type === EntityType.FunctionDeclaration &&
+			props.entity.isExtendedMethod
+		) {
+			// Link icon to the base function
+			return 'fa-up-right-from-square';
+		}
+
+		const testIsExecuting =
+			props.project.test?.state === ExecutionState.Running;
+
+		const hasBeenExecuted = props.project.test?.executed.includes(props.entity);
+		const isBeingExecuted = props.project.test?.executing.includes(
+			props.entity,
+		);
+		const isSkipped = props.project.test?.skipped.includes(props.entity);
+		const isPartOfTest = props.project.test?.entities.includes(props.entity);
+
+		// An element is queued for execution if it is in the test,
+		// The test has started executing
+		// and has not been yet executed
+		// and has not been skipped
+		// and is not currently being executed
+		const isQueued =
+			isPartOfTest &&
+			testIsExecuting &&
+			!hasBeenExecuted &&
+			!isSkipped &&
+			!isBeingExecuted;
+
+		const isPaused = props.project.test?.state === ExecutionState.Paused;
+
+		if (isPaused) {
+			return 'fa-pause';
+		} else if (isQueued) {
+			return 'fa-hourglass-start';
+
+			// If it has already completed its execution
+		} else if (props.project.test?.executed.includes(props.entity)) {
+			return 'fa-check';
+
+			// If it has been skipped and will not be executed
+		// } else if (
+		// 	props.project.test?.skipped.includes(props.entity) ||
+		// 	!!entity.errors.find(
+		// 		(e) =>
+		// 			e.code === EntityInstanceErrorCode.LastCalledEntityMustBeReturnEntity,
+		// 	)
+		// ) {
+		} else if (
+			props.project.test?.skipped.includes(props.entity)
+		) {
+			return 'fa-ban';
+
+			// If it can be removed from the current test
+		} else {
+			if (canBeRemovedFromCurrentTest) {
+				return 'fa-minus';
+
+				// If it can be added to the current test
+			} else if (canBeAddedToCurrentTest) {
+				return 'fa-plus';
+
+				// If it is currently being executed
+			} else {
+				const iconName = ENTITY_TEST_FA_ICON_NAMES[props.entity.type];
+
+				return 'fa-' + iconName;
+			}
+		}
+	};
+
+	const resolveIcon = (): React.ReactNode => {
+		// if the entity is currently in the list of being executed in the test
+		// then we show a loading icon
+		if (props.project.test?.executing.includes(props.entity)) {
+			return (
+				<span
+					style={{
+						display: 'flex',
+						gap: '6px',
+						alignItems: 'center',
+						position: 'relative',
+					}}
+				>
+					<img src={LoadingClock} />
+				</span>
+			);
+
+			// If the entity has already been executed show the finished icon
+		} else {
+			return (
+				<span
+					style={{
+						display: 'flex',
+						gap: '6px',
+						alignItems: 'center',
+						position: 'relative',
+						left: '1px',
+						top: '1px',
+						// color: !!entity.errors.find(
+						// 	(e) =>
+						// 		e.code ===
+						// 		EntityInstanceErrorCode.LastCalledEntityMustBeReturnEntity,
+						// )
+						// 	? 'var(--color-main-dark-error)'
+						// 	: 'unset',
+					}}
+				>
+					<i className={`fa-solid ${resolveIconString()}`} />
+				</span>
+			);
+		}
+	};
+
+	const handleClick = (e: MouseEvent) => {
+		setHasEnded(true);
+		setHasDragged(false);
+
+		if (
+			props.entity.type === EntityType.FunctionDeclaration &&
+			props.entity.isExtendedMethod
+		) {
+			const parentDefinitionEntity = getParentCanvasEntity(
+				props.entity.extends,
+			) as DefinitionEntityState;
+
+			const objectId = getCanvasEntityDraggableContainerDOMId(
+				parentDefinitionEntity,
+			);
+
+			props.project.canvas?.scrollToObjectById(objectId);
+			return;
+		}
+
+		// If the branch is hidden, show the code before proceeding with the test
+		if (
+			ENTRY_POINT_TYPES.includes(props.entity.type) &&
+			(props.entity as GlobalEventState).collapsed
+		) {
+			Logger.log(
+				'Change sets on before uncollapsing: ',
+				this.logic.history.filter((c: ChangeSet) => c.open).length,
+			);
+
+			unCollapseBranch(e);
+			Logger.log(
+				'Change sets on after uncollapsing: ',
+				this.logic.history.filter((c: ChangeSet) => c.open).length,
+			);
+		}
+
+		Test.handleEntityTestButtonClick(e as MouseEvent, props);
+	};
+
+	// Clean up the event listeners
+	const onMouseUp = useCallback(() => {
+		const isMethod = checkIsMethod(entity);
+
+		if (
+			isMethod ||
+			(entity.type === EntityType.VariableDeclaration &&
+				entity.parent === entity.project)
+		) {
+			// Clean up the cursor and tooltip in case it was set
+			props.project.canvas?.canvasElement?.classList.remove(
+				'canvas-forbidden-cursor',
+			);
+
+			Logger.log('Hiding tooltip on mouse up for forbidden connection');
+			props.project.canvas?.hideTooltip('canvas-forbidden-cursor');
+		}
+
+		setHasEnded(true);
+		setHasDragged(false);
+		document.removeEventListener('mousemove', onMouseMove);
+		document.removeEventListener('mouseup', onMouseUp);
+	}, []);
+
+	// This function is triggered when dragging after clicking
+	// Its job is just to initiate the connection drawing once.
+	const onMouseMove = useCallback((e: MouseEvent) => {
+		if (hasDragged || hasEnded) {
+			return;
+		}
+
+		const entity = props.entity;
+		const permanentNodeElement = rootElementRef.current.querySelector(
+			'#' + getCanvasEntityExecutionNodeId(entity),
+		);
+
+		// Consider the movement, and set having dragged as true
+		// ONLY when the mouse has moved outside the button
+		if (Math.abs(e.movementX) > 5 || Math.abs(e.movementY) > 5 || hasDragged) {
+			const isMethod = checkIsMethod(entity);
+
+			if (isMethod) {
+				// Set the cursor to forbidden and add a canvas tooltip
+				// to indicate that method execute buttons' cant be connected
+				props.project.canvas?.canvasElement?.classList.add(
+					'canvas-forbidden-cursor',
+				);
+
+				props.project.canvas?.showTooltip(
+					'canvas-forbidden-connection',
+					'This trigger cannot be executed by an entity',
+				);
+
+				return;
+			} else if (
+				entity.type === EntityType.VariableDeclaration &&
+				entity.parent === entity.project
+			) {
+				// Set the cursor to forbidden and add a canvas tooltip
+				// to indicate that variable declarations at a global scope
+				// cannot be connected
+				props.project.canvas?.canvasElement?.classList.add(
+					'canvas-forbidden-cursor',
+				);
+
+				props.project.canvas?.showTooltip(
+					'canvas-forbidden-connection',
+					'Variable declarations at a global scope cannot be triggered for its initialization',
+				);
+
+				return;
+			}
+
+			setHasDragged(true);
+
+			// Add 'canvas__node__active' class to the element
+			permanentNodeElement?.classList.add('canvas__node__active');
+
+			if (
+				permanentNodeElement &&
+				permanentNodeElement.classList.contains('invisible')
+			) {
+				permanentNodeElement.classList.remove('invisible');
+			}
+
+			Logger.log(
+				'Change sets on connection start: ',
+				props.project.logic.history.filter((c: ChangeSet) => c.open).length,
+			);
+			props.project.startConnection({
+				nodeType: ConnectionNodeType.CalledBy,
+				target: entity,
+				targetId: getCanvasEntityExecutionNodeId(entity),
+				draggableObject: props.canvasElement.draggableObject,
+			});
+		}
+	}, []);
+
+	// This is the handler that will detect whether the user is trying to drag the element
+	const handleMouseDown = (e: MouseEvent) => {
+		setHasDragged(false);
+		setHasEnded(false);
+		// e.stopPropagation();
+
+		// Add mouse move event listener to detect dragging
+		document.addEventListener('mousemove', onMouseMove);
+		document.addEventListener('mouseup', onMouseUp);
+	};
+
+	const resolveDisabled = (): boolean => {
+		if (
+			[ExecutionState.Running, ExecutionState.Paused].includes(
+				props.project.test?.state,
+			)
+		) {
+			return true;
+		}
+
+		if (props.project.test?.hasSkipped(entity)) {
+			return true;
+		}
+
+		// Filter out reasons that aren't relevant for the test button (current component)
+		const filteredOutParentReasons = props.parentDisabledReasons.filter(
+			(reason) =>
+				// We only care wether it can be added
+				reason !== CanvasEntityTestingDisabledReason.NotPartOfOngoingTest,
+		);
+
+		if (filteredOutParentReasons.length) {
+			return true;
+		}
+
+		if (
+			!!props.project.onGoingConnectionNodeType &&
+			![
+				ConnectionNodeType.EntryPointCaller,
+				ConnectionNodeType.SuccessCaller,
+				ConnectionNodeType.ErrorCaller,
+			].includes(props.project.onGoingConnectionNodeType)
+		) {
+			return true;
+		}
+
+		if (
+			props.entity.type === EntityType.FunctionDeclaration &&
+			props.entity.parent.type === EntityType.Loop &&
+			props.project.test?.hasEntity(props.entity.parent)
+		) {
+			return true;
+		}
+
+		if (
+			props.entity.type === EntityType.VariableDeclaration &&
+			props.entity.variableInstances.some((instance) =>
+				props.project.test?.hasEntity(instance),
+			)
+		) {
+			return true;
+		}
+	};
+
+	const disabled = resolveDisabled();
+
+	const buttonRef = useRef<HTMLButtonElement>(null);
+	const mergedRefs = mergeRefs(buttonRef, canvasPopup.anchorRef);
+
+	useEffect(() => {
+		const handleConnectionStart = (payload: any) => {
+			if (
+				!!payload.compatible?.[props.entity.id] &&
+				[
+					ConnectionNodeType.EntryPointCaller,
+					ConnectionNodeType.ErrorCaller,
+					ConnectionNodeType.SuccessCaller,
+				].includes(payload.nodeType)
+			) {
+				if (buttonRef.current) {
+					highlightElementIndefinetly(buttonRef.current);
+				}
+			}
+		};
+
+		const handleConnectionEnd = () => {
+			if (buttonRef.current) {
+				removeHighlightElementIndefinetly(buttonRef.current);
+				removeHighlightElementSuccess(buttonRef.current);
+			}
+		};
+
+		const handleTestPaused = () => {
+			forceUpdate();
+		};
+
+		props.project.on('canvas-connection-start', handleConnectionStart);
+		props.project.on('canvas-connection-end', handleConnectionEnd);
+		props.project.on('test-paused', handleTestPaused);
+
+		return () => {
+			props.project.off('canvas-connection-start', handleConnectionStart);
+			props.project.off('canvas-connection-end', handleConnectionEnd);
+			props.project.off('test-paused', handleTestPaused);
+
+			// Also clean up any lingering highlights just in case
+			if (buttonRef.current) {
+				removeHighlightElementIndefinetly(buttonRef.current);
+				removeHighlightElementSuccess(buttonRef.current);
+			}
+		};
+	}, [
+		props.project,
+		props.entity.id,
+		buttonRef,
+		updateKey,
+		highlightElementIndefinetly,
+		removeHighlightElementIndefinetly,
+		removeHighlightElementSuccess,
+	]);
+
+	// When the entity is part of a variable declaration,
+	// which already has one of their internal calls being executed,
+	// we don't show the button
+	const dontShow =
+		(entity.type === EntityType.VariableDeclaration ||
+			entity.type === EntityType.VariableInstance) &&
+		entity.internalCalls.some((call) => !!call.calledBy.length);
+
+	if (dontShow) {
+		return null;
+	}
+
+	return (
+		<span ref={rootElementRef}>
+			<button
+				ref={mergedRefs}
+				disabled={!!disabled}
+				className={[
+					'test-entity-button',
+					'large',
+					isExecuting ? 'executing' : '',
+					disabled && !isExecuting ? 'disabled' : '',
+					TERMINATION_TYPES.includes(entity.type)
+						? 'termination-statement-test-button'
+						: '',
+				].join(' ')}
+				id={getCanvasEntityExecutionNodeId(entity)}
+				{...{
+					[Canvas.OBJ_ATTR_NAME]: getCanvasEntityExecutionNodeId(entity),
+				}}
+				style={{
+					backgroundColor: entityColor,
+					...(isMethod ? { left: '-60px' } : {}),
+				}}
+				onClick={(e: any) => {
+					if (disabled) {
+						return;
+					}
+
+					if (!hasDragged) {
+						handleClick(e);
+					}
+				}}
+				onMouseOver={(e: any) => {
+					if (!!props.project.canvas?.activeConnectionDrawing) {
+						if (
+							props.project.onGoingConnectionCompatibleEntities?.[
+								props.entity.id
+							]
+						) {
+							if (
+								!disabled &&
+								props.project.onGoingConnectionSource &&
+								[
+									ConnectionNodeType.EntryPointCaller,
+									ConnectionNodeType.ErrorCaller,
+									ConnectionNodeType.SuccessCaller,
+								].includes(props.project.onGoingConnectionNodeType)
+							) {
+								props.project.onGoingConnectionTarget = props.entity;
+								props.project.onGoingConnectionTargetId =
+									getCanvasEntityExecutionNodeId(props.entity);
+
+								props.project.canvas?.activeConnectionDrawing.snap(
+									getCanvasEntityExecutionNodeId(entity),
+								);
+
+								removeHighlightElementIndefinetly(buttonRef.current);
+								highlightElementSuccess(buttonRef.current);
+							}
+						} else if (
+							!!props.project.onGoingConnectionIncompatibleEntities?.[
+								props.entity.id
+							]
+						) {
+							// Read the disabled reasons and add a tooltip to the mouse
+							const reasonsMessage =
+								props.project.onGoingConnectionIncompatibleEntities?.[
+									props.entity.id
+								].reasons
+									.map((reason) =>
+										entityDisabledReasonToShortReadableError(reason),
+									)
+									.join('.\n');
+
+							props.project.canvas?.showTooltip(
+								'connection-disabled-reasons-test-entity-button',
+								reasonsMessage,
+							);
+							if (props.project.canvas) {
+								props.project.canvas.tooltip.style.fontSize = '28px';
+								props.project.canvas.canvasElement.style.cursor = 'not-allowed';
+							}
+						}
+					}
+				}}
+				onMouseLeave={(e: any) => {
+					props.project.canvas?.hideTooltip(
+						'connection-disabled-reasons-test-entity-button',
+					);
+
+					if (disabled) {
+						return;
+					}
+					if (
+						!!props.project.canvas?.activeConnectionDrawing &&
+						props.project.onGoingConnectionCompatibleEntities?.[
+							props.entity.id
+						] &&
+						[
+							ConnectionNodeType.EntryPointCaller,
+							ConnectionNodeType.ErrorCaller,
+							ConnectionNodeType.SuccessCaller,
+						].includes(props.project.onGoingConnectionNodeType)
+					) {
+						removeHighlightElementIndefinetly(buttonRef.current);
+						highlightElementIndefinetly(buttonRef.current);
+
+						if (
+							props.project.canvas?.activeConnectionDrawing?.snappedTo ===
+							getCanvasEntityExecutionNodeId(entity)
+						) {
+							props.project.canvas?.activeConnectionDrawing?.unSnap();
+						}
+
+						if (
+							props.project.onGoingConnectionTarget === props.entity &&
+							props.project.onGoingConnectionTargetId ===
+								getCanvasEntityExecutionNodeId(props.entity) &&
+							[
+								ConnectionNodeType.EntryPointCaller,
+								ConnectionNodeType.ErrorCaller,
+								ConnectionNodeType.SuccessCaller,
+							].includes(props.project.onGoingConnectionNodeType)
+						) {
+							props.project.onGoingConnectionTarget = null;
+							props.project.onGoingConnectionTargetId = null;
+						}
+					}
+				}}
+				onMouseDown={(e: any) => {
+					if (disabled) {
+						return;
+					}
+
+					// This is critical to prevent the canvas from dragging the element
+					// Somehow the event propagates to the canvas and it starts dragging the element
+					props.canvasElement.draggableObject.isTargetOfMouseDown = false;
+
+					handleMouseDown(e);
+				}}
+				onMouseUp={(e: any) => {
+					onMouseUp();
+				}}
+			>
+				{resolveIcon()}
+			</button>
+		</span>
+	);
+}