@elyx-code/editor-ui 0.0.2

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

@@ -0,0 +1,344 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import '../publishing-dialog.css';
+import VersionsIcon from '../../../assets/versions.svg';
+import Button from '../../../lib/button/Button';
+import PublishingSequenceContent from './PublishingSequenceContent';
+import Tooltip from '../../../lib/tooltip/Tooltip';
+import { EditorService } from '../../../services/editor';
+import DialogLoader from '../../DialogLoader';
+import { getCurrentUserOrLogoutRedirect } from '../../../auth';
+import {
+	InfrastructureResourceType,
+	IUser,
+	PublicationStatus,
+} from '@elyx-code/definitions';
+import { PublicationRun } from '../../../services/editor/publication/publication';
+import dayjs from 'dayjs';
+import UserChip from '../../user/UserChip';
+import { popupNotification } from '../../../popup-notification';
+import axios from 'axios';
+import { envConfig } from '../../../config';
+
+export interface IPublishingSequenceDialogProps {
+	onClose: (event: any) => void;
+	contentHeight?: boolean;
+	project: EditorService;
+}
+
+const PublishingSequenceDialog: React.FC<IPublishingSequenceDialogProps> = ({
+	onClose,
+	project,
+}) => {
+	const [user, setUser] = useState<IUser | null>(null);
+	const [
+		isPublicationCompletedSuccessfully,
+		setIsPublicationCompletedSuccessfully,
+	] = useState<boolean>(
+		project.publication?.finalStatus === PublicationStatus.Success,
+	);
+	const [activePub, setActivePub] = useState(project.publication);
+
+	const onPublicationCompleted = useCallback(() => {
+		setIsPublicationCompletedSuccessfully(true);
+	}, []);
+
+	const onSpecificPublicationLoaded = useCallback((pub: PublicationRun) => {
+		setActivePub(pub);
+	}, []);
+
+	const onPublicationUpdated = useCallback((pub: PublicationRun) => {
+		if (activePub && pub.id === activePub.id) {
+			setActivePub(pub);
+		}
+	}, [activePub]);
+
+	useEffect(() => {
+		project.on('project-publication-completed', onPublicationCompleted);
+
+		project.on('specific-publication-loaded', onSpecificPublicationLoaded);
+
+		project.on('publication-updated', onPublicationUpdated);
+
+		return () => {
+			project.off('project-publication-completed', onPublicationCompleted);
+			project.off('specific-publication-loaded', onSpecificPublicationLoaded);
+		project.off('publication-updated', onPublicationUpdated);
+
+		};
+	}, [onPublicationCompleted, onSpecificPublicationLoaded]);
+
+	useEffect(() => {
+		const fetchUser = async () => {
+			const user = await getCurrentUserOrLogoutRedirect();
+			setUser(user);
+		};
+
+		fetchUser();
+	}, [project]);
+
+	if (!project || !project.logic || !project.ready) {
+		return (
+			<DialogLoader
+				title='Project publication'
+				subtitle={
+					activePub?.status === PublicationStatus.Running
+						? 'Publishing your project to the cloud'
+						: 'Publication sequence'
+				}
+				onClose={onClose}
+			/>
+		);
+	}
+
+	let header = 'Publishing version';
+
+	if (activePub?.status === PublicationStatus.Success) {
+		header = 'Published version';
+	} else if (
+		activePub?.status === PublicationStatus.Failed ||
+		activePub?.finalStatus === PublicationStatus.Failed
+	) {
+		header = 'Publication failed';
+	} else if (
+		activePub?.status === PublicationStatus.Reverted ||
+		activePub?.status === PublicationStatus.Unpublished
+	) {
+		header = 'Publication reverted';
+	}
+
+	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/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%',
+					}}
+				>
+					<h3
+						style={{
+							display: 'flex',
+							gap: '6px',
+							fontWeight: 'normal',
+							margin: 0,
+						}}
+					>
+						<span>{header}</span>
+						<span style={{ fontWeight: 'bold' }}>
+							{project.publication?.projectPublishedSemanticVersion}
+						</span>
+					</h3>
+					{activePub?.status === PublicationStatus.Running ? (
+						<div
+							style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}
+						>
+							<p
+								style={{
+									margin: 0,
+									fontSize: '14px',
+									marginTop: '6px',
+									color: 'rgba(0,0,0,0.54)',
+								}}
+							>
+								This is where the magic happens.
+							</p>
+							<p
+								style={{
+									margin: 0,
+									fontSize: '14px',
+									marginTop: '6px',
+									color: 'rgba(0,0,0,0.54)',
+								}}
+							>
+								Work equivalent to 10 full-time software engineers over a few
+								months is being generated.
+								<br />
+								The first time a project is published it might take a few
+								minutes.
+							</p>
+							<p
+								style={{
+									margin: 0,
+									fontSize: '14px',
+									marginTop: '6px',
+									color: 'rgba(0,0,0,0.54)',
+								}}
+							>
+								{`You will receive an email at `}
+								<b>{user?.email}</b>
+								{` once the new version is published.`}
+							</p>
+						</div>
+					) : (
+						<div
+							style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}
+						>
+							<p
+								style={{
+									margin: 0,
+									fontSize: '14px',
+									marginTop: '6px',
+									color: 'rgba(0,0,0,0.54)',
+								}}
+							>
+								Summary of publication from{' '}
+								{dayjs(activePub?.createdAt).format('MMM D, YYYY h:mm A')}
+							</p>
+							<p
+								style={{
+									margin: 0,
+									fontSize: '14px',
+									marginTop: '6px',
+									color: 'rgba(0,0,0,0.54)',
+								}}
+							>
+								Published by
+							</p>
+							<UserChip user={{ id: activePub.triggeredBy }} />
+						</div>
+					)}
+					<PublishingSequenceContent
+						project={project}
+						onClose={onClose}
+					/>
+				</div>
+			</div>
+			<div
+				style={{
+					display: 'flex',
+					flexDirection: 'row',
+					justifyContent: 'space-between',
+					width: '100%',
+				}}
+			>
+				<div>
+					{!!activePub && (
+						<>
+							<Button
+								id='abort-publication-button'
+								disabled={
+									!activePub || PublicationStatus.Running !== activePub.status
+								}
+								onClick={async () => {
+									try {
+										const accessToken = await project.getAccessToken();
+
+										await axios.post(
+											`${envConfig.API_BASE_URL}/publishing-service/v1/${project.projectId}/publications/${activePub?.id}/abort`,
+											{},
+											{
+												headers: {
+													Authorization: 'Bearer ' + accessToken,
+												},
+											},
+										);
+
+										const updatedPu = await project.loadGivenPublication(activePub.id);
+										setActivePub(updatedPu);
+										// Refresh the page
+										// window.location.reload();
+									} catch (error) {
+										popupNotification({
+											text: 'Failed to abort publication',
+											color: 'error',
+										});
+									}
+								}}
+								color='error'
+							>
+								Abort
+							</Button>
+							<Tooltip
+								anchorQuerySelector='#abort-publication-button'
+								placement='bottom'
+							>
+								{!activePub || PublicationStatus.Running !== activePub.status
+									? 'The publication is not currently running'
+									: 'Abort the publication process. This will stop all ongoing steps of the publication.'}
+							</Tooltip>
+						</>
+					)}
+				</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'
+					>
+						Back to canvas
+					</Button>
+					<Button
+						onClick={() => {
+							EditorService.navigate(
+								`${project?.editorBasePath}/resources/${InfrastructureResourceType.HttpApi}`,
+							);
+						}}
+						disabled={!isPublicationCompletedSuccessfully}
+						id='see-live-resources-publication-button'
+						color='primary'
+					>
+						See live assets
+					</Button>
+					<Tooltip
+						anchorQuerySelector='#see-live-resources-publication-button'
+						placement='bottom'
+					>
+						{isPublicationCompletedSuccessfully
+							? 'See the cloud resources employed by this project after its publication'
+							: 'The resources are being provisioned. This might take a few minutes.'}
+					</Tooltip>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default PublishingSequenceDialog;

package/src/components/publishing/publishing-dialog.css

@@ -0,0 +1,142 @@
+/* Animation Keyframes */
+@keyframes shine {
+  to {
+    background-position-x: -200%;
+  }
+}
+
+.forecast-pricing {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  gap: 30px;
+}
+
+/* Responsive: stack columns on smaller screens */
+@media (max-width: 950px) {
+  .forecast-pricing {
+    flex-direction: column;
+  }
+}
+
+/* --- Left Column --- */
+.forecast-pricing--left-col {
+  /* Flex grow if needed, or default block */
+}
+
+.forecast-pricing--heading {
+  display: flex;
+  gap: 6px;
+  font-weight: normal;
+  margin: 0 0 20px 0;
+  /* Matching standard h3 size/margin from your app usually, explicit here: */
+  font-size: 1.17em; 
+}
+
+.forecast-pricing--list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.forecast-pricing--list-item {
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  font-size: 12px;
+  margin-top: 12px; /* Increased slightly for breathing room with 2 lines */
+  align-items: flex-start;
+}
+
+.forecast-pricing--item-meta {
+  display: flex;
+  flex-direction: column;
+}
+
+.forecast-pricing--item-name {
+  text-transform: uppercase;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.forecast-pricing--item-subtext {
+  font-size: 11px;
+  color: rgba(0, 0, 0, 0.54);
+  margin-top: 4px;
+}
+
+.forecast-pricing--item-price {
+  text-transform: uppercase;
+  color: rgba(0, 0, 0, 0.87);
+  white-space: nowrap; /* Prevent price wrapping */
+}
+
+/* Discount Modifier */
+.forecast-pricing--list-item.is-discount .forecast-pricing--item-name,
+.forecast-pricing--list-item.is-discount .forecast-pricing--item-price {
+  color: var(--color-main-success);
+}
+
+.forecast-pricing--divider {
+  border: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.25);
+  margin: 16px 0;
+}
+
+.forecast-pricing--total-row {
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 12px;
+}
+
+.forecast-pricing--tax-label {
+  margin: 2px 0 0 0;
+  font-size: 10px;
+  color: rgba(0, 0, 0, 0.54);
+}
+
+/* --- Right Column --- */
+.forecast-pricing--right-col {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 362px;
+  maxWidth: 100%;
+}
+
+.forecast-pricing--loading-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.forecast-pricing--loading-bar {
+  height: 12px;
+  border-radius: 4px;
+  background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
+  background-size: 200% 100%;
+  animation: 1s shine linear infinite;
+}
+
+.forecast-pricing--disclaimer {
+  margin: 2px 0 0 0;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.54);
+  line-height: 1.5;
+}
+
+.forecast-pricing--link {
+  text-decoration: underline;
+  cursor: pointer;
+  color: inherit; /* Inherit parent color */
+}
+
+.forecast-pricing--error {
+  margin: 2px 0 0 0;
+  font-size: 12px;
+  color: var(--color-main-error);
+  line-height: 1.5;
+}

package/src/components/publishing/utils.ts

@@ -0,0 +1,227 @@
+import {
+	ProjectPublicationEventName,
+	PublishingSequenceStep,
+	InfrastructureResourceType,
+	PublicationStepStatus,
+} from '@elyx-code/definitions';
+import { toSentenceCase } from '@elyx-code/project-logic-tree';
+
+export function getStepNameFromDefinition(
+	stepType: PublishingSequenceStep
+): string {
+	switch (stepType) {
+		case PublishingSequenceStep.CodeCompilation:
+			return 'Code generation';
+		case PublishingSequenceStep.RelationalDatabaseDeployment:
+			return 'Database creation';
+		case PublishingSequenceStep.HttpApiDeployment:
+			return 'HTTP gateway creation';
+		case PublishingSequenceStep.InfrastructureValuesCodebaseInterpolation:
+			return 'Link code with resources';
+		case PublishingSequenceStep.BundleCodebase:
+			return 'Bundle code';
+		case PublishingSequenceStep.MigrateRelationalDatabase:
+			return 'Database structure migration';
+		case PublishingSequenceStep.BusinessLogicCodebaseDeployment:
+			return 'Update servers with new code';
+		case PublishingSequenceStep.CodebaseCleanup:
+			return 'Code cleanup';
+		case PublishingSequenceStep.HttpApiDeletion:
+			return 'HTTP gateway deletion';
+		case PublishingSequenceStep.RelationalDatabaseDeletion:
+			return 'Database deletion';
+		case PublishingSequenceStep.ExecutePublicationCompletedEvent:
+			return 'Execute custom publication completed logic';
+		case PublishingSequenceStep.AWSTenantAccountProvisioning:
+			return 'Provision private cloud';
+		default:
+			return toSentenceCase(stepType);
+	}
+}
+
+export function getEventNameFromDefinition(event: ProjectPublicationEventName): string {
+	switch (event) {
+		case ProjectPublicationEventName.DeploymentCompleted:
+			return 'Successfully published';
+		case ProjectPublicationEventName.DeploymentStarted:
+			return 'Publication started';
+		case ProjectPublicationEventName.DeploymentFailed:
+			return 'Publication failed';
+		case ProjectPublicationEventName.BillingSubscriptionUpdateFailed:
+			return 'Billing subscription update failed';
+		case ProjectPublicationEventName.AllInfrastructureSuccessfullyProvisioned:
+			return 'All infrastructure successfully provisioned';
+		case ProjectPublicationEventName.RequestPayloadValidationFailed:
+			return 'Request payload validation failed';
+		case ProjectPublicationEventName.ProjectStateValidationFailedMissingName:
+			return 'Project state validation failed: missing name';
+		case ProjectPublicationEventName.ProjectStateValidationFailedMissingAnyFunctionality:
+			return 'Project state validation failed: missing any functionality';
+		case ProjectPublicationEventName.RelationalDatabaseDeploymentStarted:
+			return 'Database creation started';
+		case ProjectPublicationEventName.RelationalDatabaseDeploymentCompleted:
+			return 'Database creation completed';
+		case ProjectPublicationEventName.RelationalDatabaseDeploymentFailed:
+			return 'Database creation failed';
+		case ProjectPublicationEventName.CreatingNewRelationalDatabase:
+			return 'Creating new database (up to 5 mins)';
+		case ProjectPublicationEventName.WaitingForPreviousRelationalDatabaseDeployment:
+			return 'Waiting for previous database creation';
+		case ProjectPublicationEventName.RelationalDatabaseAlreadyExists:
+			return 'Database already exists';
+		case ProjectPublicationEventName.HttpApiDeploymentStarted:
+			return 'HTTP gateway creation started';
+		case ProjectPublicationEventName.HttpApiDeploymentCompleted:
+			return 'HTTP gateway creation completed';
+		case ProjectPublicationEventName.HttpApiDeploymentFailed:
+			return 'HTTP gateway creation failed';
+		case ProjectPublicationEventName.CreatingNewHttpApi:
+			return 'Creating new HTTP gateway';
+		case ProjectPublicationEventName.HttpApiAlreadyExists:
+			return 'HTTP gateway already exists';
+		case ProjectPublicationEventName.BusinessLogicCodebaseDeploymentStarted:
+			return 'Update servers with new code started';
+		case ProjectPublicationEventName.BusinessLogicCodebaseDeploymentCompleted:
+			return 'Update servers with new code completed';
+		case ProjectPublicationEventName.BusinessLogicCodebaseDeploymentFailed:
+			return 'Update servers with new code failed';
+		case ProjectPublicationEventName.BundlingCodebaseForDownload:
+			return 'Bundling code for download';
+		case ProjectPublicationEventName.UploadingCodebaseToCloudStorage:
+			return 'Uploading code to cloud storage';
+		case ProjectPublicationEventName.InfrastructureValuesCodebaseInterpolationStarted:
+			return 'Linking code with resources started';
+		case ProjectPublicationEventName.InfrastructureValuesCodebaseInterpolationCompleted:
+			return 'Linking code with resources completed';
+		case ProjectPublicationEventName.InfrastructureValuesCodebaseInterpolationFailed:
+			return 'Linking code with resources failed';
+		case ProjectPublicationEventName.CodeCompilationStarted:
+			return 'Code generation started';
+		case ProjectPublicationEventName.CodeCompilationCompleted:
+			return 'Code generation completed';
+		case ProjectPublicationEventName.CodeCompilationFailed:
+			return 'Code generation failed';
+		case ProjectPublicationEventName.BundleCodebaseStarted:
+			return 'Code bundling started';
+		case ProjectPublicationEventName.BundleCodebaseCompleted:
+			return 'Code bundling completed';
+		case ProjectPublicationEventName.BundleCodebaseFailed:
+			return 'Code bundling failed';
+		case ProjectPublicationEventName.InstallingCodebaseDependenciesStarted:
+			return 'Installing code dependencies';
+		case ProjectPublicationEventName.InstallingCodebaseDependenciesCompleted:
+			return 'Installing code dependencies completed';
+		case ProjectPublicationEventName.InstallingCodebaseDependenciesFailed:
+			return 'Installing code dependencies failed';
+		case ProjectPublicationEventName.MigrateRelationalDatabaseStarted:
+			return 'Database structure migration started';
+		case ProjectPublicationEventName.MigrateRelationalDatabaseCompleted:
+			return 'Database structure migration completed';
+		case ProjectPublicationEventName.MigrateRelationalDatabaseFailed:
+			return 'Database structure migration failed';
+		case ProjectPublicationEventName.ProjectAlreadyBeingPublished:
+			return 'Project already being published. You need to wait for the previous publication to complete';
+		case ProjectPublicationEventName.ProjectNotFound:
+			return 'Project not found';
+		case ProjectPublicationEventName.ProjectPublishRequestAcknowledged:
+			return 'Project publish request acknowledged';
+		case ProjectPublicationEventName.UploadingCodebaseToCloudStorageCompleted:
+			return 'Uploading code to cloud storage completed';
+		case ProjectPublicationEventName.UploadingCodebaseToCloudStorageFailed:
+			return 'Uploading code to cloud storage failed';
+		case ProjectPublicationEventName.HttpApiDeletionCompleted:
+			return 'HTTP gateway deletion completed';
+		case ProjectPublicationEventName.HttpApiDeletionFailed:
+			return 'HTTP gateway deletion failed';
+		case ProjectPublicationEventName.HttpApiDeletionStarted:
+			return 'HTTP gateway deletion started';
+		case ProjectPublicationEventName.PublicationStepFailedReasonUnknown:
+			return 'Publication step failed: reason unknown';
+		case ProjectPublicationEventName.WaitingForPreviousHttpApiDeletion:
+			return 'Waiting for previous HTTP gateway deletion';
+		case ProjectPublicationEventName.RelationalDatabaseDeletionStarted:
+			return 'Database deletion started';
+		case ProjectPublicationEventName.RelationalDatabaseDeletionCompleted:
+			return 'Database deletion completed';
+		case ProjectPublicationEventName.RelationalDatabaseDeletionFailed:
+			return 'Database deletion failed';
+		case ProjectPublicationEventName.WaitingForPreviousRelationalDatabaseDeletion:
+			return 'Waiting for previous database deletion';
+		case ProjectPublicationEventName.ExecutePublicationCompletedEventCompleted:
+			return 'Execution completed';
+		case ProjectPublicationEventName.ExecutePublicationCompletedEventFailed:
+			return 'Execution failed';
+		case ProjectPublicationEventName.ExecutePublicationCompletedEventStarted:
+			return 'Execution started';
+		default: {
+			if (!!event) {
+				return toSentenceCase(event);
+			}
+			return 'Unknown event';
+		}
+	}
+}
+
+export enum PUBLISHING_DISABLED_REASONS {
+	NO_LOGIC = 'NO_LOGIC',
+	NO_NAME = 'NO_NAME',
+	NO_CHANGES = 'NO_CHANGES',
+	PROJECT_PUBLICATION_ALREADY_ONGOING = 'PROJECT_PUBLICATION_ALREADY_ONGOING',
+	LOGIC_ERRORS = 'LOGIC_ERRORS',
+	MISSING_ROW_TRANSFORMERS = 'MISSING_ROW_TRANSFORMERS',
+}
+
+export function fromPublishingDisabledCodeToReadable(
+	code: PUBLISHING_DISABLED_REASONS
+): string {
+	switch (code) {
+		case PUBLISHING_DISABLED_REASONS.NO_LOGIC:
+			return 'This project has no logic';
+		case PUBLISHING_DISABLED_REASONS.NO_NAME:
+			return 'This project has no name';
+		case PUBLISHING_DISABLED_REASONS.NO_CHANGES:
+			return 'This version has already been published';
+		case PUBLISHING_DISABLED_REASONS.PROJECT_PUBLICATION_ALREADY_ONGOING:
+			return 'This project is already being published';
+		case PUBLISHING_DISABLED_REASONS.LOGIC_ERRORS:
+			return 'This project has errors in the logic. Resolve them before publishing';
+		case PUBLISHING_DISABLED_REASONS.MISSING_ROW_TRANSFORMERS:
+			return 'Some persisted data structures changed and need row transformers before publishing';
+		default:
+			return 'Publishing is currently not available. Try again later';
+	}
+}
+
+export function resolveResourceNameFromType(
+	resourceType: InfrastructureResourceType
+): string {
+	switch (resourceType) {
+		case InfrastructureResourceType.RelationalDatabase:
+			return 'Relational databases';
+		case InfrastructureResourceType.HttpEndpoint:
+		case InfrastructureResourceType.HttpApi:
+			return 'HTTP endpoints';
+		case InfrastructureResourceType.ServerlessFunction:
+		case InfrastructureResourceType.CloudHostedCodebase:
+			return 'Server code functions';
+		default:
+			return 'Resources';
+	}
+}
+
+export function resolvePublicationStepStatusFromType(
+	eventType: PublicationStepStatus
+): string {
+	switch (eventType) {
+		case PublicationStepStatus.Running:
+			return 'In progress';
+		case PublicationStepStatus.Failed:
+			return 'Failed';
+		case PublicationStepStatus.Success:
+			return 'Succeeded';
+		case PublicationStepStatus.Skipped:
+			return 'Skipped';
+		default:
+			return 'Queued';
+	}
+}