@elyx-code/editor-ui 0.0.2

package/src/components/draggable-entity-card/definition-entity/DefinitionEntityIcon.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+	BuiltInBaseEntityState,
+	DefinitionEntityState,
+	PrimitiveEntityState,
+} from '@elyx-code/project-logic-tree';
+import { EntityTypeIconSize } from '../../../services/editor/icons';
+import EntityIcon from '../../entity-icon/EntityIcon';
+import { CanvasEntityElement } from '../../../services/editor/CanvasElement';
+import { EditorService } from '../../../services/editor';
+
+interface IDefinitionEntityIconProps {
+	entity: DefinitionEntityState | BuiltInBaseEntityState | PrimitiveEntityState;
+	size?: EntityTypeIconSize;
+	project?: EditorService;
+	canvasElement?: CanvasEntityElement;
+}
+
+const DefinitionEntityIcon: React.FC<IDefinitionEntityIconProps> = ({
+	entity,
+	size = 'medium',
+	project,
+	canvasElement,
+}) => {
+	return (
+		<EntityIcon
+			entity={entity}
+			size={size}
+			className={`definition-entity-icon definition-entity-icon-${size}`}
+			project={project}
+			parentCanvasObject={canvasElement?.draggableObject}
+		/>
+	);
+};
+
+export default DefinitionEntityIcon;

package/src/components/draggable-entity-card/definition-entity/DefinitionEntityProperty.tsx

@@ -0,0 +1,478 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import '../draggable-entity-card.css';
+import {
+	getCanvasEntityDOMId,
+	getCanvasEntityDraggableContainerDOMId,
+	safeResolveEntityName
+} from '../../../services/editor/ui';
+import Button from '../../../lib/button/Button';
+import { Canvas } from '../../../lib/canvas';
+import {
+	DefinitionEntityState,
+	EntityType,
+	getParentCanvasEntity,
+	PropertyState,
+	CanvasEntityDisabledReason,
+	ChangeSet,
+	lowercaseFirstLetter,
+	READABLE_ENTITY_TYPES,
+	ProjectState,
+	StateMutationAction
+} from '@elyx-code/project-logic-tree';
+import DataTypeIcon from '../DataTypeIcon';
+import { EditorService } from '../../../services/editor';
+import CanvasPopupBaseComponent from '../../../lib/popup/CanvasPopupBaseComponent';
+import CanvasPopup, {
+	useCanvasPopup
+} from '../../../services/editor/CanvasPopup';
+import CanvasDropdownMenuCard from '../../../lib/dropdown/CanvasDropdownMenuCard';
+import LogicErrorIconMenu from '../logic-error/LogicErrorIconMenu';
+import ImplementEntityIcon from '../implement-entity-icon/ImplementEntityIcon';
+import { resolveEntityDataTypeLabel } from '@elyx-code/project-logic-tree';
+import { CanvasEntityElement } from '../../../services/editor/CanvasElement';
+import DynamicValueEntry from '../../dynamic-value/DynamicValueEntry';
+import EntityLockedIconMenu from '../entity-locked-icon/EntityLockedIcon';
+import { popupNotification } from '../../../popup-notification';
+
+interface IDefinitionEntityPropertyProps {
+	canvasElement: CanvasEntityElement;
+	property: PropertyState;
+	entity: DefinitionEntityState;
+	project: EditorService;
+	parentDisabledReasons: CanvasEntityDisabledReason[];
+}
+
+export default function DefinitionEntityProperty(
+	props: IDefinitionEntityPropertyProps
+) {
+	// Sometimes a property can be rendered in two places,
+	// Once in the entity that declares them, and again at any entity that extends or implements the declaring entity
+	// When this happens we create problems with the DOM id, so we need to make sure that the id is unique
+	// We do this by checking if the parent entity is the same as the entity that declares the property
+	// Then pre-pend the entity id to the property id
+	const ownDOMId =
+		'entity--' +
+		props.entity.id +
+		'--' +
+		getCanvasEntityDOMId(props.property);
+
+	const useForceUpdate = () => {
+		const [value, setValue] = useState(0);
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	const implementationRequired = !!props.property.implements.some(
+		(impl) =>
+			impl.required &&
+			!(props.property.parent as DefinitionEntityState)
+				.getAllPropertiesImplements()
+				?.some((im) => im?.id === impl.id)
+	);
+
+	const deleteDisabled =
+		implementationRequired ||
+		props.property.isExtendedProperty ||
+		!props.property.deletable;
+
+	const memoizedCanvasPopupBody = useCallback(
+		(popup: CanvasPopup) => (
+			<CanvasPopupBaseComponent
+				id={
+					'canvas-property-entity-card-menu-button--' +
+					ownDOMId +
+					'--popup--body'
+				}
+			>
+				<CanvasDropdownMenuCard
+					options={[
+						{
+							project: props.project,
+							onClick: async () => {
+								await props.project.remove(props.property.id);
+							},
+							label: 'Delete',
+							color: 'error',
+							iconEnd: 'fa-solid fa-trash-can',
+							disabled: deleteDisabled,
+							tooltip: (() => {
+								if (implementationRequired) {
+									return 'Cannot delete this property because it implements a required base property';
+								}
+
+								if (props.property.isExtendedProperty) {
+									return 'Cannot delete this property because it represents an extended base property. Delete the base property instead';
+								}
+
+								if (!props.property.deletable) {
+									return 'This loop cannot be deleted. Because the system need to refer to it over time.';
+								}
+
+								return 'Forever delete this property';
+							})(),
+							parentCanvasObject: popup.self,
+							id: 'canvas--property--' + ownDOMId + '--delete'
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								props.project?.canvas?.unselectAll();
+
+								EditorService.navigate(
+									`${props.project?.editorBasePath}/entity/${EntityType.Property}/${props.property.id}`
+								);
+							},
+							label: 'Edit',
+							iconEnd: 'fa-solid fa-pencil',
+							disabled: props.property.isExtendedProperty,
+							tooltip: (() => {
+								if (props.property.isExtendedProperty) {
+									return 'Cannot edit this property because it represents an extended base property. Edit the base property instead';
+								}
+
+								if (!props.property.editable) {
+									return 'This property has been locked and can no longer be edited';
+								}
+
+								return 'Edit this property';
+							})(),
+							parentCanvasObject: popup.self,
+							id: 'canvas--property--' + ownDOMId + '--edit'
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								const changeSet =
+									props.project.logic.addChangeSet(
+										new ChangeSet(
+											props.project.logic,
+											ProjectState.sessionAuthor,
+											new Date().toISOString(),
+											props.property,
+											false,
+											StateMutationAction.RecalculateProperty
+										)
+									);
+
+								props.property.afterAllChildrenInitialized(
+									changeSet
+								);
+
+								props.project.renderAndCloseChangeSet(
+									changeSet
+								);
+							},
+							label: 'Recalculate',
+							color: 'warning',
+							// Bug icon
+							iconEnd: 'fa-solid fa-bug',
+							disabled: false,
+							// Lower case the first letter of the resolved readable name
+							tooltip:
+								'Recalculate the state of this ' +
+								lowercaseFirstLetter(
+									READABLE_ENTITY_TYPES[props.property.type]
+										.shortSingular
+								),
+							parentCanvasObject: popup.self,
+							id:
+								'canvas--' +
+								props.property.type +
+								'-card--' +
+								props.property.id +
+								'--recalculate'
+						},
+						// If it is extended, navigate to base property in the canvas
+						...(props.property.isExtendedProperty
+							? [
+									{
+										project: props.project,
+										onClick: async () => {
+											const parentDefinitionEntity =
+												getParentCanvasEntity(
+													props.property.extends
+												) as DefinitionEntityState;
+
+											const objectId =
+												getCanvasEntityDraggableContainerDOMId(
+													parentDefinitionEntity
+												);
+
+											props.project.canvas?.scrollToObjectById(
+												objectId
+											);
+										},
+										label: 'Navigate to base property',
+										iconEnd: 'fa-solid fa-arrow-right',
+										tooltip:
+											'Navigate in the canvas to the base property that this property represents',
+										parentCanvasObject: popup.self,
+										id:
+											'canvas--property--' +
+											ownDOMId +
+											'--navigate-to-base'
+									}
+								]
+							: []),
+						...(deleteDisabled
+							? [
+									{
+										project: props.project,
+										onClick: async () => {
+											await props.project.remove(
+												props.property.id
+											);
+										},
+										label: 'Force delete',
+										color: 'error',
+										iconEnd: 'fa-solid fa-trash-can',
+										tooltip: 'Forever delete this property',
+										parentCanvasObject: popup.self,
+										id:
+											'canvas--property--' +
+											ownDOMId +
+											'--force-delete'
+									}
+								]
+							: ([] as any)),
+						{
+							project: props.project,
+							onClick: async () => {
+								navigator.clipboard.writeText(
+									props.property.id
+								);
+								popupNotification({
+									text: `Copied ID: ${props.property.id}`,
+									color: 'success'
+								});
+							},
+							label: 'Copy ID',
+							color: 'warning',
+							iconEnd: 'fa-solid fa-bug',
+							tooltip:
+								'Copy this node ID to clipboard for debugging',
+							parentCanvasObject: popup.self,
+							id: 'copy-id-' + props.property.id
+						},
+						{
+							project: props.project,
+							onClick: async () => {
+								await props.project.recalculateValidateEntity(
+									props.property
+								);
+								popupNotification({
+									text: `Re-validated node successfully`,
+									color: 'success'
+								});
+							},
+							label: 'Re-validate',
+							color: 'warning',
+							iconEnd: 'fa-solid fa-bug',
+							tooltip:
+								"Re-validate this node's state and its errors",
+							parentCanvasObject: popup.self,
+							id: 're-validate-' + props.property.id
+						}
+					]}
+				/>
+			</CanvasPopupBaseComponent>
+		),
+		[props.property, deleteDisabled, props.project]
+	);
+
+	const canvasPopup = useCanvasPopup(
+		{
+			editor: props.project,
+			id:
+				'canvas-property-entity-card-menu-button--' +
+				ownDOMId +
+				'--popup',
+			anchorQuerySelector:
+				'#canvas-property-card-menu-button--' + ownDOMId,
+			arrowClasses: ['dropdown-menu-card-arrow'],
+			parentCanvasObject: props.canvasElement.draggableObject,
+			arrowContainerSelector:
+				'#canvas-property-entity-card-menu-button--' +
+				ownDOMId +
+				'--popup--body'
+		},
+		memoizedCanvasPopupBody,
+		[props.property, deleteDisabled, props.project]
+	).onBeforeShow(() => !suggestion);
+
+	const property = props.property;
+
+	useEffect(() => {
+		/*
+			Subscribe to all project entities that, when changed, should trigger an update to this component
+			Subscriptions channels are the 'id' of an entity
+		*/
+		props.project.on(props.property.id, () => {
+			forceUpdate();
+		});
+
+		props.project.on('value-written', (payload) => {
+			if (
+				payload?.owner?.id === props.property?.id ||
+				props.property?.implements.find(
+					(impl) => impl.id === payload?.owner?.id
+				)
+			) {
+				forceUpdate();
+			}
+		});
+
+		props.project.on('value-removed', (payload) => {
+			if (
+				payload?.owner?.id === props.property?.id ||
+				props.property?.implements.find(
+					(impl) => impl.id === payload?.owner?.id
+				)
+			) {
+				forceUpdate();
+			}
+		});
+	}, []);
+
+	const disabled = !!props.parentDisabledReasons.length || false;
+
+	// If it is a suggested entity, and the parent isn't already marked as 'suggested', we add the 'suggestion' class
+	const suggestion =
+		property.suggestion &&
+		!(property.parent as any).suggestion &&
+		!disabled;
+
+	return (
+		<li
+			className={`canvas-draggable-card__property-row canvas-draggable-card__standard-property ${
+				disabled ? 'disabled' : ''
+			}`}
+			id={ownDOMId}
+			{...{
+				[Canvas.OBJ_ATTR_NAME]: ownDOMId
+			}}
+		>
+			<DynamicValueEntry
+				entity={props.property}
+				project={props.project}
+				canvasElement={props.canvasElement}
+				parentDisabledReasons={props.parentDisabledReasons}
+			>
+				{(extraContent) => (
+					<>
+						<div
+							className={`canvas-draggable-card__property__left-block ${
+								suggestion ? 'suggestion' : ''
+							}`}
+						>
+							<DataTypeIcon
+								entity={property}
+								color="dark-grey"
+								parentDisabledReasons={
+									props.parentDisabledReasons
+								}
+								project={props.project}
+								parentCanvasObject={
+									props.canvasElement?.draggableObject
+								}
+							/>
+
+							<span className="canvas-draggable-card__property__labels-group">
+								<span
+									style={{
+										display: 'flex',
+										alignItems: 'center',
+										gap: '4px'
+									}}
+								>
+									<span className="canvas-draggable-card__property__name">
+										{safeResolveEntityName(
+											property,
+											props.project.logic
+										)}
+									</span>
+									{props.property.isExtendedProperty && (
+										<p className="canvas-draggable-card__property__type">
+											{' - Extension'}
+										</p>
+									)}
+								</span>
+								{property.static ? (
+									extraContent
+								) : (
+									<p className="canvas-draggable-card__property__type">
+										{resolveEntityDataTypeLabel(property)}
+									</p>
+								)}
+							</span>
+						</div>
+
+						<span
+							style={{
+								display: 'flex',
+								alignItems: 'center',
+								gap: '6px'
+							}}
+						>
+							{!suggestion && !disabled && (
+								<div className="canvas-draggable-card__property-row__menu-button">
+									{!suggestion && (
+										<Button
+											variant="text"
+											color="grey"
+											iconEnd="fa-solid fa-ellipsis-v"
+											size="small"
+											ref={canvasPopup.anchorRef}
+											className="canvas-small-entity-card-menu-button"
+											id={
+												'canvas-property-card-menu-button--' +
+												ownDOMId
+											}
+											onClick={(e: any) => {
+												e.stopPropagation();
+												canvasPopup?.toggle();
+											}}
+											onDoubleClick={(
+												e: React.MouseEvent<HTMLButtonElement>
+											) => {
+												e.stopPropagation();
+												EditorService.navigate(
+													`${props.project?.editorBasePath}/entity/${EntityType.Property}/${props.property.id}`
+												);
+											}}
+										/>
+									)}
+								</div>
+							)}
+							<LogicErrorIconMenu
+								entity={property}
+								project={props.project}
+								canvasElement={props.canvasElement}
+								style={{ marginRight: '8px' }}
+								parentDisabledReasons={
+									props.parentDisabledReasons
+								}
+							/>
+							<EntityLockedIconMenu
+								entity={property}
+								project={props.project}
+								canvasElement={props.canvasElement}
+								parentDisabledReasons={
+									props.parentDisabledReasons
+								}
+							/>
+							<ImplementEntityIcon
+								entity={property}
+								draggableObject={
+									props.canvasElement.draggableObject
+								}
+								project={props.project}
+								style={{ marginRight: '8px' }}
+							/>
+						</span>
+					</>
+				)}
+			</DynamicValueEntry>
+		</li>
+	);
+}

package/src/components/draggable-entity-card/definition-entity/DynamicFooterActions.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { DraggableObject } from '../../../lib/canvas';
+import {
+	CanvasEntityDisabledReason,
+	checkHasBaseEntity,
+	DefinitionEntityState,
+} from '@elyx-code/project-logic-tree';
+import { EditorService } from '../../../services/editor';
+import { BaseEntityNames } from '@elyx-code/project-logic-tree';
+import DatabaseAction from './actions/persisted-entity/DatabaseFooterAction';
+import RestablishConnectionFooterAction from './actions/external-integration-connection/RestablishConnectionFooterAction';
+import ExportCredentialsFooterAction from './actions/external-integration-connection/ExportCredentialsFooterAction';
+import GoogleDriveFilePickerAPIFooterAction from './actions/google-drive/GoogleDriveFilePickerAPIFooterAction';
+
+interface IDynamicFooterActionsProps {
+	draggableObject: DraggableObject;
+	entity: DefinitionEntityState;
+	project: EditorService;
+	parentDisabledReasons: CanvasEntityDisabledReason[];
+}
+
+function DynamicFooterActions(props: IDynamicFooterActionsProps) {
+	const generateEntityActions = () => {
+		const entity = props.entity;
+
+		const actions: JSX.Element[] = [];
+
+		if (checkHasBaseEntity(entity, BaseEntityNames.HTTP_ENDPOINT)) {
+			// TODO: add HTTP endpoint specific actions
+		}
+
+		if (checkHasBaseEntity(entity, BaseEntityNames.PERSISTED_ENTITY)) {
+			actions.push(
+				<DatabaseAction
+					key='persisted-entity-database-action'
+					entity={entity}
+					project={props.project}
+					draggableObject={props.draggableObject}
+					parentDisabledReasons={props.parentDisabledReasons}
+				/>,
+			);
+		}
+
+		if (checkHasBaseEntity(entity, BaseEntityNames.CRON_JOB)) {
+			// TODO: add Cron Job specific actions
+		}
+
+		if (checkHasBaseEntity(entity, BaseEntityNames.RELATIONAL_DATABASE)) {
+			// TODO: add Relational Database specific actions (probably similar to the ones for Persisted Entity, but with some differences)
+		}
+
+		if (
+			checkHasBaseEntity(
+				entity,
+				BaseEntityNames.EXTERNAL_INTEGRATION_CONNECTION,
+			)
+		) {
+			actions.push(
+				<ExportCredentialsFooterAction
+					key='export-credentials-action'
+					entity={entity}
+					project={props.project}
+					draggableObject={props.draggableObject}
+					parentDisabledReasons={props.parentDisabledReasons}
+				/>,
+				<RestablishConnectionFooterAction
+					key='restablish-connection-action'
+					entity={entity}
+					project={props.project}
+					draggableObject={props.draggableObject}
+					parentDisabledReasons={props.parentDisabledReasons}
+				/>,
+			);
+		}
+
+		if (
+			checkHasBaseEntity(entity, BaseEntityNames.GOOGLE_DRIVE_AUTH_CONNECTION)
+		) {
+			actions.push(
+				<GoogleDriveFilePickerAPIFooterAction
+					key='google-drive-file-picker-api-footer-action'
+					entity={entity}
+					project={props.project}
+					draggableObject={props.draggableObject}
+					parentDisabledReasons={props.parentDisabledReasons}
+				/>,
+			);
+		}
+
+		return actions;
+	};
+
+	return (
+		<div
+			className={
+				'canvas-draggable-card__footer' +
+				(!!props.parentDisabledReasons.length ? ' disabled' : '')
+			}
+			style={{
+				display: 'flex',
+				gap: 6,
+				alignItems: 'flex-end',
+				justifyContent: 'flex-end',
+				padding: '0px 5px',
+			}}
+		>
+			{generateEntityActions()}
+		</div>
+	);
+}
+
+export default DynamicFooterActions;