@elyx-code/editor-ui 0.0.2

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

@@ -0,0 +1,160 @@
+import React from 'react';
+import '../publishing-dialog.css';
+import { useNavigate, useParams } from 'react-router-dom';
+import { resolveResourceNameFromType } from '../utils';
+import { formatCurrencyToDefault } from '../../../localization';
+import { EditorService } from '../../../services/editor';
+
+interface IPublishingPriceForecastProps {
+	details: any;
+	paymentMethods: any[];
+	dataIsLoading: boolean;
+	project: EditorService
+}
+
+function resolveResourceNameFromCostName(costName: string) {
+	switch (costName) {
+		case 'first-published-project-monthly-discount':
+			return 'First project discount';
+		default:
+			return resolveResourceNameFromType(costName as any);
+	}
+}
+
+const PublishingPriceForecast: React.FC<IPublishingPriceForecastProps> = ({
+	details,
+	paymentMethods,
+	dataIsLoading,
+	project
+}) => {
+	const { id: projectId } = useParams<{ id: string }>();
+	const navigate = useNavigate();
+
+	// Guard against accessing monthlyCostForecast if details are not yet loaded
+	const hasFirstProjectDiscount = details?.monthlyCostForecast?.items?.find(
+		(item: any) => item.name === 'first-published-project-monthly-discount'
+	);
+
+	const hasAtLeastOnePaymentMethod = paymentMethods.length > 0;
+
+	return (
+		<div className='forecast-pricing'>
+			{/* Left block: Cost Forecast List */}
+			<div className='forecast-pricing--left-col'>
+				<h3 className='forecast-pricing--heading'>Cost forecast</h3>
+
+				<ul className='forecast-pricing--list'>
+					{details?.monthlyCostForecast?.items.map((item: any) => {
+						const isDiscount = item.type === 'discount';
+
+						return (
+							<li
+								key={item.name}
+								className={`forecast-pricing--list-item ${
+									isDiscount ? 'is-discount' : ''
+								}`}
+							>
+								<div className='forecast-pricing--item-meta'>
+									<div className='forecast-pricing--item-name'>
+										{resolveResourceNameFromCostName(item.name)}
+									</div>
+									{/* Show unit breakdown if it's not a discount */}
+									{!isDiscount && (
+										<div className='forecast-pricing--item-subtext'>
+											{item.amount} unit{item.amount !== 1 ? 's' : ''} at{' '}
+											{formatCurrencyToDefault(item.value)} / unit
+										</div>
+									)}
+								</div>
+								<div className='forecast-pricing--item-price'>
+									{isDiscount ? '- ' : ''}
+									{formatCurrencyToDefault(item.value * item.amount)}
+								</div>
+							</li>
+						);
+					})}
+
+					<hr className='forecast-pricing--divider' />
+
+					{/* Total */}
+					<li className='forecast-pricing--total-row'>
+						<div>Project total monthly forecast</div>
+						<div>
+							{formatCurrencyToDefault(
+								details?.monthlyCostForecast?.total?.value || 0
+							)}
+						</div>
+					</li>
+					<p className='forecast-pricing--tax-label'>Including Tax</p>
+				</ul>
+			</div>
+
+			{/* Right block: Information & Loading */}
+			<div className='forecast-pricing--right-col'>
+				{dataIsLoading ? (
+					<div className='forecast-pricing--loading-container'>
+						<div
+							className='forecast-pricing--loading-bar'
+							style={{ width: '80%' }}
+						/>
+						<div
+							className='forecast-pricing--loading-bar'
+							style={{ width: '90%' }}
+						/>
+						<div
+							className='forecast-pricing--loading-bar'
+							style={{ width: '70%' }}
+						/>
+					</div>
+				) : (
+					<>
+						<p className='forecast-pricing--disclaimer'>
+							This is only a <u>forecast</u> based on your apps usage.
+							<br />
+							You are charged at the end of the month for what you used.
+						</p>
+						<p className='forecast-pricing--disclaimer'>
+							Your total Elyx cost might be higher based on your other projects
+							and costs.
+						</p>
+						<p className='forecast-pricing--disclaimer'>
+							*This is a new project, so the forecast assumes near-zero traffic.
+							<br />
+							You can monitor your project's real-time cost on the{' '}
+							<a
+								className='forecast-pricing--link'
+								onClick={(event) => {
+									event.preventDefault();
+									navigate(`${project?.editorBasePath}/costs`);
+								}}
+							>
+								costs menu
+							</a>
+							.
+						</p>
+						{hasFirstProjectDiscount && (
+							<p className='forecast-pricing--disclaimer'>
+								<u>First project discount:</u> One month discount on your first
+								project for the near-zero traffic forecast.
+								<br />
+								If your project has higher traffic on its first month, you only
+								pay for the difference.
+							</p>
+						)}
+						{!hasAtLeastOnePaymentMethod && (
+							<p className='forecast-pricing--error'>
+								Payment details required to publish. You will not be charged
+								now.
+								<br />
+								You are charged on the first day of the month based on your
+								balance.
+							</p>
+						)}
+					</>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default PublishingPriceForecast;

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import '../publishing-dialog.css';
+import ResourcesIcon from '../../../assets/resources.svg';
+import DatabaseIcon from '../../../assets/relational-database.png';
+import HttpEndpointIcon from '../../../assets/http-endpoint.png';
+import ServerIcon from '../../../assets/server.png';
+import Chip from '../../../lib/chip/Chip';
+import { resolveResourceNameFromType } from '../utils';
+import { EditorService } from '../../../services/editor';
+import { InfrastructureResourceType } from '@elyx-code/definitions';
+import {
+	BaseEntityNames,
+	checkHasBaseEntity,
+} from '@elyx-code/project-logic-tree';
+
+interface IPublishingResourcesDetailsProps {
+	details: any;
+	project: EditorService;
+}
+
+const resolveResourceIconFromType = (resourceType: string) => {
+	switch (resourceType) {
+		case InfrastructureResourceType.RelationalDatabase:
+			return DatabaseIcon;
+		case 'http-endpoint':
+			return HttpEndpointIcon;
+		case 'serverless-function':
+			return ServerIcon;
+		default:
+			return ResourcesIcon;
+	}
+};
+
+const PublishingResourcesDetails: React.FC<
+	IPublishingResourcesDetailsProps
+> = ({ details, project }) => {
+	return (
+		<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+			{details.resources.map((resource: any, index: number) => (
+				<div
+					key={index}
+					style={{ display: 'flex', gap: '16px', alignItems: 'center' }}
+				>
+					<img
+						style={{ width: '24px', height: '24px' }}
+						src={resolveResourceIconFromType(resource.type)}
+						alt='resource icon'
+					/>
+					<div>
+						<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+							<h4 style={{ margin: '0px' }}>
+								{resolveResourceNameFromType(resource.type)}
+							</h4>
+							{resource.items.new.count > 0 && (
+								<Chip>{resource.items.new.count} new</Chip>
+							)}
+							{resource.items.modified.count > 0 && (
+								<Chip color='warning'>
+									{resource.items.modified.count} modified
+								</Chip>
+							)}
+							{resource.items.deleted.count > 0 && (
+								<Chip color='error'>
+									{resource.items.deleted.count} deleted
+								</Chip>
+							)}
+						</div>
+						<p
+							style={{
+								margin: '0px',
+								fontSize: '12px',
+								marginTop: '2px',
+								color: 'rgba(0,0,0,0.54)',
+							}}
+						>
+							{resource.type === InfrastructureResourceType.RelationalDatabase
+								? `${
+										project.logic.entities.filter((ent) =>
+											checkHasBaseEntity(ent, BaseEntityNames.PERSISTED_ENTITY)
+										).length
+								  } tables in databases`
+								: `${resource.items.total.count} total in project`}
+						</p>
+					</div>
+				</div>
+			))}
+		</div>
+	);
+};
+
+export default PublishingResourcesDetails;

package/src/components/publishing/publication-sequence/PublishingSequenceContent.tsx

@@ -0,0 +1,375 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import '../publishing-dialog.css';
+import SmallCheckmark from '../../../assets/small-status/checkmark.svg';
+import SmallCrossmark from '../../../assets/small-status/error.svg';
+import SmallLoader from '../../../assets/small-status/loading.svg';
+import SmallSkippedIcon from '../../../assets/small-status/skipped.svg';
+import {
+	getEventNameFromDefinition,
+	getStepNameFromDefinition,
+	resolvePublicationStepStatusFromType,
+} from '../utils';
+import {
+	PublicationStatus,
+	PublicationStepStatus,
+} from '@elyx-code/definitions';
+import { EditorService } from '../../../services/editor';
+import {
+	PublicationRun,
+	PublicationStep,
+} from '../../../services/editor/publication/publication';
+import DialogLoader from '../../DialogLoader';
+import { Box, CircularProgress, Typography } from '@mui/material';
+import { Logger } from '@elyx-code/common-ts-utils';
+
+interface IPublishingSequenceProps {
+	project: EditorService;
+	onClose: (event: any) => void;
+}
+
+const resolveStatusIconByStatus = (
+	status: PublicationStepStatus | PublicationStatus,
+) => {
+	switch (status) {
+		case PublicationStepStatus.Success:
+			return SmallCheckmark;
+		case PublicationStepStatus.Failed:
+			return SmallCrossmark;
+		case PublicationStepStatus.Running:
+			return SmallLoader;
+		case PublicationStepStatus.Skipped:
+			return SmallSkippedIcon;
+		default:
+			return;
+	}
+};
+
+const getColorFromStatus = (status: PublicationStepStatus | PublicationStatus): string => {
+	switch (status) {
+		case PublicationStepStatus.Success:
+		case PublicationStatus.Success:
+			return 'var(--color-main-success)';
+		case PublicationStepStatus.Failed:
+		case PublicationStatus.Failed:
+			return '#EE0202';
+		case PublicationStepStatus.Running:
+			return '#FFD335';
+		case PublicationStepStatus.Skipped:
+			return '#7B7B7B';
+		default:
+			return '#7B7B7B';
+	}
+};
+
+const StepTimer: React.FC<{ step: PublicationStep }> = ({ step }) => {
+	const [elapsed, setElapsed] = useState<number | null>(null);
+
+	useEffect(() => {
+		if (step.status === PublicationStepStatus.Running) {
+			const interval = setInterval(() => {
+				const start = step.startedAt
+					? new Date(step.startedAt).getTime()
+					: step.createdAt
+					? new Date(step.createdAt).getTime()
+					: Date.now();
+				const now = Date.now();
+				setElapsed(Math.max(0, Math.floor((now - start) / 1000)));
+			}, 1000);
+
+			// Run immediately once
+			const start = step.startedAt
+				? new Date(step.startedAt).getTime()
+				: step.createdAt
+				? new Date(step.createdAt).getTime()
+				: Date.now();
+			const now = Date.now();
+			setElapsed(Math.max(0, Math.floor((now - start) / 1000)));
+
+			return () => clearInterval(interval);
+		} else if (
+			step.status === PublicationStepStatus.Success ||
+			step.status === PublicationStepStatus.Failed
+		) {
+			if (step.startedAt && step.updatedAt) {
+				const start = new Date(step.startedAt).getTime();
+				const end = new Date(step.updatedAt).getTime();
+				setElapsed(Math.max(0, Math.floor((end - start) / 1000)));
+			} else {
+				setElapsed(null);
+			}
+		} else {
+			setElapsed(null);
+		}
+	}, [step.status, step.startedAt, step.updatedAt, step.createdAt]);
+
+	if (elapsed === null) {
+		return null;
+	}
+
+	const formatDuration = (seconds: number): string => {
+		if (seconds < 60) {
+			return `${seconds}s`;
+		}
+		const mins = Math.floor(seconds / 60);
+		const secs = seconds % 60;
+		if (secs === 0) {
+			return `${mins}min`;
+		}
+		return `${mins}min ${secs}s`;
+	};
+
+	if (step.status === PublicationStepStatus.Running) {
+		return (
+			<span style={{ fontSize: '11px', fontWeight: 600, color: '#FFD335' }}>
+				{formatDuration(elapsed)}
+			</span>
+		);
+	}
+
+	return (
+		<span style={{ fontSize: '11px', color: 'rgba(0,0,0,0.38)', fontWeight: 'lighter', display: 'flex', gap: '8px' }}>
+			<span>—</span><span>Run for {formatDuration(elapsed)}</span>
+		</span>
+	);
+};
+
+const PublishingSequenceContent: React.FC<IPublishingSequenceProps> = ({
+	project,
+	onClose,
+}) => {
+	const [activePub, setActivePub] = useState(project.publication);
+
+	const onSpecificPublicationLoaded = useCallback((pub: PublicationRun) => {
+		setActivePub(pub);
+	}, []);
+
+	useEffect(() => {
+		project.on('specific-publication-loaded', onSpecificPublicationLoaded);
+
+		return () => {
+			project.off('specific-publication-loaded', onSpecificPublicationLoaded);
+		};
+	}, [onSpecificPublicationLoaded, project]);
+
+	const useForceUpdate = () => {
+		const [_, setValue] = useState(0);
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	const sendPublicationRequest = async () => {
+		await project.publish();
+	};
+
+	useEffect(() => {
+		const publicationUpdatedListener = () => {
+			Logger.log('Rerendering publication: ', project.publication?.steps);
+			forceUpdate();
+		};
+
+		project.on('publication-updated', publicationUpdatedListener);
+
+		// If the URL doesn't have an id after the /editor/{projectId}/publication/publication-sequence/:here
+		let publicationId = null;
+
+		if (window.location.href.includes('publication/publication-sequence')) {
+			const url = window.location.href.split('/');
+			const indexOfPublicationSequence = url.indexOf('publication-sequence');
+			publicationId = url[indexOfPublicationSequence + 1];
+		}
+
+		if (
+			publicationId &&
+			!!project.publication &&
+			project.publication.id === publicationId
+		) {
+			// Do nothing, we already have the publication
+			if (activePub?.id !== publicationId) {
+				setActivePub(project.publication);
+			}
+
+			return;
+		} else if (
+			publicationId &&
+			(!project.publication || project.publication.id !== publicationId)
+		) {
+			// Fetch existing publication
+			project.loadGivenPublication(publicationId);
+		} else if (!publicationId && !project.publication) {
+			// if the publication has not started yet, we need to start it
+
+			sendPublicationRequest();
+		}
+
+		return () => {
+			project.off('publication-updated', publicationUpdatedListener);
+		};
+	}, [window.location.href, project]);
+
+	if (!project) {
+		return (
+			<DialogLoader
+				title='Project publication'
+				subtitle='Publish your project to the cloud'
+				onClose={onClose}
+			/>
+		);
+	}
+
+	if (!activePub) {
+		return (
+			<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'>Loading publication...</Typography>
+			</Box>
+		);
+	}
+
+	return (
+		<div style={{ marginTop: '30px', marginBottom: '30px' }}>
+			<ul style={{ padding: '0px', margin: '0px', listStyle: 'none' }}>
+				{(activePub?.steps || []).map((step: PublicationStep, i: number) => (
+					<li key={step.id} style={{ display: 'flex', gap: '16px' }}>
+						<div
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+								alignItems: 'center',
+								alignSelf: 'stretch',
+							}}
+						>
+							{step.status === PublicationStepStatus.Running ? (
+								<Box
+									style={{
+										width: '18px',
+										height: '18px',
+										borderRadius: '100%',
+										backgroundColor: '#FFD335',
+										display: 'flex',
+										alignItems: 'center',
+										justifyContent: 'center',
+									}}
+								>
+									<CircularProgress size={10} thickness={6} sx={{ color: '#FFFFFF' }} />
+								</Box>
+							) : step.status !== PublicationStepStatus.Queued ? (
+								<img
+									src={resolveStatusIconByStatus(
+										step.status as PublicationStepStatus,
+									)}
+									alt='status icon'
+									style={{ display: 'block', width: '18px', height: '18px' }}
+								/>
+							) : (
+								<div
+									style={{
+										width: '18px',
+										height: '18px',
+										borderRadius: '100%',
+										border: '#7B7B7B solid 3px',
+										boxSizing: 'border-box',
+										display: 'block',
+									}}
+								/>
+							)}
+							{(i !== activePub?.steps.length - 1 || !!activePub.finalStatus) && (
+								// vertical line to connect the steps
+								<div
+									style={{
+										width: '2px',
+										flex: 1,
+										backgroundColor: i !== activePub?.steps.length - 1
+											? getColorFromStatus(activePub?.steps[i + 1].status)
+											: getColorFromStatus(activePub.finalStatus),
+									}}
+								/>
+							)}
+						</div>
+						<div style={{ display: 'flex', flexDirection: 'column', paddingBottom: '12px' }}>
+							<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+								<h5
+									style={{
+										margin: '0px',
+										fontSize: '14px',
+										fontWeight:
+											step.status !== PublicationStepStatus.Running
+												? 'lighter'
+												: 'normal',
+										color:
+											step.status !== PublicationStepStatus.Running
+												? 'rgba(0,0,0,0.54)'
+												: 'inherit',
+									}}
+								>
+									{getStepNameFromDefinition(step.stepType)}
+								</h5>
+								<StepTimer step={step} />
+							</div>
+							<p
+								style={{
+									margin: '0px',
+									fontSize: '10px',
+									marginTop: '2px',
+									color: 'rgba(0,0,0,0.54)',
+								}}
+							>
+								{resolvePublicationStepStatusFromType(step.status) || 'Queued'}
+								{!!step.lastEvent &&
+									' - ' + getEventNameFromDefinition(step.lastEvent)}
+							</p>
+						</div>
+					</li>
+				))}
+
+				{!!activePub.finalStatus && (
+					<li style={{ display: 'flex', gap: '16px' }}>
+						<div
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+								alignItems: 'center',
+							}}
+						>
+							<img
+								src={resolveStatusIconByStatus(activePub.finalStatus)}
+								alt='status icon'
+								style={{ display: 'block', width: '18px', height: '18px' }}
+							/>
+						</div>
+						<div style={{ display: 'flex', flexDirection: 'column' }}>
+							<h5 style={{ margin: '0px', fontSize: '14px' }}>
+								{getEventNameFromDefinition(activePub.finalGlobalEvent)}
+							</h5>
+							<p
+								style={{
+									margin: '0px',
+									fontSize: '10px',
+									marginTop: '2px',
+									color: 'rgba(0,0,0,0.54)',
+								}}
+							>
+								{activePub.finalStatus === PublicationStatus.Failed
+									? 'Unexpected error occurred. All other steps have been skipped. Try again later'
+									: 'Project published successfully. You can close this window.'}
+							</p>
+						</div>
+					</li>
+				)}
+			</ul>
+		</div>
+	);
+};
+
+export default PublishingSequenceContent;