@elyx-code/editor-ui 0.0.2

package/src/components/dialogs/property/Property.tsx

@@ -0,0 +1,1490 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+	ChangeSet,
+	ChangeSetEntityChangeType,
+	DataTypeState,
+	EntityId,
+	EntityType,
+	getIsInteractive,
+	ProjectState,
+	PropertyState,
+	resolveEntityName,
+	READABLE_ENTITY_TYPES,
+	EntityError,
+	propertyValidation,
+	translateLogicErrorCode,
+	EntityInstanceErrorCode,
+	IPropertyShallowTransfer,
+	lowercaseFirstLetter,
+	StateMutationErrorCode,
+	checkHasBaseEntity,
+	DefinitionEntityState,
+	BaseEntityNames,
+	toSentenceCase,
+	translateLogicErrorCodeShort,
+	getRecursiveParentsIds,
+	StateMutationAction,
+} from '@elyx-code/project-logic-tree';
+import {
+	Alert,
+	Autocomplete,
+	TextField,
+	Tooltip as MuiTooltip,
+	Box,
+	Checkbox,
+	Stack,
+	Collapse,
+	FormGroup,
+	FormControlLabel,
+	Chip,
+} from '@mui/material';
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import CancelIcon from '@mui/icons-material/Cancel';
+import { EditorService } from '../../../services/editor';
+import DataTypeBuilder, {
+	AllowedDataTypeListTypes,
+	ILiteralValueOption,
+} from '../../data-type/DataTypeBuilder';
+import Tooltip from '../../../lib/tooltip/Tooltip';
+import Button from '../../../lib/button/Button';
+import { useParams } from 'react-router-dom';
+import EntityIcon from '../../entity-icon/EntityIcon';
+import DynamicValueEntry from '../../dynamic-value/DynamicValueEntry';
+import EntityDialogSectionHeader from '../../EntityDialogSectionHeader';
+import WarningIcon from '../../../assets/warning-sign-24px.png';
+import { DataTypeBuilderOption } from '../../../services/editor/utils';
+import { Logger } from '@elyx-code/common-ts-utils';
+import { debounce } from '../../../utils';
+
+const icon = <CheckBoxOutlineBlankIcon fontSize='small' />;
+const checkedIcon = <CheckBoxIcon fontSize='small' />;
+
+export interface IPropertyProps {
+	project: EditorService;
+	entity?: PropertyState;
+	onClose?: (e: any) => void;
+}
+
+export enum PropertyErrorEnum {
+	NameRequired = 'name-required',
+	IncompleteDataType = 'incomplete-data-type',
+}
+
+export type PropertyError = PropertyErrorEnum | EntityInstanceErrorCode;
+
+export function fromPropertyErrorToReadableMessage(
+	error: PropertyError | string,
+): string {
+	switch (error) {
+		case PropertyErrorEnum.NameRequired:
+			return 'Name is required';
+		case PropertyErrorEnum.IncompleteDataType:
+			return 'The composition of the data type is incomplete. Please fill in all required fields on each data type element.';
+		default:
+			return toSentenceCase(error);
+	}
+}
+
+function calculatePropertyCreationFormErrors(
+	entity: PropertyState,
+): (PropertyError | string)[] {
+	const errors: (PropertyError | string)[] = [];
+
+	if (!entity.name) {
+		errors.push(PropertyErrorEnum.NameRequired);
+	}
+
+	if (!!entity.dataType) {
+		if (!entity.dataType.isResolved) {
+			errors.push(PropertyErrorEnum.IncompleteDataType);
+		}
+
+		const flatErrors = (
+			entity.dataType.toFlat().filter((child) => {
+				if (child.type === EntityType.DataType) {
+					if (child.id === entity.dataType.id) {
+						// This is the root data type, skip
+						return true;
+					}
+
+					const allParentsOfNestedDT = getRecursiveParentsIds(child);
+
+					if (allParentsOfNestedDT.includes(entity.dataType.id)) {
+						// This is a nested data type that creates a circular reference
+						return true;
+					} else {
+						return false;
+					}
+				}
+
+				return false;
+			}) as DataTypeState[]
+		).flatMap((dt) => dt.getShallowErrors());
+
+		if (flatErrors.length > 0) {
+			errors.push(
+				...flatErrors.map((err) => translateLogicErrorCodeShort(err)),
+			);
+		}
+	}
+
+	return errors;
+}
+
+// Not all entity types can have inputs with any data type
+// Sometimes, like in the case of a search, the data type of its inputs can only be a primitive type or a list of primitives
+// This function, given an option, will return some metadata that will help it render the option in the data type builder
+export function resolveDataTypeOptionConfigForProperty(
+	option: DataTypeBuilderOption | ILiteralValueOption,
+	input: PropertyState,
+): {
+	disabled: boolean;
+	tooltip: React.ReactNode;
+} {
+	// if (input.parent.type === EntityType.DefinitionEntity) {
+	// 	if (
+	// 		option?.type !== EntityType.PrimitiveEntity ||
+	// 		[
+	// 			PrimitiveTypes.KeyValue,
+	// 			PrimitiveTypes.Untyped,
+	// 			PrimitiveTypes.ActionDescriptor,
+	// 			PrimitiveTypes.EntityTemplate,
+	// 		].includes(option?.name as PrimitiveTypes)
+	// 	) {
+	// 		return {
+	// 			disabled: true,
+	// 			tooltip:
+	// 				'Search statements can only have primitive data types as inputs',
+	// 		};
+	// 	}
+	// }
+
+	return {
+		disabled: false,
+		tooltip: null,
+	};
+}
+
+export function resolveDataTypeAsTypeConfigForProperty(input: PropertyState): {
+	disabled: boolean;
+	tooltip: React.ReactNode;
+} {
+	// if (input.parent.type === EntityType.Search) {
+	// 	return {
+	// 		disabled: true,
+	// 		tooltip:
+	// 			'Search statements cannot have template values as inputs, only instances of primitive data types',
+	// 	};
+	// }
+
+	return {
+		disabled: false,
+		tooltip: null,
+	};
+}
+
+export function resolveDataTypeLikeConfigForProperty(input: PropertyState): {
+	disabled: boolean;
+	tooltip: React.ReactNode;
+} {
+	// if (input.parent.type === EntityType.Search) {
+	// 	return {
+	// 		disabled: true,
+	// 		tooltip:
+	// 			'Search statements can only have primitive data types as inputs',
+	// 	};
+	// }
+
+	return {
+		disabled: false,
+		tooltip: null,
+	};
+}
+
+export function resolveDataTypeAsListConfigForProperty(input: PropertyState): {
+	allowed: AllowedDataTypeListTypes;
+	tooltip: React.ReactNode;
+} {
+	// if (input.parent.type === EntityType.Search) {
+	// 		return {
+	// 			allowed: AllowedDataTypeListTypes.Flat,
+	// 			tooltip:
+	// 				'Search statements can only have a single flat level of list values for inputs',
+	// 		};
+	// }
+
+	return {
+		allowed: AllowedDataTypeListTypes.All,
+		tooltip: null,
+	};
+}
+
+const Property: React.FC<IPropertyProps> = ({
+	project,
+	entity: _entity,
+	onClose,
+}) => {
+	const [updateKey, setUpdateKey] = useState(0);
+	const { entityId } = useParams<{
+		entityType: EntityType;
+		entityId: EntityId;
+	}>();
+
+	const entity: PropertyState | null =
+		_entity || (project?.logic?.get(entityId) as PropertyState | null) || null;
+
+	const [dataType, _setDataType] = useState<DataTypeState | null>(
+		entity?.dataType || null,
+	);
+	const [entityName, setEntityName] = useState<string>(entity.name);
+	const [entityNameErrors, setEntityNameErrors] = useState<EntityError[]>(
+		propertyValidation.validatePropertyEntityName(entity),
+	);
+	const [entityDescription, setEntityDescription] = useState<string>(
+		entity.description,
+	);
+
+	const [implementsValue, setImplementsValue] = useState<
+		IPropertyShallowTransfer[]
+	>(entity.implements.map((ent) => ent.toShallowJSON()));
+
+	const [isAbstract, _setIsAbstract] = useState<boolean>(entity.abstract);
+	const [isStatic, _setIsStatic] = useState<boolean>(entity.static);
+	const [isConstant, _setIsConstant] = useState<boolean>(entity.constant);
+	const [isUnique, _setIsUnique] = useState<boolean>(entity.unique);
+	const [isRequired, _setIsRequired] = useState<boolean>(entity.required);
+
+	const [metadataSectionOpen, setMetadataSectionOpen] = useState(true);
+	const [dataTypeSectionOpen, setDataTypeSectionOpen] = useState(false);
+	const [defaultValueSectionOpen, setDefaultValueSectionOpen] = useState(false);
+	const [baseFunctionalitySectionOpen, setBaseFunctionalitySectionOpen] =
+		useState(false);
+	const [interactivitySectionOpen, setInteractivitySectionOpen] =
+		useState(false);
+
+	const setIsRequired = useCallback((value: boolean) => {
+		_setIsRequired(value);
+
+		const changeSet = project?.logic?.addChangeSet(
+			new ChangeSet(
+				project?.logic,
+				ProjectState.sessionAuthor,
+				new Date().toISOString(),
+				entity,
+				false,
+				value ? StateMutationAction.MakePropertyRequired : StateMutationAction.MakePropertyNonRequired
+			),
+		);
+
+		entity?.metaSync({ required: value }, changeSet);
+
+		entity?.afterAllChildrenInitialized(changeSet);
+
+		project.renderAndCloseChangeSet(changeSet);
+	}, []);
+
+	const setIsConstant = useCallback((value: boolean) => {
+		_setIsConstant(value);
+
+		const changeSet = project?.logic?.addChangeSet(
+			new ChangeSet(
+				project?.logic,
+				ProjectState.sessionAuthor,
+				new Date().toISOString(),
+				entity,
+				false,
+				value
+					? StateMutationAction.MakePropertyConstant
+					: StateMutationAction.MakePropertyNonConstant,
+			),
+		);
+
+		entity?.metaSync({ constant: value }, changeSet);
+
+		entity?.afterAllChildrenInitialized(changeSet);
+
+		project.renderAndCloseChangeSet(changeSet);
+	}, []);
+
+	const setIsUnique = useCallback((value: boolean) => {
+		_setIsUnique(value);
+
+		const changeSet = project?.logic?.addChangeSet(
+			new ChangeSet(
+				project?.logic,
+				ProjectState.sessionAuthor,
+				new Date().toISOString(),
+				entity,
+				false,
+				value
+					? StateMutationAction.MakePropertyUnique
+					: StateMutationAction.MakePropertyNonUnique,
+			),
+		);
+
+		entity?.metaSync({ unique: value }, changeSet);
+
+		entity?.afterAllChildrenInitialized(changeSet);
+
+		project.renderAndCloseChangeSet(changeSet);
+	}, []);
+
+	const setIsStatic = useCallback((value: boolean) => {
+		_setIsStatic(value);
+
+		const changeSet = project?.logic?.addChangeSet(
+			new ChangeSet(
+				project?.logic,
+				ProjectState.sessionAuthor,
+				new Date().toISOString(),
+				entity,
+				false,
+				value
+					? StateMutationAction.MakePropertyStatic
+					: StateMutationAction.MakePropertyNonStatic,
+			),
+		);
+
+		entity?.metaSync({ static: value }, changeSet);
+
+		entity?.afterAllChildrenInitialized(changeSet);
+
+		project.renderAndCloseChangeSet(changeSet);
+	}, []);
+
+	const setIsAbstract = useCallback((value: boolean) => {
+		_setIsAbstract(value);
+
+		const changeSet = project?.logic?.addChangeSet(
+			new ChangeSet(
+				project?.logic,
+				ProjectState.sessionAuthor,
+				new Date().toISOString(),
+				entity,
+				false,
+				value
+					? StateMutationAction.MakePropertyAbstract
+					: StateMutationAction.MakePropertyNonAbstract,
+			),
+		);
+
+		entity?.metaSync({ abstract: value }, changeSet);
+
+		entity?.afterAllChildrenInitialized(changeSet);
+
+		project.renderAndCloseChangeSet(changeSet);
+	}, []);
+
+	const debouncedOnChangeName = useCallback(
+		debounce(
+			(value: string) => {
+				const changeSet = project?.logic?.addChangeSet(
+					new ChangeSet(
+						project?.logic,
+						ProjectState.sessionAuthor,
+						new Date().toISOString(),
+						entity,
+						false,
+						StateMutationAction.RenameProperty
+					),
+				);
+
+				setUpdateKey((prev) => prev + 1);
+				entity?.metaSync({ name: value || null }, changeSet);
+
+				project.renderAndCloseChangeSet(changeSet);
+				if (changeSet.has(entity.id)) {
+					project.emit(entity.id, {});
+				}
+			},
+			1500,
+			false,
+		),
+		[],
+	);
+
+	const debouncedOnChangeDescription = useCallback(
+		debounce(
+			(value: string) => {
+				const changeSet = project?.logic?.addChangeSet(
+					new ChangeSet(
+						project?.logic,
+						ProjectState.sessionAuthor,
+						new Date().toISOString(),
+						entity,
+						false,
+						StateMutationAction.ChangePropertyDescription,
+					),
+				);
+
+				setUpdateKey((prev) => prev + 1);
+				entity?.metaSync({ description: value || null }, changeSet);
+
+				project.renderAndCloseChangeSet(changeSet);
+				if (changeSet.has(entity.id)) {
+					project.emit(entity.id, {});
+				}
+			},
+			600,
+			false,
+		),
+		[],
+	);
+
+	const [errors, setErrors] = useState<(PropertyError | string)[]>(
+		calculatePropertyCreationFormErrors(entity),
+	);
+
+	const setDataType = (
+		newDataTypeEntity: DataTypeState | null,
+		changeSet: ChangeSet | null,
+	) => {
+		newDataTypeEntity?.setParent(entity, changeSet);
+		entity?.setDataType(newDataTypeEntity, changeSet);
+
+		changeSet?.add(entity, ChangeSetEntityChangeType.Affected);
+
+		_setDataType(newDataTypeEntity);
+		setUpdateKey((prev) => prev + 1);
+
+		project.renderAndCloseChangeSet(changeSet);
+	};
+
+	useEffect(() => {
+		const newErrors = calculatePropertyCreationFormErrors(entity);
+		setErrors(newErrors);
+		project.emit(entity.parent.id, {});
+	}, [
+		entityName,
+		updateKey,
+		isAbstract,
+		isStatic,
+		isConstant,
+		isRequired,
+		entityName,
+		entityDescription,
+	]);
+
+	const implementsOptions = useMemo(() => {
+		const options = entity.parent.implementedPropertiesFromOriginalParents;
+
+		return options.map((opt) => opt.toShallowJSON());
+	}, [entity.parent]);
+
+	const isFinal =
+		entity.defaultValue?.isFinal ||
+		entity.constant ||
+		entity.implements.some((impl) => impl.constant) ||
+		!getIsInteractive(entity.parent);
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexGrow: 1,
+				height: '100%',
+				overflowY: 'scroll',
+			}}
+		>
+			{/* We need the 'span' for the react ref */}
+			<span
+				style={{
+					maxHeight: '100%',
+					maxWidth: '100%',
+					flexGrow: 1,
+					height: '100%',
+				}}
+			>
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						height: '100%',
+						gap: '4px',
+						justifyContent: 'space-between',
+					}}
+				>
+					<span
+						style={{
+							maxWidth: '100%',
+							maxHeight: '100%',
+							overflowY: 'scroll',
+							display: 'flex',
+							flexDirection: 'column',
+							height: '100%',
+						}}
+					>
+						<section
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+								paddingBottom: metadataSectionOpen ? 20 : 0,
+							}}
+						>
+							<EntityDialogSectionHeader
+								title='Name and description'
+								subtitle={`Add a name and description for this ${READABLE_ENTITY_TYPES[
+									entity.type
+								].singular.toLowerCase()}`}
+								hideShowSuffix='the name and description section'
+								open={metadataSectionOpen}
+								onToggle={() => setMetadataSectionOpen(!metadataSectionOpen)}
+							/>
+
+							<Collapse in={metadataSectionOpen}>
+								<div
+									style={{
+										marginTop: 6,
+										display: 'flex',
+										flexDirection: 'column',
+										gap: 12,
+										marginLeft: 80,
+										paddingRight: 40,
+									}}
+								>
+									<TextField
+										label='Property name'
+										variant='outlined'
+										disabled={!entity.editable}
+										style={{ width: '50%' }}
+										size='small'
+										value={entityName || ''}
+										onChange={(e) => {
+											Logger.log('Name change: ', e.target.value);
+											const validationResult =
+												propertyValidation.validatePropertyEntityName(
+													entity,
+													e.target.value,
+												);
+
+											setEntityName(e.target.value);
+
+											if (!validationResult.length) {
+												debouncedOnChangeName(e.target.value);
+											}
+
+											setEntityNameErrors(validationResult);
+										}}
+										error={!!entityNameErrors.length}
+										helperText={
+											!!entityNameErrors.length
+												? entityNameErrors
+														.map((err) => translateLogicErrorCode(err))
+														.join('. ')
+												: ''
+										}
+									/>
+
+									<TextField
+										label='Property description'
+										variant='outlined'
+										disabled={!entity.editable}
+										fullWidth
+										multiline
+										minRows={3}
+										size='small'
+										value={entityDescription || ''}
+										onChange={(e) => {
+											setEntityDescription(e.target.value);
+											debouncedOnChangeDescription(e.target.value);
+										}}
+									/>
+								</div>
+							</Collapse>
+						</section>
+
+						<hr
+							style={{
+								margin: '1px 0',
+								border: '1px solid rgba(0,0,0,0.08)',
+							}}
+						/>
+
+						<section
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+								paddingBottom: baseFunctionalitySectionOpen ? 20 : 0,
+							}}
+						>
+							<EntityDialogSectionHeader
+								title='Base functionality'
+								subtitle='Link this property to functionality from an existing base property'
+								hideShowSuffix='the base functionality section'
+								open={baseFunctionalitySectionOpen}
+								onToggle={() =>
+									setBaseFunctionalitySectionOpen(!baseFunctionalitySectionOpen)
+								}
+							/>
+
+							<Collapse in={baseFunctionalitySectionOpen}>
+								<div
+									style={{
+										marginTop: 6,
+										display: 'flex',
+										flexDirection: 'column',
+										gap: 20,
+										marginLeft: 80,
+										paddingRight: 40,
+									}}
+								>
+									<Autocomplete
+										id='implements'
+										multiple
+										disabled={!entity.editable}
+										options={implementsOptions}
+										getOptionLabel={(option) => option.name}
+										isOptionEqualToValue={(option, value) =>
+											option.id === value.id
+										}
+										value={implementsValue}
+										disableClearable={
+											!getIsInteractive(entity.parent) ||
+											entity.implements.some((impl) => impl.required)
+										}
+										getOptionDisabled={(option) => {
+											if (
+												option.type === EntityType.Property &&
+												!option.abstract
+											) {
+												return true;
+											}
+
+											const alreadyImplemented =
+												!!entity.parent.ownDeclaredProperties.find(
+													(p) =>
+														p.id !== entity.id &&
+														p.implements.find((impl) => impl.id === option.id),
+												);
+
+											return alreadyImplemented;
+										}}
+										renderOption={(props, option, { selected }) => {
+											const { key, ...optionProps } = props;
+											const ent = project.logic.get(option.id) as PropertyState;
+
+											return (
+												<MuiTooltip
+													key={key}
+													title={(() => {
+														if (
+															option.type === EntityType.Property &&
+															!option.abstract
+														) {
+															return 'This property is implementable';
+														}
+
+														const alreadyImplemented =
+															!!entity.parent.ownDeclaredProperties.find(
+																(p) =>
+																	p.id !== entity.id &&
+																	p.implements.find(
+																		(impl) => impl.id === option.id,
+																	),
+															);
+
+														if (alreadyImplemented) {
+															return 'This base property is already implemented by another property in the current node';
+														}
+													})()}
+													placement='bottom'
+													arrow
+													enterDelay={
+														(() => {
+															if (
+																option.type === EntityType.Property &&
+																!option.abstract
+															) {
+																return true;
+															}
+
+															const alreadyImplemented =
+																!!entity.parent.ownDeclaredProperties.find(
+																	(p) =>
+																		p.id !== entity.id &&
+																		p.implements.find(
+																			(impl) => impl.id === option.id,
+																		),
+																);
+
+															return alreadyImplemented;
+														})()
+															? 100
+															: 400
+													}
+													leaveDelay={200}
+												>
+													<Box
+														component='li'
+														sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+														{...optionProps}
+													>
+														<Checkbox
+															icon={icon}
+															checkedIcon={checkedIcon}
+															style={{ marginRight: 8 }}
+															checked={
+																implementsValue.findIndex(
+																	(v) => v.id === ent.id,
+																) > -1
+															}
+														/>
+														<Stack direction='row' gap={1} alignItems='center'>
+															<EntityIcon entity={ent} project={project} />
+															{resolveEntityName(ent, project.logic)}
+														</Stack>
+													</Box>
+												</MuiTooltip>
+											);
+										}}
+										renderTags={(selected) => (
+											<Stack gap={1} direction='row' flexWrap='wrap'>
+												{selected.map((value) => {
+													const ent = project.logic.get(
+														value.id,
+													) as PropertyState;
+
+													return (
+														<MuiTooltip
+															title={(() => {
+																if (
+																	(ent.parent.type ===
+																		EntityType.DefinitionEntity ||
+																		ent.parent.type ===
+																			EntityType.BuiltInBaseEntity) &&
+																	!ent.parent.additionalProperties
+																) {
+																	return 'This property must implement at least one base property because the parent definition doesn\'t allow additional "unrecognized" properties.';
+																}
+																return '';
+															})()}
+															placement='top'
+															arrow
+															enterDelay={100}
+															leaveDelay={200}
+														>
+															<Box
+																component='span'
+																sx={{ display: 'inline-block' }}
+															>
+																<Chip
+																	avatar={
+																		<EntityIcon
+																			entity={ent}
+																			style={{ marginLeft: 8 }}
+																			size='small'
+																			project={project}
+																		/>
+																	}
+																	key={value.id}
+																	label={resolveEntityName(ent, project.logic)}
+																	disabled={(() => {
+																		if (
+																			(ent.parent.type ===
+																				EntityType.DefinitionEntity ||
+																				ent.parent.type ===
+																					EntityType.BuiltInBaseEntity) &&
+																			!ent.parent.additionalProperties
+																		) {
+																			return true;
+																		}
+																		return false;
+																	})()}
+																	onDelete={() => {
+																		const changeSet =
+																			project?.logic?.addChangeSet(
+																				new ChangeSet(
+																					project?.logic,
+																					ProjectState.sessionAuthor,
+																					new Date().toISOString(),
+																					entity,
+																					false,
+																					StateMutationAction.RemovePropertyBaseImplementation,
+																				),
+																			);
+
+																		const fullEnt = project.logic.get(
+																			value.id,
+																		) as PropertyState;
+
+																		entity?.removeImplementation(
+																			fullEnt,
+																			changeSet,
+																		);
+
+																		changeSet.add(
+																			entity,
+																			ChangeSetEntityChangeType.Updated,
+																		);
+
+																		setImplementsValue(
+																			implementsValue.filter(
+																				(v) => v.id !== value.id,
+																			),
+																		);
+																		project.emit(entity.id, {});
+
+																		project.renderAndCloseChangeSet(changeSet);
+																	}}
+																	deleteIcon={
+																		<CancelIcon
+																			onMouseDown={(event) =>
+																				event.stopPropagation()
+																			}
+																		/>
+																	}
+																/>
+															</Box>
+														</MuiTooltip>
+													);
+												})}
+											</Stack>
+										)}
+										onChange={(_, newValue) => {
+											// Filter out duplicates
+											const sanitizedValue = newValue.filter(
+												(v, i, a) => a.findIndex((t) => t.id === v.id) === i,
+											);
+
+											const changeSet = project?.logic?.addChangeSet(
+												new ChangeSet(
+													project?.logic,
+													ProjectState.sessionAuthor,
+													new Date().toISOString(),
+													entity,
+													false,
+													StateMutationAction.AddPropertyBaseImplementation,
+												),
+											);
+
+											const existingEntities = entity.implements.map(
+												(ent) => ent.id,
+											);
+											const newEntities = sanitizedValue.map((ent) => ent.id);
+
+											const toAdd = newEntities.filter(
+												(ent) => !existingEntities.includes(ent),
+											);
+											const toRemove = existingEntities.filter((ent) => {
+												const currentEnt = project.logic.get(
+													ent,
+												) as PropertyState;
+												if (
+													(currentEnt.parent.type ===
+														EntityType.DefinitionEntity ||
+														currentEnt.parent.type ===
+															EntityType.BuiltInBaseEntity) &&
+													!currentEnt.parent.additionalProperties
+												) {
+													return false;
+												}
+
+												if (!newEntities.includes(ent)) {
+													return true;
+												}
+											});
+
+											toAdd.forEach((ent) => {
+												const fullEnt = project.logic.get(ent) as PropertyState;
+												entity?.addImplementation(fullEnt, changeSet);
+
+												changeSet.add(
+													entity,
+													ChangeSetEntityChangeType.Updated,
+												);
+											});
+
+											toRemove.forEach((ent) => {
+												const fullEnt = project.logic.get(ent) as PropertyState;
+												entity?.removeImplementation(fullEnt, changeSet);
+
+												changeSet.add(
+													entity,
+													ChangeSetEntityChangeType.Updated,
+												);
+											});
+
+											if (toAdd.length || toRemove.length) {
+												setImplementsValue(sanitizedValue);
+												entity.afterAllChildrenInitialized(changeSet);
+												project.emit(entity.id, {});
+											}
+
+											project.renderAndCloseChangeSet(changeSet);
+										}}
+										renderInput={(params) => (
+											<TextField
+												{...params}
+												label='Implements'
+												variant='outlined'
+												size='small'
+											/>
+										)}
+									/>
+								</div>
+							</Collapse>
+						</section>
+
+						<hr
+							style={{
+								margin: '1px 0',
+								border: '1px solid rgba(0,0,0,0.08)',
+							}}
+						/>
+
+						<section
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+								paddingBottom: dataTypeSectionOpen ? 20 : 0,
+							}}
+						>
+							<EntityDialogSectionHeader
+								title='Data type'
+								subtitle='Select the type of data that this property will hold'
+								hideShowSuffix='the data type section'
+								open={dataTypeSectionOpen}
+								onToggle={() => setDataTypeSectionOpen(!dataTypeSectionOpen)}
+								headerStartIcon={
+									<EntityIcon entity={entity} project={project} />
+								}
+							/>
+
+							<Collapse in={dataTypeSectionOpen}>
+								<div
+									style={{
+										display: 'flex',
+										flexDirection: 'column',
+										gap: 20,
+										marginLeft: 80,
+										paddingRight: 40,
+									}}
+								>
+									<DataTypeBuilder
+										project={project}
+										topParent={entity}
+										dataType={dataType}
+										readOnly={!entity.editable}
+										baseDataTypes={entity.implements.map(
+											(impl) => impl.dataType,
+										)}
+										onChangeSet={() => {
+											const newChangeSet = project.logic.addChangeSet(
+												new ChangeSet(
+													project.logic,
+													ProjectState.sessionAuthor,
+													new Date().toISOString(),
+													entity,
+													false,
+													StateMutationAction.ChangePropertyDataType,
+												),
+											);
+
+											return newChangeSet;
+										}}
+										onChange={(newDataTypeEntity, changeSet) => {
+											setDataType(newDataTypeEntity, changeSet);
+										}}
+										lists={
+											resolveDataTypeAsListConfigForProperty(entity).allowed
+										}
+										getOptionDisabled={(option) =>
+											resolveDataTypeOptionConfigForProperty(option, entity)
+												.disabled
+										}
+										getListDisabledTooltip={(option) =>
+											resolveDataTypeAsListConfigForProperty(entity).tooltip
+										}
+										getOptionTooltip={(option) =>
+											resolveDataTypeOptionConfigForProperty(option, entity)
+												.tooltip
+										}
+										disallowAsType={
+											resolveDataTypeAsTypeConfigForProperty(entity).disabled
+										}
+										getAsTypeDisabledTooltip={() =>
+											resolveDataTypeAsTypeConfigForProperty(entity).tooltip
+										}
+										disallowLike={
+											resolveDataTypeLikeConfigForProperty(entity).disabled
+										}
+										getLikeDisabledTooltip={() =>
+											resolveDataTypeLikeConfigForProperty(entity).tooltip
+										}
+									/>
+								</div>
+							</Collapse>
+						</section>
+
+						<hr
+							style={{
+								margin: '1px 0',
+								border: '1px solid rgba(0,0,0,0.08)',
+							}}
+						/>
+
+						<section
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+								paddingBottom: defaultValueSectionOpen ? 20 : 0,
+							}}
+						>
+							<EntityDialogSectionHeader
+								title={isFinal ? 'Value' : 'Default value'}
+								subtitle={
+									isFinal
+										? 'The value of this property'
+										: 'The initial value, if no other is given when the property is first used'
+								}
+								hideShowSuffix={
+									isFinal ? 'the value section' : 'the default value section'
+								}
+								open={defaultValueSectionOpen}
+								onToggle={() =>
+									setDefaultValueSectionOpen(!defaultValueSectionOpen)
+								}
+								headerStartIcon={
+									!!entity.errors.find(
+										(error) =>
+											error.code ===
+											EntityInstanceErrorCode.MissingRequiredValue,
+									) ? (
+										<MuiTooltip
+											title='Missing required value'
+											placement='top'
+											arrow
+										>
+											<img
+												style={{ width: 20, height: 20 }}
+												id={'logic-error-icon--' + entity.id}
+												src={WarningIcon}
+												className={'warning-icon logic-error-icon'}
+											/>
+										</MuiTooltip>
+									) : null
+								}
+							/>
+
+							<Collapse in={defaultValueSectionOpen}>
+								<div
+									style={{
+										marginTop: 6,
+										display: 'flex',
+										flexDirection: 'column',
+										gap: 20,
+										marginLeft: 80,
+										paddingRight: 40,
+									}}
+								>
+									<DynamicValueEntry
+										entity={entity}
+										project={project}
+										parentDisabledReasons={
+											!entity.editable
+												? [StateMutationErrorCode.ActionOwnerEntityNotEditable]
+												: []
+										}
+										onlyDefault
+									>
+										{(extraContent) => extraContent}
+									</DynamicValueEntry>
+								</div>
+							</Collapse>
+						</section>
+
+						<hr
+							style={{
+								margin: '1px 0',
+								border: '1px solid rgba(0,0,0,0.08)',
+							}}
+						/>
+
+						<section
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+								paddingBottom: interactivitySectionOpen ? 20 : 0,
+							}}
+						>
+							<EntityDialogSectionHeader
+								title='Interactivity'
+								subtitle='Define how this property is used in the logic'
+								hideShowSuffix='the interactivity section'
+								open={interactivitySectionOpen}
+								onToggle={() =>
+									setInteractivitySectionOpen(!interactivitySectionOpen)
+								}
+							/>
+
+							<Collapse in={interactivitySectionOpen}>
+								<div
+									style={{
+										marginTop: 6,
+										display: 'flex',
+										flexDirection: 'row',
+										gap: 12,
+										marginLeft: 80,
+										paddingRight: 40,
+									}}
+								>
+									<MuiTooltip
+										title={(() => {
+											const prefix = 'Cannot change interactivity, because: ';
+											const reasons: string[] = [];
+
+											if (!!entity.parent.abstract && !!entity.abstract) {
+												reasons.push(
+													'The parent definition node is a template definition',
+												);
+											}
+											if (!entity.parent.abstract && !entity.abstract) {
+												reasons.push(
+													'The parent definition node is not a template definition',
+												);
+											}
+											if (entity.implements.some((impl) => impl.abstract)) {
+												reasons.push(
+													'It must match the base property being implemented',
+												);
+											}
+
+											if (!reasons.length) {
+												return '';
+											}
+
+											return prefix + reasons.join('. ');
+										})()}
+										placement='bottom'
+										arrow
+										enterDelay={
+											(!entity.parent.abstract && !entity.abstract) ||
+											(!!entity.parent.abstract && !!entity.abstract) ||
+											entity.implements.some((impl) => impl.abstract)
+												? 100
+												: 400
+										}
+										leaveDelay={200}
+									>
+										<FormGroup>
+											<FormControlLabel
+												control={
+													<Checkbox
+														disabled={
+															!entity.editable ||
+															(!entity.parent.abstract && !entity.abstract) ||
+															(!!entity.parent.abstract && !!entity.abstract) ||
+															entity.implements.some((impl) => impl.abstract)
+														}
+														className='property-builder--abstract-checkbox'
+														checked={isAbstract}
+														onChange={(e) => {
+															const value = e.target.checked;
+															setIsAbstract(value);
+														}}
+													/>
+												}
+												label={'Template definition'}
+											/>
+										</FormGroup>
+									</MuiTooltip>
+
+									<MuiTooltip
+										title={
+											entity.parent.static
+												? 'Cannot change interactivity, because the parent definition node is a single copy global definition'
+												: entity.implements.some((impl) => impl.static)
+													? 'Cannot change interactivity, because it must match the base property being implemented'
+													: ''
+										}
+										placement='bottom'
+										arrow
+										enterDelay={
+											entity.parent.static ||
+											entity.implements.some((impl) => impl.static)
+												? 100
+												: 400
+										}
+										leaveDelay={200}
+									>
+										<FormGroup>
+											<FormControlLabel
+												control={
+													<Checkbox
+														disabled={
+															!entity.editable ||
+															entity.parent.static ||
+															entity.implements.some((impl) => impl.static)
+														}
+														className='property-builder--static-checkbox'
+														checked={isStatic}
+														onChange={(e) => {
+															const value = e.target.checked;
+															setIsStatic(value);
+														}}
+													/>
+												}
+												label={'Single global copy'}
+											/>
+										</FormGroup>
+									</MuiTooltip>
+
+									<MuiTooltip
+										title={
+											entity.implements.some((impl) => impl.required) &&
+											!!isRequired
+												? 'Cannot change interactivity, because it must match the base property being implemented. When checked, the value of this property must be present in any representation of the parent definition-entity as a value'
+												: 'When checked, the value of this property must be present in any representation of the parent definition-entity as a value'
+											// 'When checked, the value of this property must be present in any representation of the parent definition-entity as a value'
+										}
+										placement='bottom'
+										arrow
+										enterDelay={
+											!!entity.implements.some((impl) => impl.required)
+												? 100
+												: 400
+										}
+										leaveDelay={200}
+									>
+										<FormGroup>
+											<FormControlLabel
+												control={
+													<Checkbox
+														// disabled={!entity.editable || !!entity.implements}
+														// It should only be able to be made non-required if:
+														// - The property is editable
+														// - It does not implement any base property that is required
+														disabled={
+															!entity.editable ||
+															(entity.implements.some(
+																(impl) => impl.required,
+															) &&
+																!!isRequired)
+														}
+														className='property-builder--required-checkbox'
+														checked={isRequired}
+														onChange={(e) => {
+															const value = e.target.checked;
+															setIsRequired(value);
+														}}
+													/>
+												}
+												label={'Required'}
+											/>
+										</FormGroup>
+									</MuiTooltip>
+
+									<MuiTooltip
+										title={
+											isConstant &&
+											entity.implements.some((impl) => impl.constant)
+												? 'Cannot change interactivity, because it must match the base property being implemented. Indicates whether the logic can edit an existing value, or the first value set is the only value'
+												: 'Whether the logic can edit an existing value, or the first value set is the only value'
+										}
+										placement='bottom'
+										arrow
+										enterDelay={
+											isConstant &&
+											entity.implements.some((impl) => impl.constant)
+												? 100
+												: 400
+										}
+										leaveDelay={200}
+									>
+										<FormGroup>
+											<FormControlLabel
+												control={
+													<Checkbox
+														disabled={
+															!entity.editable ||
+															(isConstant &&
+																entity.implements.some((impl) => impl.constant))
+														}
+														className='property-builder--required-checkbox'
+														checked={isConstant}
+														onChange={(e) => {
+															const value = e.target.checked;
+															setIsConstant(value);
+														}}
+													/>
+												}
+												label={'Editable value'}
+											/>
+										</FormGroup>
+									</MuiTooltip>
+
+									{checkHasBaseEntity(
+										entity.parent as DefinitionEntityState,
+										BaseEntityNames.PERSISTED_ENTITY,
+									) && (
+										<MuiTooltip
+											title={
+												isUnique &&
+												entity.implements.some((impl) => impl.unique)
+													? 'Cannot change interactivity, because it must match the base property being implemented. Indicates whether the logic can edit an existing value, or the first value set is the only value'
+													: 'Whether the value has to be unique among all other properties of this kind'
+											}
+											placement='bottom'
+											arrow
+											enterDelay={
+												isUnique &&
+												entity.implements.some((impl) => impl.unique)
+													? 100
+													: 400
+											}
+											leaveDelay={200}
+										>
+											<FormGroup>
+												<FormControlLabel
+													control={
+														<Checkbox
+															disabled={
+																!entity.editable ||
+																(isUnique &&
+																	entity.implements.some((impl) => impl.unique))
+															}
+															className='property-builder--unique-checkbox'
+															checked={isUnique}
+															onChange={(e) => {
+																const value = e.target.checked;
+																setIsUnique(value);
+															}}
+														/>
+													}
+													label={'Unique'}
+												/>
+											</FormGroup>
+										</MuiTooltip>
+									)}
+								</div>
+							</Collapse>
+						</section>
+					</span>
+
+					{errors.length > 0 && (
+						<div
+							style={{
+								marginTop: 20,
+								marginRight: 40,
+								marginLeft: 80,
+							}}
+						>
+							<Alert severity='error'>
+								{errors.length === 1 ? (
+									<span
+										style={{
+											display: 'flex',
+											alignItems: 'center',
+											gap: 6,
+										}}
+									>
+										<h4
+											style={{
+												margin: 0,
+												display: 'flex',
+											}}
+										>
+											Error:
+										</h4>
+										<p
+											style={{
+												margin: 0,
+												display: 'flex',
+											}}
+										>
+											{fromPropertyErrorToReadableMessage(errors[0])}
+										</p>
+									</span>
+								) : (
+									<>
+										<h4
+											style={{
+												margin: 0,
+											}}
+										>
+											Errors
+										</h4>
+										<br className='quarter-space' />
+										<ul
+											style={{
+												listStyleType: 'none',
+												padding: 0,
+											}}
+										>
+											{errors.map((error, index) => (
+												<li
+													key={index}
+													style={{
+														display: 'flex',
+														alignItems: 'center',
+													}}
+												>
+													{/* Circle */}
+													<span
+														style={{
+															fontSize: 10,
+															marginRight: 5,
+														}}
+													>
+														&#9679;
+													</span>
+													<p
+														style={{
+															margin: 0,
+															// fontSize: 10,
+														}}
+													>
+														{fromPropertyErrorToReadableMessage(error)}
+													</p>
+												</li>
+											))}
+										</ul>
+									</>
+								)}
+							</Alert>
+						</div>
+					)}
+
+					<div
+						style={{
+							alignSelf: 'flex-start',
+							display: 'flex',
+							flexDirection: 'row',
+							justifyContent: 'flex-end',
+							width: '100%',
+							gap: '16px',
+							padding: '0 40px',
+						}}
+					>
+						<Button
+							id='property--done-button'
+							onClick={(e: any) => {
+								onClose?.(e);
+							}}
+							color='primary'
+							disabled={errors.length > 0}
+						>
+							Done
+						</Button>
+						<Tooltip
+							anchorQuerySelector='#property--done-button'
+							placement='bottom'
+							openDelay={100}
+						>
+							{errors.length > 0
+								? `Resolve the errors to save the ${lowercaseFirstLetter(
+										READABLE_ENTITY_TYPES[entity.type].singular,
+									)}`
+								: `Save the ${lowercaseFirstLetter(
+										READABLE_ENTITY_TYPES[entity.type].singular,
+									)}`}
+						</Tooltip>
+					</div>
+				</div>
+			</span>
+		</div>
+	);
+};
+
+export default Property;