@elyx-code/editor-ui 0.0.2

package/src/components/draggable-entity-card/definition-entity/actions/external-integration-connection/ExportCredentialsFooterAction.tsx

@@ -0,0 +1,461 @@
+import React, {
+	useCallback,
+	useEffect,
+	useLayoutEffect,
+	useState,
+} from 'react';
+import {
+	DraggableObject,
+	RelativeObjectsState,
+} from '../../../../../lib/canvas';
+import {
+	BaseEntityNames,
+	BUILT_IN_BASE_ENTITY_IDS,
+	CanvasEntityDisabledReason,
+	DefinitionEntityState,
+	ExternalIntegrationNames,
+	getFirstBaseEntityWithOwnBase,
+	getIntegrationIdFromDefinitionEntity,
+	isObject,
+	resolveEntityName,
+	toKebabCase,
+} from '@elyx-code/project-logic-tree';
+import { EditorService } from '../../../../../services/editor';
+import CanvasPopupBaseComponent from '../../../../../lib/popup/CanvasPopupBaseComponent';
+import { useCanvasPopup } from '../../../../../services/editor/CanvasPopup';
+import { getCanvasEntityDOMId } from '../../../../../services/editor/ui';
+import './restablish-connection-footer-action.css';
+import '../persisted-entity/database-footer-action.css';
+import PasswordIcon from '../../../../../assets/password.svg';
+import { mergeRefs } from '../../../../../utils/react';
+import { popupNotification } from '../../../../../popup-notification';
+import Button from '../../../../../lib/button/Button';
+import Tooltip from '../../../../../lib/tooltip/Tooltip';
+import { makeId } from '../../../../../utils';
+import { onClickAway } from '../../../../../utils/DOM';
+import { Logger } from '@elyx-code/common-ts-utils';
+
+export function getExportCredentialsFooterActionDOMId(
+	entity: DefinitionEntityState,
+): string {
+	return getCanvasEntityDOMId(entity) + '--export-credentials-footer-action';
+}
+
+interface IExportCredentialsFooterActionProps {
+	draggableObject: DraggableObject;
+	entity: DefinitionEntityState;
+	project: EditorService;
+	parentDisabledReasons: CanvasEntityDisabledReason[];
+}
+
+interface ICredentialsMenuProps {
+	entity: DefinitionEntityState;
+	project: EditorService;
+	draggableObject: RelativeObjectsState;
+	isLoading: boolean;
+	credentials: Record<string, any> | null;
+	error: string | null;
+}
+
+interface ICredentialsMenuItemProps {
+	name: string;
+	value: string;
+}
+
+const CredentialsMenuItem: React.FC<ICredentialsMenuItemProps> = (
+	props: ICredentialsMenuItemProps,
+) => {
+	const id = 'database-footer-action--dropdown-menu-card-option--' + makeId();
+
+	return (
+		<li className='canvas_search__results__item'>
+			<button
+				className='persisted-entity-database-footer-action__dropdown-menu-card-option canvas_search__results__item-button'
+				onClick={(e) => {
+					e.stopPropagation();
+
+					// Copy the value to clipboard
+					navigator.clipboard.writeText(props.value).then(
+						() => {
+							popupNotification({
+								text: 'Copied to clipboard',
+								color: 'success',
+								delay: 1000,
+							});
+						},
+						() => {
+							popupNotification({
+								text: 'Failed to copy to clipboard',
+								color: 'error',
+								delay: 1000,
+							});
+						},
+					);
+				}}
+				id={id}
+			>
+				<i className='fa-regular fa-copy persisted-entity-database-footer-action__dropdown-menu-card-option__icon' />
+				<span className='persisted-entity-database-footer-action__dropdown-menu-card-option__labels'>
+					<span className='persisted-entity-database-footer-action__dropdown-menu-card-option__name-container canvas_search__results__item__title'>
+						<span className='persisted-entity-database-footer-action__dropdown-menu-card-option__name'>
+							{props.name}
+						</span>
+					</span>
+					<span
+						className='persisted-entity-database-footer-action__dropdown-menu-card-option__secondary-label canvas_search__results__item__description'
+						style={{ wordBreak: 'break-all' }}
+					>
+						{isObject(props.value)
+							? JSON.stringify(props.value, null, 2)
+							: props.value}
+					</span>
+				</span>
+			</button>
+		</li>
+	);
+};
+
+function CredentialsMenu(props: ICredentialsMenuProps) {
+	const [isDownloading, setIsDownloading] = useState(false);
+
+	const project = props.project;
+	const entity = props.entity;
+
+	const downloadObjectAsJson = () => {
+		setIsDownloading(true);
+
+		const entityName = resolveEntityName(entity, project.logic);
+		const entityKebabCaseName = toKebabCase(entityName);
+		const exportName = `${entityKebabCaseName}-credentials.json`;
+
+		var dataStr =
+			'data:text/json;charset=utf-8,' +
+			encodeURIComponent(JSON.stringify(props.credentials));
+		var downloadAnchorNode = document.createElement('a');
+		downloadAnchorNode.setAttribute('href', dataStr);
+		downloadAnchorNode.setAttribute('download', exportName);
+		document.body.appendChild(downloadAnchorNode); // required for firefox
+		downloadAnchorNode.click();
+		downloadAnchorNode.remove();
+	};
+
+	return (
+		<div
+			className='dropdown-menu-card persisted-entity-database-footer-action-menu'
+			style={{ minWidth: '330px', maxWidth: '600px' }}
+			onClick={(e) => {
+				e.stopPropagation();
+			}}
+		>
+			<header className='persisted-entity-database-footer-action-menu__section-header'>
+				Credentials
+			</header>
+			<ul
+				className='canvas_search__results'
+				style={{ maxHeight: 'unset', overflowY: 'auto' }}
+			>
+				{!!props.credentials ? (
+					Object.entries(props.credentials).map(([key, value]) => (
+						<CredentialsMenuItem key={key} name={key} value={value} />
+					))
+				) : props.isLoading ? (
+					<span
+						className='persisted-entity-database-footer-action__empty-list-message'
+						style={{ textAlign: 'center', width: '100%', marginTop: '40px' }}
+					>
+						Loading credentials...
+					</span>
+				) : (
+					<span
+						className='persisted-entity-database-footer-action__empty-list-message'
+						style={{ textAlign: 'center', width: '100%', marginTop: '40px' }}
+					>
+						No credentials found.
+					</span>
+				)}
+			</ul>
+
+			{/* Button to export as json file */}
+			<div
+				style={{
+					width: '100%',
+					display: 'flex',
+					justifyContent: 'center',
+					padding: '10px 0',
+					margin: '30px 0 20px 0',
+				}}
+				className='canvas-draggable-card__footer__item'
+			>
+				<Button
+					style={{
+						maxWidth: '260px',
+					}}
+					iconStart='fa-solid fa-download'
+					variant='outlined'
+					size='small'
+					id={`download-credentials-button--${entity.id}`}
+					loading={isDownloading || props.isLoading}
+					onClick={downloadObjectAsJson}
+				>
+					Export JSON
+				</Button>
+				<Tooltip
+					anchorQuerySelector={`#download-credentials-button--${entity.id}`}
+					placement='right'
+				>
+					Download this credentials as a JSON file.
+				</Tooltip>
+			</div>
+		</div>
+	);
+}
+
+export default function ExportCredentialsFooterAction(
+	props: IExportCredentialsFooterActionProps,
+) {
+	const id = getExportCredentialsFooterActionDOMId(props.entity);
+
+	const project = props.project;
+	const entity = props.entity;
+
+	const [isLoading, setIsLoading] = useState(true);
+	const [isMenuOpen, setIsMenuOpen] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const [credentials, setCredentials] = useState<Record<string, any> | null>(
+		null,
+	);
+
+	const resolveTooltipHelperText = (): string => {
+		return 'Click to view the credentials for this external integration';
+	};
+
+	const disabled = !!props.parentDisabledReasons.length;
+
+	const memoizedCanvasPopupBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent id={id + '--menu--popup--body'}>
+				<CredentialsMenu
+					entity={entity}
+					project={project}
+					draggableObject={props.draggableObject}
+					isLoading={isLoading}
+					credentials={credentials}
+					error={error}
+				/>
+			</CanvasPopupBaseComponent>
+		),
+		[isLoading, credentials, error],
+	);
+
+	const canvasPopupMenu = useCanvasPopup(
+		{
+			editor: props.project,
+			id: id + '--menu',
+			anchorQuerySelector: '#' + id,
+			arrowClasses: ['dropdown-menu-card-arrow'],
+			parentCanvasObject: props.draggableObject,
+			arrowContainerSelector: '#' + id + '--menu--popup--body',
+			persisted: true,
+			placement: 'bottom',
+		},
+		memoizedCanvasPopupBody,
+		[isLoading, credentials, error],
+	);
+
+	const memoizedTooltipCanvasPopupBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent
+				containerClasses={['tooltip', 'tooltip--large-font']}
+				id={id + '--tooltip--popup--body'}
+			>
+				{disabled ? (
+					<div style={{ textAlign: 'center' }}>
+						<p style={{ margin: 0 }}>
+							Re-establishing a connection is currently not possible
+						</p>
+					</div>
+				) : (
+					<div style={{ textAlign: 'center' }}>
+						<p style={{ margin: 0 }}>{resolveTooltipHelperText()}</p>
+					</div>
+				)}
+			</CanvasPopupBaseComponent>
+		),
+		[disabled, id],
+	);
+
+	const canvasPopupTooltip = useCanvasPopup(
+		{
+			editor: props.project,
+			id: id + '--tooltip',
+			anchorQuerySelector: '#' + id,
+			arrowClasses: ['tooltip-arrow'],
+			parentCanvasObject: props.draggableObject,
+			placement: 'top',
+			arrowContainerSelector: '#' + id + '--tooltip--popup--body',
+		},
+		memoizedTooltipCanvasPopupBody,
+	)
+		.setupHover({
+			closeDelay: 80,
+			openDelay: 600,
+		})
+		.onBeforeShow(() => {
+			// If the other popup is open, don't show this one
+			if (canvasPopupMenu?.open) {
+				return false;
+			}
+
+			return true;
+		});
+
+	const baseEntity = getFirstBaseEntityWithOwnBase(
+		entity,
+		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 integrationName: ExternalIntegrationNames | null =
+		getIntegrationIdFromDefinitionEntity(entity);
+
+	const connectionIdProperty = entity.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,
+			),
+	);
+
+	const connectionId = connectionIdProperty?.getDefaultValue()?.value as string;
+
+	const fetchCredentials = async () => {
+		try {
+			if (!integrationName || !connectionId) {
+				popupNotification({
+					text: 'Integration name or connection ID is missing.',
+					color: 'error',
+					delay: 3000,
+				});
+				return;
+			}
+
+			if (!!credentials) {
+				return;
+			}
+
+			setIsLoading(true);
+			setError(null);
+
+			const credentialsData = await project.integrationsService.getCredentials(
+				integrationName,
+				connectionId,
+			);
+
+			Logger.log('Fetched credentials:', credentialsData);
+
+			if (!credentialsData?.credentials?.credentials) {
+				setError('No credentials found for this connection.');
+				return;
+			}
+
+			setCredentials(credentialsData.credentials.credentials);
+		} catch (error) {
+			setError('Failed to fetch credentials');
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	useLayoutEffect(() => {
+		setTimeout(() => {
+			if (isMenuOpen && !canvasPopupMenu.open) {
+				// canvasPopupMenu.placement = 'bottom';
+				// canvasPopupMenu.self.placement = 'bottom';
+				canvasPopupMenu.show(true);
+			} else if (isMenuOpen && !!canvasPopupMenu.open) {
+				// canvasPopupMenu.placement = 'bottom';
+				// canvasPopupMenu.self.placement = 'bottom';
+				canvasPopupMenu.self.calculatePosition();
+			}
+		}, 0);
+	}, [isMenuOpen, canvasPopupMenu]);
+
+	if (!connectionId) {
+		// popupNotification({
+		// 	text: 'No connection ID found for this node.',
+		// 	color: 'error',
+		// 	delay: 3000,
+		// });
+
+		return null;
+	}
+
+	if (!integrationName) {
+		// popupNotification({
+		// 	text: 'No integration name could be resolved for this node.',
+		// 	color: 'error',
+		// 	delay: 3000,
+		// });
+
+		return null;
+	}
+
+	const combinedRef = mergeRefs(
+		canvasPopupTooltip.anchorRef,
+		canvasPopupMenu.anchorRef,
+	);
+
+	const onButtonClick = (e: React.MouseEvent) => {
+		e.stopPropagation();
+
+		if (disabled) {
+			return;
+		}
+
+		props.project?.hideEntityCreationMenu();
+		const isOpen = isMenuOpen;
+
+		if (isOpen) {
+			setIsMenuOpen(false);
+			return;
+		}
+
+		const menuElement = document.querySelector(`#${id}--tooltip`);
+
+		onClickAway(menuElement, () => {
+			setIsMenuOpen(false);
+			canvasPopupMenu.hide();
+		});
+
+		setIsMenuOpen(!isMenuOpen);
+		canvasPopupMenu.toggle(true);
+
+		fetchCredentials();
+	};
+
+	return (
+		<button
+			id={id}
+			ref={combinedRef}
+			onClick={onButtonClick}
+			className={['canvas-draggable-card__footer__item'].join(' ')}
+		>
+			<img
+				src={PasswordIcon}
+				style={{
+					width: 16,
+					height: 16,
+					opacity: disabled ? 0.2 : 0.8,
+				}}
+				alt='Export Credentials Icon'
+			/>
+		</button>
+	);
+}

package/src/components/draggable-entity-card/definition-entity/actions/external-integration-connection/RestablishConnectionFooterAction.tsx

@@ -0,0 +1,199 @@
+import React, { useCallback } from 'react';
+import { DraggableObject } from '../../../../../lib/canvas';
+import {
+	BaseEntityNames,
+	BUILT_IN_BASE_ENTITY_IDS,
+	CanvasEntityDisabledReason,
+	ChangeSet,
+	ChangeSetEntityChangeType,
+	createStateFromTypeAndSubscribe,
+	DefinitionEntityState,
+	ExternalIntegrationNames,
+	getFirstBaseEntityWithOwnBase,
+	getIntegrationIdFromDefinitionEntity,
+	LiteralValueState,
+	PrimitiveTypes,
+	ProjectState,
+	StateMutationAction,
+} from '@elyx-code/project-logic-tree';
+import { EditorService } from '../../../../../services/editor';
+import CanvasPopupBaseComponent from '../../../../../lib/popup/CanvasPopupBaseComponent';
+import { useCanvasPopup } from '../../../../../services/editor/CanvasPopup';
+import './restablish-connection-footer-action.css';
+import ReconnectIcon from '../../../../../assets/sync.svg';
+import { Logger } from '@elyx-code/common-ts-utils';
+import { getCanvasEntityDOMId } from '../../../../../services/editor/ui';
+
+export function getRestablishConnectionFooterActionDOMId(
+	entity: DefinitionEntityState,
+): string {
+	return getCanvasEntityDOMId(entity) + '--restablish-connection-footer-action';
+}
+
+interface IRestablishConnectionFooterActionProps {
+	draggableObject: DraggableObject;
+	entity: DefinitionEntityState;
+	project: EditorService;
+	parentDisabledReasons: CanvasEntityDisabledReason[];
+}
+
+export default function RestablishConnectionFooterAction(
+	props: IRestablishConnectionFooterActionProps
+) {
+	const id = getRestablishConnectionFooterActionDOMId(props.entity);
+
+	const project = props.project;
+	const entity = props.entity;
+
+	const resolveTooltipHelperText = (): string => {
+		return 'Click to establish a new connection to this external integration';
+	};
+
+	const disabled = !!props.parentDisabledReasons.length;
+
+	const memoizedCanvasPopupBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent
+				containerClasses={['tooltip', 'tooltip--large-font']}
+				id={id + '--tooltip--popup--body'}
+			>
+				{disabled ? (
+					<div style={{ textAlign: 'center' }}>
+						<p style={{ margin: 0 }}>
+							Re-establishing a connection is currently not possible
+						</p>
+					</div>
+				) : (
+					<div style={{ textAlign: 'center' }}>
+						<p style={{ margin: 0 }}>{resolveTooltipHelperText()}</p>
+					</div>
+				)}
+			</CanvasPopupBaseComponent>
+		),
+		[disabled]
+	);
+
+	const canvasPopupTooltip = useCanvasPopup(
+		{
+			editor: props.project,
+			id: id + '--tooltip',
+			anchorQuerySelector: '#' + id,
+			arrowClasses: ['tooltip-arrow'],
+			parentCanvasObject: props.draggableObject,
+			placement: 'top',
+			arrowContainerSelector: '#' + id + '--tooltip--popup--body',
+		},
+		memoizedCanvasPopupBody,
+	).setupHover({
+		closeDelay: 80,
+		openDelay: 600,
+	});
+
+	const baseEntity = getFirstBaseEntityWithOwnBase(
+		entity,
+		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 integrationName: ExternalIntegrationNames | null =
+		getIntegrationIdFromDefinitionEntity(entity);
+
+	if (!integrationName) {
+		Logger.warn(
+			`The integration name for the entity ${props.entity.id} could not be resolved.`
+		);
+		return null;
+	}
+
+	return (
+		<button
+			id={id}
+			ref={canvasPopupTooltip.anchorRef}
+			onClick={() => {
+				if (disabled) {
+					return;
+				}
+
+				project.integrationsService.connect(integrationName, {
+					// Update the connection entity with the new connection data
+					onSuccess: async (connection) => {
+						Logger.log('Connection created successfully:', connection);
+
+						const changeSet = project.logic.addChangeSet(
+							new ChangeSet(
+								project.logic,
+								ProjectState.sessionAuthor,
+								new Date().toISOString(),
+								entity,
+								false,
+								StateMutationAction.RestablishExternalAccountConnection
+							)
+						);
+
+						const connectionIdProperty = entity.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
+						);
+
+						await project.renderAndCloseChangeSet(changeSet);
+					},
+				});
+			}}
+			className={['canvas-draggable-card__footer__item'].join(' ')}
+		>
+			<img
+				src={ReconnectIcon}
+				style={{
+					width: 16,
+					height: 16,
+					opacity: disabled ? 0.2 : 0.8,
+				}}
+				alt='Reconnect Icon'
+			/>
+		</button>
+	);
+}