@elyx-code/editor-ui 0.0.2

package/src/components/dynamic-value/DynamicValueEntry.tsx

@@ -0,0 +1,1957 @@
+import React, {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState
+} from 'react';
+import {
+	BaseEntityNames,
+	ChangeSet,
+	checkHasBaseEntity,
+	EntityError,
+	EntityType,
+	EntityWithValueState,
+	flattenDefinitionEntityExtensionAndImplementationTypes,
+	getExtendedDefinitionEntity,
+	PrimitiveTypes,
+	ProjectState,
+	ValueAsTypeState,
+	CanvasEntityDisabledReason,
+	VariableDeclarationState,
+	resolveEntityName,
+	uuidValueValidation,
+	translateLogicErrorCode,
+	InputMapState,
+	ValueDescriptorState,
+	ArgumentDeclarationState,
+	ValueReadingEntityState,
+	DefinitionEntityState,
+	BUILT_IN_BASE_ENTITY_IDS,
+	getParentCallableEntity,
+	OperationState,
+	checkIsEmptyValue,
+	EntityWithDefaultValueState,
+	DynamicValueTypes,
+	EntityInstanceErrorCode,
+	safeResolveEntityName,
+	flattenDataTypeAndGroup,
+	flattenDataTypesInOrGroup,
+	DataTypeState,
+	StateMutationAction
+} from '@elyx-code/project-logic-tree';
+import './dynamic-value.css';
+import {
+	errorCodeToMessage,
+	getCanvasEntityDOMId
+} from '../../services/editor/ui';
+import DynamicValue from './DynamicValue';
+import {
+	castHTMLInputValueToType,
+	castLiteralValueToHTMLInputValue,
+	getExternalIntegrationIdFromAction,
+	resolveInputTypeFromDataType,
+	resolvePersistedDefinitionEntityDatabaseDialogAbsolutePath
+} from '../../services/editor/utils';
+import { EditorService } from '../../services/editor';
+import {
+	handleLiteralValueChange,
+	handleLiteralValueDelete,
+	handleValueAsTypeChange,
+	handleValueAsTypeDelete,
+	resolveValue
+} from '../../services/execution/value-resolution';
+import {
+	IDynamicValue,
+	IValueInheritanceLink,
+	IValueStoreClient
+} from '../../services/editor/value-store';
+import { CanvasEntityElement } from '../../services/editor/CanvasElement';
+import { TestDatabaseDialogMode } from '../test-relational-database/TestDatabaseDialogContent';
+import {
+	FormControl,
+	IconButton,
+	InputLabel,
+	Tooltip as MuiTooltip,
+	MenuItem,
+	Select,
+	OutlinedInput,
+	InputAdornment,
+	FormHelperText,
+	TextField,
+	Box,
+	Stack,
+	Autocomplete,
+	Checkbox,
+	Chip
+} from '@mui/material';
+import { onClickAway } from '../../utils/DOM';
+import CheckIcon from '@mui/icons-material/Check';
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import CancelIcon from '@mui/icons-material/Cancel';
+import FullscreenIcon from '@mui/icons-material/Fullscreen';
+import EntityIcon from '../entity-icon/EntityIcon';
+import { popupNotification } from '../../popup-notification';
+
+const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
+const checkedIcon = <CheckBoxIcon fontSize="small" />;
+
+export const SingleValueAsTypeAutocomplete = ({
+	id,
+	canvasElement,
+	options,
+	dynamicValue,
+	project,
+	popupPlacement,
+	onChange,
+	name
+}: {
+	id?: string;
+	options: ValueAsTypeState[];
+	dynamicValue: IDynamicValue;
+	project: EditorService;
+	canvasElement?: CanvasEntityElement;
+	popupPlacement?:
+		| 'left'
+		| 'right'
+		| 'top'
+		| 'bottom'
+		| 'bottom-end'
+		| 'bottom-start'
+		| 'left-end'
+		| 'left-start'
+		| 'right-end'
+		| 'right-start'
+		| 'top-end'
+		| 'top-start';
+	onChange: (newValue: ValueAsTypeState | null) => void;
+	name: string;
+}) => {
+	return (
+		<Autocomplete
+			id={id || 'value-as-type-single-autocomplete'}
+			fullWidth
+			options={options}
+			getOptionLabel={(option) =>
+				resolveEntityName(option, project.logic)
+			}
+			isOptionEqualToValue={(option, value) => option.id === value.id}
+			value={dynamicValue.value?.valueAsTypeSingle}
+			disableClearable={false}
+			getOptionDisabled={(option) => false}
+			renderOption={(fieldProps, option, { selected }) => {
+				const { key, ...optionProps } = fieldProps;
+				return (
+					<MuiTooltip
+						key={key}
+						title={''}
+						placement={popupPlacement || 'bottom'}
+						arrow
+						enterDelay={false ? 100 : 400}
+						leaveDelay={200}
+					>
+						<Box
+							component="li"
+							sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+							{...optionProps}
+						>
+							<Stack direction="row" gap={1} alignItems="center">
+								<EntityIcon
+									entity={option}
+									project={project}
+									parentCanvasObject={
+										canvasElement?.draggableObject
+									}
+								/>
+								{resolveEntityName(option, project.logic)}
+							</Stack>
+						</Box>
+					</MuiTooltip>
+				);
+			}}
+			onChange={(e, newValue) => {
+				onChange(newValue);
+			}}
+			renderInput={(params) => (
+				<TextField
+					{...params}
+					label={name}
+					variant="outlined"
+					placeholder="Select value"
+					size="small"
+				/>
+			)}
+		/>
+	);
+};
+
+export const ListValueAsTypeAutocomplete = ({
+	id,
+	entity,
+	options,
+	dynamicValue,
+	project,
+	canvasElement,
+	popupPlacement,
+	onChange,
+	name
+}: {
+	id?: string;
+	entity: EntityWithValueState;
+	options: ValueAsTypeState[];
+	dynamicValue: IDynamicValue;
+	canvasElement?: CanvasEntityElement;
+	project: EditorService;
+	popupPlacement?:
+		| 'left'
+		| 'right'
+		| 'top'
+		| 'bottom'
+		| 'bottom-end'
+		| 'bottom-start'
+		| 'left-end'
+		| 'left-start'
+		| 'right-end'
+		| 'right-start'
+		| 'top-end'
+		| 'top-start';
+	onChange: (newValue: ValueAsTypeState[]) => void;
+	name: string;
+}) => {
+	return (
+		<Autocomplete
+			fullWidth
+			multiple
+			id={id || 'value-as-type-list-autocomplete'}
+			options={options}
+			disableCloseOnSelect
+			isOptionEqualToValue={(option, value) => option.id === value.id}
+			getOptionLabel={(option) => {
+				const ent = project.logic.get(option.id) as ValueAsTypeState;
+
+				return resolveEntityName(ent, project.logic);
+			}}
+			renderOption={(fieldProps, option, { selected }) => {
+				const { key, ...optionProps } = fieldProps;
+				const ent = project.logic.get(option.id) as ValueAsTypeState;
+
+				return (
+					<MuiTooltip
+						key={key}
+						title={''}
+						placement={popupPlacement || 'bottom'}
+						arrow
+						enterDelay={false ? 100 : 400}
+						leaveDelay={200}
+					>
+						<Box
+							component="li"
+							sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+							{...optionProps}
+						>
+							<Checkbox
+								icon={icon}
+								checkedIcon={checkedIcon}
+								style={{ marginRight: 8 }}
+								checked={
+									(
+										dynamicValue?.value?.valueAsTypeList ||
+										[]
+									).findIndex((v) => v.id === ent.id) > -1
+								}
+							/>
+							<Stack direction="row" gap={1} alignItems="center">
+								<EntityIcon
+									entity={ent}
+									project={project}
+									parentCanvasObject={
+										canvasElement?.draggableObject
+									}
+								/>
+								{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 ValueAsTypeState;
+
+						return (
+							<Chip
+								avatar={
+									<EntityIcon
+										entity={ent}
+										project={project}
+										parentCanvasObject={
+											canvasElement?.draggableObject
+										}
+										style={{ marginLeft: 8 }}
+									/>
+								}
+								key={value.id}
+								label={resolveEntityName(ent, project.logic)}
+								onDelete={() => {
+									onChange(
+										(
+											dynamicValue.value
+												?.valueAsTypeList || []
+										).filter((v) => v.id !== ent.id)
+									);
+								}}
+								deleteIcon={
+									<CancelIcon
+										onMouseDown={(event) =>
+											event.stopPropagation()
+										}
+									/>
+								}
+							/>
+						);
+					})}
+				</Stack>
+			)}
+			value={dynamicValue.value?.valueAsTypeList || []}
+			onChange={(_, newValue) => {
+				// const option = options.filter((opt) => opt.id === newValue.id)[0];
+				onChange(newValue);
+			}}
+			getOptionDisabled={
+				(option) => false
+				// !!validateCanImplementEntity(
+				// 	entity,
+				// 	project.logic.get(option.id) as
+				// 		| DefinitionEntityState
+				// 		| BuiltInBaseEntityState
+				// ).length
+			}
+			renderInput={(params) => (
+				<TextField
+					{...params}
+					variant="outlined"
+					label={name}
+					placeholder="Select values"
+					size="small"
+				/>
+			)}
+		/>
+	);
+};
+
+export interface IDynamicValueEntryProps {
+	entity: EntityWithDefaultValueState;
+	project: EditorService;
+	canvasElement?: CanvasEntityElement;
+	parentDisabledReasons: CanvasEntityDisabledReason[];
+	onlyDefault?: boolean;
+	children: (extraContent: React.ReactNode) => React.ReactNode;
+	popupPlacement?:
+		| 'left'
+		| 'right'
+		| 'top'
+		| 'bottom'
+		| 'bottom-end'
+		| 'bottom-start'
+		| 'left-end'
+		| 'left-start'
+		| 'right-end'
+		| 'right-start'
+		| 'top-end'
+		| 'top-start';
+}
+
+// This is an attempt to build a component which can be used generically to display a dynamic value
+// The challenge is that dynamic values are often displayed among other elements, which often get hidden when the dynamic value is being edited
+const DynamicValueEntry = (props: IDynamicValueEntryProps) => {
+	if (props.project.destroyed) {
+		return null;
+	}
+
+	const [updateKey, setValue] = useState(0);
+
+	const useForceUpdate = () => {
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	const onlyDefault = props.onlyDefault || false;
+
+	const entity = props.entity;
+	let dataType = entity.getDataType(null);
+
+	if (entity.type === EntityType.InputMap && (entity as any).declaration) {
+		dataType = (entity as any).declaration.getDataType(null);
+	}
+
+	const reducedDataTypes = flattenDataTypesInOrGroup(
+		flattenDataTypeAndGroup(dataType),
+		{ removeDuplicates: true, removeNulls: true }
+	);
+
+	const allResolved = reducedDataTypes.filter((dt) => !!dt.isResolved);
+
+	let workingDataType: DataTypeState | null = null;
+
+	if (allResolved.length === 1) {
+		workingDataType = allResolved[0];
+	} else {
+		workingDataType = dataType;
+	}
+
+	// A foreign-key reference doesn't carry its own `entity` — the type of the
+	// value the user enters (uuid, number, …) lives on the referenced property.
+	// Without this step the `!workingDataType.entity` branch below would always
+	// open the raw JSON editor for any foreign-key field. Dereferencing here
+	// lets us render the matching primitive input instead.
+	if (workingDataType?.foreignKeyRef && !workingDataType.entity) {
+		const refDataType = workingDataType.foreignKeyRef.getDataType?.(null);
+
+		if (refDataType) {
+			const refResolved = flattenDataTypesInOrGroup(
+				flattenDataTypeAndGroup(refDataType),
+				{ removeDuplicates: true, removeNulls: true }
+			).filter((dt) => !!dt.isResolved);
+
+			if (refResolved.length === 1) {
+				workingDataType = refResolved[0];
+			}
+		}
+	}
+
+	const dynamicValue: IDynamicValue | null = useMemo(() => {
+		if (props.project.destroyed) {
+			return null;
+		}
+
+		const dynamicValueResolutionResult = !!entity
+			? resolveValue(entity, props.project, onlyDefault)
+			: null;
+
+		return dynamicValueResolutionResult;
+	}, [entity, props.project, onlyDefault, updateKey]);
+
+	const [primitiveDefaultValueLocal, setPrimitiveDefaultValueLocal] =
+		useState<string | number | boolean | null>(
+			(dynamicValue?.value?.rawString as string) ??
+				(dynamicValue?.value?.value as string) ??
+				''
+		);
+	const [
+		primitiveDefaultValueValidationErrors,
+		setPrimitiveDefaultValueValidationErrors
+	] = useState<EntityError<string>[]>([]);
+
+	const [isEditingValue, setIsEditingValue] = useState<boolean>(false);
+	const [preferedLocalType, setPreferedLocalType] = useState<
+		DynamicValueTypes.DefaultValue | DynamicValueTypes.Testing | null
+	>(null);
+
+	const name = safeResolveEntityName(entity, props.project.logic);
+
+	const _handleLiteralValueDelete = (value: IDynamicValue) => {
+		const isValueAsType = dataType.asType || !!value?.value?.valueAsType;
+
+		let valueStore: IValueStoreClient = props.project.localTestValues;
+		let changeSet: ChangeSet | null = null;
+
+		if (
+			![
+				DynamicValueTypes.Testing,
+				DynamicValueTypes.QueuedAutocalculation,
+				DynamicValueTypes.ExecutionResult,
+				DynamicValueTypes.AutoCalculated
+			].includes(value.type)
+		) {
+			changeSet = props.project.logic.addChangeSet(
+				new ChangeSet(
+					props.project.logic,
+					ProjectState.sessionAuthor,
+					new Date().toISOString(),
+					props.entity,
+					false,
+					StateMutationAction.RemoveLiteralValue
+				)
+			);
+		}
+
+		// Choose between deleting a literal value or a value as type
+		// based on the previous dynamic value data
+		if (isValueAsType) {
+			changeSet = handleValueAsTypeDelete(
+				props.entity,
+				props.project.logic,
+				changeSet || valueStore
+			);
+		} else {
+			changeSet = handleLiteralValueDelete(
+				props.entity,
+				props.project.logic,
+				changeSet || valueStore
+			);
+		}
+
+		if (!!changeSet) {
+			props.project.renderAndCloseChangeSet(changeSet);
+		} else {
+			props.project.emit(props.entity.id, {});
+		}
+
+		forceUpdate();
+	};
+
+	const _handleLiteralValueChange = (
+		newValue: string | number | boolean | string[],
+		localOnlyDefault?: boolean
+	) => {
+		let finalValueToSave = newValue;
+		let finalRawString: string | null = null;
+		if (
+			workingDataType?.entity?.type === EntityType.PrimitiveEntity &&
+			workingDataType.entity.name === PrimitiveTypes.Number &&
+			typeof newValue === 'string' &&
+			newValue !== '' &&
+			newValue !== '-'
+		) {
+			const num = Number(newValue);
+			if (!isNaN(num)) {
+				finalValueToSave = num;
+			}
+		} else if (
+			workingDataType?.entity?.type === EntityType.PrimitiveEntity &&
+			workingDataType.entity.name === PrimitiveTypes.String &&
+			typeof newValue === 'string'
+		) {
+			finalRawString = newValue;
+			finalValueToSave = newValue.replace(
+				/\\(n|t|r|\\)/g,
+				(match, char) => {
+					switch (char) {
+						case 'n':
+							return '\n';
+						case 't':
+							return '\t';
+						case 'r':
+							return '\r';
+						case '\\':
+							return '\\';
+						default:
+							return match;
+					}
+				}
+			);
+		}
+
+		const primitiveDefaultValueValidationErrorsWithoutRequired =
+			primitiveDefaultValueValidationErrors.filter(
+				(err) =>
+					err.code !== EntityInstanceErrorCode.MissingRequiredValue
+			);
+
+		// Do a final check to prevent the values being saved if there are validation errors or it is required and empty
+		if (!!primitiveDefaultValueValidationErrorsWithoutRequired.length) {
+			return;
+		}
+
+		if (
+			((entity as InputMapState).declaration?.required ||
+				(entity as ValueDescriptorState).required ||
+				(entity as ArgumentDeclarationState).implements?.some(
+					(impl) => impl.required
+				)) &&
+			!(entity as ValueReadingEntityState).readsValue &&
+			checkIsEmptyValue(finalValueToSave)
+		) {
+			// We should be able to empty a value even if it is required, so we just ignore the change
+			// return;
+		}
+
+		let storage: ChangeSet | IValueStoreClient =
+			props.project.localTestValues;
+
+		if (localOnlyDefault ?? onlyDefault) {
+			storage = props.project.logic.addChangeSet(
+				new ChangeSet(
+					props.project.logic,
+					ProjectState.sessionAuthor,
+					new Date().toISOString(),
+					props.entity,
+					false,
+					StateMutationAction.ModifyLiteralValue
+				)
+			);
+		}
+
+		const changeSet = handleLiteralValueChange(
+			finalValueToSave,
+			props.entity,
+			props.project.logic,
+			storage,
+			undefined,
+			finalRawString
+		);
+
+		if (!!changeSet) {
+			props.project.renderAndCloseChangeSet(changeSet);
+		} else {
+			props.project.emit(props.entity.id, {});
+		}
+
+		forceUpdate();
+	};
+
+	const _handleValueAsTypeChange = (
+		newValue: ValueAsTypeState | ValueAsTypeState[] | null,
+		localOnlyDefault?: boolean
+	) => {
+		let storage: ChangeSet | IValueStoreClient =
+			props.project.localTestValues;
+
+		if (localOnlyDefault ?? onlyDefault) {
+			storage = props.project.logic.addChangeSet(
+				new ChangeSet(
+					props.project.logic,
+					ProjectState.sessionAuthor,
+					new Date().toISOString(),
+					props.entity,
+					false,
+					StateMutationAction.ModifyLiteralValueAsType
+				)
+			);
+		}
+
+		const changeSet = handleValueAsTypeChange(
+			newValue,
+			props.entity,
+			props.project.logic,
+			storage
+		);
+
+		if (!!changeSet) {
+			props.project.renderAndCloseChangeSet(changeSet);
+		} else {
+			props.project.emit(props.entity.id, {});
+		}
+
+		forceUpdate();
+	};
+
+	// Recursively unfold the inheritance tree and resolve all dependencies so we subscribe them as events
+	const subscribeValueInheritanceUpdates = useCallback(
+		(inheritanceLink: IValueInheritanceLink): (() => void) => {
+			// Create a stable handler
+			const handleInheritanceUpdate = () => {
+				forceUpdate();
+			};
+
+			const cleanupFunctions: (() => void)[] = [];
+
+			// Use a recursive inner function to gather all listeners
+			const subscribeRecursive = (link: IValueInheritanceLink) => {
+				link.sources.forEach((valueInheritanceLink) => {
+					if (!valueInheritanceLink) {
+						return;
+					}
+
+					const ownerId = valueInheritanceLink.valueOwner.id;
+					props.project.on(ownerId, handleInheritanceUpdate);
+					cleanupFunctions.push(() => {
+						props.project.off(ownerId, handleInheritanceUpdate);
+					});
+
+					const dataType = (
+						valueInheritanceLink.valueOwner as VariableDeclarationState
+					).dataType;
+					if (dataType) {
+						const dataTypeId = dataType.id;
+						props.project.on(dataTypeId, handleInheritanceUpdate);
+						cleanupFunctions.push(() => {
+							props.project.off(
+								dataTypeId,
+								handleInheritanceUpdate
+							);
+						});
+					}
+
+					if (valueInheritanceLink.inheritanceLink) {
+						subscribeRecursive(
+							valueInheritanceLink.inheritanceLink
+						);
+					}
+				});
+			};
+
+			// Start the recursion
+			subscribeRecursive(inheritanceLink);
+
+			// Return a single function that cleans up everything
+			return () => {
+				cleanupFunctions.forEach((cleanup) => cleanup());
+			};
+		},
+		[props.project, forceUpdate] // Dependencies for the useCallback
+	);
+
+	useEffect(() => {
+		const handleValueOwnerUpdate = () => {
+			forceUpdate();
+		};
+
+		const handleValueUpdate = () => {
+			forceUpdate();
+		};
+
+		const handleValueStoresinitialized = () => {
+			forceUpdate();
+		};
+
+		props.project.on(props.entity.id, handleValueOwnerUpdate);
+
+		if (props.entity.type === EntityType.InputMap) {
+			let relevantParent = props.entity.parent;
+
+			if (
+				relevantParent &&
+				relevantParent.type === EntityType.VariableInstance
+			) {
+				relevantParent = relevantParent.declaration;
+			}
+
+			if (relevantParent) {
+				props.project.on(relevantParent.id, handleValueOwnerUpdate);
+			}
+		}
+
+		// Call the recursive subscription and store its cleanup function
+		let inheritanceCleanup: (() => void) | null = null;
+		if (dynamicValue?.inheritanceLink) {
+			inheritanceCleanup = subscribeValueInheritanceUpdates(
+				dynamicValue.inheritanceLink
+			);
+		}
+
+		props.project.on(
+			'value-stores-initialized',
+			handleValueStoresinitialized
+		);
+
+		return () => {
+			props.project.off(props.entity.id, handleValueOwnerUpdate);
+
+			if (props.entity.type === EntityType.InputMap) {
+				let relevantParent = props.entity.parent;
+
+				if (
+					relevantParent &&
+					relevantParent.type === EntityType.VariableInstance
+				) {
+					relevantParent = relevantParent.declaration;
+				}
+
+				if (relevantParent) {
+					props.project.off(
+						relevantParent.id,
+						handleValueOwnerUpdate
+					);
+				}
+			}
+
+			// Call the recursive cleanup function
+			if (inheritanceCleanup) {
+				inheritanceCleanup();
+			}
+
+			props.project.off(
+				'value-stores-initialized',
+				handleValueStoresinitialized
+			);
+		};
+	}, [
+		props.project,
+		props.entity.id,
+		dynamicValue, // Rerun if the resolved dynamicValue changes
+		subscribeValueInheritanceUpdates, // The stable useCallback function
+		updateKey
+	]);
+
+	useEffect(() => {
+		let cleanup: () => void;
+
+		if (inputRef.current) {
+			const dialog = document.getElementById('dialog-card');
+
+			cleanup = onClickAway(
+				inputRef.current,
+				() => {
+					setIsEditingValue(false);
+					setPreferedLocalType(null);
+
+					if (props.canvasElement) {
+						props.canvasElement.draggableObject.deletable = true;
+						props.canvasElement.draggableObject.selectable = true;
+					}
+
+					_handleLiteralValueChange(
+						primitiveDefaultValueLocal,
+						preferedLocalType === DynamicValueTypes.DefaultValue
+					);
+				},
+				document.body,
+				dialog
+			);
+		}
+
+		return () => {
+			if (cleanup) {
+				cleanup();
+			}
+
+			if (props.canvasElement) {
+				props.canvasElement.draggableObject.deletable = true;
+				props.canvasElement.draggableObject.selectable = true;
+			}
+		};
+	}, [inputRef.current, primitiveDefaultValueLocal, isEditingValue]);
+
+	useEffect(() => {
+		if (!isEditingValue) {
+			setPrimitiveDefaultValueLocal(
+				(dynamicValue?.value?.value as string) ?? ''
+			);
+		}
+	}, [dynamicValue?.value?.value, isEditingValue]);
+
+	useEffect(() => {
+		// listen to "enter" and "escape" key to save the value
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === 'Enter' && e.shiftKey) {
+				return;
+			}
+			if ((e.key === 'Enter' || e.key === 'Escape') && isEditingValue) {
+				setIsEditingValue(false);
+				setPreferedLocalType(null);
+
+				if (props.canvasElement) {
+					props.canvasElement.draggableObject.deletable = true;
+					props.canvasElement.draggableObject.selectable = true;
+				}
+
+				if (e.key === 'Enter' && inputRef.current) {
+					_handleLiteralValueChange(
+						primitiveDefaultValueLocal,
+						preferedLocalType === DynamicValueTypes.DefaultValue
+					);
+				} else if (e.key === 'Escape') {
+					setPrimitiveDefaultValueLocal(
+						(dynamicValue?.value?.value as string) ?? ''
+					);
+				}
+			}
+		};
+
+		if (isEditingValue) {
+			document.addEventListener('keydown', handleKeyDown);
+		}
+
+		return () => {
+			document.removeEventListener('keydown', handleKeyDown);
+
+			if (props.canvasElement) {
+				props.canvasElement.draggableObject.deletable = true;
+				props.canvasElement.draggableObject.selectable = true;
+			}
+		};
+	}, [isEditingValue, primitiveDefaultValueLocal]);
+
+	useEffect(() => {
+		if (inputRef.current && document.activeElement !== inputRef.current) {
+			inputRef.current.focus();
+		}
+
+		props.canvasElement?.draggableObject?.updateConnections();
+	});
+
+	// Set a flag on the event during the capture phase to prevent double clicks and drags from bubbling to canvas
+	useEffect(() => {
+		if (!isEditingValue) return;
+
+		const ids = [
+			getCanvasEntityDOMId(entity) + '--input',
+			getCanvasEntityDOMId(entity) + '--enum-select',
+			getCanvasEntityDOMId(entity) + '--enum-list-autocomplete',
+			getCanvasEntityDOMId(entity) +
+				'--value-as-type-single-autocomplete',
+			getCanvasEntityDOMId(entity) + '--value-as-type-list-autocomplete'
+		];
+
+		let els: HTMLElement[] = [];
+
+		const flagEvent = (e: MouseEvent) => {
+			(e as any).__canvasIgnore = true;
+		};
+
+		// Elements should be available in the DOM when this effect runs
+		els = ids
+			.map((id) => document.getElementById(id))
+			.filter(Boolean) as HTMLElement[];
+
+		els.forEach((el) => {
+			el.addEventListener('dblclick', flagEvent, true);
+			el.addEventListener('mousedown', flagEvent, true);
+		});
+
+		return () => {
+			els.forEach((el) => {
+				el.removeEventListener('dblclick', flagEvent, true);
+				el.removeEventListener('mousedown', flagEvent, true);
+			});
+		};
+	}, [isEditingValue, entity]);
+
+	if (isEditingValue) {
+		if (workingDataType.asType) {
+			const options = [
+				...props.project.logic.entities,
+				...props.project.logic.getFunctionCalls(),
+				...props.project.logic.getOperations(),
+				...props.project.logic.functions,
+				...props.project.logic.operationDeclarations,
+				...props.project.logic.loopDeclarations,
+				...props.project.logic.conditionDeclarations
+			].filter((ent) => {
+				if (ent.id === workingDataType.entity?.id) {
+					return true;
+				}
+
+				if (
+					!!workingDataType.entity &&
+					ent.type !== EntityType.DefinitionEntity
+				) {
+					return false;
+				}
+
+				if (
+					ent.type === EntityType.DefinitionEntity &&
+					workingDataType.entity?.type ===
+						EntityType.BuiltInBaseEntity &&
+					!checkHasBaseEntity(ent, workingDataType.entity.name)
+				) {
+					return false;
+				}
+
+				if (workingDataType.staticEntities) {
+					if (
+						ent.type !== EntityType.DefinitionEntity ||
+						!ent.static
+					) {
+						return false;
+					}
+				}
+
+				if (workingDataType.interactiveEntities) {
+					if (
+						ent.type !== EntityType.DefinitionEntity ||
+						!ent.interactive
+					) {
+						return false;
+					}
+				}
+
+				if (workingDataType.actionEntities) {
+					if (ent.type === EntityType.DefinitionEntity) {
+						return false;
+					}
+				}
+
+				return true;
+			});
+
+			if (workingDataType.isList || workingDataType.isList === null) {
+				return (
+					<ListValueAsTypeAutocomplete
+						id={
+							getCanvasEntityDOMId(entity) +
+							'--value-as-type-list-autocomplete'
+						}
+						entity={entity}
+						options={options}
+						dynamicValue={dynamicValue}
+						popupPlacement={props.popupPlacement || 'bottom-end'}
+						project={props.project}
+						onChange={(newValue) => {
+							_handleValueAsTypeChange(
+								newValue,
+								preferedLocalType ===
+									DynamicValueTypes.DefaultValue
+							);
+						}}
+						name={name}
+					/>
+				);
+			} else {
+				return (
+					<SingleValueAsTypeAutocomplete
+						id={
+							getCanvasEntityDOMId(entity) +
+							'--value-as-type-single-autocomplete'
+						}
+						options={options}
+						dynamicValue={dynamicValue}
+						popupPlacement={props.popupPlacement || 'bottom-end'}
+						project={props.project}
+						onChange={(newValue) => {
+							_handleValueAsTypeChange(
+								newValue,
+								preferedLocalType ===
+									DynamicValueTypes.DefaultValue
+							);
+
+							setIsEditingValue(false);
+							setPreferedLocalType(null);
+						}}
+						name={name}
+					/>
+				);
+			}
+		} else if (workingDataType.entity?.name === PrimitiveTypes.Enum) {
+			if (workingDataType.isList) {
+				// Multi-select
+				return (
+					<Autocomplete
+						fullWidth
+						multiple
+						id={
+							getCanvasEntityDOMId(entity) +
+							'--enum-list-autocomplete'
+						}
+						options={workingDataType.options || []}
+						disableCloseOnSelect
+						value={(dynamicValue.value?.value as string[]) || []}
+						isOptionEqualToValue={(option, value) =>
+							option === value
+						}
+						getOptionLabel={(option) => option}
+						renderOption={(fieldProps, option) => {
+							const { key, ...optionProps } = fieldProps;
+							const current =
+								(dynamicValue.value?.value as string[]) || [];
+							return (
+								<Box
+									component="li"
+									sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+									{...optionProps}
+									key={key}
+								>
+									<Checkbox
+										icon={icon}
+										checkedIcon={checkedIcon}
+										style={{ marginRight: 8 }}
+										checked={current.includes(option)}
+									/>
+									{option}
+								</Box>
+							);
+						}}
+						renderTags={(selected) => (
+							<Stack gap={1} direction="row" flexWrap="wrap">
+								{selected.map((value) => (
+									<Chip
+										key={value}
+										label={value}
+										onDelete={() => {
+											const current =
+												(dynamicValue.value
+													?.value as string[]) || [];
+											_handleLiteralValueChange(
+												current.filter(
+													(v) => v !== value
+												),
+												preferedLocalType ===
+													DynamicValueTypes.DefaultValue
+											);
+										}}
+										deleteIcon={
+											<CancelIcon
+												onMouseDown={(event) =>
+													event.stopPropagation()
+												}
+											/>
+										}
+									/>
+								))}
+							</Stack>
+						)}
+						onChange={(_, newValue) => {
+							// de-dupe just in case
+							const sanitized = newValue.filter(
+								(v, i, a) => a.indexOf(v) === i
+							);
+							_handleLiteralValueChange(
+								sanitized,
+								preferedLocalType ===
+									DynamicValueTypes.DefaultValue
+							);
+						}}
+						renderInput={(params) => (
+							<TextField
+								{...params}
+								variant="outlined"
+								label={name}
+								placeholder="Select values"
+								size="small"
+							/>
+						)}
+					/>
+				);
+			} else {
+				return (
+					<FormControl fullWidth>
+						<InputLabel
+							id={getCanvasEntityDOMId(entity) + '--enum-label'}
+						>
+							{name}
+						</InputLabel>
+						<Select
+							size="small"
+							// ref={inputRef}
+							labelId={
+								getCanvasEntityDOMId(entity) + '--enum-label'
+							}
+							id={getCanvasEntityDOMId(entity) + '--enum-select'}
+							value={(dynamicValue?.value?.value as string) || ''}
+							label={name}
+							// Confirm value icon button
+							inputProps={{
+								endAdornment: (
+									<InputAdornment position="end">
+										<IconButton
+											aria-label={'confirm value'}
+											onClick={() => {
+												setIsEditingValue(false);
+												setPreferedLocalType(null);
+											}}
+											edge="end"
+											className="dynamic-value-entry__confirm-value-button"
+											style={{
+												backgroundColor:
+													'var(--color-main-success)',
+												width: 26,
+												color: 'white',
+												height: 26,
+												marginRight: 2
+											}}
+										>
+											<CheckIcon />
+										</IconButton>
+									</InputAdornment>
+								)
+							}}
+							onChange={(e) => {
+								_handleLiteralValueChange(
+									e.target.value as string,
+									preferedLocalType ===
+										DynamicValueTypes.DefaultValue
+								);
+
+								setIsEditingValue(false);
+								setPreferedLocalType(null);
+							}}
+							onBlur={(e) => {
+								setIsEditingValue(false);
+								setPreferedLocalType(null);
+							}}
+						>
+							{workingDataType.options.map((option) => (
+								<MenuItem key={option} value={option}>
+									{option}
+								</MenuItem>
+							))}
+						</Select>
+					</FormControl>
+				);
+			}
+		} else if (workingDataType.entity.name === PrimitiveTypes.UUID) {
+			const hasHelperText =
+				!!(
+					((entity as InputMapState).declaration?.required ||
+						(entity as ValueDescriptorState).required ||
+						(entity as ArgumentDeclarationState).implements?.some(
+							(impl) => impl.required
+						)) &&
+					!(entity as ValueReadingEntityState).readsValue &&
+					!checkIsEmptyValue(primitiveDefaultValueLocal)
+				) || !!primitiveDefaultValueValidationErrors.length;
+
+			return (
+				<FormControl fullWidth>
+					<InputLabel
+						id={getCanvasEntityDOMId(entity) + '--input-label'}
+					>
+						{name}
+					</InputLabel>
+					<OutlinedInput
+						maxRows={4}
+						ref={inputRef}
+						fullWidth
+						autoFocus
+						endAdornment={
+							<InputAdornment position="end">
+								<IconButton
+									aria-label={'confirm value'}
+									disabled={
+										!!(
+											false
+											// ((entity as InputMapState).declaration?.required ||
+											// 	(entity as ValueDescriptorState).required ||
+											// 	(entity as ArgumentDeclarationState).implements?.some(
+											// 		(impl) => impl.required
+											// 	)) &&
+											// !(entity as ValueReadingEntityState).readsValue &&
+											// !checkIsEmptyValue(primitiveDefaultValueLocal)
+										) ||
+										!!primitiveDefaultValueValidationErrors.filter(
+											(err) =>
+												err.code !==
+												EntityInstanceErrorCode.MissingRequiredValue
+										).length
+									}
+									onClick={() => {
+										_handleLiteralValueChange(
+											primitiveDefaultValueLocal,
+											preferedLocalType ===
+												DynamicValueTypes.DefaultValue
+										);
+
+										setIsEditingValue(false);
+										setPreferedLocalType(null);
+									}}
+									edge="end"
+									className="dynamic-value-entry__confirm-value-button"
+									style={{
+										backgroundColor:
+											!!(
+												false
+												// ((entity as InputMapState).declaration?.required ||
+												// 	(entity as ValueDescriptorState).required ||
+												// 	(entity as ArgumentDeclarationState).implements?.some(
+												// 		(impl) => impl.required
+												// 	)) &&
+												// !(entity as ValueReadingEntityState).readsValue &&
+												// !checkIsEmptyValue(primitiveDefaultValueLocal)
+											) ||
+											!!primitiveDefaultValueValidationErrors.filter(
+												(err) =>
+													err.code !==
+													EntityInstanceErrorCode.MissingRequiredValue
+											).length
+												? 'rgba(0,0,0,0.12)'
+												: 'var(--color-main-success)',
+										cursor:
+											!!(
+												false
+												// ((entity as InputMapState).declaration?.required ||
+												// 	(entity as ValueDescriptorState).required ||
+												// 	(entity as ArgumentDeclarationState).implements?.some(
+												// 		(impl) => impl.required
+												// 	)) &&
+												// !(entity as ValueReadingEntityState).readsValue &&
+												// !checkIsEmptyValue(primitiveDefaultValueLocal)
+											) ||
+											!!primitiveDefaultValueValidationErrors.filter(
+												(err) =>
+													err.code !==
+													EntityInstanceErrorCode.MissingRequiredValue
+											).length
+												? 'not-allowed'
+												: 'pointer',
+										width: 26,
+										color: 'white',
+										height: 26,
+										marginRight: 2
+									}}
+								>
+									<CheckIcon />
+								</IconButton>
+							</InputAdornment>
+						}
+						id={getCanvasEntityDOMId(entity) + '--input'}
+						error={
+							!!(
+								((entity as InputMapState).declaration
+									?.required ||
+									(entity as ValueDescriptorState).required ||
+									(
+										entity as ArgumentDeclarationState
+									).implements?.some(
+										(impl) => impl.required
+									)) &&
+								!(entity as ValueReadingEntityState)
+									.readsValue &&
+								!checkIsEmptyValue(primitiveDefaultValueLocal)
+							) || !!primitiveDefaultValueValidationErrors.length
+						}
+						value={primitiveDefaultValueLocal}
+						onChange={(e) => {
+							const sanitizedValue = castHTMLInputValueToType(
+								e.target.value,
+								workingDataType
+							);
+
+							const validationResult = uuidValueValidation(
+								entity,
+								sanitizedValue
+							) || { errors: [], override: sanitizedValue };
+
+							setPrimitiveDefaultValueLocal(
+								validationResult.override as string
+							);
+							setPrimitiveDefaultValueValidationErrors(
+								validationResult.errors
+							);
+						}}
+						size="small"
+						type={resolveInputTypeFromDataType(workingDataType)}
+						label={name}
+					/>
+					<FormHelperText
+						id="outlined-weight-helper-text"
+						error={!!primitiveDefaultValueValidationErrors.length}
+						// override parent’s `user-select: none` only when there is text to select
+						sx={{
+							userSelect: hasHelperText
+								? 'text !important'
+								: 'none',
+							cursor: hasHelperText ? 'text' : 'default'
+						}}
+						// prevent drag on mouse-down when helper text exists
+						onMouseDown={(e) => {
+							if (hasHelperText) {
+								e.stopPropagation();
+							}
+						}}
+						onClick={(e) => {
+							if (hasHelperText) {
+								e.stopPropagation();
+							}
+						}}
+						onMouseMove={(e) => {
+							if (hasHelperText) {
+								e.stopPropagation();
+							}
+						}}
+					>
+						{!!(
+							((entity as InputMapState).declaration?.required ||
+								(entity as ValueDescriptorState).required ||
+								(
+									entity as ArgumentDeclarationState
+								).implements?.some((impl) => impl.required)) &&
+							!(entity as ValueReadingEntityState).readsValue &&
+							checkIsEmptyValue(primitiveDefaultValueLocal)
+						)
+							? 'This field is required'
+							: ''}
+						{!!primitiveDefaultValueValidationErrors.length
+							? primitiveDefaultValueValidationErrors
+									.map((err) =>
+										translateLogicErrorCode(err as any)
+									)
+									.join('. ')
+							: ''}
+					</FormHelperText>
+				</FormControl>
+			);
+		}
+
+		const hasHelperText =
+			!!(
+				((entity as InputMapState).declaration?.required ||
+					(entity as ValueDescriptorState).required ||
+					(entity as ArgumentDeclarationState).implements?.some(
+						(impl) => impl.required
+					)) &&
+				!(entity as ValueReadingEntityState).readsValue &&
+				checkIsEmptyValue(primitiveDefaultValueLocal)
+			) || !!primitiveDefaultValueValidationErrors.length;
+
+		return (
+			<FormControl fullWidth>
+				<InputLabel id={getCanvasEntityDOMId(entity) + '--input-label'}>
+					{name}
+				</InputLabel>
+				<OutlinedInput
+					multiline={
+						workingDataType?.entity?.name === PrimitiveTypes.String
+					}
+					maxRows={4}
+					ref={inputRef}
+					fullWidth
+					autoFocus
+					endAdornment={
+						<InputAdornment position="end">
+							{workingDataType?.entity?.name ===
+								PrimitiveTypes.String && (
+								<IconButton
+									aria-label={'expand string editor'}
+									onClick={(e) => {
+										e.stopPropagation();
+										props.project.events.emit(
+											'string-editor-dialog-open',
+											{
+												value:
+													dynamicValue?.value || null,
+												valueOwner: entity,
+												valueType: dynamicValue?.type,
+												draggableObject:
+													props.canvasElement
+														?.draggableObject,
+												project: props.project,
+												onlyDefault:
+													preferedLocalType ===
+														DynamicValueTypes.DefaultValue ||
+													onlyDefault
+											}
+										);
+										setIsEditingValue(false);
+										setPreferedLocalType(null);
+									}}
+								>
+									<FullscreenIcon />
+								</IconButton>
+							)}
+							<IconButton
+								aria-label={'confirm value'}
+								disabled={
+									!!(
+										false
+										// ((entity as InputMapState).declaration?.required ||
+										// 	(entity as ValueDescriptorState).required ||
+										// 	(entity as ArgumentDeclarationState).implements?.some(
+										// 		(impl) => impl.required
+										// 	)) &&
+										// !(entity as ValueReadingEntityState).readsValue &&
+										// checkIsEmptyValue(primitiveDefaultValueLocal)
+									) ||
+									!!primitiveDefaultValueValidationErrors.filter(
+										(err) =>
+											err.code !==
+											EntityInstanceErrorCode.MissingRequiredValue
+									).length
+								}
+								onClick={() => {
+									_handleLiteralValueChange(
+										primitiveDefaultValueLocal,
+										preferedLocalType ===
+											DynamicValueTypes.DefaultValue
+									);
+
+									setIsEditingValue(false);
+									setPreferedLocalType(null);
+								}}
+								edge="end"
+								className="dynamic-value-entry__confirm-value-button"
+								style={{
+									backgroundColor:
+										!!(
+											false
+											// ((entity as InputMapState).declaration?.required ||
+											// 	(entity as ValueDescriptorState).required ||
+											// 	(entity as ArgumentDeclarationState).implements?.some(
+											// 		(impl) => impl.required
+											// 	)) &&
+											// !(entity as ValueReadingEntityState).readsValue &&
+											// checkIsEmptyValue(primitiveDefaultValueLocal)
+										) ||
+										!!primitiveDefaultValueValidationErrors.filter(
+											(err) =>
+												err.code !==
+												EntityInstanceErrorCode.MissingRequiredValue
+										).length
+											? 'rgba(0,0,0,0.12)'
+											: 'var(--color-main-success)',
+									cursor:
+										!!(
+											false
+											// ((entity as InputMapState).declaration?.required ||
+											// 	(entity as ValueDescriptorState).required ||
+											// 	(entity as ArgumentDeclarationState).implements?.some(
+											// 		(impl) => impl.required
+											// 	)) &&
+											// !(entity as ValueReadingEntityState).readsValue &&
+											// checkIsEmptyValue(primitiveDefaultValueLocal)
+										) ||
+										!!primitiveDefaultValueValidationErrors.filter(
+											(err) =>
+												err.code !==
+												EntityInstanceErrorCode.MissingRequiredValue
+										).length
+											? 'not-allowed'
+											: 'pointer',
+									width: 26,
+									color: 'white',
+									height: 26,
+									marginRight: 2
+								}}
+							>
+								<CheckIcon />
+							</IconButton>
+						</InputAdornment>
+					}
+					id={getCanvasEntityDOMId(entity) + '--input'}
+					error={
+						!!(
+							((entity as InputMapState).declaration?.required ||
+								(entity as ValueDescriptorState).required ||
+								(
+									entity as ArgumentDeclarationState
+								).implements?.some((impl) => impl.required)) &&
+							!(entity as ValueReadingEntityState).readsValue &&
+							checkIsEmptyValue(primitiveDefaultValueLocal)
+						) || !!primitiveDefaultValueValidationErrors.length
+					}
+					value={castLiteralValueToHTMLInputValue(
+						primitiveDefaultValueLocal,
+						workingDataType
+					)}
+					onChange={(e) => {
+						const sanitizedValue = castHTMLInputValueToType(
+							e.target.value,
+							workingDataType
+						);
+
+						let valueForValidation = sanitizedValue;
+						if (
+							workingDataType?.entity?.type ===
+								EntityType.PrimitiveEntity &&
+							workingDataType.entity.name ===
+								PrimitiveTypes.Number &&
+							typeof sanitizedValue === 'string' &&
+							sanitizedValue !== '' &&
+							sanitizedValue !== '-'
+						) {
+							const num = Number(sanitizedValue);
+							if (!isNaN(num)) {
+								valueForValidation = num;
+							}
+						}
+
+						// @ts-ignore
+						const validationResult =
+							entity.codeNativeValueValidation?.(
+								entity,
+								valueForValidation
+							) || { errors: [], override: valueForValidation };
+
+						setPrimitiveDefaultValueLocal(
+							typeof sanitizedValue === 'string' &&
+								typeof validationResult.override === 'number'
+								? sanitizedValue
+								: (validationResult.override as string)
+						);
+						setPrimitiveDefaultValueValidationErrors(
+							validationResult.errors
+						);
+					}}
+					size="small"
+					type={resolveInputTypeFromDataType(workingDataType)}
+					label={name}
+				/>
+				<FormHelperText
+					id="outlined-weight-helper-text"
+					error={
+						!!(
+							((entity as InputMapState).declaration?.required ||
+								(entity as ValueDescriptorState).required ||
+								(
+									entity as ArgumentDeclarationState
+								).implements?.some((impl) => impl.required)) &&
+							!(entity as ValueReadingEntityState).readsValue &&
+							checkIsEmptyValue(primitiveDefaultValueLocal)
+						) || !!primitiveDefaultValueValidationErrors.length
+					}
+					// override parent’s `user-select: none` only when there is text to select
+					sx={{
+						userSelect: hasHelperText ? 'text !important' : 'none',
+						cursor: hasHelperText ? 'text' : 'default'
+					}}
+					// prevent drag on mouse-down when helper text exists
+					onMouseDown={(e) => {
+						if (hasHelperText) {
+							e.stopPropagation();
+						}
+					}}
+					onClick={(e) => {
+						if (hasHelperText) {
+							e.stopPropagation();
+						}
+					}}
+					onMouseMove={(e) => {
+						if (hasHelperText) {
+							e.stopPropagation();
+						}
+					}}
+				>
+					{!!(
+						((entity as InputMapState).declaration?.required ||
+							(entity as ValueDescriptorState).required ||
+							(
+								entity as ArgumentDeclarationState
+							).implements?.some((impl) => impl.required)) &&
+						!(entity as ValueReadingEntityState).readsValue &&
+						checkIsEmptyValue(primitiveDefaultValueLocal)
+					)
+						? 'This field is required'
+						: ''}
+					{!!primitiveDefaultValueValidationErrors.length
+						? primitiveDefaultValueValidationErrors
+								.map((err) => errorCodeToMessage(err.code))
+								.join('. ')
+						: ''}
+				</FormHelperText>
+			</FormControl>
+		);
+	}
+
+	const dynamicValueContent = (
+		<DynamicValue
+			valueOwner={entity}
+			project={props.project}
+			parentCanvasObject={props.canvasElement?.draggableObject}
+			parentDisabledReasons={props.parentDisabledReasons}
+			popupPlacement={props.popupPlacement || 'bottom'}
+			onlyDefault={onlyDefault}
+			onEdit={(e, type) => {
+				if (props.parentDisabledReasons.length) {
+					return;
+				}
+
+				e.stopPropagation();
+				e.preventDefault();
+
+				let localOnlyDefault =
+					type === DynamicValueTypes.DefaultValue || onlyDefault;
+
+				if (
+					entity.type === EntityType.Property &&
+					(entity as any).implements?.find?.(
+						(impl: any) =>
+							impl.id ===
+							BUILT_IN_BASE_ENTITY_IDS['built-in-base-entity']
+								.BUILT_IN_CRON_JOB_ENTITY.properties.expression
+								.id
+					)
+				) {
+					props.project.emit('cron-builder-dialog-open', {
+						value: dynamicValue?.value || null,
+						valueOwner: entity,
+						valueType: dynamicValue?.type,
+						draggableObject: props.canvasElement?.draggableObject,
+						project: props.project,
+						onlyDefault: localOnlyDefault
+					});
+					return;
+				}
+
+				// If the value requires an inline input, like date, number, string, etc, then we should open the input
+				// Otherwise we should open the value editor for the respective data type
+				if (
+					(!workingDataType ||
+						!workingDataType.entity ||
+						(workingDataType.isList &&
+							workingDataType.entity?.name !==
+								PrimitiveTypes.Enum) ||
+						workingDataType?.entity?.name ===
+							PrimitiveTypes.Untyped ||
+						workingDataType?.entity?.name ===
+							PrimitiveTypes.KeyValue) &&
+					!workingDataType?.asType
+				) {
+					// Open the value editor
+					props.project.emit('json-editor-dialog-open', {
+						value: dynamicValue?.value || null,
+						valueOwner: entity,
+						valueType: dynamicValue?.type,
+						draggableObject: props.canvasElement?.draggableObject,
+						project: props.project,
+						onlyDefault: localOnlyDefault
+					});
+					return;
+				} else if (
+					workingDataType?.entity?.type ===
+					EntityType.DefinitionEntity
+				) {
+					// If it is a persisted entity, open the dialog with the database client
+					const lowestDefinitionEntity =
+						getExtendedDefinitionEntity(workingDataType?.entity) ||
+						workingDataType?.entity;
+					const baseTypes =
+						flattenDefinitionEntityExtensionAndImplementationTypes(
+							lowestDefinitionEntity
+						);
+
+					if (
+						!workingDataType?.asType &&
+						checkHasBaseEntity(
+							workingDataType?.entity,
+							BaseEntityNames.PERSISTED_ENTITY
+						)
+					) {
+						if (localOnlyDefault) {
+							popupNotification({
+								text: 'You cannot edit the default value of a persisted entity.',
+								color: 'warning',
+								delay: 3000
+							});
+							return;
+						} else {
+							EditorService.navigate(
+								resolvePersistedDefinitionEntityDatabaseDialogAbsolutePath(
+									props.project,
+									workingDataType?.entity,
+									workingDataType.isList
+										? TestDatabaseDialogMode.SelectMultipleFromFixedTable
+										: TestDatabaseDialogMode.SelectSingleFromFixedTable
+								) + `&valueOwner=${entity.id}`
+							);
+							return;
+						}
+					} else if (
+						checkHasBaseEntity(
+							workingDataType?.entity,
+							BaseEntityNames.EXTERNAL_INTEGRATION_CONNECTION
+						)
+					) {
+						let integrationName: string | null = null;
+
+						// Resolve the integration name
+						if (!!dynamicValue.value?.valueAsType) {
+							const connectionConfigEntity = dynamicValue.value
+								?.valueAsType as DefinitionEntityState;
+							const providerProperty =
+								connectionConfigEntity.properties.find((p) =>
+									p.implements.find(
+										(impl) =>
+											impl.id ===
+											BUILT_IN_BASE_ENTITY_IDS[
+												'built-in-base-entity'
+											]
+												.BUILT_IN_EXTERNAL_INTEGRATION_CONNECTION_ENTITY
+												.properties.integration.id
+									)
+								);
+
+							const integrationNameValue =
+								providerProperty?.getDefaultValue()?.value;
+
+							if (integrationNameValue) {
+								integrationName =
+									integrationNameValue as string;
+							}
+						}
+
+						if (
+							!integrationName &&
+							entity.type === EntityType.InputMap &&
+							getParentCallableEntity(entity)?.type ===
+								EntityType.Operation
+						) {
+							// Get the integration name from the parent operation
+							const externalIntegrationId =
+								getExternalIntegrationIdFromAction(
+									getParentCallableEntity(
+										entity
+									) as OperationState
+								);
+
+							if (externalIntegrationId) {
+								integrationName = externalIntegrationId;
+							}
+						}
+
+						if (!integrationName) {
+							popupNotification({
+								text: 'No external integration could be found to edit this value.',
+								color: 'warning',
+								delay: 3000
+							});
+							return;
+						}
+
+						if (integrationName) {
+							// popupNotification({
+							// 	text: 'External integration: ' + integrationName,
+							// 	color: 'success',
+							// 	delay: 3000,
+							// });
+
+							// Open the external integrations' connection dialog
+							// This will allow the user to connect to the external integration
+							// Or choose an existing connection
+							// The connection will set as the new value of the dynamic value
+							// Navigate to external-integration-connections/:valueOwnerId
+							EditorService.navigate(
+								`external-integration-connections/${
+									entity.id
+								}?integrationName=${integrationName}${
+									localOnlyDefault ? '&onlyDefault=true' : ''
+								}`
+							);
+							// props.project.integrationsService.connect(integrationName);
+
+							return;
+						}
+					} else if (!baseTypes.length) {
+						props.project.emit('json-editor-dialog-open', {
+							value: dynamicValue?.value || null,
+							valueOwner: entity,
+							valueType: dynamicValue?.type,
+							draggableObject:
+								props.canvasElement?.draggableObject,
+							project: props.project,
+							onlyDefault: localOnlyDefault
+						});
+						return;
+					}
+				} else if (
+					!!workingDataType?.asType &&
+					workingDataType?.entity?.type ===
+						EntityType.BuiltInBaseEntity
+				) {
+					if (
+						checkHasBaseEntity(
+							workingDataType?.entity,
+							BaseEntityNames.EXTERNAL_INTEGRATION_CONNECTION
+						)
+					) {
+						let integrationName: string | null = null;
+
+						// Resolve the integration name
+						if (!!dynamicValue.value?.valueAsType) {
+							const connectionConfigEntity = dynamicValue.value
+								?.valueAsType as DefinitionEntityState;
+							const providerProperty =
+								connectionConfigEntity.properties.find((p) =>
+									p.implements.find(
+										(impl) =>
+											impl.id ===
+											BUILT_IN_BASE_ENTITY_IDS[
+												'built-in-base-entity'
+											]
+												.BUILT_IN_EXTERNAL_INTEGRATION_CONNECTION_ENTITY
+												.properties.integration.id
+									)
+								);
+
+							const integrationNameValue =
+								providerProperty?.getDefaultValue()?.value;
+
+							if (integrationNameValue) {
+								integrationName =
+									integrationNameValue as string;
+							}
+						}
+
+						if (
+							!integrationName &&
+							entity.type === EntityType.InputMap &&
+							getParentCallableEntity(entity)?.type ===
+								EntityType.Operation
+						) {
+							// Get the integration name from the parent operation
+							const externalIntegrationId =
+								getExternalIntegrationIdFromAction(
+									getParentCallableEntity(
+										entity
+									) as OperationState
+								);
+
+							if (externalIntegrationId) {
+								integrationName = externalIntegrationId;
+							}
+						}
+
+						if (!integrationName) {
+							popupNotification({
+								text: 'No external integration could be found to edit this value.',
+								color: 'warning',
+								delay: 3000
+							});
+							return;
+						}
+
+						if (integrationName) {
+							// popupNotification({
+							// 	text: 'External integration: ' + integrationName,
+							// 	color: 'success',
+							// 	delay: 3000,
+							// });
+
+							// Open the external integrations' connection dialog
+							// This will allow the user to connect to the external integration
+							// Or choose an existing connection
+							// The connection will set as the new value of the dynamic value
+							// Navigate to external-integration-connections/:valueOwnerId
+							EditorService.navigate(
+								`external-integration-connections/${
+									entity.id
+								}?integrationName=${integrationName}${
+									localOnlyDefault ? '&onlyDefault=true' : ''
+								}`
+							);
+							// props.project.integrationsService.connect(integrationName);
+
+							return;
+						}
+					}
+				}
+
+				if (workingDataType.entity?.name === PrimitiveTypes.Boolean) {
+					_handleLiteralValueChange(
+						!dynamicValue?.value?.value,
+						localOnlyDefault
+					);
+					return;
+				}
+
+				if (dataType.isObject() && !dataType.asType) {
+					// Open the value editor
+					props.project.emit('json-editor-dialog-open', {
+						value: dynamicValue?.value || null,
+						valueOwner: entity,
+						valueType: dynamicValue?.type,
+						draggableObject: props.canvasElement?.draggableObject,
+						project: props.project,
+						onlyDefault: localOnlyDefault
+					});
+					return;
+				}
+
+				setIsEditingValue(true);
+				setPreferedLocalType(type);
+
+				if (props.canvasElement) {
+					props.project.canvas?.unselect(
+						props.canvasElement.draggableObject
+					);
+					props.canvasElement.draggableObject.deletable = false;
+					props.canvasElement.draggableObject.selectable = false;
+				}
+			}}
+			onDelete={(dynamicValue, e) => {
+				e.stopPropagation();
+
+				_handleLiteralValueDelete(dynamicValue);
+			}}
+		/>
+	);
+
+	return <>{props.children(dynamicValueContent)}</>;
+};
+
+export default DynamicValueEntry;