@elyx-code/editor-ui 0.0.2

package/src/components/test-relational-database/TestDatabaseDialogContent.tsx

@@ -0,0 +1,670 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import JSZip from 'jszip';
+import { IDialogProps } from '../../lib/dialog/Dialog';
+import DatabaseTable from './DatabaseTable';
+import Button from '../../lib/button/Button';
+import Tooltip from '../../lib/tooltip/Tooltip';
+import { EditorService } from '../../services/editor';
+import DropdownButton from '../../lib/dropdown/DropdownButton';
+import { IDropdownMenuCardOption } from '../../lib/dropdown/DropdownMenuCard';
+import {
+	BUILT_IN_BASE_ENTITY_IDS,
+	DefinitionEntityState,
+	EntityWithValueState,
+	getColumnProperties,
+	LiteralValueState,
+	resolveEntityName,
+	toCamelCase,
+	toPascalCase
+} from '@elyx-code/project-logic-tree';
+import { useQuery } from '../../utils/react';
+import { PrimaryKeyTableRowSelection } from '../../lib/table/types';
+import { IValueStoreClient } from '../../services/editor/value-store';
+import { handleLiteralValueChange } from '../../services/execution/value-resolution';
+import { Logger } from '@elyx-code/common-ts-utils';
+import DialogLoader from '../DialogLoader';
+
+export enum TestDatabaseDialogMode {
+	SelectSingleFromFixedTable = 'select-single-from-fixed-table',
+	SelectSingleFromAny = 'select-single-from-any',
+	SelectMultipleFromAny = 'select-multiple-from-any',
+	SelectMultipleFromFixedTable = 'select-multiple-from-fixed-table'
+}
+
+export interface INestedWhereOrStatement {
+	or?: INestedWhereOrStatement;
+	[columnName: string]:
+		| string
+		| number
+		| Date
+		| boolean
+		| INestedWhereOrStatement;
+}
+
+interface ITestDatabaseDialogProps extends IDialogProps {
+	project: EditorService;
+	ready: boolean;
+}
+
+const TestDatabaseDialog: React.FC<ITestDatabaseDialogProps> = ({
+	project,
+	ready,
+	onClose
+}) => {
+	const query = useQuery();
+	const mode = query.get('mode') as TestDatabaseDialogMode | null;
+	Logger.log('mode', mode);
+	const { id } = useParams<{ id: string }>();
+	const navigate = useNavigate();
+	const {
+		selectedDatabase: selectedDatabaseParam,
+		selectedTable: urlSelectedTable
+	} = useParams<{
+		selectedDatabase: string;
+		selectedTable: string;
+	}>();
+
+	const [saving, setSaving] = useState(false);
+
+	const [isDownloadingDatabase, setIsDownloadingDatabase] = useState(false);
+	const [selectedDatabase, setSelectedDatabase] = useState(
+		selectedDatabaseParam
+	);
+	const [dropdownOptions, setDropdownOptions] = useState<
+		IDropdownMenuCardOption[]
+	>([]);
+
+	const [selection, setSelection] = useState<PrimaryKeyTableRowSelection[]>(
+		[]
+	);
+
+	const [valueOwner, setValueOwner] = useState<EntityWithValueState | null>(
+		null
+	);
+	const [value, setValue] = useState<LiteralValueState | null>(null);
+
+	const database = project?.localDatabaseStore?.getDatabase(selectedDatabase);
+
+	// Given an initial value, set the selection as the value of its primary key
+	const initSelection = async (preexistingValue: LiteralValueState) => {
+		Logger.log('init selection');
+		if (!preexistingValue) {
+			return;
+		}
+
+		const tableEntity = !!urlSelectedTable
+			? (project.logic.get(urlSelectedTable) as DefinitionEntityState)
+			: null;
+
+		const primaryKeyProperty = !!tableEntity
+			? getColumnProperties(tableEntity).find((property) =>
+					property.implements.find(
+						(impl) =>
+							impl.id ===
+							BUILT_IN_BASE_ENTITY_IDS['built-in-base-entity']
+								.BUILT_IN_PERSISTED_ENTITY_ENTITY.properties
+								.primaryKey.id
+					)
+				)
+			: null;
+
+		const primaryKeyColumnName = !!primaryKeyProperty
+			? primaryKeyProperty.codeName ||
+				toCamelCase(
+					resolveEntityName(primaryKeyProperty, project.logic)
+				)
+			: '';
+
+		if (Array.isArray(preexistingValue.value)) {
+			const initialSelection: PrimaryKeyTableRowSelection[] = (
+				preexistingValue.value as Array<{
+					[columnName: string]: string | number;
+				}>
+			).map((value: { [columnName: string]: string | number }) => ({
+				primaryKey: value[primaryKeyColumnName]
+			}));
+
+			Logger.log('setting initial selection: ', initialSelection);
+
+			setSelection(initialSelection);
+		} else if (
+			!!preexistingValue.value &&
+			typeof preexistingValue.value === 'object'
+		) {
+			const initialSelection: PrimaryKeyTableRowSelection[] = [
+				{
+					primaryKey: (
+						preexistingValue.value as {
+							[columnName: string]: string | number;
+						}
+					)[primaryKeyColumnName]
+				}
+			];
+
+			Logger.log('setting initial selection: ', initialSelection);
+
+			setSelection(initialSelection);
+		}
+	};
+
+	useEffect(() => {
+		if (!project || !ready) {
+			return;
+		}
+
+		if (!!mode) {
+			// Get the value owner
+			const valueOwnerID = query.get('valueOwner');
+			if (!!valueOwnerID) {
+				const valueOwnerEntity = project.logic.get(valueOwnerID);
+
+				if (!valueOwnerEntity) {
+					return;
+				}
+
+				setValueOwner(valueOwnerEntity as EntityWithValueState);
+				const valueEntity =
+					project.localTestValues.readValue(valueOwnerID);
+				setValue(valueEntity as LiteralValueState);
+
+				// Set initial selection
+				if (!!valueEntity) {
+					initSelection(valueEntity as LiteralValueState);
+				}
+			}
+		}
+	}, [mode, query, project, ready]);
+
+	useEffect(() => {
+		if (!!project && ready) {
+			const options = project.localDatabaseStore?.databases.map(
+				(database) => ({
+					value: database.entity.id,
+					label: resolveEntityName(database.entity, project.logic),
+					iconEnd: 'fa-solid fa-database',
+					onClick: () => {
+						navigate(
+							`${project?.editorBasePath}/test-relational-database/${database.entity.id}${
+								!!database.tables[0]?.entity.id
+									? `/table/${database.tables[0]?.entity.id}`
+									: ''
+							}`
+						);
+
+						setSelectedDatabase(database.entity.id);
+					}
+				})
+			);
+
+			setDropdownOptions(options);
+		}
+	}, [project, id, ready]);
+
+	const downloadDatabaseData = async () => {
+		if (!database) {
+			return;
+		}
+
+		setIsDownloadingDatabase(true);
+
+		try {
+			const zip = new JSZip();
+
+			for (const table of database.tables) {
+				const rows = await database.select({ from: table.tableName });
+
+				const headersSet = new Set<string>();
+				table.columns.forEach((c) => headersSet.add(c.columnName));
+				rows.forEach((row) => {
+					Object.keys(row).forEach((key) => headersSet.add(key));
+				});
+				const headers = Array.from(headersSet);
+
+				const escapeCSVValue = (val: any): string => {
+					if (val === null || val === undefined) {
+						return '';
+					}
+					let str =
+						typeof val === 'object'
+							? JSON.stringify(val)
+							: String(val);
+					if (
+						str.includes(',') ||
+						str.includes('"') ||
+						str.includes('\n') ||
+						str.includes('\r')
+					) {
+						str = '"' + str.replace(/"/g, '""') + '"';
+					}
+					return str;
+				};
+
+				const csvContent = [
+					headers.join(','),
+					...rows.map((row) =>
+						headers
+							.map((header) => escapeCSVValue(row[header]))
+							.join(',')
+					)
+				].join('\n');
+
+				zip.file(`${table.tableName}.csv`, csvContent);
+			}
+
+			const zipBlob = await zip.generateAsync({ type: 'blob' });
+			const url = URL.createObjectURL(zipBlob);
+			const link = document.createElement('a');
+			link.setAttribute('href', url);
+
+			const dbName = resolveEntityName(database.entity, project.logic);
+			const filename = `relational_data_export_${dbName}_${Date.now()}.zip`.replace(
+				/[^a-z0-9_-]/gi,
+				'_'
+			).replace(/_zip$/, '.zip');
+
+			link.setAttribute('download', filename);
+			link.style.visibility = 'hidden';
+			document.body.appendChild(link);
+			link.click();
+			document.body.removeChild(link);
+			URL.revokeObjectURL(url);
+		} catch (error) {
+			Logger.error('Failed to export database ZIP:', error);
+		} finally {
+			setIsDownloadingDatabase(false);
+		}
+	};
+
+	// TODO: Fix this,
+	// It currently works well with a single condition
+	// But I haven't tested it with multiple selected elements, and I expect it not to work
+	// Because it isn't using the function recursively to build the or statement
+	const nestedWhereOrFromSelection = (
+		selection: PrimaryKeyTableRowSelection[],
+		tableEntity: DefinitionEntityState,
+		previousLevel: INestedWhereOrStatement = {}
+	): INestedWhereOrStatement => {
+		const primaryKeyProperty = !!tableEntity
+			? getColumnProperties(tableEntity).find((property) =>
+					property.implements.find(
+						(impl) =>
+							impl.id ===
+							BUILT_IN_BASE_ENTITY_IDS['built-in-base-entity']
+								.BUILT_IN_PERSISTED_ENTITY_ENTITY.properties
+								.primaryKey.id
+					)
+				)
+			: null;
+
+		const primaryKeyColumnName = !!primaryKeyProperty
+			? primaryKeyProperty.codeName ||
+				toCamelCase(
+					resolveEntityName(primaryKeyProperty, project.logic)
+				)
+			: '';
+
+		return selection.reduce((acc, current, index) => {
+			const primaryKeyValue = current.primaryKey;
+			const primaryKeyObject = {
+				[primaryKeyColumnName]: primaryKeyValue
+			};
+
+			if (index === 0) {
+				return {
+					...acc,
+					...primaryKeyObject
+				} as INestedWhereOrStatement;
+			}
+
+			return {
+				...acc,
+				or: {
+					...acc.or,
+					...primaryKeyObject
+				}
+			} as INestedWhereOrStatement;
+		}, previousLevel);
+	};
+
+	const getEntityFromPrimaryKeySelection = async (
+		selection: PrimaryKeyTableRowSelection[]
+	): Promise<
+		{
+			[columnName: string]: string | null | number | Date | boolean;
+		}[]
+	> => {
+		if (!database) {
+			return [];
+		}
+
+		const tableEntity = !!urlSelectedTable
+			? (project.logic.get(urlSelectedTable) as DefinitionEntityState)
+			: null;
+
+		const tableName = !!tableEntity
+			? toPascalCase(resolveEntityName(tableEntity, project.logic))
+			: '';
+
+		if (!tableName) {
+			return [];
+		}
+
+		const whereStatementPayload = nestedWhereOrFromSelection(
+			selection,
+			tableEntity
+		);
+
+		const results = await database.select({
+			from: tableName,
+			where: whereStatementPayload
+		});
+
+		if (!results) {
+			return [];
+		}
+
+		return results;
+	};
+
+	const saveSelectedValues = async () => {
+		// Check if there is a value
+		// And if the mode is set appropriately
+		// And if the value owner is set
+		if (!mode || !valueOwner) {
+			return;
+		}
+
+		setSaving(true);
+
+		const persistedEntities =
+			await getEntityFromPrimaryKeySelection(selection);
+
+		const storage: IValueStoreClient = project.localTestValues;
+
+		const resolvedRawValue =
+			mode === TestDatabaseDialogMode.SelectSingleFromAny ||
+			mode === TestDatabaseDialogMode.SelectSingleFromFixedTable
+				? persistedEntities[0]
+				: persistedEntities;
+
+		handleLiteralValueChange(
+			resolvedRawValue,
+			valueOwner,
+			project.logic,
+			storage
+		);
+
+		// If there is a test ongoing, notify the test
+		await project.test?.validateAsync();
+
+		setSaving(false);
+	};
+
+	const onEscapePressed = useCallback(
+		(e: KeyboardEvent) => {
+			onClose(e);
+		},
+		[onClose]
+	);
+
+	useEffect(() => {
+		project?.on('escape-key-press', onEscapePressed);
+
+		return () => {
+			project?.off('escape-key-press', onEscapePressed);
+		};
+	}, [project, onEscapePressed]);
+
+	if (!project?.logic) {
+		return (
+			<div
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					justifyContent: 'center',
+					height: '100%'
+				}}
+			>
+				<DialogLoader
+					title="Loading project"
+					subtitle="Please wait while we load the project."
+					loadingMessage="Loading project..."
+					onClose={onClose}
+				/>
+			</div>
+		);
+	}
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				height: '100%',
+				gap: '4px',
+				justifyContent: 'space-between',
+				paddingBottom: 20
+			}}
+		>
+			<div
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					height: '100%'
+				}}
+			>
+				<div
+					style={{
+						padding: 40,
+						display: 'flex',
+						alignItems: 'center',
+						justifyContent: 'space-between',
+						paddingBottom: 0
+					}}
+				>
+					<div
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+							zIndex: 0,
+							gap: 16
+						}}
+					>
+						<button
+							className="dialog_back_button"
+							onClick={(e: any) => {
+								onClose?.(e);
+							}}
+						>
+							<i
+								className="fa-solid fa-arrow-left"
+								onClick={(e: any) => onClose?.(e)}
+							/>
+						</button>
+						<h1
+							style={{
+								margin: 0,
+								fontWeight: 500,
+								fontSize: 28,
+								marginRight: 24
+							}}
+						>
+							Test database
+						</h1>
+						{mode !==
+							TestDatabaseDialogMode.SelectMultipleFromFixedTable &&
+							mode !==
+								TestDatabaseDialogMode.SelectSingleFromFixedTable && (
+								<DropdownButton
+									value={selectedDatabase}
+									id="select-local-database-button"
+									clickAwayTarget={document.getElementById(
+										'dialog-card'
+									)}
+									options={dropdownOptions}
+								/>
+							)}
+					</div>
+					<span>
+						<Button
+							iconStart="fa-solid fa-download"
+							variant="outlined"
+							size="small"
+							id="download-relational-db-data-button"
+							loading={isDownloadingDatabase}
+							onClick={downloadDatabaseData}
+						>
+							Export CSV
+						</Button>
+						<Tooltip
+							anchorQuerySelector="#download-relational-db-data-button"
+							placement="bottom"
+						>
+							Download all your database data as a CSV file.
+						</Tooltip>
+					</span>
+				</div>
+
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						gap: 16,
+						marginLeft: 80,
+						marginTop: 28,
+						marginBottom: 20
+					}}
+				>
+					<p
+						style={{
+							margin: 0,
+							color: 'rgba(0,0,0,0.7)',
+							fontSize: 14
+						}}
+					>
+						This database holds test values for the purpose of
+						testing persisted entity entries in the canvas.
+						<br />
+						<br />
+						You can safely delete and edit these values.
+						<br />
+						When a project is published, these values are ignored.
+						<br />
+						<br />
+						{mode !==
+							TestDatabaseDialogMode.SelectSingleFromFixedTable &&
+						mode !==
+							TestDatabaseDialogMode.SelectMultipleFromFixedTable
+							? "Navigate through the persisted entities' tables to see their data."
+							: `Select ${
+									mode ===
+									TestDatabaseDialogMode.SelectSingleFromFixedTable
+										? 'a value'
+										: 'any values'
+								} from the table below.`}
+					</p>
+				</div>
+
+				<section>
+					<DatabaseTable
+						project={project}
+						database={selectedDatabase}
+						selectedTable={urlSelectedTable}
+						selection={selection}
+						canNavigate={
+							mode !==
+								TestDatabaseDialogMode.SelectSingleFromFixedTable &&
+							mode !==
+								TestDatabaseDialogMode.SelectMultipleFromFixedTable
+						}
+						onSelection={(entries: any[]) => {
+							Logger.log('entries', entries);
+							setSelection(entries);
+						}}
+					/>
+				</section>
+			</div>
+
+			{(mode === TestDatabaseDialogMode.SelectSingleFromFixedTable ||
+				mode ===
+					TestDatabaseDialogMode.SelectMultipleFromFixedTable) && (
+				<div
+					style={{
+						alignSelf: 'flex-start',
+						display: 'flex',
+						flexDirection: 'row',
+						justifyContent: 'flex-end',
+						width: '100%',
+						gap: '16px',
+						padding: '0 40px'
+					}}
+				>
+					{mode ===
+						TestDatabaseDialogMode.SelectSingleFromFixedTable && (
+						<>
+							<Button
+								id="save-single-selected-value-button"
+								onClick={async (e: any) => {
+									await saveSelectedValues();
+									onClose?.(e);
+								}}
+								color="primary"
+								disabled={
+									!selection.length || selection.length > 1
+								}
+								loading={saving}
+							>
+								Save selected test value
+							</Button>
+							<Tooltip
+								anchorQuerySelector="#save-single-selected-value-button"
+								placement="bottom"
+								openDelay={
+									!selection.length || selection.length > 1
+										? 0
+										: 300
+								}
+							>
+								{!selection.length || selection.length > 1
+									? !selection.length
+										? 'Select one entry to save to the canvas.'
+										: 'Multiple entries are selected. Select only one entry to save to the canvas.'
+									: 'Save the selected value to the canvas.'}
+							</Tooltip>
+						</>
+					)}
+					{mode ===
+						TestDatabaseDialogMode.SelectMultipleFromFixedTable && (
+						<>
+							<Button
+								id="save-multiple-selected-values-button"
+								onClick={(e: any) => {
+									saveSelectedValues();
+									onClose?.(e);
+								}}
+								color="primary"
+								disabled={!selection.length}
+							>
+								Save <b>{selection.length}</b> selected test
+								value
+								{selection.length > 1 ? 's' : ''}
+							</Button>
+							<Tooltip
+								anchorQuerySelector="#save-multiple-selected-values-button"
+								placement="bottom"
+								openDelay={!selection.length ? 0 : 300}
+							>
+								{!selection.length
+									? 'Select one or more entries to save to the canvas.'
+									: 'Save all the selected entries as the value to the canvas'}
+							</Tooltip>
+						</>
+					)}
+				</div>
+			)}
+		</div>
+	);
+};
+
+export default TestDatabaseDialog;