@elyx-code/editor-ui 0.0.2

package/src/components/publishing/preview/PublicationPreviewDialog.tsx

@@ -0,0 +1,1158 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import short from 'short-uuid';
+import '../publishing-dialog.css';
+import { getAccessToken, getCurrentUserOrLogoutRedirect } from '../../../auth';
+import VersionsIcon from '../../../assets/versions.svg';
+import Button from '../../../lib/button/Button';
+import PublishingResourcesDetails from './PublishingResourcesDetails';
+import PublishingPriceForecast from './PublishingPriceForecast';
+import {
+	PUBLISHING_DISABLED_REASONS,
+	fromPublishingDisabledCodeToReadable,
+} from '../utils';
+import Tooltip from '../../../lib/tooltip/Tooltip';
+import {
+	ADD_PAYMENT_METHOD_PROCESS,
+	startAddPaymentMethodSession,
+} from '../../../payments';
+import { EditorService } from '../../../services/editor';
+import DialogLoader from '../../DialogLoader';
+import {
+	AWS_SERVER_SIDE_PROJECT_DEPLOYMENT_SEQUENCE,
+	InfrastructureResourceType,
+	IUser,
+	PublicationStatus,
+} from '@elyx-code/definitions';
+import {
+	BaseEntityNames,
+	ChangeSet,
+	checkHasBaseEntity,
+	createOrUpdateRowTransformer,
+	DefinitionEntityState,
+	EntityError,
+	EntityErrorCode,
+	EntityErrorSeverity,
+	EntityType,
+	getParentCanvasEntity,
+	ISQLMigrationsDiffs,
+	ProjectState,
+	resolveSQLMigrationsDiffs,
+	StateMutationAction,
+} from '@elyx-code/project-logic-tree';
+import EntityErrorListItem from '../../entity-error/EntityErrorListItem';
+import { getCanvasEntityDraggableContainerDOMId } from '../../../services/editor/ui';
+import { Logger, YieldTracker } from '@elyx-code/common-ts-utils';
+import { popupNotification } from '../../../popup-notification';
+import {
+	Alert,
+	Box,
+	CircularProgress,
+	Typography,
+	Button as MUIButton,
+} from '@mui/material';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { envConfig } from '../../../config';
+import { getRelationalDBInstanceNameFromEntityId } from '../../../services/editor/publication/publication';
+
+const translator = short();
+
+export enum ProjectValidationErrorsEnum {
+	NO_LOGIC = 'NO_LOGIC',
+	NO_NAME = 'NO_NAME',
+}
+
+export type ProjectValidationErrors =
+	| ProjectValidationErrorsEnum
+	| EntityErrorCode;
+
+// Returns diffs for every top-level persisted definition-entity that has
+// changed since the last publication in a way that requires a row-transformer
+// (either a brand-new one is needed, or an open one exists but is stale).
+function resolveMissingRowTransformerDiffs(
+	project: EditorService,
+): ISQLMigrationsDiffs[] {
+	if (!project.lastPublishedProjectState) return [];
+
+	const persistedEntities = project.logic.entities.filter(
+		(entity): entity is DefinitionEntityState =>
+			entity.type === EntityType.DefinitionEntity &&
+			(entity as DefinitionEntityState).parent.type !== EntityType.DataType &&
+			checkHasBaseEntity(entity, BaseEntityNames.PERSISTED_ENTITY),
+	);
+
+	const diffs = persistedEntities
+		.map((entity) =>
+			resolveSQLMigrationsDiffs(
+				project.logic,
+				project.lastPublishedProjectState,
+				entity,
+			),
+		)
+		.filter(
+			(diff) =>
+				diff.newRowTransformerNeeded ||
+				diff.isPreexistingRowTransformerUpToDate === false,
+		);
+
+	return diffs;
+}
+
+async function getOnlyRelevantErrorsForPublication(
+	projectState: ProjectState,
+): Promise<EntityError[]> {
+	const errors: EntityError[] = [];
+
+	if (
+		(!projectState.entities || !projectState.entities.length) &&
+		(!projectState.functions || !projectState.functions.length)
+	) {
+		errors.push(
+			// @ts-ignore
+			new EntityError<ProjectValidationErrorsEnum>({
+				code: ProjectValidationErrorsEnum.NO_LOGIC,
+				id: projectState.id + '--' + ProjectValidationErrorsEnum.NO_LOGIC,
+				message: `Entity of type ${projectState.type} with id "${projectState.id}" must contain at least one entity or function to be published.`,
+				severity: EntityErrorSeverity.Error,
+				entity: projectState,
+			}),
+		);
+	}
+
+	if (!projectState.name) {
+		errors.push(
+			// @ts-ignore
+			new EntityError<ProjectValidationErrorsEnum>({
+				code: ProjectValidationErrorsEnum.NO_NAME,
+				id: projectState.id + '--' + ProjectValidationErrorsEnum.NO_NAME,
+				message: `Entity of type ${projectState.type} with id "${projectState.id}" must have a name to be published.`,
+				severity: EntityErrorSeverity.Error,
+				entity: projectState,
+			}),
+		);
+	}
+
+	const tracker = YieldTracker.from({ yieldEvery: 100 });
+
+	await projectState.validateAsync({ tracker });
+
+	const projectErrors = (await projectState.getErrorsAsync({ tracker })).filter(
+		(error) => EntityErrorSeverity.Error === error.severity,
+	);
+
+	return [...errors, ...projectErrors];
+}
+
+export interface IPublishingDialogProps {
+	onClose: (event: any) => void;
+	contentHeight?: boolean;
+	project: EditorService;
+}
+
+function assemblePreviewData(project: EditorService) {
+	// Here we loop over the routes integrations, looking for the serverless function belonging to the entities in the project payload
+	// Any function without an entity we count as deleted
+	// Any entity without a function we count as new
+	// All others we count as modified
+
+	let deletedFunctionsCount = 0;
+	let newFunctionsCount = 0;
+	let modifiedFunctionsCount = 0;
+
+	let deletedRelationsDatabasesCount = 0;
+	let newRelationsDatabasesCount = 0;
+	let modifiedRelationsDatabasesCount = 0;
+
+	// So we can assume that every new entity results in 3 routes and 3 functions
+	// +1 'options' method route for the http api which is always present
+	const callableEntities = project.logic.entities.filter(
+		(entity) =>
+			checkHasBaseEntity(entity, BaseEntityNames.CRON_JOB) ||
+			checkHasBaseEntity(entity, BaseEntityNames.HTTP_ENDPOINT),
+	);
+	const endpointEntities = project.logic.entities.filter((entity) =>
+		checkHasBaseEntity(entity, BaseEntityNames.HTTP_ENDPOINT),
+	);
+	const relationalDatabaseEntities = project.logic.entities.filter((entity) =>
+		checkHasBaseEntity(entity, BaseEntityNames.RELATIONAL_DATABASE),
+	);
+	const totalFunctionsCount = callableEntities.length;
+
+	const seenOfEndpointEntityIds = new Set<string>();
+	const seenOfRelationalDatabaseEntityIds = new Set<string>();
+
+	(project.liveResources || []).forEach((resource) => {
+		if (resource.resourceType === InfrastructureResourceType.HttpApi) {
+			resource.details?.routes.forEach((route) => {
+				// We skip the method http route because it is present by default in all apps
+				if (route.target.resource.resourceId?.endsWith('-options')) {
+					return;
+				}
+
+				const functionIdParts =
+					route.target.resource.resourceId?.split('fn_') || [];
+
+				const sanitizedFunctionEntityId = translator.toUUID(
+					functionIdParts[functionIdParts.length - 1],
+				);
+
+				const foundEntityForFunction = endpointEntities.find(
+					(entity) => entity.id === sanitizedFunctionEntityId,
+				);
+
+				if (!foundEntityForFunction) {
+					// This function has no entity, so we will never find it
+					if (
+						!route.target.resource.resourceId?.includes(
+							'function:http-options-project-',
+						)
+					) {
+						// Function exists but entity is missing, it was deleted
+						deletedFunctionsCount++;
+					}
+				} else {
+					// This entity has a function deployed, so it existed before and it has been modified
+					seenOfEndpointEntityIds.add(foundEntityForFunction.id);
+					modifiedFunctionsCount++;
+				}
+			});
+		} else if (
+			resource.resourceType === InfrastructureResourceType.RelationalDatabase
+		) {
+			const foundEntityForDatabase = relationalDatabaseEntities.find(
+				(entity) =>
+					getRelationalDBInstanceNameFromEntityId(
+						entity.id,
+						project?.branchHead?.identifier,
+					) === resource.resourceId,
+			);
+
+			if (!foundEntityForDatabase) {
+				// This function has no entity, so we will never find it
+				if (!resource.resourceId?.includes('function:http-options-project-')) {
+					// Function exists but entity is missing, it was deleted
+					deletedRelationsDatabasesCount++;
+				}
+			} else {
+				// This entity has a function deployed, so it existed before and it has been modified
+				seenOfRelationalDatabaseEntityIds.add(foundEntityForDatabase.id);
+				modifiedRelationsDatabasesCount++;
+			}
+		}
+	});
+
+	// Loop over project entities and check if we saw them in the previously deployed routes
+	// These entities don't have functions deployed, so they are new
+	const newEndpointsEntities = endpointEntities.filter(
+		(entity) => !seenOfEndpointEntityIds.has(entity.id),
+	);
+	const newRelationalDatabases = relationalDatabaseEntities.filter(
+		(entity) => !seenOfRelationalDatabaseEntityIds.has(entity.id),
+	);
+
+	// There is 3 http methods for each entity 'get', 'post', 'patch'
+	// So we can assume that every new entity results in 3 routes and 3 functions
+	newFunctionsCount = newEndpointsEntities.length;
+	newRelationsDatabasesCount = newRelationalDatabases.length;
+
+	const relationalDatabasesSummary = {
+		type: InfrastructureResourceType.RelationalDatabase,
+		items: {
+			total: {
+				count: newRelationsDatabasesCount + modifiedRelationsDatabasesCount,
+			},
+			new: {
+				count: newRelationsDatabasesCount,
+			},
+			modified: {
+				count: modifiedRelationsDatabasesCount,
+			},
+			deleted: {
+				count: deletedRelationsDatabasesCount,
+			},
+		},
+	};
+
+	const httpApiSummary = {
+		type: InfrastructureResourceType.HttpEndpoint,
+		items: {
+			total: {
+				count: newFunctionsCount + modifiedFunctionsCount,
+			},
+			new: {
+				count: newFunctionsCount,
+			},
+			modified: {
+				count: modifiedFunctionsCount,
+			},
+			deleted: {
+				count: deletedFunctionsCount,
+			},
+		},
+	};
+
+	const cloudHostedCodebaseSummary = {
+		type: InfrastructureResourceType.ServerlessFunction,
+		items: {
+			total: {
+				count: newFunctionsCount + modifiedFunctionsCount,
+			},
+			new: {
+				count: newFunctionsCount,
+			},
+			modified: {
+				count: modifiedFunctionsCount,
+			},
+			deleted: {
+				count: deletedFunctionsCount,
+			},
+		},
+	};
+
+	const resources = [
+		relationalDatabasesSummary,
+		httpApiSummary,
+		cloudHostedCodebaseSummary,
+	];
+
+	const isUsersFirstPublishedProject = false;
+
+	const costItems = [
+		{
+			value: 27,
+			currency: 'EUR',
+			valueType: 'absolute',
+			type: 'cost',
+			amount: relationalDatabasesSummary.items.total.count,
+			name: InfrastructureResourceType.RelationalDatabase,
+		},
+		{
+			value: 0.5,
+			currency: 'EUR',
+			valueType: 'absolute',
+			type: 'cost',
+			amount: httpApiSummary.items.total.count,
+			name: InfrastructureResourceType.HttpApi,
+		},
+		{
+			value: 0.5,
+			currency: 'EUR',
+			valueType: 'absolute',
+			type: 'cost',
+			amount: cloudHostedCodebaseSummary.items.total.count,
+			name: InfrastructureResourceType.CloudHostedCodebase,
+		},
+		// If this is the first project published by the user, we add a discount of 28 EUR for the first month
+		// 28 EUR should cover for a basic web server application with near-zero traffic
+		...(isUsersFirstPublishedProject
+			? [
+					{
+						value: 28,
+						currency: 'EUR',
+						valueType: 'absolute',
+						type: 'discount',
+						amount: 1,
+						name: 'first-published-project-monthly-discount',
+					},
+				]
+			: []),
+	];
+
+	// Calculate the total price from the cost items
+	const totalCostValue = costItems.reduce((total, costItem) => {
+		if (costItem.type === 'discount') {
+			return total - costItem.value * costItem.amount;
+		}
+		return total + costItem.value * costItem.amount;
+	}, 0);
+
+	const totalCostSummary = {
+		value: totalCostValue,
+		currency: 'EUR',
+		valueType: 'absolute',
+		type: totalCostValue >= 0 ? 'cost' : 'discount',
+		amount: 1,
+		name: 'total',
+	};
+
+	const nextProjectAutoIncrementPublicationCount =
+		(project.livePublication?.projectAutoIncrementPublicationCount || 0) + 1;
+	const nextProjectPublishedSemanticVersion = `${nextProjectAutoIncrementPublicationCount}.0.0`;
+	const nextProjectVersion = project.logic.version;
+
+	const nextPublicationDetails = {
+		nextProjectAutoIncrementPublicationCount,
+		nextProjectPublishedSemanticVersion,
+		nextProjectVersion,
+	};
+
+	const data = {
+		resources,
+		monthlyCostForecast: {
+			items: costItems,
+			total: totalCostSummary,
+		},
+		nextPublicationDetails,
+	};
+
+	return data;
+}
+
+const calculateMockPublishingDetails = (project: ProjectState) => {
+	let deletedFunctionsCount = 0;
+	let newFunctionsCount = 0;
+	let modifiedFunctionsCount = 0;
+
+	// So we can assume that every new entity results in 3 routes and 3 functions
+	// +1 'options' method route for the http api which is always present
+	const totalFunctionsCount = project.entities.length * 3 + 1;
+
+	const costItems = [
+		{
+			value: 27,
+			currency: 'EUR',
+			valueType: 'absolute',
+			type: 'cost',
+			amount: 1,
+			name: InfrastructureResourceType.RelationalDatabase,
+		},
+		{
+			value: 0.5,
+			currency: 'EUR',
+			valueType: 'absolute',
+			type: 'cost',
+			amount: 1,
+			name: InfrastructureResourceType.HttpApi,
+		},
+		{
+			value: 0.5,
+			currency: 'EUR',
+			valueType: 'absolute',
+			type: 'cost',
+			amount: 1,
+			name: InfrastructureResourceType.CloudHostedCodebase,
+		},
+		// If this is the first project published by the user, we add a discount of 28 EUR for the first month
+		// 28 EUR should cover for a basic web server application with near-zero traffic
+		...(true // Forcing true for now, to test
+			? [
+					{
+						value: 28,
+						currency: 'EUR',
+						valueType: 'absolute',
+						type: 'discount',
+						amount: 1,
+						name: 'first-published-project-monthly-discount',
+					},
+				]
+			: []),
+	];
+
+	// Calculate the total price from the cost items
+	const totalCostValue = costItems.reduce((total, costItem) => {
+		if (costItem.type === 'discount') {
+			return total - costItem.value;
+		}
+		return total + costItem.value;
+	}, 0);
+
+	const totalCostSummary = {
+		value: totalCostValue,
+		currency: 'EUR',
+		valueType: 'absolute',
+		type: totalCostValue >= 0 ? 'cost' : 'discount',
+		amount: 1,
+		name: 'total',
+	};
+
+	const resources = [
+		{
+			type: InfrastructureResourceType.RelationalDatabase,
+			items: {
+				total: {
+					count: 1,
+				},
+				new: {
+					count: true ? 1 : 0,
+				},
+				modified: {
+					count: true ? 0 : 1,
+				},
+				deleted: {
+					count: 0,
+				},
+			},
+		},
+		{
+			type: InfrastructureResourceType.HttpEndpoint,
+			items: {
+				total: {
+					count: totalFunctionsCount,
+				},
+				new: {
+					count: true ? totalFunctionsCount : newFunctionsCount,
+				},
+				modified: {
+					count: modifiedFunctionsCount,
+				},
+				deleted: {
+					count: deletedFunctionsCount,
+				},
+			},
+		},
+		{
+			type: InfrastructureResourceType.ServerlessFunction,
+			items: {
+				total: {
+					count: totalFunctionsCount,
+				},
+				new: {
+					count: true ? totalFunctionsCount : newFunctionsCount,
+				},
+				modified: {
+					count: modifiedFunctionsCount,
+				},
+				deleted: {
+					count: deletedFunctionsCount,
+				},
+			},
+		},
+	];
+
+	const data = {
+		resources,
+		publicationSequence: AWS_SERVER_SIDE_PROJECT_DEPLOYMENT_SEQUENCE,
+		monthlyCostForecast: {
+			items: costItems,
+			total: totalCostSummary,
+		},
+	};
+
+	return data;
+};
+
+const PublicationPreviewDialog: React.FC<IPublishingDialogProps> = ({
+	onClose,
+	project,
+}) => {
+	if (!project || !project.logic || !project.ready) {
+		return (
+			<DialogLoader
+				title='Project publication'
+				subtitle='Publish your project to the cloud'
+				onClose={onClose}
+			/>
+		);
+	}
+
+	const [publishingDetails, setPublishingDetails] = useState<any | null>(null);
+	const [user, setUser] = useState<IUser | null>(null);
+	const [publishingDisabledReason, setPublishingDisabledReason] =
+		useState<PUBLISHING_DISABLED_REASONS | null>(null);
+	const [isDownloadingCode, setIsDownloadingCode] = useState<boolean>(false);
+	const [paymentMethods, setPaymentMethods] = useState<any[] | null>(null);
+	const [isInitialisingPublication, setIsInitialisingPublication] =
+		useState<boolean>(false);
+	const [projectErrors, setProjectErrors] = useState<EntityError[]>([]);
+	const [missingMigrationDiffs, setMissingMigrationDiffs] = useState<
+		ISQLMigrationsDiffs[]
+	>([]);
+
+	// const fetchPublicationPreview = async () => {
+	// 	if (!project.projectId) return;
+
+	// 	try {
+	// 		// const response = await axios.get(
+	// 		// 	// `${envConfig.API_BASE_URL}/publishing-service/v1/publication-preview?projectId=${projectId}&targets=server`,
+	// 		// 	`${envConfig.API_BASE_URL}/publishing-service/v1/publication-preview?projectId=${project.projectId}&targets=server`,
+	// 		// 	{
+	// 		// 		headers: {
+	// 		// 			Authorization: `Bearer ${await getAccessToken()}`,
+	// 		// 		},
+	// 		// 	}
+	// 		// );
+	// 		// Logger.log('Publication preview response:', response);
+	// 		return assemblePreviewData(project);
+	// 	} catch (error) {
+	// 		Logger.error('Error fetching publication preview:', error);
+	// 		return calculateMockPublishingDetails(project.logic);
+	// 	}
+	// };
+
+	const fetchPaymentMethods = async () => {
+		try {
+			const response = await axios.get(
+				`${envConfig.API_BASE_URL}/pricing-service/v1/${project.activeWorkspace?.id}/payment-methods`,
+				{
+					headers: {
+						Authorization: `Bearer ${await getAccessToken()}`,
+					},
+				},
+			);
+
+			return response.data.items;
+		} catch (error) {
+			Logger.error('Error fetching payment methods:', error);
+			return [];
+		}
+	};
+
+	const loadPreview = async () => {
+		Logger.log('Fetching data...');
+		if (
+			(!project.logic.entities || !project.logic.entities.length) &&
+			(!project.logic.functions || !project.logic.functions.length) &&
+			(!project.logic.events || !project.logic.events.length)
+		) {
+			Logger.log('No logic found in project');
+			setPublishingDisabledReason(PUBLISHING_DISABLED_REASONS.NO_LOGIC);
+			return;
+		}
+
+		if (!project.logic.name) {
+			Logger.log('No name found in project');
+			setPublishingDisabledReason(PUBLISHING_DISABLED_REASONS.NO_NAME);
+			return;
+		}
+
+		await project.validateProjectState();
+
+		// Row-transformer check takes priority over logic errors. If persisted
+		// data structures have drifted from the live database, the user must add
+		// row transformers before we let them publish — regardless of any other
+		// validation problems further down the tree.
+		const missingDiffs = resolveMissingRowTransformerDiffs(project);
+		if (missingDiffs.length) {
+			setMissingMigrationDiffs(missingDiffs);
+			setPublishingDisabledReason(
+				PUBLISHING_DISABLED_REASONS.MISSING_ROW_TRANSFORMERS,
+			);
+			return;
+		}
+
+		const projectErrors = (
+			await getOnlyRelevantErrorsForPublication(project.logic)
+		).filter((error) => error.severity === EntityErrorSeverity.Error);
+
+		if (projectErrors.length) {
+			setProjectErrors(projectErrors);
+			setPublishingDisabledReason(PUBLISHING_DISABLED_REASONS.LOGIC_ERRORS);
+			return;
+		}
+
+		const publicationPreview = assemblePreviewData(project);
+		setPublishingDetails(publicationPreview);
+
+		const [paymentMethods, user] = await Promise.all([
+			// fetchPublicationPreview(),
+			fetchPaymentMethods(),
+			getCurrentUserOrLogoutRedirect(),
+		]);
+
+		Logger.log('Fetched data:', {
+			// publicationPreview,
+			paymentMethods,
+			user,
+		});
+
+		setPaymentMethods(paymentMethods);
+		setUser(user);
+	};
+
+	const _startAddPaymentMethodSession = async () => {
+		return startAddPaymentMethodSession({
+			projectId: project.projectId,
+			process: ADD_PAYMENT_METHOD_PROCESS.PUBLISH_PROJECT,
+			workspaceId: project.activeWorkspace?.id,
+			workspaceSlug: project.activeWorkspace?.slug,
+			branchIdentifier: project.viewingBranch,
+			projectVersion: project.viewingVersion,
+		});
+	};
+
+	const onPublishClick = async () => {
+		Logger.log('onPublishClick');
+		setIsInitialisingPublication(true);
+
+		if (!paymentMethods?.length) {
+			_startAddPaymentMethodSession();
+		} else {
+			setIsInitialisingPublication(true);
+			Logger.log('Publishing project...');
+			await project.publish();
+		}
+	};
+
+	const onDownloadCodeClick = async () => {
+		setIsDownloadingCode(true);
+
+		try {
+			await project.downloadCode({
+				version: 'latest',
+				onProcessError(error) {
+					popupNotification({
+						text: 'Error preparing code download: ' + error.message,
+						color: 'error',
+					});
+				},
+				onDownloadError(error) {
+					popupNotification({
+						text: 'Error downloading code: ' + error.message,
+						color: 'error',
+					});
+				},
+			});
+
+			// ACK received → mark success locally
+			popupNotification({
+				text: 'Code downloaded',
+			});
+		} catch (error) {
+			console.log(
+				'Error downloading latest version of the code error: ',
+				error,
+			);
+		}
+		setIsDownloadingCode(false);
+	};
+
+	useEffect(() => {
+		Logger.log('Publication dialog mounted...');
+		loadPreview();
+	}, [project?.liveResources]);
+
+	// Generate (or extend) the row transformers for every persisted entity whose
+	// diffs require one, then send the user back to the canvas focused on the
+	// first transformer we touched so they can review/customise it.
+	const onAddMissingRowTransformers = (event: any) => {
+		if (!missingMigrationDiffs.length) return;
+
+		const changeSet = project.logic.addChangeSet(
+			new ChangeSet(
+				project.logic,
+				ProjectState.sessionAuthor,
+				new Date().toISOString(),
+				project.logic,
+				false,
+				StateMutationAction.GenerateSQLMigrationOnPersistedEntityUpdate,
+			),
+		);
+
+		let firstTransformer: DefinitionEntityState | null = null;
+
+		missingMigrationDiffs.forEach((diffs) => {
+			const { rowTransformer } = createOrUpdateRowTransformer(
+				project.logic,
+				diffs,
+				changeSet,
+			);
+			if (!firstTransformer) firstTransformer = rowTransformer;
+
+			diffs.extendedEntities.forEach((extDiffs, i) => {
+				createOrUpdateRowTransformer(project.logic, extDiffs, changeSet, {
+					x: (i + 1) * 600,
+					y: 800,
+				});
+			});
+		});
+
+		project.renderAndCloseChangeSet(changeSet);
+
+		onClose(event);
+
+		if (firstTransformer) {
+			if (project.canvas?.currentScale < 0.7) {
+				project.canvas?.zoomTo(0.7);
+			} else if (project.canvas?.currentScale > 1) {
+				project.canvas?.zoomTo(1);
+			}
+			project.canvas?.scrollToObjectById(
+				getCanvasEntityDraggableContainerDOMId(firstTransformer),
+			);
+		}
+	};
+
+	const dataIsLoading = !project || !user || paymentMethods === null;
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				height: '100%',
+				gap: '4px',
+				padding: '40px',
+				overflowY: 'scroll',
+			}}
+		>
+			<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+				<button className='dialog_back_button' onClick={onClose}>
+					<i className='fa-solid fa-arrow-left' />
+				</button>
+				<h1 style={{ margin: 0, fontWeight: 500, fontSize: '28px' }}>
+					Project publication
+				</h1>
+			</div>
+			<a
+				style={{
+					display: 'flex',
+					gap: '6px',
+					marginLeft: '42px',
+					textDecoration: 'none',
+				}}
+				href=''
+				onClick={(event) => {
+					event.preventDefault();
+					EditorService.navigate(
+						`${project?.editorBasePath}/publication/history`,
+					);
+				}}
+			>
+				<img src={VersionsIcon} alt='Versions' />
+				<p style={{ margin: 0, color: 'rgba(0,0,0,0.7)' }}>Publication history</p>
+			</a>
+
+			<div style={{ flex: 1, margin: '0 42px', marginTop: '30px' }}>
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						minHeight: '80%',
+						height: '100%',
+					}}
+				>
+					<div style={{ display: 'flex', alignItems: 'center' }}>
+						<h3
+							style={{
+								display: 'flex',
+								gap: '6px',
+								fontWeight: 'normal',
+								margin: 0,
+							}}
+						>
+							{!publishingDisabledReason && <span>New version</span>}
+							<span style={{ fontWeight: 'bold' }}>
+								{
+									publishingDetails?.nextPublicationDetails
+										?.nextProjectPublishedSemanticVersion
+								}
+							</span>
+						</h3>
+						{publishingDetails && (
+							<>
+								<Button
+									variant='text'
+									iconStart='fa-solid fa-download'
+									size='small'
+									id='download-latest-code-version-button'
+									loading={isDownloadingCode}
+									onClick={onDownloadCodeClick}
+								>
+									Download code
+								</Button>
+								<Tooltip
+									anchorQuerySelector='#download-latest-code-version-button'
+									placement='bottom'
+								>
+									Download your latest code, immediately and for free
+								</Tooltip>
+							</>
+						)}
+					</div>
+					{publishingDetails && (
+						<p
+							style={{
+								margin: 0,
+								fontSize: '14px',
+								marginTop: '6px',
+								color: 'rgba(0,0,0,0.54)',
+							}}
+						>
+							The following cloud resources will be provisioned
+						</p>
+					)}
+					{publishingDetails && (
+						<div
+							style={{
+								marginTop: '30px',
+								marginBottom: '30px',
+								height: '100%',
+								display: 'flex',
+								flexDirection: 'column',
+								justifyContent: 'space-between',
+								gap: '50px',
+							}}
+						>
+							<PublishingResourcesDetails
+								project={project}
+								details={publishingDetails}
+							/>
+							<PublishingPriceForecast
+								project={project}
+								details={publishingDetails}
+								paymentMethods={paymentMethods || []}
+								dataIsLoading={dataIsLoading}
+							/>
+						</div>
+					)}
+					{publishingDisabledReason && (
+						<div
+							style={{
+								width: '100%',
+								display: 'flex',
+								justifyContent: 'center',
+								flexDirection: 'column',
+								alignItems: 'center',
+								height: '100%',
+								flex: 1,
+							}}
+						>
+							<h3 style={{ margin: 0, fontWeight: 'normal', marginTop: '6px' }}>
+								Publishing disabled
+							</h3>
+							<p
+								style={{
+									marginBottom: '24px',
+									fontSize: '16px',
+									marginTop: '10px',
+									color: 'rgba(0,0,0,0.54)',
+								}}
+							>
+								{fromPublishingDisabledCodeToReadable(publishingDisabledReason)}
+							</p>
+							{publishingDisabledReason ===
+								PUBLISHING_DISABLED_REASONS.NO_NAME && (
+								<Button
+									onClick={() => {
+										EditorService.navigate(
+											`${project?.editorBasePath}/project-configuration`,
+										);
+									}}
+								>
+									Add name
+								</Button>
+							)}
+							{publishingDisabledReason ===
+								PUBLISHING_DISABLED_REASONS.LOGIC_ERRORS && (
+								<ul
+									className='entity-error__results outline'
+									onScroll={(e: any) => {
+										e.stopPropagation();
+										document.body.style.overflow = 'hidden';
+									}}
+								>
+									{projectErrors.map((error) => (
+										<EntityErrorListItem
+											error={error}
+											onClick={(e) => {
+												onClose(e);
+
+												// If the zoom is too small, zoom in to the entity
+												if (project.canvas?.currentScale < 0.7) {
+													project.canvas?.zoomTo(0.7);
+												} else if (project.canvas?.currentScale > 1) {
+													project.canvas?.zoomTo(1);
+												}
+
+												const canvasEntity = getParentCanvasEntity(
+													error.entity,
+												);
+
+												project.canvas?.scrollToObjectById(
+													getCanvasEntityDraggableContainerDOMId(canvasEntity),
+												);
+											}}
+										/>
+									))}
+								</ul>
+							)}
+							{publishingDisabledReason ===
+								PUBLISHING_DISABLED_REASONS.MISSING_ROW_TRANSFORMERS && (
+								<div
+									style={{
+										width: '100%',
+										maxWidth: 640,
+										display: 'flex',
+										flexDirection: 'column',
+										gap: 12,
+									}}
+								>
+									<ul
+										style={{
+											listStyle: 'none',
+											padding: 0,
+											margin: 0,
+											display: 'flex',
+											flexDirection: 'column',
+											gap: 8,
+										}}
+									>
+										{missingMigrationDiffs.map((diffs) => {
+											const entity = diffs.updatedEntityVersion;
+											const needsNew = diffs.newRowTransformerNeeded;
+											const isStale =
+												diffs.isPreexistingRowTransformerUpToDate === false;
+
+											return (
+												<li
+													key={entity.id + '--missing-row-transformer'}
+													style={{
+														display: 'flex',
+														alignItems: 'center',
+														gap: 12,
+														padding: '12px 14px',
+														border: '1px solid rgba(0,0,0,0.08)',
+														borderRadius: 8,
+														background: '#fff',
+													}}
+												>
+													<i
+														className='fa-solid fa-database'
+														style={{ color: '#ED6C02' }}
+													/>
+													<div
+														style={{
+															display: 'flex',
+															flexDirection: 'column',
+															gap: 2,
+															flex: 1,
+															textAlign: 'left',
+														}}
+													>
+														<span style={{ fontSize: 14, fontWeight: 500 }}>
+															{entity.name}
+														</span>
+														<span
+															style={{
+																fontSize: 12,
+																color: 'rgba(0,0,0,0.54)',
+															}}
+														>
+															{needsNew
+																? 'Needs a new row transformer'
+																: isStale
+																	? 'Open row transformer is out of date'
+																	: 'Needs a row transformer'}
+														</span>
+													</div>
+												</li>
+											);
+										})}
+									</ul>
+									<Button
+										onClick={onAddMissingRowTransformers}
+										style={{ alignSelf: 'center' }}
+									>
+										{missingMigrationDiffs.some(
+											(d) => !!d.newestOpenRowTransformer,
+										)
+											? 'Add to existing row transformers'
+											: 'Generate row transformers'}
+									</Button>
+								</div>
+							)}
+						</div>
+					)}
+					{!publishingDisabledReason && !publishingDetails && (
+						<Box
+							sx={{
+								display: 'flex',
+								// flexGrow: 1,
+								flexDirection: 'column',
+								gap: 6,
+								alignItems: 'center',
+								height: 'calc(100% - 130px)',
+								width: '100%',
+								justifyContent: 'center',
+							}}
+						>
+							<CircularProgress size={120} thickness={2} />
+
+							<Typography variant='h6'>
+								Preparing publication preview...
+							</Typography>
+						</Box>
+					)}
+				</div>
+			</div>
+			{
+				/*
+					Error banner if publication is already on-going
+				*/
+				!!project.publication &&
+					project.publication.status === PublicationStatus.Running && (
+						<div
+							style={{
+								marginBottom: 20,
+								marginRight: 42,
+								marginLeft: 42,
+							}}
+						>
+							<Alert
+								severity='error'
+								// 1. Center the main icon vertically with the content
+								sx={{ alignItems: 'center' }}
+								// 2. Put your button in the action prop, which forces it to the right
+								action={
+									<MUIButton
+										color='inherit'
+										size='small'
+										endIcon={<OpenInNewIcon />}
+										onClick={() => {
+											EditorService.navigate(
+												`${project?.editorBasePath}/publication/publication-sequence/${project.publication?.id}`,
+											);
+										}}
+									>
+										VIEW
+									</MUIButton>
+								}
+							>
+								<strong>Ongoing publication</strong> Another publication is
+								currently running. Please wait for it to finish before starting
+								a new one.
+							</Alert>
+						</div>
+					)
+			}
+			<div
+				style={{
+					alignSelf: 'flex-start',
+					display: 'flex',
+					flexDirection: 'row',
+					justifyContent: 'flex-end',
+					width: '100%',
+					gap: '16px',
+				}}
+			>
+				<Button
+					onClick={() => {
+						EditorService.navigate(`${project?.editorBasePath}`);
+					}}
+					color='primary'
+					variant='text'
+				>
+					Cancel
+				</Button>
+				<Button
+					onClick={onPublishClick}
+					disabled={
+						!!publishingDisabledReason ||
+						dataIsLoading ||
+						(!!project.publication &&
+							project.publication.status === PublicationStatus.Running)
+					}
+					loading={isInitialisingPublication}
+				>
+					Publish{' '}
+					{
+						publishingDetails?.nextPublicationDetails
+							?.nextProjectPublishedSemanticVersion
+					}
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+export default PublicationPreviewDialog;