@elyx-code/editor-ui 0.0.2

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

@@ -0,0 +1,1088 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import parse from 'style-to-object';
+import './draggable-entity-card.css';
+import {
+	ENTITY_FA_ICON_NAMES,
+	fromDisabledReasonsToCardState,
+	getCardGradientStatement,
+	getMethodDeclarationDOMId,
+	resolveCardSubheader,
+	resolveEntityColorClass,
+	getCanvasEntityDraggableContainerDOMId,
+	safeResolveEntityName
+} from '../../services/editor/ui';
+import Button from '../../lib/button/Button';
+import { Canvas } from '../../lib/canvas';
+import {
+	ArgumentDeclarationState,
+	ChangeSet,
+	ChangeSetEntityChangeType,
+	createStateFromTypeAndSubscribe,
+	DefinitionEntityState,
+	FunctionDeclarationState,
+	getParentCanvasEntity,
+	lowercaseFirstLetter,
+	ProjectState,
+	ValueDescriptorParentChildRelation,
+	VariableDeclarationState,
+	CanvasEntityConnectionDisabledReason,
+	CanvasEntityDisabledReason,
+	CanvasEntityOtherDisabledReason,
+	CanvasEntityTestingDisabledReason,
+	ALL_CONNECTION_DISABLED_REASONS,
+	addDisabledReasons,
+	removeDisabledReasons,
+	READABLE_ENTITY_TYPES,
+	getEntityArgumentDeclarations,
+	getRelatedCanvasElementsOnTheRight,
+	EntityType,
+	findNextAvailableName,
+	DataTypeState,
+	BUILT_IN_BASE_ENTITY_IDS,
+	IPrimitiveEntityTransfer,
+	PrimitiveEntityState,
+	StateMutationAction
+} from '@elyx-code/project-logic-tree';
+import { EditorService } from '../../services/editor';
+import { IValueInheritanceLink } from '../../services/editor/value-store';
+import CanvasPopup, { useCanvasPopup } from '../../services/editor/CanvasPopup';
+import CanvasPopupBaseComponent from '../../lib/popup/CanvasPopupBaseComponent';
+import CanvasDropdownMenuCard from '../../lib/dropdown/CanvasDropdownMenuCard';
+import TestEntityButton from './TestEntityButton';
+import LogicScopeCallerNode from './LogicScopeCallerNode';
+import ArgumentDeclaration from './ArgumentDeclaration';
+import LogicErrorIconMenu from './logic-error/LogicErrorIconMenu';
+import NewCardOutputButton from './new-card-output-button/NewCardOutputButton';
+import ImplementEntityIcon from './implement-entity-icon/ImplementEntityIcon';
+import CollapseEntityButton from './CollapseEntityButton';
+import { CanvasEntityElement } from '../../services/editor/CanvasElement';
+import { Logger } from '@elyx-code/common-ts-utils';
+import { ICanvasDropdownMenuCardOption } from '../../lib/dropdown/CanvasDropdownMenuCardOption';
+import { popupNotification } from '../../popup-notification';
+
+interface IMethodDeclarationProps {
+	entity: FunctionDeclarationState;
+	canvasElement: CanvasEntityElement;
+	project: EditorService;
+	parentDisabledReasons: CanvasEntityDisabledReason[];
+}
+
+export default function MethodDeclaration(props: IMethodDeclarationProps) {
+	const rootElementRef = useRef(null);
+	const [disabledReasons, setDisabledReasons] = useState<
+		CanvasEntityDisabledReason[]
+	>([]);
+
+	const [updateKey, setValue] = useState(0);
+
+	const useForceUpdate = () => {
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	// Recursively unfold the inheritance tree and resolve all dependencies so we subscribe them as events
+	const subscribeValueInheritanceUpdates = (
+		inheritanceLink: IValueInheritanceLink
+	) => {
+		inheritanceLink.sources.forEach((valueInheritanceLink) => {
+			if (!valueInheritanceLink) {
+				return;
+			}
+
+			props.project.on(valueInheritanceLink.valueOwner.id, () => {
+				forceUpdate();
+			});
+
+			if (
+				!!(valueInheritanceLink.valueOwner as VariableDeclarationState)
+					.dataType
+			) {
+				props.project.on(
+					(
+						valueInheritanceLink.valueOwner as VariableDeclarationState
+					).dataType.id,
+					() => {
+						forceUpdate();
+					}
+				);
+			}
+
+			if (valueInheritanceLink.inheritanceLink) {
+				subscribeValueInheritanceUpdates(
+					valueInheritanceLink.inheritanceLink
+				);
+			}
+		});
+	};
+
+	const isLoopBody = props.entity.parent.type === EntityType.Loop;
+	const isDefEntMethod =
+		props.entity.parent.type === EntityType.DefinitionEntity;
+	const implementsBaseAbstractMethod =
+		isDefEntMethod && !!props.entity.implements;
+	const disabledDeleteOption =
+		isLoopBody ||
+		implementsBaseAbstractMethod ||
+		props.entity.isExtendedMethod ||
+		!props.entity.deletable;
+
+	const memoizedCanvasPopupBody = useCallback(
+		(popup: CanvasPopup) => (
+			<CanvasPopupBaseComponent
+				id={
+					'canvas-property-entity-card-menu-button-' +
+					props.entity.id +
+					'--popup--body'
+				}
+			>
+				<CanvasDropdownMenuCard
+					options={[
+						{
+							project: props.project,
+							onClick: async () => {
+								await props.project.remove(props.entity.id);
+							},
+							label: 'Delete',
+							color: 'error',
+							iconEnd: 'fa-solid fa-trash-can',
+							disabled: disabledDeleteOption,
+							tooltip: (() => {
+								const deleteDisabledReasons = [];
+
+								if (isLoopBody) {
+									deleteDisabledReasons.push(
+										'Cannot delete the iteration trigger of a loop'
+									);
+								}
+
+								if (implementsBaseAbstractMethod) {
+									deleteDisabledReasons.push(
+										'Cannot delete this trigger because it implements a base action required by the parent node'
+									);
+								}
+
+								if (props.entity.isExtendedMethod) {
+									deleteDisabledReasons.push(
+										'Cannot delete this trigger because it represents an extended base action. You can delete the base action instead'
+									);
+								}
+
+								if (!props.entity.deletable) {
+									deleteDisabledReasons.push(
+										'This trigger cannot be deleted. Because the system needs to refer to it over time.'
+									);
+								}
+
+								if (deleteDisabledReasons.length) {
+									return deleteDisabledReasons.join('. ');
+								}
+
+								return 'Forever delete this element';
+							})(),
+							parentCanvasObject: popup.self,
+							id:
+								'canvas--function-declaration-card--' +
+								props.entity.id +
+								'--delete'
+						},
+						...(disabledDeleteOption
+							? [
+									{
+										project: props.project,
+										onClick: async () => {
+											await props.project.remove(
+												props.entity.id
+											);
+										},
+										label: 'Force delete',
+										color: 'error',
+										iconEnd: 'fa-solid fa-trash-can',
+										tooltip: 'Forever delete this trigger',
+										parentCanvasObject: popup.self,
+										id:
+											'canvas--' +
+											props.entity.type +
+											'--' +
+											props.entity.id +
+											'--force-delete'
+									} as ICanvasDropdownMenuCardOption
+								]
+							: ([] as any)),
+						{
+							project: props.project,
+							onClick: async () => {
+								props.project?.canvas?.unselectAll();
+
+								Logger.log(
+									'Navigating to: ',
+									`${props.project?.editorBasePath}/entity/${EntityType.FunctionDeclaration}/${props.entity.id}`
+								);
+								EditorService.navigate(
+									`${props.project?.editorBasePath}/entity/${EntityType.FunctionDeclaration}/${props.entity.id}`
+								);
+							},
+							label: 'Edit',
+							iconEnd: 'fa-solid fa-pencil',
+							disabled: props.entity.isExtendedMethod,
+							// Lower case the first letter of the resolved readable name
+							tooltip: (() => {
+								if (props.entity.isExtendedMethod) {
+									return 'Cannot edit this trigger because it represents an extended base action. You can edit the base action instead';
+								}
+								if (!props.entity.editable) {
+									return `This ${lowercaseFirstLetter(
+										READABLE_ENTITY_TYPES[props.entity.type]
+											.singular
+									)} has been locked and can no longer be edited`;
+								}
+
+								return (
+									'Edit this ' +
+									lowercaseFirstLetter(
+										READABLE_ENTITY_TYPES[props.entity.type]
+											.shortSingular
+									)
+								);
+							})(),
+							parentCanvasObject: popup.self,
+							id:
+								'canvas--function-declaration-card--' +
+								props.entity.id +
+								'--edit'
+						},
+						// If it is extended, navigate to base property in the canvas
+						...(props.entity.isExtendedMethod
+							? [
+									{
+										project: props.project,
+										onClick: async () => {
+											const parentDefinitionEntity =
+												getParentCanvasEntity(
+													props.entity.extends
+												) as DefinitionEntityState;
+
+											const objectId =
+												getCanvasEntityDraggableContainerDOMId(
+													parentDefinitionEntity
+												);
+
+											props.project.canvas?.scrollToObjectById(
+												objectId
+											);
+										},
+										label: 'Navigate to base trigger',
+										iconEnd: 'fa-solid fa-arrow-right',
+										tooltip:
+											'Navigate in the canvas to the base trigger that this trigger represents',
+										parentCanvasObject: popup.self,
+										id:
+											'canvas--function-declaration-card--' +
+											props.entity.id +
+											'--navigate-to-base'
+									}
+								]
+							: []),
+						{
+							project: props.project,
+							onClick: async () => {
+								const changeSet =
+									props.project.logic.addChangeSet(
+										new ChangeSet(
+											props.project.logic,
+											ProjectState.sessionAuthor,
+											new Date().toISOString(),
+											entity,
+											false,
+											entity.parent.type ===
+												EntityType.Loop
+												? StateMutationAction.RecalculateLoopBody
+												: StateMutationAction.RecalculateMethod
+										)
+									);
+
+								entity.afterAllChildrenInitialized(changeSet);
+
+								props.project.renderAndCloseChangeSet(
+									changeSet
+								);
+							},
+							label: 'Recalculate',
+							color: 'warning',
+							// Bug icon
+							iconEnd: 'fa-solid fa-bug',
+							disabled: false,
+							// Lower case the first letter of the resolved readable name
+							tooltip:
+								'Recalculate the state of this ' +
+								lowercaseFirstLetter(
+									READABLE_ENTITY_TYPES[props.entity.type]
+										.shortSingular
+								),
+							parentCanvasObject: popup.self,
+							id:
+								'canvas--' +
+								props.entity.type +
+								'-card--' +
+								props.entity.id +
+								'--recalculate'
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								navigator.clipboard.writeText(props.entity.id);
+								popupNotification({
+									text: `Copied ID: ${props.entity.id}`,
+									color: 'success'
+								});
+							},
+							label: 'Copy ID',
+							color: 'warning',
+							iconEnd: 'fa-solid fa-bug',
+							tooltip:
+								'Copy this node ID to clipboard for debugging',
+							parentCanvasObject: popup.self,
+							id: 'copy-id-' + props.entity.id
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								await props.project.recalculateValidateEntity(
+									props.entity
+								);
+								popupNotification({
+									text: `Re-validated node successfully`,
+									color: 'success'
+								});
+							},
+							label: 'Re-validate',
+							color: 'warning',
+							iconEnd: 'fa-solid fa-bug',
+							tooltip:
+								"Re-validate this node's state and its errors",
+							parentCanvasObject: popup.self,
+							id: 're-validate-' + props.entity.id
+						}
+					]}
+				/>
+			</CanvasPopupBaseComponent>
+		),
+		[props.entity, props.project, disabledDeleteOption]
+	);
+
+	const canvasPopup = useCanvasPopup(
+		{
+			editor: props.project,
+			id:
+				'canvas-property-entity-card-menu-button-' +
+				props.entity.id +
+				'--popup',
+			anchorQuerySelector:
+				'#canvas-method-card-menu-button-' + props.entity.id,
+			arrowClasses: ['dropdown-menu-card-arrow'],
+			parentCanvasObject: props.canvasElement.draggableObject,
+			placement: 'left',
+			arrowContainerSelector:
+				'#canvas-property-entity-card-menu-button-' +
+				props.entity.id +
+				'--popup--body'
+		},
+		memoizedCanvasPopupBody
+	).onBeforeShow(() => !props.entity.suggestion);
+
+	useEffect(() => {
+		// --- Initial Setup Logic ---
+		const initialNewDisabledReasons: CanvasEntityOtherDisabledReason[] = [];
+
+		// @ts-ignore
+		if (props.entity.suggestion) {
+			initialNewDisabledReasons.push(
+				CanvasEntityOtherDisabledReason.Suggestion
+			);
+		}
+
+		if (props.project.canvas?.disabled) {
+			initialNewDisabledReasons.push(
+				CanvasEntityOtherDisabledReason.CanvasGloballyDisabled
+			);
+		}
+
+		if (!!initialNewDisabledReasons.length) {
+			setDisabledReasons((currentReasons) => {
+				const config = addDisabledReasons(
+					currentReasons,
+					initialNewDisabledReasons
+				);
+				return config.reasons;
+			});
+		} else {
+			// This handles the case where canvas was disabled but is now enabled
+			setDisabledReasons((currentReasons) => {
+				const config = removeDisabledReasons(currentReasons, [
+					CanvasEntityOtherDisabledReason.CanvasGloballyDisabled
+				]);
+				return config.reasons;
+			});
+		}
+
+		const handleCanvasGloballyEnabled = () => {
+			setDisabledReasons((currentReasons) => {
+				const config = removeDisabledReasons(currentReasons, [
+					CanvasEntityOtherDisabledReason.CanvasGloballyDisabled
+				]);
+				return config.reasons;
+			});
+		};
+		const handleCanvasGloballyDisabled = () => {
+			setDisabledReasons((currentReasons) => {
+				const config = addDisabledReasons(currentReasons, [
+					CanvasEntityOtherDisabledReason.CanvasGloballyDisabled
+				]);
+				return config.reasons;
+			});
+		};
+
+		const handleParentEntityUpdate = (payload: any) => {
+			if (props.entity.parent.type !== EntityType.Loop) {
+				return;
+			}
+
+			let hasUpdated = false;
+			const newDisabledReasons: CanvasEntityTestingDisabledReason[] = [];
+			const disabledReasonsToRemove: CanvasEntityTestingDisabledReason[] =
+				[];
+
+			props.project.test?.disabledConnectionsNotInTest(
+				props.canvasElement.draggableObject,
+				props.entity.parent
+			);
+
+			if (
+				!!props.project.test &&
+				!props.project.test?.hasEntity(props.entity.parent) &&
+				!props.project.test?.getCanBeAddedToTest(props.entity.parent)
+			) {
+				props.project.canvas?.disable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+				newDisabledReasons.push(
+					CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+				);
+				hasUpdated = true;
+			}
+
+			if (
+				(props.project.test?.hasEntity(props.entity.parent) ||
+					props.project.test?.getCanBeAddedToTest(
+						props.entity.parent
+					)) &&
+				props.canvasElement.draggableObject.disabled
+			) {
+				props.project.canvas?.enable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+				disabledReasonsToRemove.push(
+					CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+				);
+				hasUpdated = true;
+			}
+
+			if (
+				!!props.project.test &&
+				!props.project.test?.hasEntity(props.entity.parent)
+			) {
+				newDisabledReasons.push(
+					CanvasEntityTestingDisabledReason.NotPartOfOngoingTest
+				);
+				hasUpdated = true;
+			} else if (
+				!!props.project.test &&
+				props.project.test?.hasEntity(props.entity.parent)
+			) {
+				disabledReasonsToRemove.push(
+					CanvasEntityTestingDisabledReason.NotPartOfOngoingTest
+				);
+				hasUpdated = true;
+			}
+
+			if (newDisabledReasons.length || disabledReasonsToRemove.length) {
+				setDisabledReasons((currentReasons) => {
+					const config = addDisabledReasons(
+						currentReasons,
+						newDisabledReasons
+					);
+					const finalConfig = removeDisabledReasons(
+						config.reasons,
+						disabledReasonsToRemove
+					);
+					return finalConfig.reasons;
+				});
+			}
+
+			if (!hasUpdated) {
+				forceUpdate();
+			}
+		};
+
+		const handleEntityUpdate = (payload: any) => {
+			let hasUpdated = false;
+			const newDisabledReasons: CanvasEntityTestingDisabledReason[] = [];
+			const disabledReasonsToRemove: CanvasEntityTestingDisabledReason[] =
+				[];
+
+			props.project.test?.disabledConnectionsNotInTest(
+				props.canvasElement.draggableObject,
+				props.entity
+			);
+
+			if (
+				!!props.project.test &&
+				!props.project.test?.hasEntity(props.entity) &&
+				!props.project.test?.getCanBeAddedToTest(props.entity)
+			) {
+				props.project.canvas?.disable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+				newDisabledReasons.push(
+					CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+				);
+				hasUpdated = true;
+			}
+
+			if (
+				(props.project.test?.hasEntity(props.entity) ||
+					props.project.test?.getCanBeAddedToTest(props.entity)) &&
+				props.canvasElement.draggableObject.disabled
+			) {
+				props.project.canvas?.enable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+				disabledReasonsToRemove.push(
+					CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+				);
+				hasUpdated = true;
+			}
+
+			if (
+				!!props.project.test &&
+				!props.project.test?.hasEntity(props.entity)
+			) {
+				newDisabledReasons.push(
+					CanvasEntityTestingDisabledReason.NotPartOfOngoingTest
+				);
+				hasUpdated = true;
+			} else if (
+				!!props.project.test &&
+				props.project.test?.hasEntity(props.entity)
+			) {
+				disabledReasonsToRemove.push(
+					CanvasEntityTestingDisabledReason.NotPartOfOngoingTest
+				);
+				hasUpdated = true;
+			}
+
+			if (newDisabledReasons.length || disabledReasonsToRemove.length) {
+				setDisabledReasons((currentReasons) => {
+					const config = addDisabledReasons(
+						currentReasons,
+						newDisabledReasons
+					);
+					const finalConfig = removeDisabledReasons(
+						config.reasons,
+						disabledReasonsToRemove
+					);
+					return finalConfig.reasons;
+				});
+			}
+
+			if (!hasUpdated) {
+				forceUpdate();
+			}
+		};
+
+		const handleTestSetupStarted = () => {
+			const newDisabledReasons: CanvasEntityTestingDisabledReason[] = [];
+			if (
+				!!props.project.test &&
+				!props.project.test?.hasEntity(props.entity) &&
+				!props.project.test?.getCanBeAddedToTest(props.entity)
+			) {
+				props.project.canvas?.disable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+				props.project.test?.disabledConnectionsNotInTest(
+					props.canvasElement.draggableObject,
+					props.entity
+				);
+
+				newDisabledReasons.push(
+					CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+				);
+			}
+
+			if (!props.project.test?.hasEntity(props.entity)) {
+				newDisabledReasons.push(
+					CanvasEntityTestingDisabledReason.NotPartOfOngoingTest
+				);
+			}
+
+			setDisabledReasons((currentReasons) => {
+				const config = addDisabledReasons(
+					currentReasons,
+					newDisabledReasons
+				);
+				return config.reasons;
+			});
+		};
+
+		const handleExecutionStart = () => {
+			if (!!props.project.test?.hasEntity(props.entity)) {
+				forceUpdate();
+			}
+		};
+
+		const handleTestExited = () => {
+			setDisabledReasons((currentReasons) => {
+				const config = removeDisabledReasons(currentReasons, [
+					CanvasEntityTestingDisabledReason.NotPartOfOngoingTest,
+					CanvasEntityTestingDisabledReason.CannotBeAddedToTest
+				]);
+				return config.reasons;
+			});
+
+			if (props.canvasElement.draggableObject.disabled) {
+				props.project.canvas?.enable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+			}
+
+			props.canvasElement.draggableObject.connections.forEach(
+				(connection) => {
+					connection.enable();
+					connection.element.classList.remove('disabled');
+
+					if (connection.complementaryLineElement) {
+						connection.complementaryLineElement.classList.remove(
+							'disabled'
+						);
+					}
+				}
+			);
+		};
+
+		const handleCanvasConnectionStart = (payload: any) => {
+			if (!payload.compatible?.[props.entity.id]) {
+				props.project.canvas?.disable(
+					props.canvasElement.draggableObject,
+					{
+						quiet: true
+					}
+				);
+
+				const newOwnConnectionDisabledReasons: CanvasEntityConnectionDisabledReason[] =
+					payload.incompatible?.[props.entity.id]?.reasons || [];
+
+				setDisabledReasons((currentReasons) => {
+					const config = addDisabledReasons(
+						currentReasons,
+						newOwnConnectionDisabledReasons
+					);
+					return config.reasons;
+				});
+			} else {
+				forceUpdate();
+			}
+		};
+
+		const handleCanvasConnectionEnd = () => {
+			props.project.canvas?.enable(props.canvasElement.draggableObject, {
+				quiet: true
+			});
+
+			setDisabledReasons((currentReasons) => {
+				const config = removeDisabledReasons(
+					currentReasons,
+					ALL_CONNECTION_DISABLED_REASONS
+				);
+				return config.reasons;
+			});
+		};
+
+		props.project.on(
+			'canvas-globally-enabled',
+			handleCanvasGloballyEnabled
+		);
+		props.project.on(
+			'canvas-globally-disabled',
+			handleCanvasGloballyDisabled
+		);
+		props.project.on(props.entity.parent.id, handleParentEntityUpdate);
+		props.project.on(props.entity.id, handleEntityUpdate);
+		props.project.on('test-setup-started', handleTestSetupStarted);
+		props.project.on('execution-start', handleExecutionStart);
+		props.project.on('test-exited', handleTestExited);
+		props.project.on(
+			'canvas-connection-start',
+			handleCanvasConnectionStart
+		);
+		props.project.on('canvas-connection-end', handleCanvasConnectionEnd);
+
+		return () => {
+			props.project.off(
+				'canvas-globally-enabled',
+				handleCanvasGloballyEnabled
+			);
+			props.project.off(
+				'canvas-globally-disabled',
+				handleCanvasGloballyDisabled
+			);
+			props.project.off(props.entity.parent.id, handleParentEntityUpdate);
+			props.project.off(props.entity.id, handleEntityUpdate);
+			props.project.off('test-setup-started', handleTestSetupStarted);
+			props.project.off('execution-start', handleExecutionStart);
+			props.project.off('test-exited', handleTestExited);
+			props.project.off(
+				'canvas-connection-start',
+				handleCanvasConnectionStart
+			);
+			props.project.off(
+				'canvas-connection-end',
+				handleCanvasConnectionEnd
+			);
+		};
+	}, [
+		props.project,
+		props.entity,
+		props.canvasElement,
+		updateKey,
+		// @ts-ignore
+		props.entity.suggestion
+	]);
+
+	useEffect(() => {
+		props.canvasElement.draggableObject.updateConnections();
+	});
+
+	const entity = props.entity;
+
+	const argumentDeclarations = getEntityArgumentDeclarations(entity);
+	const children = getRelatedCanvasElementsOnTheRight(props.entity);
+
+	const canInplementNewArguments =
+		!props.entity.implements ||
+		!!props.entity.implements.inputs.find(
+			(input) =>
+				input.parentRelationType ===
+				ValueDescriptorParentChildRelation.DynamicArgument
+		);
+
+	const showNewInputButton =
+		!props.entity.isExtendedMethod &&
+		canInplementNewArguments &&
+		entity.parent.type !== EntityType.Loop &&
+		!disabledReasons.length &&
+		!props.project.test;
+
+	return (
+		<li
+			ref={rootElementRef}
+			className={[
+				'canvas-draggable-card__method-property',
+				'canvas-draggable-card__main-output-property',
+				'canvas-draggable-card__main-output-property__top-margin',
+				...(!!disabledReasons.length
+					? ['canvas-draggable-card__method-property__disabled']
+					: []),
+				resolveEntityColorClass(props.entity.type, {
+					state: fromDisabledReasonsToCardState(disabledReasons)
+				})
+			].join(' ')}
+			id={getMethodDeclarationDOMId(entity)}
+			{...{
+				[Canvas.OBJ_ATTR_NAME]: getMethodDeclarationDOMId(entity)
+			}}
+		>
+			{!entity.suggestion && (
+				<TestEntityButton
+					entity={props.entity}
+					canvasElement={props.canvasElement}
+					project={props.project}
+					parentDisabledReasons={disabledReasons}
+				/>
+			)}
+			{!!children.length &&
+				!entity.suggestion &&
+				!entity.isExtendedMethod && (
+					<CollapseEntityButton
+						entity={props.entity}
+						project={props.project}
+						canvasElement={props.canvasElement}
+						parentDisabledReasons={disabledReasons}
+						small
+					/>
+				)}
+			<header
+				className={[
+					'canvas-draggable-card__output-property__header',
+					'canvas-draggable-card__property-row'
+				].join(' ')}
+				{...{
+					[Canvas.OBJ_ATTR_NAME]:
+						getMethodDeclarationDOMId(entity) + '--header'
+				}}
+				style={parse(
+					getCardGradientStatement(entity, {
+						state: fromDisabledReasonsToCardState(disabledReasons)
+					})
+				)}
+			>
+				<span
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						gap: '6px'
+					}}
+				>
+					<ImplementEntityIcon
+						entity={entity}
+						draggableObject={props.canvasElement.draggableObject}
+						project={props.project}
+					/>
+					<LogicErrorIconMenu
+						entity={entity}
+						project={props.project}
+						canvasElement={props.canvasElement}
+						parentDisabledReasons={disabledReasons}
+					/>
+					{!entity.suggestion && (
+						<div
+							className={[
+								'canvas-draggable-card__property-row__menu-button',
+								...(entity.suggestion ? ['suggestion'] : [])
+							].join(' ')}
+						>
+							<Button
+								variant="text"
+								color="grey"
+								iconEnd="fa-solid fa-ellipsis-v"
+								size="small"
+								className="canvas-small-entity-card-menu-button"
+								ref={canvasPopup.anchorRef}
+								id={`canvas-method-card-menu-button-${entity.id}`}
+								disabled={false}
+								onClick={(e: any) => {
+									e.stopPropagation();
+									canvasPopup?.toggle();
+								}}
+								onDoubleClick={(
+									e: React.MouseEvent<HTMLButtonElement>
+								) => {
+									e.stopPropagation();
+									props.project?.canvas?.unselectAll();
+									EditorService.navigate(
+										`${props.project?.editorBasePath}/entity/${EntityType.FunctionDeclaration}/${props.entity.id}`
+									);
+								}}
+							/>
+						</div>
+					)}
+				</span>
+				<div
+					className={[
+						'canvas-draggable-card__property__right-block',
+						...(entity.suggestion ? ['suggestion'] : []),
+						...(disabledReasons.length ? ['disabled'] : [])
+					].join(' ')}
+				>
+					<div className="canvas-draggable-card__property__labels-group">
+						<span
+							style={{
+								display: 'flex',
+								alignItems: 'center',
+								gap: '4px'
+							}}
+						>
+							{props.entity.isExtendedMethod && (
+								<p className="canvas-draggable-card__property__type">
+									{'Extension - '}
+								</p>
+							)}
+							<span className="canvas-draggable-card__output-property__name">
+								<h3>
+									{safeResolveEntityName(
+										entity,
+										props.project.logic
+									)}
+								</h3>
+							</span>
+						</span>
+						<p className="canvas-draggable-card__property__type">
+							{resolveCardSubheader(entity)}
+						</p>
+					</div>
+					<i
+						className={[
+							'canvas-draggable-card-header__icon',
+							'fa-solid',
+							`fa-${ENTITY_FA_ICON_NAMES[entity.type] || 'rectangle-list'}`
+						].join(' ')}
+					/>
+				</div>
+				{!entity.isExtendedMethod && (
+					<LogicScopeCallerNode
+						draggableObject={props.canvasElement.draggableObject}
+						entity={props.entity}
+						project={props.project}
+						parentDisabledReasons={disabledReasons}
+					/>
+				)}
+			</header>
+			<div
+				className={[
+					'canvas-draggable-card__content',
+					entity.parent.type !== EntityType.Loop
+						? 'canvas-draggable-small-padding-bottom'
+						: 'canvas-draggable-card__content__no-padding-bottom'
+				].join(' ')}
+			>
+				{!!argumentDeclarations.length && (
+					<ul className="canvas-draggable-card__property-list">
+						{argumentDeclarations
+							.sort((a, b) => {
+								// Sort by `.index` property
+								if (a.index < b.index) {
+									return -1;
+								}
+								if (a.index > b.index) {
+									return 1;
+								}
+								return 0;
+							})
+							.map((argumentDeclaration) => (
+								<ArgumentDeclaration
+									key={argumentDeclaration.id}
+									argumentDeclaration={argumentDeclaration}
+									entity={props.entity}
+									canvasElement={props.canvasElement}
+									project={props.project}
+									parentDisabledReasons={disabledReasons}
+									size="small"
+								/>
+							))}
+					</ul>
+				)}
+				{showNewInputButton && (
+					<div className="canvas-draggable-card__action-alt align-right">
+						<NewCardOutputButton
+							iconEnd="fa-solid fa-plus"
+							size="small"
+							parentDisabledReasons={disabledReasons}
+							entity={entity}
+							project={props.project}
+							canvasElement={props.canvasElement}
+							onClick={() => {
+								const changeSet =
+									props.project.logic.addChangeSet(
+										new ChangeSet(
+											props.project.logic,
+											ProjectState.sessionAuthor,
+											new Date().toISOString(),
+											entity,
+											false,
+											entity.parent.type ===
+												EntityType.Loop
+												? StateMutationAction.AddArgToLoopBody
+												: StateMutationAction.AddArgToMethod
+										)
+									);
+
+								const newEntityTransfer =
+									ArgumentDeclarationState.new(changeSet);
+								newEntityTransfer.parent = entity.toReference();
+								newEntityTransfer.name = findNextAvailableName(
+									'Input',
+									entity.inputs
+								);
+
+								const newEntity =
+									createStateFromTypeAndSubscribe(
+										newEntityTransfer,
+										props.project.logic
+									) as ArgumentDeclarationState;
+
+								newEntity.hydrateAncestors();
+
+								changeSet.add(
+									newEntity,
+									ChangeSetEntityChangeType.Added
+								);
+
+								newEntity.addSelfToProject(changeSet);
+								newEntity.initChildren(changeSet);
+
+								const builtInPrimitiveStringEntity =
+									props.project.logic.getBuiltIn(
+										BUILT_IN_BASE_ENTITY_IDS[
+											'primitive-entity'
+										].string.id
+									) as PrimitiveEntityState;
+
+								// Add 'string' data-type as default
+								const dataTypeTransfer =
+									DataTypeState.new(changeSet);
+								dataTypeTransfer.parent =
+									newEntity.toReference();
+								dataTypeTransfer.entity =
+									(builtInPrimitiveStringEntity?.toJSON() as IPrimitiveEntityTransfer) ||
+									null;
+
+								const dataTypeInstance =
+									createStateFromTypeAndSubscribe(
+										dataTypeTransfer,
+										props.project.logic
+									) as DataTypeState;
+
+								dataTypeInstance.hydrateAncestors();
+								dataTypeInstance.addSelfToProject(changeSet);
+
+								changeSet.add(
+									dataTypeInstance,
+									ChangeSetEntityChangeType.Added
+								);
+
+								dataTypeInstance.initChildren(changeSet);
+
+								EditorService.navigate(
+									`${props.project?.editorBasePath}/entity/${EntityType.ArgumentDeclaration}/${newEntity.id}`
+								);
+
+								props.project.renderAndCloseChangeSet(
+									changeSet
+								);
+							}}
+						>
+							Input
+						</NewCardOutputButton>
+					</div>
+				)}
+			</div>
+		</li>
+	);
+}