@elyx-code/editor-ui 0.0.2

package/src/pages/Editor.tsx

@@ -0,0 +1,883 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Route, Routes, useNavigate, useParams } from 'react-router-dom';
+import { Button } from '@mui/material';
+import { Events, Logger } from '@elyx-code/common-ts-utils';
+import {
+	EntityType,
+	initProject,
+	mockClientProject,
+} from '@elyx-code/project-logic-tree';
+import { Socket } from '../socket/socket';
+import '../components/draggable-entity-card/draggable-entity-card.css';
+import ToolBar from '../components/toolbar/ToolBar';
+import PageOnlineUsers from '../components/online-users/PageOnlineUsers';
+import Dialog, { IDialogProps } from '../lib/dialog/Dialog';
+import CostsDialog from '../components/costs/CostsDialog';
+import TransactionHistoryDialog from '../components/transaction-history/TransactionHistoryDialog';
+import UserProfileDialog from '../components/user-profile/UserProfileDialog';
+import ProjectConfigurationDialog from '../components/project-configuration/ProjectConfigurationDialog';
+import ResourcesDialog from '../components/resources/ResourcesDialog';
+import Canvas from '../components/canvas/Canvas';
+import ComplexDataDialog from '../components/dialogs/ComplexDataDialog';
+import HelpDialog from '../components/dialogs/help/HelpDialog';
+import { EditorService } from '../services/editor';
+import Loader from '../lib/loader/Loader';
+import ProjectName from '../components/project-name/ProjectName';
+import GenerateProjectStartingLogicPromptDialog from '../components/GenerateProjectStartingLogicPromptDialog';
+import GeneratingProjectStartingLogicOverlay from '../components/dialogs/generating-project-starting-logic-overlay/GeneratingProjectStartingLogicOverlay';
+import TestDatabaseDialog from '../components/test-relational-database/TestDatabaseDialogContent';
+import { Notification } from '../services/notifications';
+import JsonEditorDialog from '../components/dialogs/JsonEditorDialog';
+import StringEditorDialog from '../components/dialogs/StringEditorDialog';
+import CronBuilderDialog from '../components/dialogs/CronBuilderDialog';
+import SearchStatementDialogContent from '../components/dialogs/search-statement/SearchStatementDialogContent';
+import DefinitionEntityDialogContent from '../components/dialogs/definition-entity/DefinitionEntityDialogContent';
+import ArgumentDeclarationDialogContent from '../components/dialogs/argument-declaration/ArgumentDeclarationDialogContent';
+import ValueDescriptorDialogContent from '../components/dialogs/value-descriptor/ValueDescriptorDialogContent';
+import PropertyDialogContent from '../components/dialogs/property/PropertyDialogContent';
+import ConditionDialogContent from '../components/dialogs/condition/ConditionDialogContent';
+import OperationDialogContent from '../components/dialogs/operation/OperationDialogContent';
+import FunctionCallDialogContent from '../components/dialogs/function-call/FunctionCallDialogContent';
+import FunctionDeclarationDialogContent from '../components/dialogs/function-declaration/FunctionDeclarationDialogContent';
+import GlobalEventDialogContent from '../components/dialogs/global-event/GlobalEventDialogContent';
+import InputMapDialogContent from '../components/dialogs/input-map/InputMapDialogContent';
+import OutputMapDialogContent from '../components/dialogs/output-map/OutputMapDialogContent';
+import LoopDialogContent from '../components/dialogs/loop/LoopDialogContent';
+import VariableInstanceDialogContent from '../components/dialogs/variable-instance/VariableInstanceDialogContent';
+import VariableDeclarationDialogContent from '../components/dialogs/variable-declaration/VariableDeclarationDialogContent';
+import Publication from '../components/publishing/Publication';
+import CanvasSettingsMenuButton from '../components/canvas-settings-menu/CanvasSettingsMenuButton';
+import ExternalIntegrationConnectionsDialog from '../components/dialogs/ExternalIntegrationConnections';
+import { IComponentLifecycleProps } from '../utils/react';
+import SmallDialog, { ISmallDialogProps } from '../lib/dialog/SmallDialog';
+import { useWorkspaceStore } from '../store/workspace';
+
+const LOADING_MESSAGES = [
+	'Loading logic from the server',
+	'Creating the canvas',
+	'Adding checks and validations',
+	'Almost there',
+	'Just a few more seconds',
+];
+
+export interface IEditorProps {
+	socket: Socket;
+	events: Events;
+}
+
+let lastProjectId: string | null = null;
+let project: EditorService;
+let _ready: boolean = false;
+let loadingTimer: ReturnType<typeof setInterval>;
+let currentMessageIndex: number = 0;
+
+const Editor: React.FC<IEditorProps> = (props: IEditorProps) => {
+	const editorRef = useRef<HTMLDivElement>(null);
+	const [complexDataDialogOpen, setComplexDataDialogOpen] = useState<any>(null);
+	const [jsonEditorDialogOpen, setJsonEditorDialogOpen] = useState<any>(null);
+	const [stringEditorDialogOpen, setStringEditorDialogOpen] = useState<any>(null);
+	const [cronBuilderDialogOpen, setCronBuilderDialogOpen] = useState<any>(null);
+	const [ready, setReady] = useState<boolean>(_ready);
+	const [rendered, setRendered] = useState<boolean>(!!project?.hasRendered);
+	const [hasErrored, setHasErrored] = useState<boolean>(false);
+	const [uncaughtReactError, setUncaughtReactError] = useState<Error | null>(null);
+
+	if (uncaughtReactError) {
+		throw uncaughtReactError;
+	}
+
+	const [activeLoadingMessage, setActiveLoadingMessage] = useState<string>(
+		LOADING_MESSAGES[currentMessageIndex],
+	);
+	const { id: projectId, branch, version } = useParams<{ id: string; branch: string; version: string }>();
+	const navigate = useNavigate();
+	Notification.navigate = navigate;
+	const [dynamicDialogsQueue, setDynamicDialogsQueue] = useState<
+		{
+			component: React.ReactNode;
+			id: string;
+			props: IComponentLifecycleProps & Omit<IDialogProps, 'children'>;
+		}[]
+	>([]);
+	const [smallDynamicDialogsQueue, setSmallDynamicDialogsQueue] = useState<
+		{
+			component: React.ReactNode;
+			id: string;
+			props: IComponentLifecycleProps & Omit<ISmallDialogProps, 'children'>;
+		}[]
+	>([]);
+	const activeWorkspace = useWorkspaceStore((state) => state.activeWorkspace);
+
+	const requestDynamicDialog = async (
+		callback: (handlers: {
+			close: (event: any) => Promise<void> | void;
+		}) => Promise<{
+			id: string;
+			component: React.ReactNode;
+			props: IComponentLifecycleProps & Omit<IDialogProps, 'children'>;
+		}>,
+	) => {
+		const result = await callback({
+			close: async (e) => {
+				removeDynamicDialog(result.id);
+			},
+		});
+
+		addDynamicDialogToQueue(result.id, result.component, result.props);
+	};
+
+	const addDynamicDialogToQueue = (
+		id: string,
+		dialog: React.ReactNode,
+		props: IComponentLifecycleProps & Omit<IDialogProps, 'children'>,
+	) => {
+		setDynamicDialogsQueue((prev) => [
+			...prev,
+			{ component: dialog, id, props },
+		]);
+	};
+
+	const removeActiveDynamicDialog = () => {
+		setDynamicDialogsQueue((prev) => prev.slice(1));
+	};
+
+	const removeDynamicDialog = (id: string) => {
+		setDynamicDialogsQueue((prev) => prev.filter((dialog) => dialog.id !== id));
+	};
+
+	const removeAllDynamicDialogs = () => {
+		setDynamicDialogsQueue([]);
+	};
+
+	const getActiveDynamicDialog = (): {
+		component: React.ReactNode;
+		id: string;
+		props: IComponentLifecycleProps & Omit<IDialogProps, 'children'>;
+	} | null => {
+		const dialog = dynamicDialogsQueue[0];
+		return dialog || null;
+	};
+
+	const requestSmallDynamicDialog = async (
+		callback: (handlers: {
+			close: (event: any) => Promise<void> | void;
+		}) => Promise<{
+			id: string;
+			component: React.ReactNode;
+			props: IComponentLifecycleProps & Omit<ISmallDialogProps, 'children'>;
+		}>,
+	) => {
+		const result = await callback({
+			close: async (e) => {
+				removeSmallDynamicDialog(result.id);
+			},
+		});
+
+		addSmallDynamicDialogToQueue(result.id, result.component, result.props);
+	};
+
+	const addSmallDynamicDialogToQueue = (
+		id: string,
+		dialog: React.ReactNode,
+		props: IComponentLifecycleProps & Omit<ISmallDialogProps, 'children'>,
+	) => {
+		setSmallDynamicDialogsQueue((prev) => [
+			...prev,
+			{ component: dialog, id, props },
+		]);
+	};
+
+	const removeActiveSmallDynamicDialog = () => {
+		setSmallDynamicDialogsQueue((prev) => prev.slice(1));
+	};
+
+	const removeSmallDynamicDialog = (id: string) => {
+		setSmallDynamicDialogsQueue((prev) =>
+			prev.filter((dialog) => dialog.id !== id),
+		);
+	};
+
+	const removeAllSmallDynamicDialogs = () => {
+		setSmallDynamicDialogsQueue([]);
+	};
+
+	const getActiveSmallDynamicDialog = (): {
+		component: React.ReactNode;
+		id: string;
+		props: IComponentLifecycleProps & Omit<ISmallDialogProps, 'children'>;
+	} | null => {
+		const dialog = smallDynamicDialogsQueue[0];
+		return dialog || null;
+	};
+
+	const getQueuedDynamicDialogs = (): {
+		id: string;
+		component: React.ReactNode;
+		props: IComponentLifecycleProps & Omit<IDialogProps, 'children'>;
+	}[] => {
+		return dynamicDialogsQueue;
+	};
+
+	const cycleLoadingMessage = () => {
+		loadingTimer = setInterval(() => {
+			currentMessageIndex = currentMessageIndex + 1;
+			const nextMessage = LOADING_MESSAGES[currentMessageIndex];
+
+			if (!nextMessage) {
+				currentMessageIndex = 0;
+				setActiveLoadingMessage(LOADING_MESSAGES[currentMessageIndex]);
+				return;
+			}
+
+			setActiveLoadingMessage(nextMessage);
+		}, 3000);
+	};
+
+	const setup = async () => {
+		if (project) {
+			_ready = false;
+			setReady(false);
+			setRendered(false);
+			await project.destroy();
+			// @ts-ignore
+			project = null;
+			currentMessageIndex = 0;
+			clearInterval(loadingTimer);
+		}
+
+		// Safety check (shouldn't happen because of WorkspaceLayout guard, but good practice)
+		if (!activeWorkspace) {
+			Logger.error('No active workspace found during Editor setup');
+			return;
+		}
+
+		cycleLoadingMessage();
+
+		EditorService.navigate = navigate;
+
+		project = new EditorService(
+			projectId as string,
+			props.socket as any,
+			props.events as any,
+			activeWorkspace,
+			{
+				requestDynamicDialog,
+				removeActiveDynamicDialog,
+				removeAllDynamicDialogs,
+				removeDynamicDialog,
+				requestSmallDynamicDialog,
+				removeActiveSmallDynamicDialog,
+				removeAllSmallDynamicDialogs,
+				removeSmallDynamicDialog,
+				getQueuedDynamicDialogs,
+			},
+		);
+
+		project.onProjectHeadLoaded(() => {
+			Logger.log('Project head loaded');
+		});
+
+		project.onLogicLoadingComplete((chunk) => {
+			Logger.log('Logic loading complete', chunk);
+		});
+
+		project.onRendered(() => {
+			setRendered(true);
+		});
+
+		// project.onProjectValidationComplete((chunk) => {
+		// 	Logger.log('Logic loading progress', chunk);
+		// });
+
+		let hasErrored = false;
+
+		project.onProjectSetupError(() => {
+			hasErrored = true;
+			setHasErrored(true);
+			clearInterval(loadingTimer);
+			_ready = false;
+			setReady(false);
+			setRendered(true);
+		});
+
+		await project.setup({
+			mockLogic:
+				mockClientProject.id === projectId
+					? initProject(mockClientProject)
+					: undefined,
+		});
+
+		if (!hasErrored) {
+			_ready = true;
+			clearInterval(loadingTimer);
+			currentMessageIndex = 0;
+			setReady(true);
+		}
+	};;
+
+	useEffect(() => {
+		if (
+			(!!lastProjectId && !!projectId && lastProjectId !== projectId) ||
+			!project
+		) {
+			lastProjectId = projectId as string;
+			setup();
+		}
+	}, [
+		(!!lastProjectId && !!projectId && lastProjectId !== projectId) || !project,
+	]);
+
+	useEffect(() => {
+		return () => {
+			project?.destroy();
+			// @ts-ignore
+			project = null;
+			_ready = false;
+			currentMessageIndex = 0;
+			clearInterval(loadingTimer);
+		};
+	}, []);
+
+	useEffect(() => {
+		if (ready && project?.logic?.id === projectId) {
+			Logger.log('Refreshing project', project?.logic?.id);
+			project?.refresh();
+		}
+	}, [ready, project, projectId]);
+
+	useEffect(() => {
+		const handleComplexDataDialogOpen = (payload: any) => {
+			setComplexDataDialogOpen(payload);
+		};
+
+		const handleCanvasReactError = (error: Error) => {
+			setUncaughtReactError(error);
+		};
+
+		const handleGlobalError = (event: ErrorEvent | PromiseRejectionEvent) => {
+			let error: Error;
+			if (event instanceof ErrorEvent) {
+				error = event.error;
+			} else {
+				error = event.reason;
+			}
+			setUncaughtReactError(error || new Error('Unknown error'));
+		};
+
+		// Subscribe to events
+		props.events.on('complex-data-dialog-open', handleComplexDataDialogOpen);
+		props.events.on('json-editor-dialog-open', (payload) => {
+			setJsonEditorDialogOpen(payload);
+		});
+		props.events.on('string-editor-dialog-open', (payload) => {
+			setStringEditorDialogOpen(payload);
+		});
+		props.events.on('cron-builder-dialog-open', (payload) => {
+			setCronBuilderDialogOpen(payload);
+		});
+		props.events.on('canvas-react-error', handleCanvasReactError);
+		
+		window.addEventListener('error', handleGlobalError);
+		window.addEventListener('unhandledrejection', handleGlobalError);
+
+		return () => {
+			props.events.off('canvas-react-error', handleCanvasReactError);
+			window.removeEventListener('error', handleGlobalError);
+			window.removeEventListener('unhandledrejection', handleGlobalError);
+		};
+	}, [props.events]);
+
+	useEffect(() => {
+		const el = editorRef.current;
+		if (!el) return;
+
+		const onWheel = (e: any) => {
+			// Chrome/Firefox map pinch→wheel+ctrlKey,
+			// Safari maps pinch→wheel+metaKey
+			if (e.ctrlKey || e.metaKey) {
+				e.preventDefault();
+			}
+		};
+
+		const onGesture = (e: any) => {
+			// legacy Safari pinch events
+			e.preventDefault();
+		};
+
+		// must be non-passive so preventDefault() works
+		el.addEventListener('wheel', onWheel, { passive: false });
+		el.addEventListener('gesturestart', onGesture, { passive: false });
+		el.addEventListener('gesturechange', onGesture, { passive: false });
+
+		return () => {
+			el.removeEventListener('wheel', onWheel);
+			el.removeEventListener('gesturestart', onGesture);
+			el.removeEventListener('gesturechange', onGesture);
+		};
+	}, []);
+
+	useEffect(() => {
+		if (project) {
+			project.callbacks.removeActiveDynamicDialog = removeActiveDynamicDialog;
+			project.callbacks.removeAllDynamicDialogs = removeAllDynamicDialogs;
+			project.callbacks.removeDynamicDialog = removeDynamicDialog;
+			project.callbacks.removeActiveSmallDynamicDialog =
+				removeActiveSmallDynamicDialog;
+			project.callbacks.removeAllSmallDynamicDialogs =
+				removeAllSmallDynamicDialogs;
+			project.callbacks.removeSmallDynamicDialog = removeSmallDynamicDialog;
+		}
+	});
+
+	if (hasErrored) {
+		return (
+			<div
+				id='loading-error-page'
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					alignItems: 'center',
+					justifyContent: 'center',
+					height: '100vh',
+					width: '100vw',
+				}}
+			>
+				<h1>Failed to load project</h1>
+				<p>
+					An error occurred while loading the project. Please try again later.
+				</p>
+				<Button
+					href={`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`}
+					variant='outlined'
+					color='primary'
+					onClick={(e) => {
+						e.preventDefault();
+						navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`);
+						window.location.reload();
+					}}
+				>
+					Reload
+				</Button>
+				<br />
+				{/* Go back to /gallery button */}
+				<Button
+					href={`/ws/${activeWorkspace?.slug}/gallery`}
+					variant='contained'
+					color='primary'
+					onClick={(e) => {
+						e.preventDefault();
+						navigate(`/ws/${activeWorkspace?.slug}/gallery`);
+					}}
+				>
+					Go back to gallery
+				</Button>
+			</div>
+		);
+	}
+
+	const activeDynamicDialog = getActiveDynamicDialog();
+	const activeSmallDynamicDialog = getActiveSmallDynamicDialog();
+
+	return (
+		<div id='editor' ref={editorRef}>
+			<Canvas />
+			<PageOnlineUsers project={project} />
+			<ToolBar project={project} ready={ready} />
+			<ProjectName project={project} ready={ready} />
+			<CanvasSettingsMenuButton project={project} ready={ready} />
+			<div id='test-menu-container' />
+			{!rendered && (
+				<div
+					style={{
+						position: 'fixed',
+						top: '50%',
+						left: '50%',
+						transform: 'translate(-50%, -50%)',
+						display: 'flex',
+						flexDirection: 'column',
+						alignItems: 'center',
+						justifyContent: 'center',
+						maxWidth: '150px',
+						textAlign: 'center',
+						zIndex: 1,
+					}}
+				>
+					<Loader size={120} color='primary' variant='text' thickness='thin' />
+					<p style={{ color: 'rgba(0, 0, 0, 0.54)' }}>
+						{activeLoadingMessage}
+					</p>
+				</div>
+			)}
+			<Routes>
+				<Route
+					path='profile/:userId'
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<UserProfileDialog
+								onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+							/>
+						</Dialog>
+					}
+				/>
+				<Route
+					path='starting-logic-generation'
+					element={
+						<GenerateProjectStartingLogicPromptDialog
+							project={project}
+							ready={ready}
+						/>
+					}
+				/>
+				<Route
+					path='generating-starting-logic/:taskId'
+					element={
+						<GeneratingProjectStartingLogicOverlay
+							project={project}
+							ready={ready}
+						/>
+					}
+				/>
+				<Route
+					path='publication/*'
+					element={
+						<Publication
+							project={project}
+							onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+							ready={ready}
+						/>
+					}
+				/>
+				<Route
+					path='costs'
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<CostsDialog project={project} onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)} />
+						</Dialog>
+					}
+				/>
+				<Route
+					path='transaction-history'
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<TransactionHistoryDialog
+								project={project}
+								onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+							/>
+						</Dialog>
+					}
+				/>
+				<Route
+					path='project-configuration'
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<ProjectConfigurationDialog
+								onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+								project={project}
+								ready={ready}
+							/>
+						</Dialog>
+					}
+				/>
+				<Route
+					path='resources/*'
+					element={
+						<Dialog
+							onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+							// contentHeight
+						>
+							<ResourcesDialog
+								onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+								project={project}
+							/>
+						</Dialog>
+					}
+				/>
+				<Route
+					path='help'
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<HelpDialog project={project} onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)} />
+						</Dialog>
+					}
+				/>
+				<Route
+					path='help/:tab'
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<HelpDialog project={project} onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)} />
+						</Dialog>
+					}
+				/>
+				<Route
+					path='test-relational-database/:selectedDatabase/table/:selectedTable'
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<TestDatabaseDialog
+								onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+								project={project}
+								ready={ready}
+							/>
+						</Dialog>
+					}
+				/>
+				<Route
+					path={`entity/${EntityType.Search}/:entityId`}
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<SearchStatementDialogContent
+								ready={ready}
+								onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+								project={project}
+							/>
+						</Dialog>
+					}
+				/>
+				<Route
+					path={`entity/${EntityType.DefinitionEntity}/:entityId`}
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<DefinitionEntityDialogContent
+								ready={ready}
+								onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+								project={project}
+							/>
+						</Dialog>
+					}
+				/>
+				<Route
+					path={`entity/${EntityType.ArgumentDeclaration}/:entityId`}
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<ArgumentDeclarationDialogContent
+								ready={ready}
+								onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+								project={project}
+							/>
+						</Dialog>
+					}
+				/>
+				<Route
+					path={`entity/${EntityType.ValueDescriptor}/:entityId`}
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<ValueDescriptorDialogContent
+								ready={ready}
+								onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+								project={project}
+							/>
+						</Dialog>
+					}
+				/>
+				<Route
+					path={`entity/${EntityType.Property}/:entityId`}
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<PropertyDialogContent
+								onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+								project={project}
+							/>
+						</Dialog>
+					}
+				/>
+				<Route
+					path={`entity/${EntityType.Condition}/:entityId`}
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<ConditionDialogContent
+								ready={ready}
+								onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+								project={project}
+							/>
+						</Dialog>
+					}
+				/>
+				<Route
+					path={`entity/${EntityType.Operation}/:entityId`}
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<OperationDialogContent
+								ready={ready}
+								onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+								project={project}
+							/>
+						</Dialog>
+					}
+				/>
+				<Route
+					path={`entity/${EntityType.FunctionCall}/:entityId`}
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<FunctionCallDialogContent
+								ready={ready}
+								onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+								project={project}
+							/>
+						</Dialog>
+					}
+				/>
+				<Route
+					path={`entity/${EntityType.FunctionDeclaration}/:entityId`}
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<FunctionDeclarationDialogContent
+								ready={ready}
+								onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+								project={project}
+							/>
+						</Dialog>
+					}
+				/>
+				<Route
+					path={`entity/${EntityType.GlobalEvent}/:entityId`}
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<GlobalEventDialogContent
+								ready={ready}
+								onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+								project={project}
+							/>
+						</Dialog>
+					}
+				/>
+				<Route
+					path={`entity/${EntityType.InputMap}/:entityId`}
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<InputMapDialogContent
+								ready={ready}
+								onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+								project={project}
+							/>
+						</Dialog>
+					}
+				/>
+				<Route
+					path={`entity/${EntityType.OutputMap}/:entityId`}
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<OutputMapDialogContent
+								ready={ready}
+								onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+								project={project}
+							/>
+						</Dialog>
+					}
+				/>
+				<Route
+					path={`entity/${EntityType.Loop}/:entityId`}
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<LoopDialogContent
+								ready={ready}
+								onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+								project={project}
+							/>
+						</Dialog>
+					}
+				/>
+				<Route
+					path={`entity/${EntityType.VariableDeclaration}/:entityId`}
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<VariableDeclarationDialogContent
+								ready={ready}
+								onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+								project={project}
+							/>
+						</Dialog>
+					}
+				/>
+				<Route
+					path={`entity/${EntityType.VariableInstance}/:entityId`}
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<VariableInstanceDialogContent
+								ready={ready}
+								onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+								project={project}
+							/>
+						</Dialog>
+					}
+				/>
+
+				<Route
+					path={`external-integration-connections/:valueOwnerId`}
+					element={
+						<Dialog onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}>
+							<ExternalIntegrationConnectionsDialog
+								ready={ready}
+								onClose={() => navigate(`/ws/${activeWorkspace?.slug}/editor/${projectId}/${branch || 'main'}/${version || 'latest'}`)}
+								project={project}
+							/>
+						</Dialog>
+					}
+				/>
+			</Routes>
+
+			{!!activeDynamicDialog && (
+				<Dialog
+					{...activeDynamicDialog.props}
+					// On close should go after the other props are spread to avoid overriding the base onClose
+					onClose={async (e) => {
+						removeActiveDynamicDialog();
+						activeDynamicDialog.props.onClose?.(e);
+					}}
+				>
+					{activeDynamicDialog.component}
+				</Dialog>
+			)}
+
+			{!!activeSmallDynamicDialog && (
+				<SmallDialog
+					{...activeSmallDynamicDialog.props}
+					// On close should go after the other props are spread to avoid overriding the base onClose
+					onClose={async (e) => {
+						removeActiveSmallDynamicDialog();
+						activeSmallDynamicDialog.props.onClose?.(e);
+					}}
+				>
+					{activeSmallDynamicDialog.component}
+				</SmallDialog>
+			)}
+
+			{complexDataDialogOpen && (
+				<Dialog onClose={() => setComplexDataDialogOpen(null)}>
+					<ComplexDataDialog
+						{...complexDataDialogOpen}
+						onClose={() => setComplexDataDialogOpen(null)}
+						project={project}
+					/>
+				</Dialog>
+			)}
+			{jsonEditorDialogOpen && (
+				<Dialog onClose={() => setJsonEditorDialogOpen(null)}>
+					<JsonEditorDialog
+						{...jsonEditorDialogOpen}
+						onClose={() => setJsonEditorDialogOpen(null)}
+						project={project}
+					/>
+				</Dialog>
+			)}
+			{stringEditorDialogOpen && (
+				<Dialog onClose={() => setStringEditorDialogOpen(null)}>
+					<StringEditorDialog
+						{...stringEditorDialogOpen}
+						onClose={() => setStringEditorDialogOpen(null)}
+						project={project}
+					/>
+				</Dialog>
+			)}
+			{cronBuilderDialogOpen && (
+				<Dialog onClose={() => setCronBuilderDialogOpen(null)}>
+					<CronBuilderDialog
+						{...cronBuilderDialogOpen}
+						onClose={() => setCronBuilderDialogOpen(null)}
+						project={project}
+					/>
+				</Dialog>
+			)}
+		</div>
+	);
+};
+
+export default Editor;