@elyx-code/editor-ui 0.0.2

package/src/components/publishing/history/PublicationHistoryContent.tsx

@@ -0,0 +1,414 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import '../publishing-dialog.css';
+import Chip from '../../../lib/chip/Chip';
+import Pagination from '../../../lib/pagination/Pagination';
+import UserChip from '../../user/UserChip';
+import Button from '../../../lib/button/Button';
+import Tooltip from '../../../lib/tooltip/Tooltip';
+import { getAccessToken } from '../../../auth';
+import { download } from '../../../utils';
+import { useParams } from 'react-router-dom';
+import UnpublishProjectConfirmationDialog from '../../project-configuration/UnpublishProjectConfirmationDialog';
+import { IPublication, PublicationStatus } from '@elyx-code/definitions';
+import { EditorService } from '../../../services/editor';
+import { Logger } from '@elyx-code/common-ts-utils';
+import { PublicationRun } from '../../../services/editor/publication/publication';
+import { popupNotification } from '../../../popup-notification';
+import { envConfig } from '../../../config';
+
+interface IPublicationHistoryContentProps {
+	onClose: (event: any) => void;
+	project: EditorService;
+}
+
+const PublicationHistoryContent: React.FC<IPublicationHistoryContentProps> = (
+	props
+) => {
+	const [publications, setPublications] = useState<IPublication[]>([]);
+	const [isDownloadingLiveVersion, setIsDownloadingLiveVersion] =
+		useState<boolean>(false);
+	const [isDownloadingOtherVersion, setIsDownloadingOtherVersion] =
+		useState<boolean>(false);
+	const [loadingLiveVersion, setLoadingLiveVersion] = useState<boolean>(false);
+	const [loadingPublications, setLoadingPublications] =
+		useState<boolean>(false);
+	const [hasBeenUnpublished, setHasBeenUnpublished] = useState<boolean>(false);
+	const [
+		isUnpublishProjectConfirmationDialogOpen,
+		setIsUnpublishProjectConfirmationDialogOpen,
+	] = useState<boolean>(false);
+	const [pagination, setPagination] = useState<{ page: number; total: number }>(
+		{ page: 1, total: 1 }
+	);
+	const { id: projectId } = useParams<{ id: string }>();
+
+	const onDownloadCodeClick = async (version: string) => {
+		if (version === 'live') {
+			setIsDownloadingLiveVersion(true);
+		} else {
+			setIsDownloadingOtherVersion(true);
+		}
+
+		try {
+			await props.project.downloadCode({
+				version,
+				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
+			);
+		}
+
+		if (version === 'live') {
+			setIsDownloadingLiveVersion(false);
+		} else {
+			setIsDownloadingOtherVersion(false);
+		}
+	};
+
+	const getPublications = async ({ page }: { page: number } = { page: 1 }) => {
+		setLoadingPublications(true);
+
+		if (!projectId) {
+			return;
+		}
+
+		const itemsPerPage = 10;
+
+		const response = await axios.get(
+			`${envConfig.API_BASE_URL}/publishing-service/v1/publications/${projectId}?offset=${
+				(page - 1) * itemsPerPage
+			}&limit=${itemsPerPage}`,
+			{
+				headers: {
+					Authorization: 'Bearer ' + (await getAccessToken()),
+				},
+			}
+		);
+
+		setPagination({
+			page,
+			total: Math.ceil(response.data.total / itemsPerPage),
+		});
+
+		setPublications(response.data.items);
+		setLoadingPublications(false);
+	};
+
+	const init = async () => {
+		await getPublications();
+	};
+
+	const getMorePublications = async ({
+		page,
+		total,
+	}: {
+		page: number;
+		total: number;
+	}) => {
+		if (page > total) {
+			return;
+		}
+
+		setLoadingPublications(true);
+		await getPublications({ page });
+		setLoadingPublications(false);
+	};
+
+	useEffect(() => {
+		init();
+	}, []);
+
+	const noPublicationRecords = publications.length === 0;
+	const sortedPublications = publications.sort(
+		(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+	);
+
+	// Find the first publication that is either 'success' or 'unpublished'
+	const isUnpublished =
+		sortedPublications.find(
+			(pub) =>
+				pub.status === PublicationStatus.Success ||
+				pub.status === PublicationStatus.Unpublished
+		)?.status === PublicationStatus.Unpublished || hasBeenUnpublished;
+
+	const liveVersion = props.project?.livePublication;
+
+	Logger.log('noPublicationRecords: ', noPublicationRecords);
+	Logger.log('liveVersion: ', liveVersion);
+	Logger.log(
+		'noPublicationRecords || !liveVersion: ',
+		noPublicationRecords || !liveVersion
+	);
+
+	return (
+		<div>
+			<div
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					minHeight: '80%',
+					height: '100%',
+				}}
+			>
+				<section>
+					<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+						<h3
+							style={{ display: 'flex', fontWeight: 'normal', margin: '0px' }}
+						>
+							Active version
+						</h3>
+						{loadingLiveVersion ? null : isUnpublished ? (
+							<Chip color='error'>Unpublished</Chip>
+						) : noPublicationRecords || !liveVersion ? null : (
+							<div style={{ display: 'flex', alignItems: 'center' }}>
+								<Chip>
+									<span style={{ fontWeight: 'bold', fontSize: '12px' }}>
+										{liveVersion?.projectPublishedSemanticVersion}
+									</span>
+								</Chip>
+								<Button
+									variant='text'
+									iconStart='fa-solid fa-download'
+									size='small'
+									id='download-live-code-version-button'
+									loading={isDownloadingLiveVersion}
+									onClick={() => onDownloadCodeClick('live')}
+								>
+									Download code
+								</Button>
+								<Tooltip
+									anchorQuerySelector='#download-live-code-version-button'
+									placement='bottom'
+								>
+									Download the code that is currently live, immediately and for
+									free
+								</Tooltip>
+								<Button
+									variant='outlined'
+									color='error'
+									size='small'
+									id='unpublish-project-button'
+									onClick={() =>
+										setIsUnpublishProjectConfirmationDialogOpen(true)
+									}
+								>
+									Unpublish project
+								</Button>
+								<Tooltip
+									anchorQuerySelector='#unpublish-project-button'
+									placement='bottom'
+								>
+									Remove this project from the cloud, hide it from your users
+									and stop paying for it. All the generated data will be lost.
+								</Tooltip>
+							</div>
+						)}
+					</div>
+
+					<div
+						style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}
+					>
+						{loadingLiveVersion ? (
+							<p
+								style={{
+									margin: '0px',
+									fontSize: '14px',
+									marginTop: '6px',
+									color: 'rgba(0,0,0,0.54)',
+								}}
+							>
+								Loading...
+							</p>
+						) : isUnpublished ? (
+							<p
+								style={{
+									margin: '0px',
+									fontSize: '14px',
+									marginTop: '6px',
+									color: 'rgba(0,0,0,0.54)',
+								}}
+							>
+								This project has been unpublished. It is not visible to your
+								users anymore.
+							</p>
+						) : noPublicationRecords || !liveVersion ? (
+							<p
+								style={{
+									margin: '0px',
+									fontSize: '14px',
+									marginTop: '6px',
+									color: 'rgba(0,0,0,0.54)',
+								}}
+							>
+								You have not published any version of this project yet.
+							</p>
+						) : (
+							<p
+								style={{
+									margin: '0px',
+									fontSize: '14px',
+									marginTop: '6px',
+									color: 'rgba(0,0,0,0.54)',
+								}}
+							>
+								This is the version currently used by your users.
+								<br />
+								It will be replaced once you publish a new version.
+							</p>
+						)}
+					</div>
+				</section>
+
+				<section style={{ marginTop: '40px' }}>
+					<h3 style={{ display: 'flex', fontWeight: 'normal', margin: '0px' }}>
+						Publication history
+					</h3>
+					<div
+						style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}
+					>
+						<p
+							style={{
+								margin: '0px',
+								fontSize: '14px',
+								marginTop: '6px',
+								color: 'rgba(0,0,0,0.54)',
+							}}
+						>
+							{loadingPublications
+								? 'Loading...'
+								: noPublicationRecords
+								? 'Once you publish this project here you will be able to see all versions that were published.'
+								: 'Here you can find all versions of the project that were published.'}
+						</p>
+					</div>
+					{!noPublicationRecords && (
+						<ul
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+								gap: '8px',
+								marginTop: '16px',
+								paddingLeft: '0px',
+							}}
+						>
+							{publications.map((publication) => (
+								<li
+									key={publication.id}
+									style={{ display: 'flex', gap: '8px', alignItems: 'center' }}
+								>
+									<h4 style={{ margin: '0px' }}>
+										{publication.projectPublishedSemanticVersion}
+									</h4>
+									<UserChip user={{ id: publication.triggeredBy }} />
+									<p
+										style={{
+											fontSize: '14px',
+											color: 'rgba(0,0,0,0.54)',
+											margin: '0px',
+										}}
+									>
+										{new Date(publication.createdAt).toLocaleString()}
+									</p>
+									{publication.status === PublicationStatus.Queued && (
+										<Chip color='warning'>Publishing</Chip>
+									)}
+									{publication.status === 'failed' && (
+										<p
+											style={{
+												fontSize: '14px',
+												color: 'rgba(0,0,0,0.54)',
+												margin: '0px',
+												fontStyle: 'italic',
+											}}
+										>
+											- Publishing failed
+										</p>
+									)}
+									{publication.status === 'success' && (
+										<>
+											<Button
+												variant='text'
+												iconStart='fa-solid fa-download'
+												size='small'
+												id={`download-${publication.projectAutoIncrementPublicationCount}-code-version-button`}
+												disabled={isDownloadingOtherVersion}
+												color='grey'
+												onClick={() =>
+													onDownloadCodeClick(publication.projectVersion)
+												}
+											/>
+											<Tooltip
+												anchorQuerySelector={`#download-${publication.projectVersion}-code-version-button`}
+												placement='bottom'
+											>
+												Download the code for this version, immediately and for
+												free
+											</Tooltip>
+										</>
+									)}
+									{/* Link to visit publication sequence */}
+									<Button
+										variant='text'
+										// Link icon
+										iconStart='fa-solid fa-arrow-up-right-from-square'
+										size='small'
+										to={'/publication/publication-sequence/' + publication.id}
+										id={`view-publication-sequence-${publication.id}-button`}
+										onClick={() => {
+											EditorService.navigate(
+												`${props.project?.editorBasePath}/publication/publication-sequence/${publication.id}`
+											);
+										}}
+									/>
+								</li>
+							))}
+						</ul>
+					)}
+					{!noPublicationRecords && (
+						<div style={{ marginTop: '20px' }}>
+							<Pagination
+								onChange={(page) => {
+									setPagination({ page: page, total: pagination.total });
+									getMorePublications({ page, total: pagination.total });
+								}}
+								page={pagination.page}
+								total={pagination.total}
+							/>
+						</div>
+					)}
+				</section>
+			</div>
+			{isUnpublishProjectConfirmationDialogOpen && (
+				<UnpublishProjectConfirmationDialog
+					onClose={() => setIsUnpublishProjectConfirmationDialogOpen(false)}
+					onUnpublish={() => {
+						setIsUnpublishProjectConfirmationDialogOpen(false);
+						setHasBeenUnpublished(true);
+					}}
+				/>
+			)}
+		</div>
+	);
+};
+
+export default PublicationHistoryContent;

package/src/components/publishing/history/PublicationHistoryDialog.tsx

@@ -0,0 +1,234 @@
+import React from 'react';
+import '../publishing-dialog.css';
+import { useParams } from 'react-router-dom';
+import Button from '../../../lib/button/Button';
+import PublicationHistoryContent from './PublicationHistoryContent';
+import { EditorService } from '../../../services/editor';
+import DialogLoader from '../../DialogLoader';
+import {
+	AWS_SERVER_SIDE_PROJECT_DEPLOYMENT_SEQUENCE,
+	InfrastructureResourceType,
+} from '@elyx-code/definitions';
+import { ProjectState } from '@elyx-code/project-logic-tree';
+
+export interface IPublicationHistoryDialogProps {
+	onClose: (event: any) => void;
+	contentHeight?: boolean;
+	project: EditorService;
+}
+
+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 PublicationHistoryDialog: React.FC<IPublicationHistoryDialogProps> = ({
+	onClose,
+	project,
+}) => {
+	if (!project || !project.logic || !project.ready) {
+		return (
+			<DialogLoader
+				title='Project publication'
+				subtitle='Publish your project to the cloud'
+				onClose={onClose}
+			/>
+		);
+	}
+
+	const { id: projectId } = useParams<{ id: string }>();
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				height: '100%',
+				gap: '4px',
+				padding: '40px',
+			}}
+		>
+			<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/preview`);
+					}}
+				>
+					<i
+						className='fa-solid fa-flag-checkered'
+						style={{ color: 'rgba(0,0,0,0.5)' }}
+					/>
+					<p style={{ margin: 0, color: 'rgba(0,0,0,0.7)' }}>
+						Publish latest version
+					</p>
+				</a>
+
+			<div style={{ flex: 1, margin: '0 42px', marginTop: '30px' }}>
+				<PublicationHistoryContent onClose={onClose} project={project} />
+			</div>
+			<div
+				style={{
+					alignSelf: 'flex-start',
+					display: 'flex',
+					flexDirection: 'row',
+					justifyContent: 'flex-end',
+					width: '100%',
+					gap: '16px',
+				}}
+			>
+				<Button
+					onClick={() => {
+						EditorService.navigate(`${project?.editorBasePath}/publication/preview`);
+					}}
+				>
+					Back
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+export default PublicationHistoryDialog;