@elyx-code/editor-ui 0.0.2

package/src/components/dialogs/ExternalIntegrationConnections.tsx

@@ -0,0 +1,565 @@
+import React, { useState } from 'react';
+import {
+	EntityType,
+	getParentCanvasEntity,
+	EntityWithValueState,
+	resolveEntityDataTypeLabel,
+	resolveEntityName,
+	READABLE_ENTITY_TYPES,
+	EntityId,
+	checkHasBaseEntity,
+	ExternalIntegrationNames,
+	BaseEntityNames,
+	BuiltInBaseEntityState,
+	findNextAvailableName,
+	capitalizeFirstLetter,
+	ChangeSet,
+	ProjectState,
+	BUILT_IN_BASE_ENTITY_IDS,
+	LiteralValueState,
+	createStateFromTypeAndSubscribe,
+	CANVAS_VERTICAL_BUFFER_BETWEEN_CARDS,
+	calculateCardSize,
+	CANVAS_CARD_WIDTH,
+	IValueStoreClient,
+	ChangeSetEntityChangeType,
+	IDynamicValue,
+	getBaseBuiltInNameFromIntegrationName,
+	getIntegrationIdFromDefinitionEntity,
+	getFirstBaseEntityWithOwnBase,
+	toSentenceCase,
+	TERMINATION_TYPES,
+	PrimitiveTypes,
+	lowercaseFirstLetter,
+	StateMutationAction,
+} from '@elyx-code/project-logic-tree';
+import { EditorService } from '../../services/editor';
+import { useParams } from 'react-router-dom';
+import DialogLoader from '../DialogLoader';
+import { SingleValueAsTypeAutocomplete } from '../dynamic-value/DynamicValueEntry';
+import {
+	getCanvasEntityDOMId,
+	getCanvasEntityDraggableContainerDOMId,
+} from '../../services/editor/ui';
+import {
+	handleValueAsTypeChange,
+	resolveValue,
+} from '../../services/execution/value-resolution';
+import Button from '../../lib/button/Button';
+import { popupNotification } from '../../popup-notification';
+import { Logger } from '@elyx-code/common-ts-utils';
+
+interface IExternalIntegrationConnectionsDialogProps {
+	onClose: (event: React.MouseEvent) => void;
+	project: EditorService;
+	ready: boolean;
+}
+
+const ExternalIntegrationConnectionsDialog: React.FC<
+	IExternalIntegrationConnectionsDialogProps
+> = ({ onClose, project, ready }) => {
+	const { valueOwnerId } = useParams<{
+		valueOwnerId: EntityId;
+	}>();
+
+	// Select ?integrationName=${integrationName} from the URL
+	const integrationName = new URLSearchParams(window.location.search).get(
+		'integrationName',
+	) as ExternalIntegrationNames | null;
+
+	const onlyDefault = new URLSearchParams(window.location.search).get(
+		'onlyDefault',
+	);
+
+	if (!valueOwnerId) {
+		throw new Error(
+			`The valueOwnerId param is required in the URL path to render this dialog.`,
+		);
+	}
+
+	if (!ready) {
+		return (
+			<DialogLoader
+				onClose={onClose}
+				title='External Integration Connections'
+				subtitle='Select an external integration connection or add a new one.'
+			/>
+		);
+	}
+
+	const valueOwner: EntityWithValueState | null =
+		(project?.logic?.get(valueOwnerId) as EntityWithValueState | null) || null;
+
+	if (!valueOwner) {
+		throw new Error(
+			`The valueOwner with id ${valueOwnerId} does not exist in the project.`,
+		);
+	}
+
+	const [dynamicValue, setDynamicValue] = useState<IDynamicValue | null>(
+		resolveValue(valueOwner, project),
+	);
+
+	// Based on the entity type, we resolve the header text
+	const resolveHeaderText = () => {
+		return resolveEntityName(valueOwner, valueOwner.project);
+	};
+
+	const valueOwnerCanvasParentEntity = getParentCanvasEntity(valueOwner);
+
+	const resolveSubHeaderText = () => {
+		let entityTypeDescription = '';
+
+		const parentEntityName = resolveEntityName(
+			valueOwnerCanvasParentEntity,
+			valueOwner.project,
+		);
+
+		const parentEntityDescriptor =
+			valueOwner.id !== valueOwnerCanvasParentEntity.id
+				? ' of ' +
+					parentEntityName +
+					' ' +
+					lowercaseFirstLetter(
+						READABLE_ENTITY_TYPES[valueOwnerCanvasParentEntity.type].singular,
+					)
+				: '';
+
+		switch (valueOwner.type) {
+			case EntityType.VariableDeclaration:
+				entityTypeDescription = 'Variable';
+				break;
+			case EntityType.ArgumentDeclaration:
+				entityTypeDescription = 'Input';
+				break;
+			case EntityType.InputMap: {
+				entityTypeDescription = 'Input';
+
+				if (TERMINATION_TYPES.includes(valueOwnerCanvasParentEntity.type)) {
+					entityTypeDescription = 'Output';
+				}
+				break;
+			}
+			case EntityType.OutputMap:
+				entityTypeDescription = 'Output';
+				break;
+		}
+
+		return entityTypeDescription + parentEntityDescriptor;
+	};
+
+	let resolvedIntegrationName = integrationName;
+
+	if (!resolvedIntegrationName) {
+		const dataTypeEntity = valueOwner.getDataType(null)?.entity || null;
+
+		if (
+			!dataTypeEntity ||
+			(dataTypeEntity.type !== EntityType.BuiltInBaseEntity &&
+				dataTypeEntity.type !== EntityType.DefinitionEntity)
+		) {
+			throw new Error(
+				`The 'integration' name could not be resolved, it must be provided in the URL as a query parameter 'integrationName'. Or .`,
+			);
+		}
+
+		const integrationName: ExternalIntegrationNames | null =
+			getIntegrationIdFromDefinitionEntity(dataTypeEntity);
+
+		resolvedIntegrationName = integrationName;
+	}
+
+	// If there is an integrationName
+	// Find all the definition entities that implement the connection of the 'integrationName' integration
+	if (!integrationName) {
+		popupNotification({
+			text: `The integration name could not be resolved.`,
+			color: 'error',
+		});
+
+		return null;
+	}
+
+	const options = project.logic.entities.filter((entity) => {
+		const builtInBaseEntityId =
+			getBaseBuiltInNameFromIntegrationName(integrationName);
+
+		return checkHasBaseEntity(entity, builtInBaseEntityId);
+	});
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				height: '100%',
+				gap: '4px',
+				padding: '40px',
+			}}
+		>
+			{/* Header */}
+			<span>
+				<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+					<button
+						className='dialog_back_button'
+						onClick={(e) => {
+							onClose?.(e);
+						}}
+					>
+						<i className='fa-solid fa-arrow-left'></i>
+					</button>
+					<h1 style={{ margin: '0px', fontWeight: 500, fontSize: '28px' }}>
+						{resolveHeaderText()}
+					</h1>
+				</div>
+				<span style={{ display: 'flex', gap: '6px', marginLeft: '42px' }}>
+					<p style={{ margin: '0px', color: 'rgba(0,0,0,0.7)' }}>
+						{resolveSubHeaderText()}
+					</p>
+				</span>
+			</span>
+
+			<div
+				style={{
+					flex: 1,
+					margin: '16px 42px',
+					marginTop: '16px',
+					overflow: 'scroll',
+				}}
+			>
+				<section>
+					<span style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+						<h3
+							style={{
+								display: 'flex',
+								gap: '6px',
+								fontWeight: 'normal',
+								margin: '0px',
+							}}
+						>
+							Value
+						</h3>
+					</span>
+					<p
+						style={{
+							margin: '0px',
+							fontSize: '14px',
+							marginTop: '6px',
+							color: 'rgba(0,0,0,0.54)',
+							marginBottom: '16px',
+						}}
+					>
+						{resolveEntityDataTypeLabel(valueOwner)}
+					</p>
+
+					<SingleValueAsTypeAutocomplete
+						id={
+							getCanvasEntityDOMId(valueOwner) +
+							'--external-integration-connections' +
+							'--value-as-type-single-autocomplete'
+						}
+						project={project}
+						options={options}
+						dynamicValue={dynamicValue}
+						onChange={async (newValue) => {
+							let storage: ChangeSet | IValueStoreClient =
+								project.localTestValues;
+
+							if (onlyDefault) {
+								storage = project.logic.addChangeSet(
+									new ChangeSet(
+										project.logic,
+										ProjectState.sessionAuthor,
+										new Date().toISOString(),
+										valueOwner,
+										false,
+										StateMutationAction.ChangeExternalAccountConnectionUsed,
+									),
+								);
+							}
+
+							const changeSet = handleValueAsTypeChange(
+								newValue,
+								valueOwner,
+								project.logic,
+								storage,
+							);
+
+							setDynamicValue(resolveValue(valueOwner, project));
+
+							if (!!changeSet) {
+								await project.renderAndCloseChangeSet(changeSet);
+							} else {
+								project.emit(valueOwner.id, {});
+							}
+						}}
+						name={resolveEntityName(valueOwner, valueOwner.project)}
+					/>
+
+					<div
+						style={{
+							display: 'flex',
+							width: '100%',
+							height: '100%',
+							flexDirection: 'column',
+							gap: '24px',
+							marginTop: '200px',
+							alignItems: 'center',
+						}}
+					>
+						<h3
+							style={{
+								fontWeight: 'normal',
+								margin: '0px',
+								textAlign: 'center',
+							}}
+						>
+							Or add a new connection
+						</h3>
+						<Button
+							variant='primary'
+							style={{ maxWidth: '100%', width: 'fit-content' }}
+							onClick={(e: any) => {
+								onClose?.(e);
+
+								project.integrationsService.connect(integrationName, {
+									onSuccess: async (connection) => {
+										// Create a new connection entity in the project
+										Logger.log('Connection created successfully:', connection);
+
+										const builtInBaseEntityId =
+											getBaseBuiltInNameFromIntegrationName(integrationName) ||
+											BaseEntityNames.EXTERNAL_INTEGRATION_CONNECTION;
+
+										const builtInBaseEntity = project.logic.getBuiltIn(
+											builtInBaseEntityId,
+										) as BuiltInBaseEntityState;
+
+										if (!builtInBaseEntity) {
+											throw new Error(
+												`The built-in base entity with id ${builtInBaseEntityId} does not exist in the project.`,
+											);
+										}
+
+										const changeSet = project.logic.addChangeSet(
+											new ChangeSet(
+												project.logic,
+												ProjectState.sessionAuthor,
+												new Date().toISOString(),
+												project.logic,
+												false,
+												StateMutationAction.ConnectExternalAccount
+											),
+										);
+
+										const desiredName = toSentenceCase(
+											integrationName + ' account',
+										);
+
+										const name = findNextAvailableName(
+											desiredName,
+											project.logic.entities,
+										);
+
+										const newConnectionEntity = builtInBaseEntity.implement(
+											name,
+											changeSet,
+										);
+
+										if (!newConnectionEntity) {
+											throw new Error(
+												`The new connection entity could not be created.`,
+											);
+										}
+
+										const baseEntity = getFirstBaseEntityWithOwnBase(
+											newConnectionEntity,
+											BaseEntityNames.EXTERNAL_INTEGRATION_CONNECTION,
+										);
+
+										const builtInConnectionPropertyId =
+											BUILT_IN_BASE_ENTITY_IDS['built-in-base-entity'][
+												baseEntity.id as 'BUILT_IN_EXTERNAL_INTEGRATION_CONNECTION_ENTITY'
+											].properties.connectionId.id;
+
+										const connectionIdProperty =
+											newConnectionEntity.properties.find(
+												(property) =>
+													property.implements.find(
+														(impl) => impl.id === builtInConnectionPropertyId,
+													) ||
+													// It could be that this is a specific connection entity, and therefore itself extends the base connection entity
+													property.implements.find(
+														(impl) =>
+															impl.extends?.id === builtInConnectionPropertyId,
+													),
+											);
+
+										let connectionIdLiteralValueInstance =
+											connectionIdProperty?.getDefaultValue();
+
+										if (!connectionIdLiteralValueInstance) {
+											const newLiteralValueTransfer =
+												LiteralValueState.new(changeSet);
+											newLiteralValueTransfer.name = PrimitiveTypes.String;
+											newLiteralValueTransfer.parent =
+												connectionIdProperty.toReference();
+
+											const newLiteralValueInstance =
+												createStateFromTypeAndSubscribe(
+													newLiteralValueTransfer,
+													project.logic,
+												) as LiteralValueState;
+
+											newLiteralValueInstance.hydrateAncestors();
+
+											changeSet.add(
+												newLiteralValueInstance,
+												ChangeSetEntityChangeType.Added,
+											);
+
+											newLiteralValueInstance.addSelfToProject(changeSet);
+											newLiteralValueInstance.initChildren(changeSet);
+
+											connectionIdLiteralValueInstance =
+												newLiteralValueInstance;
+										}
+
+										connectionIdLiteralValueInstance.metaSync(
+											{
+												value: connection.connection_id,
+											},
+											changeSet,
+										);
+
+										const builtInIntegrationPropertyId =
+											BUILT_IN_BASE_ENTITY_IDS['built-in-base-entity'][
+												baseEntity.id as 'BUILT_IN_EXTERNAL_INTEGRATION_CONNECTION_ENTITY'
+											].properties.integration.id;
+
+										const integrationProperty =
+											newConnectionEntity.properties.find(
+												(property) =>
+													property.implements.find(
+														(impl) => impl.id === builtInIntegrationPropertyId,
+													) ||
+													// It could be that this is a specific connection entity, and therefore itself extends the base connection entity
+													property.implements.find(
+														(impl) =>
+															impl.extends?.id === builtInIntegrationPropertyId,
+													),
+											);
+
+										let integrationLiteralValueInstance =
+											integrationProperty?.getDefaultValue();
+
+										if (!integrationLiteralValueInstance) {
+											const newLiteralValueTransfer =
+												LiteralValueState.new(changeSet);
+											newLiteralValueTransfer.name = PrimitiveTypes.String;
+											newLiteralValueTransfer.parent =
+												integrationProperty.toReference();
+
+											const newLiteralValueInstance =
+												createStateFromTypeAndSubscribe(
+													newLiteralValueTransfer,
+													project.logic,
+												) as LiteralValueState;
+
+											newLiteralValueInstance.hydrateAncestors();
+
+											changeSet.add(
+												newLiteralValueInstance,
+												ChangeSetEntityChangeType.Added,
+											);
+
+											newLiteralValueInstance.addSelfToProject(changeSet);
+											newLiteralValueInstance.initChildren(changeSet);
+
+											integrationLiteralValueInstance = newLiteralValueInstance;
+										}
+
+										integrationLiteralValueInstance.metaSync(
+											{
+												value: connection.provider_config_key,
+											},
+											changeSet,
+										);
+
+										let newX = valueOwnerCanvasParentEntity.x;
+										const newY =
+											valueOwnerCanvasParentEntity.y -
+											calculateCardSize(newConnectionEntity).height -
+											CANVAS_VERTICAL_BUFFER_BETWEEN_CARDS;
+
+										// Give them a valid x and y coordinates
+										newX += CANVAS_CARD_WIDTH * 2;
+
+										// @ts-ignore
+										newConnectionEntity.metaSync(
+											{
+												x: newX,
+												y: newY,
+											},
+											changeSet,
+										);
+
+										const objectId =
+											getCanvasEntityDraggableContainerDOMId(
+												newConnectionEntity,
+											);
+
+										let storage: ChangeSet | IValueStoreClient =
+											project.localTestValues;
+
+										if (onlyDefault) {
+											storage = changeSet;
+										}
+
+										handleValueAsTypeChange(
+											newConnectionEntity,
+											valueOwner,
+											project.logic,
+											storage,
+										);
+
+										project.emit(valueOwner.id, {});
+										await project.renderAndCloseChangeSet(changeSet);
+
+										project.canvas?.scrollToObjectById(objectId, () => {
+											onClose?.(null);
+										});
+									},
+								});
+							}}
+						>
+							Add Connection
+						</Button>
+					</div>
+				</section>
+			</div>
+
+			<section
+				style={{
+					alignSelf: 'flex-start',
+					display: 'flex',
+					flexDirection: 'row',
+					justifyContent: 'flex-end',
+					width: '100%',
+					gap: '16px',
+				}}
+			>
+				<Button
+					onClick={(e: any) => {
+						onClose?.(e);
+					}}
+					variant='text'
+				>
+					Back
+				</Button>
+			</section>
+		</div>
+	);
+};
+
+export default ExternalIntegrationConnectionsDialog;