@elyx-code/editor-ui 0.0.2

package/src/components/draggable-entity-card/definition-entity/actions/persisted-entity/DatabaseFooterAction.tsx

@@ -0,0 +1,452 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+	DraggableObject,
+	RelativeObjectsState,
+} from '../../../../../lib/canvas';
+import {
+	CanvasEntityDisabledReason,
+	DefinitionEntityState,
+	getDatabaseEntity,
+} from '@elyx-code/project-logic-tree';
+import { EditorService } from '../../../../../services/editor';
+import CanvasPopupBaseComponent from '../../../../../lib/popup/CanvasPopupBaseComponent';
+import CanvasPopup, {
+	useCanvasPopup,
+} from '../../../../../services/editor/CanvasPopup';
+import {
+	getCanvasEntityDOMId,
+	safeResolveEntityName,
+} from '../../../../../services/editor/ui';
+import { makeId } from '../../../../../utils';
+import './database-footer-action.css';
+import Badge from '../../../../../lib/badge/Badge';
+import { mergeRefs } from '../../../../../utils/react';
+import { InfrastructureResourceType } from '@elyx-code/definitions';
+import { getRelationalDBInstanceNameFromEntityId } from '../../../../../services/editor/publication/publication';
+
+export function getPeristedEntityDatabaseFooterActionDOMId(
+	entity: DefinitionEntityState,
+): string {
+	return (
+		getCanvasEntityDOMId(entity) + '--persisted-entity-database-footer-action'
+	);
+}
+
+interface IPeristedEntityRowsCountActionProps {
+	draggableObject: DraggableObject;
+	entity: DefinitionEntityState;
+	project: EditorService;
+	parentDisabledReasons: CanvasEntityDisabledReason[];
+}
+
+export interface IEntityDatabasesMenuProps {
+	entity: DefinitionEntityState;
+	project: EditorService;
+	draggableObject: RelativeObjectsState;
+	onDatabaseClick: () => void;
+}
+
+export interface IEntityDatabasesMenuItemProps {
+	entity: DefinitionEntityState;
+	project: EditorService;
+	draggableObject: RelativeObjectsState;
+	name: string;
+	description: string;
+	count: number;
+	isTestDB?: boolean;
+	onClick: (e: MouseEvent) => void;
+}
+
+const EntityDatabasesMenuItem: React.FC<IEntityDatabasesMenuItemProps> = (
+	props: IEntityDatabasesMenuItemProps,
+) => {
+	const id = 'database-footer-action--dropdown-menu-card-option--' + makeId();
+
+	const memoizedCanvasPopupBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent
+				containerClasses={['tooltip', 'tooltip--large-font']}
+				id={id + '--count-tooltip--popup--body'}
+			>
+				Number of entries in this database
+			</CanvasPopupBaseComponent>
+		),
+		[id],
+	);
+
+	const canvasPopupCountToolip = useCanvasPopup(
+		{
+			editor: props.project,
+			id: id + '--count-tooltip',
+			anchorQuerySelector: '#' + id + '--rows-counter-badge',
+			arrowClasses: ['tooltip-arrow'],
+			parentCanvasObject: props.draggableObject,
+			placement: 'top',
+			arrowContainerSelector: '#' + id + '--count-tooltip--popup--body',
+		},
+		memoizedCanvasPopupBody,
+	).setupHover({
+		closeDelay: 80,
+		openDelay: 600,
+	});
+
+	const memoizedHelpTooltipCanvasPopupBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent
+				containerClasses={['tooltip', 'tooltip--large-font']}
+			>
+				Click to inspect the entries on this database
+			</CanvasPopupBaseComponent>
+		),
+		[],
+	);
+
+	const canvasPopupHelpTooltip = useCanvasPopup(
+		{
+			editor: props.project,
+			id: id + '--help-tooltip',
+			anchorQuerySelector: '#' + id,
+			arrowClasses: ['tooltip-arrow'],
+			parentCanvasObject: props.draggableObject,
+			placement: 'right',
+		},
+		memoizedHelpTooltipCanvasPopupBody,
+		// [memoizedHelpTooltipCanvasPopupBody]
+	).setupHover({
+		closeDelay: 80,
+		openDelay: 600,
+	});
+
+	const isTestDB = props.isTestDB ?? false;
+
+	return (
+		<button
+			onClick={(e) => {
+				e.stopPropagation();
+				props.onClick(e as any);
+			}}
+			ref={canvasPopupHelpTooltip.anchorRef}
+			id={id}
+			className='persisted-entity-database-footer-action__dropdown-menu-card-option'
+		>
+			<i className='fa-solid fa-database 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'>
+					<span className='persisted-entity-database-footer-action__dropdown-menu-card-option__name'>
+						{props.name}
+					</span>
+					<Badge
+						ref={canvasPopupCountToolip.anchorRef}
+						classes={['canvas-badge-overrides']}
+						id={id + '--rows-counter-badge'}
+						style={isTestDB ? { backgroundColor: '#a683fc' } : {}}
+					>
+						{props.count.toString()}
+					</Badge>
+				</span>
+				<span className='persisted-entity-database-footer-action__dropdown-menu-card-option__secondary-label'>
+					{props.description}
+				</span>
+			</span>
+		</button>
+	);
+};
+
+function EntityDatabasesMenu(props: IEntityDatabasesMenuProps) {
+	const useForceUpdate = () => {
+		const [_, setValue] = useState(0);
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	const ownDBEntity = getDatabaseEntity(props.entity);
+
+	const ownLocalDatabase =
+		props.project.localDatabaseStore?.getDatabaseForPersistedEntity(
+			props.entity,
+		);
+
+	const ownDatabaseTable = ownLocalDatabase?.getTable(props.entity.id);
+
+	const total = ownDatabaseTable?.total ?? 0;
+
+	const ownLiveDatabases = (props.project.liveResources || []).filter(
+		(resource) => {
+			if (
+				resource.resourceType !== InfrastructureResourceType.RelationalDatabase
+			) {
+				return false;
+			}
+
+			if (!ownDBEntity) {
+				return false;
+			}
+
+			const ownDbId = getRelationalDBInstanceNameFromEntityId(
+				ownDBEntity.id,
+				props.project?.branchHead?.identifier,
+			);
+
+			if (resource.resourceId === ownDbId) {
+				return true;
+			}
+
+			return false;
+		},
+	);
+
+	useEffect(() => {
+		const update = () => {
+			// Force update the component
+			forceUpdate();
+		};
+
+		props.project.on('live-resources-loaded', update);
+
+		return () => {
+			props.project.off('live-resources-loaded', update);
+		};
+	});
+
+	return (
+		<div
+			className='dropdown-menu-card persisted-entity-database-footer-action-menu'
+			style={{ minWidth: '330px', maxWidth: '400px' }}
+		>
+			<header className='persisted-entity-database-footer-action-menu__section-header'>
+				Canvas testing database
+			</header>
+			{ownLocalDatabase ? (
+				<EntityDatabasesMenuItem
+					entity={props.entity}
+					project={props.project}
+					draggableObject={props.draggableObject}
+					name={safeResolveEntityName(
+						ownLocalDatabase.entity,
+						props.project.logic,
+					)}
+					description='Storage for testing values in the canvas. Ignored when publishing a project.'
+					count={total}
+					isTestDB={true}
+					onClick={() => {
+						props.onDatabaseClick();
+
+						EditorService.navigate(
+							`${props.project?.editorBasePath}/test-relational-database/${ownLocalDatabase.entity.id}/table/${props.entity.id}`,
+						);
+					}}
+				/>
+			) : (
+				<span className='persisted-entity-database-footer-action__empty-list-message'>
+					No test database found
+				</span>
+			)}
+			<header
+				className='persisted-entity-database-footer-action-menu__section-header'
+				style={{ padding: '10px 8px' }}
+			>
+				<div className='resource-dialog__live-indicator-dot blinking' />
+				Live databases
+			</header>
+			{!!ownLiveDatabases.length ? (
+				ownLiveDatabases.map((db) => (
+					<EntityDatabasesMenuItem
+						key={db.resourceId}
+						entity={props.entity}
+						project={props.project}
+						draggableObject={props.draggableObject}
+						name={db.name}
+						description='Database live for the users in the main version of the published project'
+						count={total}
+						onClick={() => {
+							props.onDatabaseClick();
+
+							EditorService.navigate(
+								`${props.project?.editorBasePath}/resources/${InfrastructureResourceType.RelationalDatabase}/${db.resourceId}`,
+							);
+						}}
+					/>
+				))
+			) : (
+				<span className='persisted-entity-database-footer-action__empty-list-message'>
+					No live databases found
+				</span>
+			)}
+		</div>
+	);
+}
+
+export default function PeristedEntityRowsCountAction(
+	props: IPeristedEntityRowsCountActionProps,
+) {
+	const id = getPeristedEntityDatabaseFooterActionDOMId(props.entity);
+
+	const useForceUpdate = () => {
+		const [_, setValue] = useState(0);
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	const resolveCountHelperText = (): string => {
+		if (totalCount > 0) {
+			return `This entity has ${totalCount} entries over 3 separate databases`;
+		}
+		return 'No values have been saved for this entity yet';
+	};
+
+	const databaseEntity = getDatabaseEntity(props.entity);
+
+	const ownLocalDatabaseTable = !!databaseEntity
+		? props.project.localDatabaseStore
+				?.getDatabase(databaseEntity?.id)
+				?.getTable(props.entity.id)
+		: null;
+
+	const getTestDatabaseCount = (): number => {
+		const testValuesTotal = ownLocalDatabaseTable?.total ?? 0;
+		return testValuesTotal;
+	};
+
+	useEffect(() => {
+		props.project.on('local-databases-updated', forceUpdate);
+
+		return () => {
+			props.project.off('local-databases-updated', forceUpdate);
+		};
+	}, []);
+
+	const testDatabaseCount = getTestDatabaseCount();
+
+	const getTotalCount = (): number => {
+		// TODO: Here sum all other databases total for this entity
+		// Currently only the test database is being counted
+		const total = testDatabaseCount;
+		return total;
+	};
+
+	const totalCount = getTotalCount();
+
+	const disabled =
+		!!props.parentDisabledReasons.length ||
+		!databaseEntity ||
+		!ownLocalDatabaseTable;
+
+	const memoizedCanvasPopupBody = useCallback(
+		(popup: CanvasPopup) => (
+			<CanvasPopupBaseComponent id={id + '--menu--popup--body'}>
+				<EntityDatabasesMenu
+					entity={props.entity}
+					project={props.project}
+					draggableObject={popup.self}
+					onDatabaseClick={() => {
+						// Close the popups
+						canvasPopupMenu?.toggle();
+					}}
+				/>
+			</CanvasPopupBaseComponent>
+		),
+		[id, props.entity, props.project],
+	);
+
+	const canvasPopupMenu = useCanvasPopup(
+		{
+			editor: props.project,
+			id: id + '--menu',
+			anchorQuerySelector: '#' + id,
+			arrowClasses: ['dropdown-menu-card-arrow'],
+			parentCanvasObject: props.draggableObject,
+			arrowContainerSelector: '#' + id + '--menu--popup--body',
+		},
+		memoizedCanvasPopupBody,
+		// [memoizedCanvasPopupBody]
+	).onBeforeShow(() => {
+		if (disabled) {
+			// return false;
+			return true;
+		}
+
+		return true;
+	});
+
+	const memoizedTooltipCanvasPopupBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent
+				containerClasses={['tooltip', 'tooltip--large-font']}
+				id={id + '--tooltip--popup--body'}
+			>
+				{disabled ? (
+					<div style={{ textAlign: 'center' }}>
+						<p style={{ margin: 0 }}>No databases connected</p>
+						<br />
+						<p style={{ margin: 0 }}>
+							Give a default value to the 'Database' property to link this
+							persisted entity to a database
+						</p>
+					</div>
+				) : (
+					<div style={{ textAlign: 'center' }}>
+						<p style={{ margin: 0 }}>{resolveCountHelperText()}</p>
+						<br />
+						<p style={{ margin: 0 }}>
+							Click to view a breakdown of all connected databases
+						</p>
+					</div>
+				)}
+			</CanvasPopupBaseComponent>
+		),
+		[id, disabled, totalCount, resolveCountHelperText],
+	);
+
+	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,
+		// [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 combinedRef = mergeRefs(
+		canvasPopupTooltip.anchorRef,
+		canvasPopupMenu.anchorRef,
+	);
+
+	return (
+		<button
+			id={id}
+			ref={combinedRef}
+			onClick={() => {
+				if (disabled) {
+					return;
+				}
+
+				canvasPopupMenu.toggle();
+			}}
+			className={[
+				'canvas-draggable-card__footer__item',
+				testDatabaseCount > 0 ? 'dynamic-value__background--primary' : '',
+			].join(' ')}
+			style={testDatabaseCount > 0 ? { marginRight: '8px' } : {}}
+			disabled={disabled}
+		>
+			<p style={{ margin: 0 }}>{totalCount.toString()}</p>
+			<i style={{ fontSize: '12px' }} className='fa-solid fa-database' />
+		</button>
+	);
+}

package/src/components/draggable-entity-card/definition-entity/actions/persisted-entity/database-footer-action.css

@@ -0,0 +1,86 @@
+.dropdown-menu-card.persisted-entity-database-footer-action-menu {
+	display: flex;
+	flex-direction: column;
+}
+
+.dropdown-menu-card .persisted-entity-database-footer-action__dropdown-menu-card-option {
+	color: black;
+	/* Make sure there is a minimum horizontal gap between its own two children */
+	display: flex;
+	justify-content: start;
+	align-items: center;
+	gap: 14px;
+	position: relative;
+	line-height: normal;
+	cursor: pointer;
+	overflow: hidden;
+}
+
+.dropdown-menu-card .persisted-entity-database-footer-action-menu__section-header {
+	padding: 10px 20px;
+	border-bottom: 1px solid #e0e0e0;
+	font-weight: 400;
+	font-size: 14px;
+	color: var(--color-main-grey);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.dropdown-menu-card .persisted-entity-database-footer-action__dropdown-menu-card-option i {
+	font-size: 1.2em;
+}
+
+.dropdown-menu-card
+	.persisted-entity-database-footer-action__dropdown-menu-card-option
+	.persisted-entity-database-footer-action__dropdown-menu-card-option__labels {
+	display: flex;
+	flex-direction: column;
+}
+
+.dropdown-menu-card
+	.persisted-entity-database-footer-action__dropdown-menu-card-option
+	.persisted-entity-database-footer-action__dropdown-menu-card-option__name-container {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+}
+
+.dropdown-menu-card
+	.persisted-entity-database-footer-action__dropdown-menu-card-option
+	.persisted-entity-database-footer-action__dropdown-menu-card-option__name {
+	position: relative;
+	display: flex;
+	gap: 14px;
+	align-items: center;
+	font-size: 18px;
+	font-weight: 600;
+}
+
+.dropdown-menu-card
+	.persisted-entity-database-footer-action__dropdown-menu-card-option
+	.persisted-entity-database-footer-action__dropdown-menu-card-option__icon {
+	color: rgba(0, 0, 0, 0.54);
+}
+
+.dropdown-menu-card
+	.persisted-entity-database-footer-action__dropdown-menu-card-option
+	.persisted-entity-database-footer-action__dropdown-menu-card-option__secondary-label {
+	display: flex;
+	gap: 14px;
+	align-items: center;
+	color: rgba(0, 0, 0, 0.54);
+	font-size: 16px;
+}
+
+.dropdown-menu-card .persisted-entity-database-footer-action__empty-list-message {
+	/* display: flex; */
+	padding: 10px 20px;
+	gap: 14px;
+	align-items: center;
+	color: rgba(0, 0, 0, 0.54);
+	font-size: 16px;
+	min-height: 35px;
+	width: 100%;
+	text-align: center;
+}

package/src/components/draggable-entity-card/definition-entity/definition-entity-card.css

@@ -0,0 +1,17 @@
+/* Colors */
+.dropdown-menu-card .dropdown-menu-card-option.canvas-dropdown-menu-card-option__new-method {
+  color: var(--color-icon--function-declaration);
+}
+
+.dropdown-menu-card .dropdown-menu-card-option.canvas-dropdown-menu-card-option__new-method:hover,
+.dropdown-menu-card .dropdown-menu-card-option__selected.canvas-dropdown-menu-card-option__new-method {
+  color: #fff;
+}
+
+/* Disabled */
+.dropdown-menu-card .dropdown-menu-card-option.dropdown-menu-card-option__disabled,
+.dropdown-menu-card .dropdown-menu-card-option.canvas-dropdown-menu-card-option__new-method.dropdown-menu-card-option__disabled {
+  color: var(--color-light-grey);
+  cursor: not-allowed;
+  background-color: unset;
+}