@elyx-code/editor-ui 0.0.2

package/src/components/dialogs/function-declaration/FunctionDeclaration.tsx

@@ -0,0 +1,926 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+	ChangeSet,
+	EntityId,
+	EntityType,
+	ProjectState,
+	resolveEntityName,
+	FunctionDeclarationState,
+	ActionDescriptorState,
+	getIsInteractive,
+	toCamelCase,
+	translateLogicErrorCode,
+	EntityError,
+	functionDeclarationValidation,
+	lowercaseFirstLetter,
+	READABLE_ENTITY_TYPES,
+	toSentenceCase,
+	DataTypeState,
+	ChangeSetEntityChangeType,
+	StateMutationAction,
+	getRecursiveParentsIds,
+	translateLogicErrorCodeShort
+} from '@elyx-code/project-logic-tree';
+import {
+	Alert,
+	Autocomplete,
+	TextField,
+	Tooltip as MuiTooltip,
+	Box,
+	Stack,
+	Collapse
+} from '@mui/material';
+import { EditorService } from '../../../services/editor';
+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 EntityDialogSectionHeader from '../../EntityDialogSectionHeader';
+import { Logger } from '@elyx-code/common-ts-utils';
+import { debounce } from '../../../utils';
+import DataTypeBuilder, {
+	AllowedDataTypeListTypes,
+	ILiteralValueOption
+} from '../../data-type/DataTypeBuilder';
+import { DataTypeBuilderOption } from '../../../services/editor/utils';
+import DataTypeIcon from '../../draggable-entity-card/DataTypeIcon';
+
+export interface IFunctionDeclarationProps {
+	project: EditorService;
+	entity?: FunctionDeclarationState;
+	onClose?: (e: any) => void;
+}
+
+export enum FunctionDeclarationError {
+	NameRequired = 'name-required',
+	IncompleteDataType = 'incomplete-data-type'
+}
+
+// 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 resolveDataTypeOptionConfigForVariableDeclaration(
+	option: DataTypeBuilderOption | ILiteralValueOption,
+	input: FunctionDeclarationState
+): {
+	disabled: boolean;
+	tooltip: React.ReactNode;
+} {
+	return {
+		disabled: false,
+		tooltip: null
+	};
+}
+
+export function resolveDataTypeAsTypeConfigForVariableDeclaration(
+	input: FunctionDeclarationState
+): {
+	disabled: boolean;
+	tooltip: React.ReactNode;
+} {
+	return {
+		disabled: false,
+		tooltip: null
+	};
+}
+
+export function resolveDataTypeLikeConfigForVariableDeclaration(
+	input: FunctionDeclarationState
+): {
+	disabled: boolean;
+	tooltip: React.ReactNode;
+} {
+	return {
+		disabled: false,
+		tooltip: null
+	};
+}
+
+export function resolveDataTypeAsListConfigForVariableDeclaration(
+	input: FunctionDeclarationState
+): {
+	allowed: AllowedDataTypeListTypes;
+	tooltip: React.ReactNode;
+} {
+	return {
+		allowed: AllowedDataTypeListTypes.All,
+		tooltip: null
+	};
+}
+
+export function fromFunctionDeclarationErrorToReadableMessage(
+	error: FunctionDeclarationError | string
+): string {
+	switch (error) {
+		case FunctionDeclarationError.NameRequired:
+			return 'Name is required';
+		case FunctionDeclarationError.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 calculateFunctionDeclarationCreationFormErrors(
+	entity: FunctionDeclarationState
+): (FunctionDeclarationError | string)[] {
+	const errors: (FunctionDeclarationError | string)[] = [];
+
+	if (!entity.name) {
+		errors.push(FunctionDeclarationError.NameRequired);
+	}
+
+	if (!!entity.dataType) {
+		if (!entity.dataType.isResolved) {
+			errors.push(FunctionDeclarationError.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;
+}
+
+const FunctionDeclaration: React.FC<IFunctionDeclarationProps> = ({
+	project,
+	entity: _entity,
+	onClose
+}) => {
+	const [updateKey, setUpdateKey] = useState(0);
+	const { entityId } = useParams<{
+		entityType: EntityType;
+		entityId: EntityId;
+	}>();
+
+	const entity: FunctionDeclarationState | null =
+		_entity ||
+		(project?.logic?.get(entityId) as FunctionDeclarationState | null) ||
+		null;
+
+	const [dataType, _setDataType] = useState<DataTypeState | null>(
+		entity?.dataType || null
+	);
+	const [entityName, setEntityName] = useState<string>(entity.name);
+	const [entityDescription, setEntityDescription] = useState<string>(
+		entity.description
+	);
+
+	const [implementsValue, setImplementsValue] =
+		useState<ActionDescriptorState | null>(entity.implements || null);
+
+	const [metadataSectionOpen, setMetadataSectionOpen] = useState(true);
+	const [baseFunctionalitySectionOpen, setBaseFunctionalitySectionOpen] =
+		useState(false);
+	const [dataTypeSectionOpen, setDataTypeSectionOpen] = useState(false);
+
+	const debouncedOnChangeName = useCallback(
+		debounce(
+			(value: string) => {
+				const changeSet = project?.logic?.addChangeSet(
+					new ChangeSet(
+						project?.logic,
+						ProjectState.sessionAuthor,
+						new Date().toISOString(),
+						entity,
+						false,
+						StateMutationAction.RenameFuncDecl
+					)
+				);
+
+				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.ChangeFuncDeclDescription
+					)
+				);
+
+				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<(FunctionDeclarationError | string)[]>(
+		calculateFunctionDeclarationCreationFormErrors(entity)
+	);
+	const [nameErrors, setNameErrors] = useState<string[]>([]);
+	const [entityNameErrors, setEntityNameErrors] = useState<EntityError[]>(
+		functionDeclarationValidation.validateFunctionDeclarationName(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 =
+			calculateFunctionDeclarationCreationFormErrors(entity);
+		setErrors(newErrors);
+		project.emit(entity.parent.id, {});
+	}, [entityName, updateKey]);
+
+	const implementsOptions = useMemo((): ActionDescriptorState[] => {
+		if (entity.parent.type === EntityType.DefinitionEntity) {
+			const options = entity.parent.implements.flatMap((imp) => {
+				if (imp.type === EntityType.DefinitionEntity) {
+					return imp.abstractMethods;
+				} else if (imp.type === EntityType.BuiltInBaseEntity) {
+					return imp.abstractMethods;
+				}
+
+				return [];
+			});
+
+			return options;
+		}
+
+		return [];
+	}, [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 trigger"
+								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="Trigger name"
+										variant="outlined"
+										style={{ width: '50%' }}
+										disabled={!entity.editable}
+										size="small"
+										value={entityName || ''}
+										onChange={(e) => {
+											Logger.log(
+												'Name change: ',
+												e.target.value
+											);
+											const validationResult =
+												functionDeclarationValidation.validateFunctionDeclarationName(
+													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="Trigger 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>
+
+						{((entity.parent.type === EntityType.DefinitionEntity &&
+							entity.parent.implements.length) ||
+							entity.parent.type === EntityType.Loop) && (
+							<>
+								<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 trigger to functionality or a template to follow"
+										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"
+												options={implementsOptions}
+												disabled={!entity.editable}
+												getOptionLabel={(option) =>
+													option.name
+												}
+												isOptionEqualToValue={(
+													option,
+													value
+												) => option.id === value.id}
+												disableClearable={
+													(entity.parent.type ===
+														EntityType.DefinitionEntity &&
+														!getIsInteractive(
+															entity.parent
+														)) ||
+													entity.parent.type ===
+														EntityType.Loop
+												}
+												value={implementsValue}
+												getOptionDisabled={(option) => {
+													if (
+														entity.parent.type ===
+														EntityType.DefinitionEntity
+													) {
+														const alreadyImplemented =
+															!!entity.parent.methods.find(
+																(m) =>
+																	m.id !==
+																		entity.id &&
+																	m.implements
+																		?.id ===
+																		option.id
+															);
+
+														return alreadyImplemented;
+													}
+
+													return false;
+												}}
+												renderOption={(
+													props,
+													option,
+													{ selected }
+												) => {
+													const {
+														key,
+														...optionProps
+													} = props;
+													return (
+														<MuiTooltip
+															key={key}
+															title={(() => {
+																if (
+																	entity
+																		.parent
+																		.type ===
+																	EntityType.DefinitionEntity
+																) {
+																	const alreadyImplemented =
+																		!!entity.parent.methods.find(
+																			(
+																				m
+																			) =>
+																				m.id !==
+																					entity.id &&
+																				m
+																					.implements
+																					?.id ===
+																					option.id
+																		);
+
+																	return alreadyImplemented;
+																}
+
+																return false;
+															})()}
+															placement="bottom"
+															arrow
+															enterDelay={
+																(() => {
+																	if (
+																		entity
+																			.parent
+																			.type ===
+																		EntityType.DefinitionEntity
+																	) {
+																		const alreadyImplemented =
+																			!!entity.parent.methods.find(
+																				(
+																					m
+																				) =>
+																					m.id !==
+																						entity.id &&
+																					m
+																						.implements
+																						?.id ===
+																						option.id
+																			);
+
+																		return alreadyImplemented;
+																	}
+
+																	return 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
+																		}
+																	/>
+																	{resolveEntityName(
+																		option,
+																		project.logic
+																	)}
+																</Stack>
+															</Box>
+														</MuiTooltip>
+													);
+												}}
+												onChange={(e, newValue) => {
+													const changeSet =
+														project.logic.addChangeSet(
+															new ChangeSet(
+																project.logic,
+																ProjectState.sessionAuthor,
+																new Date().toISOString(),
+																entity,
+																false,
+																StateMutationAction.SetFuncDeclBaseImplementation
+															)
+														);
+
+													entity.setImplements(
+														newValue,
+														changeSet
+													);
+													setImplementsValue(
+														newValue
+													);
+
+													project.renderAndCloseChangeSet(
+														changeSet
+													);
+												}}
+												renderInput={(params) => (
+													<TextField
+														{...params}
+														label="Implements"
+														variant="outlined"
+														size="small"
+													/>
+												)}
+											/>
+										</div>
+									</Collapse>
+								</section>
+							</>
+						)}
+
+						{entity.parent.type !== EntityType.Loop && (
+							<>
+								<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="Output Data type"
+										subtitle="Select the type of data that this function declaration returns"
+										hideShowSuffix="the data type section"
+										open={dataTypeSectionOpen}
+										onToggle={() =>
+											setDataTypeSectionOpen(
+												!dataTypeSectionOpen
+											)
+										}
+										headerStartIcon={
+											<DataTypeIcon
+												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
+														?.dataType
+														? [
+																entity
+																	.implements
+																	.dataType
+															]
+														: []
+												}
+												onChangeSet={() => {
+													const newChangeSet =
+														project.logic.addChangeSet(
+															new ChangeSet(
+																project.logic,
+																ProjectState.sessionAuthor,
+																new Date().toISOString(),
+																entity,
+																false,
+																StateMutationAction.ChangeFuncDeclOutputDataType
+															)
+														);
+
+													return newChangeSet;
+												}}
+												onChange={(
+													newDataTypeEntity,
+													changeSet
+												) => {
+													setDataType(
+														newDataTypeEntity,
+														changeSet
+													);
+												}}
+												lists={
+													resolveDataTypeAsListConfigForVariableDeclaration(
+														entity
+													).allowed
+												}
+												getOptionDisabled={(option) =>
+													resolveDataTypeOptionConfigForVariableDeclaration(
+														option,
+														entity
+													).disabled
+												}
+												getListDisabledTooltip={(
+													option
+												) =>
+													resolveDataTypeAsListConfigForVariableDeclaration(
+														entity
+													).tooltip
+												}
+												getOptionTooltip={(option) =>
+													resolveDataTypeOptionConfigForVariableDeclaration(
+														option,
+														entity
+													).tooltip
+												}
+												disallowAsType={
+													resolveDataTypeAsTypeConfigForVariableDeclaration(
+														entity
+													).disabled
+												}
+												getAsTypeDisabledTooltip={() =>
+													resolveDataTypeAsTypeConfigForVariableDeclaration(
+														entity
+													).tooltip
+												}
+												disallowLike={
+													resolveDataTypeLikeConfigForVariableDeclaration(
+														entity
+													).disabled
+												}
+												getLikeDisabledTooltip={() =>
+													resolveDataTypeLikeConfigForVariableDeclaration(
+														entity
+													).tooltip
+												}
+											/>
+										</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'
+											}}
+										>
+											{fromFunctionDeclarationErrorToReadableMessage(
+												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,
+														}}
+													>
+														{fromFunctionDeclarationErrorToReadableMessage(
+															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="function-declaration--done-button"
+							onClick={(e: any) => {
+								onClose?.(e);
+							}}
+							color="primary"
+							disabled={errors.length > 0}
+						>
+							Done
+						</Button>
+						<Tooltip
+							anchorQuerySelector="#function-declaration--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 FunctionDeclaration;