@elyx-code/editor-ui 0.0.2

package/src/components/resources/ResourcesDialog.tsx

@@ -0,0 +1,591 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import './resources-dialog.css';
+import RelationalDatabase from './relational-database/RelationalDatabase';
+import Button from '../../lib/button/Button';
+import Tooltip from '../../lib/tooltip/Tooltip';
+import HttpAPI from './http-api/HttpAPI';
+import { getAccessToken } from '../../auth';
+import { download } from '../../utils';
+import { Route, Routes, useLocation, useParams } from 'react-router-dom';
+import { EditorService } from '../../services/editor';
+import DialogLoader from '../DialogLoader';
+import { InfrastructureResourceType } from '@elyx-code/definitions';
+import { resolveActionDescriptorNameById, toSentenceCase } from '@elyx-code/project-logic-tree';
+import { IDropdownMenuCardOption } from '../../lib/dropdown/DropdownMenuCard';
+import { MenuItem, Select } from '@mui/material';
+import { popupNotification } from '../../popup-notification';
+import { Logger } from '@elyx-code/common-ts-utils';
+import { envConfig } from '../../config';
+import { useWorkspaceStore } from '../../store/workspace';
+import LogsViewer from './logs/LogsViewer';
+import CronJobsList from './cron-job/CronJobsList';
+import FunctionsList from './functions/FunctionsList';
+import CodebaseDetails from './codebase/CodebaseDetails';
+
+export interface IResourcesDropdownOption extends IDropdownMenuCardOption {
+	isSubItem?: boolean;
+}
+
+export interface IResourcesDialogProps {
+	onClose: () => void;
+	project: EditorService;
+}
+
+const ResourcesDialog: React.FC<IResourcesDialogProps> = ({
+	onClose,
+	project,
+}) => {
+	const [isDownloadingDatabase, setIsDownloadingDatabase] =
+		useState<boolean>(false);
+	const { id: projectId } = useParams<{
+		id: string;
+	}>();
+	const location = useLocation();
+	const [liveResourcesOptions, setLiveResourcesOptions] = useState<
+		IResourcesDropdownOption[]
+	>([]);
+
+	const activeWorkspace = useWorkspaceStore((state) => state.activeWorkspace);
+	const hasLoggingEntitlement = activeWorkspace?.features?.logging ?? false;
+
+	const useForceUpdate = () => {
+		const [_, setValue] = useState(0);
+		return () => setValue((value) => value + 1);
+	};
+	const forceUpdate = useForceUpdate(); // Update the component
+
+	const pathSegments = location.pathname.split('/');
+	const resourcesIdx = pathSegments.indexOf('resources');
+	const resourceType = resourcesIdx !== -1 ? pathSegments[resourcesIdx + 1] : undefined;
+	Logger.log('Is this present? : ', resourceType);
+
+	let dropdownValue = resourceType;
+	let resourceId: string | null = null;
+
+	if (resourceType === InfrastructureResourceType.RelationalDatabase) {
+		resourceId = resourcesIdx !== -1 ? pathSegments[resourcesIdx + 2] : null;
+		dropdownValue = resourceId;
+	} else if (resourceType === 'logs') {
+		dropdownValue = resourcesIdx !== -1 ? pathSegments[resourcesIdx + 2] : null;
+	}
+
+	const downloadDatabaseData = async () => {
+		setIsDownloadingDatabase(true);
+
+		try {
+			const response = await axios.get(
+				`${envConfig.API_BASE_URL}/relational-db-service/v1/${projectId}/presign-export/${resourceId}/all`,
+				{
+					headers: {
+						Authorization: `Bearer ${await getAccessToken()}`,
+					},
+				},
+			);
+
+			await download(
+				response.data.presignedUrl,
+				`database-${new Date().toISOString()}.zip`
+			);
+		} catch (error) {
+			Logger.error('Error downloading database data:', error);
+			popupNotification({
+				text: 'Error downloading database data. Please try again later.',
+				color: 'error',
+			});
+		}
+
+		setIsDownloadingDatabase(false);
+	};
+
+	useEffect(() => {
+		project?.on('live-resources-loaded', () => {
+			forceUpdate();
+		});
+
+		if (!project?.liveResources) {
+			return;
+		}
+
+		// Feature flag: allow only one HttpApi option (set to false to allow multiple in future)
+		const allowOnlyOneHttpApiOption = true;
+
+		const displayableResourceTypes = [
+			InfrastructureResourceType.RelationalDatabase,
+			InfrastructureResourceType.HttpApi,
+			InfrastructureResourceType.CronJob,
+			InfrastructureResourceType.ServerlessFunction,
+			InfrastructureResourceType.CloudHostedCodebase,
+		] as const;
+
+		const pathSegments = location.pathname.split('/');
+		const resourcesIdx = pathSegments.indexOf('resources');
+		const isLogsPage = resourcesIdx !== -1 && pathSegments[resourcesIdx + 1] === 'logs';
+		const logFunctionName = isLogsPage && resourcesIdx !== -1 ? pathSegments[resourcesIdx + 2] : null;
+
+		let matchingResource: any = null;
+		if (logFunctionName) {
+			matchingResource = project.liveResources.find((r) => {
+				const details = r.details as any || {};
+				return details.functionName === logFunctionName;
+			});
+		}
+
+		let httpApiOptionAdded = false;
+
+		const options = displayableResourceTypes.flatMap((type) => {
+			const resourcesOfType = project.liveResources.filter(
+				(r) => r.resourceType === type
+			);
+
+			if (resourcesOfType.length > 0) {
+				if (type === InfrastructureResourceType.HttpApi && allowOnlyOneHttpApiOption) {
+					if (httpApiOptionAdded) return [];
+					httpApiOptionAdded = true;
+					const categoryOption = {
+						value: type,
+						label: `Endpoints`,
+						iconEnd: 'fa-solid fa-arrow-right-arrow-left',
+						disabled: false,
+						navigateTo: `${project?.editorBasePath}/resources/${type}`,
+					};
+					if (logFunctionName) {
+						const isHttpEndpoint = project.liveResources.some(
+							(r) => r.resourceType === InfrastructureResourceType.HttpEndpoint && (r.details as any)?.functionName === logFunctionName
+						);
+						if (isHttpEndpoint) {
+							const endpointRes = project.liveResources.find(
+								(r) => r.resourceType === InfrastructureResourceType.HttpEndpoint && (r.details as any)?.functionName === logFunctionName
+							);
+							const rawName = endpointRes?.name || '';
+							const readableName = resolveActionDescriptorNameById(rawName) || toSentenceCase(rawName) || logFunctionName;
+							return [
+								categoryOption,
+								{
+									value: logFunctionName,
+									label: `Logs: ${readableName}`,
+									iconEnd: 'fa-solid fa-terminal',
+									disabled: false,
+									navigateTo: `${project?.editorBasePath}/resources/logs/${logFunctionName}`,
+									isSubItem: true,
+								}
+							];
+						}
+					}
+					return [categoryOption];
+				}
+				if (type === InfrastructureResourceType.CronJob) {
+					const categoryOption = {
+						value: type,
+						label: `Scheduled executions`,
+						iconEnd: 'fa-solid fa-clock',
+						disabled: false,
+						navigateTo: `${project?.editorBasePath}/resources/${type}`,
+					};
+					if (matchingResource && matchingResource.resourceType === InfrastructureResourceType.CronJob) {
+						const rawName = matchingResource.name || '';
+						const readableName = resolveActionDescriptorNameById(rawName) || toSentenceCase(rawName) || logFunctionName;
+						return [
+							categoryOption,
+							{
+								value: logFunctionName,
+								label: `Logs: ${readableName}`,
+								iconEnd: 'fa-solid fa-terminal',
+								disabled: false,
+								navigateTo: `${project?.editorBasePath}/resources/logs/${logFunctionName}`,
+								isSubItem: true,
+							}
+						];
+					}
+					return [categoryOption];
+				}
+				if (type === InfrastructureResourceType.ServerlessFunction) {
+					const categoryOption = {
+						value: type,
+						label: `Serverless Functions`,
+						iconEnd: 'fa-solid fa-bolt',
+						disabled: false,
+						navigateTo: `${project?.editorBasePath}/resources/${type}`,
+					};
+					if (matchingResource && matchingResource.resourceType === InfrastructureResourceType.ServerlessFunction) {
+						const rawName = matchingResource.name || '';
+						const readableName = resolveActionDescriptorNameById(rawName) || toSentenceCase(rawName) || logFunctionName;
+						return [
+							categoryOption,
+							{
+								value: logFunctionName,
+								label: `Logs: ${readableName}`,
+								iconEnd: 'fa-solid fa-terminal',
+								disabled: false,
+								navigateTo: `${project?.editorBasePath}/resources/logs/${logFunctionName}`,
+								isSubItem: true,
+							}
+						];
+					}
+					return [categoryOption];
+				}
+				if (type === InfrastructureResourceType.CloudHostedCodebase) {
+					return [{
+						value: type,
+						label: `Cloud Hosted Codebase`,
+						iconEnd: 'fa-solid fa-code',
+						disabled: false,
+						navigateTo: `${project?.editorBasePath}/resources/${type}`,
+					}];
+				}
+				// All RelationalDatabase resources are mapped
+				return resourcesOfType.map<IDropdownMenuCardOption>((res) => {
+					switch (type) {
+						case InfrastructureResourceType.RelationalDatabase:
+							return {
+								value: res.resourceId,
+								label: `Database: ${res.name}`,
+								iconEnd: 'fa-solid fa-database',
+								disabled: false,
+								navigateTo: `${project?.editorBasePath}/resources/${type}/${res.resourceId}`,
+							};
+						default:
+							return null as any;
+					}
+				}).filter(Boolean);
+			} else {
+				let label = '';
+				let iconEnd = '';
+				let disabled = false;
+				let navigateTo = '';
+				let tooltip = '';
+
+				switch (type) {
+					case InfrastructureResourceType.RelationalDatabase:
+						label = 'Database';
+						iconEnd = 'fa-solid fa-database';
+						disabled = true;
+						navigateTo = `${project?.editorBasePath}/resources/${type}`;
+						tooltip = 'No database exist in this published version of the project';
+						break;
+					case InfrastructureResourceType.HttpApi:
+						label = 'Endpoints';
+						iconEnd = 'fa-solid fa-arrow-right-arrow-left';
+						disabled = true;
+						navigateTo = `${project?.editorBasePath}/resources/${type}`;
+						tooltip = 'No endpoints exist in this published version of the project';
+						break;
+					case InfrastructureResourceType.CronJob:
+						label = 'Scheduled executions';
+						iconEnd = 'fa-solid fa-clock';
+						disabled = true;
+						navigateTo = `${project?.editorBasePath}/resources/${type}`;
+						tooltip = 'No scheduled executions exist in this published version of the project';
+						break;
+					case InfrastructureResourceType.ServerlessFunction:
+						label = 'Serverless Functions';
+						iconEnd = 'fa-solid fa-bolt';
+						disabled = true;
+						navigateTo = `${project?.editorBasePath}/resources/${type}`;
+						tooltip = 'No functions exist in this published version of the project';
+						break;
+					case InfrastructureResourceType.CloudHostedCodebase:
+						label = 'Cloud Hosted Codebase';
+						iconEnd = 'fa-solid fa-code';
+						disabled = true;
+						navigateTo = `${project?.editorBasePath}/resources/${type}`;
+						tooltip = 'No codebase is hosted for this project';
+						break;
+				}
+
+				// no resources of this type → show a disabled placeholder
+				return [
+					{
+						value: type,
+						label: label,
+						iconEnd: iconEnd,
+						disabled: disabled,
+						tooltip: tooltip,
+					},
+				];
+			}
+		});
+
+		setLiveResourcesOptions(options);
+	}, [project?.liveResources, projectId, location.pathname]);
+
+	// Once the resources have loaded, if the URL is on a resource-type root
+	// (e.g. `/resources/relational-database` with no specific resource id)
+	// auto-navigate to the first available resource of that type so the user
+	// doesn't have to pick from the dropdown manually.
+	useEffect(() => {
+		if (!liveResourcesOptions.length) return;
+
+		const pathSegments = location.pathname.split('/');
+		const resourcesIdx = pathSegments.indexOf('resources');
+		const resourceTypeFromUrl = resourcesIdx !== -1 ? pathSegments[resourcesIdx + 1] : undefined;
+		const resourceIdFromUrl = resourcesIdx !== -1 ? pathSegments[resourcesIdx + 2] : undefined;
+
+		if (!resourceTypeFromUrl || resourceIdFromUrl) return;
+
+		const firstSelectable = liveResourcesOptions.find(
+			(option) =>
+				!option.disabled &&
+				!!option.navigateTo &&
+				option.navigateTo.includes(`/resources/${resourceTypeFromUrl}/`),
+		);
+
+		if (firstSelectable?.navigateTo) {
+			EditorService.navigate(firstSelectable.navigateTo);
+		}
+	}, [liveResourcesOptions, location.pathname]);
+
+	const isRelationalDatabase = location.pathname.includes(
+		InfrastructureResourceType.RelationalDatabase
+	);
+
+	const isActiveDatabase =
+		(resourceType === InfrastructureResourceType.RelationalDatabase) &&
+		(resourceId !== null && resourceId !== undefined);
+
+	if (!project?.liveResources) {
+		return (
+			<div
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					justifyContent: 'center',
+					height: '100%',
+					// marginBottom: isRelationalDatabase ? '28px' : '',
+				}}
+			>
+				<DialogLoader
+					title='Loading resources'
+					subtitle='Please wait while we load your resources.'
+					loadingMessage='Loading resources...'
+					onClose={onClose}
+				/>
+			</div>
+		);
+	}
+
+	Logger.log('Dropdown value: ', dropdownValue);
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				marginBottom: isRelationalDatabase ? '28px' : '',
+				height: '100%',
+			}}
+		>
+			<div
+				style={{
+					padding: '40px',
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'space-between',
+					paddingBottom: '0px',
+				}}
+			>
+				<div
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						zIndex: 0,
+						gap: '16px',
+					}}
+				>
+					<button className='dialog_back_button' onClick={onClose}>
+						<i className='fa-solid fa-arrow-left'></i>
+					</button>
+					<h1
+						style={{
+							margin: '0px',
+							fontWeight: 500,
+							fontSize: '28px',
+							marginRight: '24px',
+						}}
+					>
+						Assets
+					</h1>
+					<Select
+						key={
+							liveResourcesOptions.length > 0
+								? `loaded-${dropdownValue ?? ''}`
+								: 'loading'
+						}
+						value={
+							liveResourcesOptions.some(
+								(option) => option.value === dropdownValue,
+							)
+								? (dropdownValue as string)
+								: ''
+						}
+						size='small'
+						onChange={(e) => {
+							const selectedResource = liveResourcesOptions.find(
+								(option) => option.value === e.target.value,
+							);
+							if (selectedResource) {
+								EditorService.navigate(selectedResource.navigateTo);
+							}
+						}}
+						displayEmpty
+						inputProps={{ 'aria-label': 'Without label' }}
+						renderValue={(selected) => {
+							if (!selected) {
+								if (liveResourcesOptions.length === 0) {
+									return (
+										<span style={{ display: 'flex', gap: '8px', alignItems: 'center', color: 'rgba(0, 0, 0, 0.54)' }}>
+											<i className="fa-solid fa-spinner fa-spin" style={{ fontSize: '12px', color: '#6366f1' }} />
+											Loading resources...
+										</span>
+									);
+								}
+								return <span>Select a resource</span>;
+							}
+
+							const selectedOption = liveResourcesOptions.find(
+								(option) => option.value === selected,
+							);
+
+							return (
+								<span
+									style={{ display: 'flex', gap: '12px', alignItems: 'center' }}
+								>
+									<i className={selectedOption?.iconEnd} />
+									{selectedOption?.label}
+								</span>
+							);
+						}}
+					>
+						{liveResourcesOptions.length === 0 ? (
+							<MenuItem disabled style={{ display: 'flex', gap: '12px', alignItems: 'center', justifyContent: 'center', padding: '16px', minWidth: '240px' }}>
+								<i className="fa-solid fa-spinner fa-spin" style={{ color: '#6366f1' }} />
+								<span style={{ fontSize: '13px', color: '#666' }}>Loading live resources...</span>
+							</MenuItem>
+						) : (
+							liveResourcesOptions.map((option) => {
+								const itemStyle: React.CSSProperties = {
+									display: 'flex',
+									gap: '12px',
+									alignItems: 'center',
+								};
+								if (option.isSubItem) {
+									itemStyle.paddingLeft = '32px';
+									itemStyle.color = '#666';
+									itemStyle.fontSize = '12.5px';
+								}
+								return (
+									<MenuItem
+										key={option.value}
+										value={option.value}
+										disabled={option.disabled}
+										style={itemStyle}
+									>
+										{option.isSubItem ? (
+											<span style={{ display: 'flex', alignItems: 'center', gap: '6px', color: '#888' }}>
+												<span style={{ color: '#cbd5e1', fontFamily: 'monospace', userSelect: 'none', fontWeight: 'bold' }}>
+													└─
+												</span>
+												<i className={option.iconEnd} style={{ fontSize: '11px' }} />
+											</span>
+										) : (
+											<i className={option.iconEnd} style={{ fontSize: '14px' }} />
+										)}
+										{option.label}
+									</MenuItem>
+								);
+							})
+						)}
+					</Select>
+				</div>
+
+				{isActiveDatabase && (
+					<span>
+						<Button
+							iconStart='fa-solid fa-download'
+							variant='outlined'
+							size='small'
+							id='download-relational-db-data-button'
+							loading={isDownloadingDatabase}
+							onClick={downloadDatabaseData}
+							disabled={!resourceId}
+						>
+							Export CSV
+						</Button>
+						<Tooltip
+							anchorQuerySelector='#download-relational-db-data-button'
+							placement='bottom'
+						>
+							Download all your database data as a CSV file.
+						</Tooltip>
+					</span>
+				)}
+			</div>
+			<span
+				style={{
+					display: 'flex',
+					gap: '6px',
+					alignItems: 'center',
+					marginLeft: '72px',
+				}}
+			>
+				<div className='resource-dialog__live-indicator-dot blinking'></div>
+				<p style={{ margin: '0px', color: 'rgba(0,0,0,0.7)' }}>
+					Live resources
+				</p>
+			</span>
+
+			{!dropdownValue && (
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						alignItems: 'center',
+						justifyContent: 'center',
+						height: '100%',
+					}}
+				>
+					<p
+						style={{
+							margin: '0px',
+							color: 'rgba(0,0,0,0.54)',
+							padding: '0px 40px 0 80px',
+						}}
+					>
+						Select a resource to view its details.
+					</p>
+				</div>
+			)}
+
+			{/* <section> */}
+			<Routes>
+				<Route
+					path={`${InfrastructureResourceType.HttpApi}/*`}
+					element={<HttpAPI onClose={onClose} project={project} />}
+				/>
+				<Route
+					path={`${InfrastructureResourceType.RelationalDatabase}/:resourceId`}
+					element={<RelationalDatabase onClose={onClose} project={project} />}
+				/>
+				<Route
+					path={InfrastructureResourceType.CronJob}
+					element={<CronJobsList onClose={onClose} project={project} />}
+				/>
+				<Route
+					path={InfrastructureResourceType.ServerlessFunction}
+					element={<FunctionsList onClose={onClose} project={project} />}
+				/>
+				<Route
+					path={InfrastructureResourceType.CloudHostedCodebase}
+					element={<CodebaseDetails onClose={onClose} project={project} />}
+				/>
+				<Route
+					path="logs/:functionName"
+					element={<LogsViewer onClose={onClose} project={project} projectId={projectId as string} />}
+				/>
+			</Routes>
+			{/* </section> */}
+		</div>
+	);
+};
+
+export default ResourcesDialog;

package/src/components/resources/UpgradeBanner.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import Button from '../../lib/button/Button';
+import { ProPlanChip } from '../ProPlanChip';
+
+interface UpgradeBannerProps {
+	onUpgradeClick?: () => void;
+}
+
+const UpgradeBanner: React.FC<UpgradeBannerProps> = ({ onUpgradeClick }) => {
+	const handleUpgrade = onUpgradeClick || (() => window.open('/pricing/plans', '_blank'));
+
+	return (
+		<div
+			style={{
+				backgroundColor: '#ffffff',
+				border: '1px solid #e5e7eb',
+				borderRadius: '16px',
+				padding: '32px 24px',
+				width: '100%',
+				maxWidth: '480px',
+				display: 'flex',
+				flexDirection: 'column',
+				alignItems: 'center',
+				textAlign: 'center',
+				boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+				fontFamily: "'Outfit', 'Inter', sans-serif",
+				pointerEvents: 'auto',
+			}}
+		>
+			<ProPlanChip />
+
+			<h2
+				style={{
+					fontSize: '20px',
+					fontWeight: 600,
+					marginTop: '16px',
+					marginBottom: '8px',
+					color: '#111827',
+				}}
+			>
+				Unlock Developer Pro Features
+			</h2>
+
+			<p
+				style={{
+					fontSize: '13px',
+					lineHeight: '1.5',
+					color: '#4b5563',
+					marginBottom: '24px',
+					maxWidth: '400px',
+				}}
+			>
+				Monitor cloud executions in real-time. Gain access to Lambdas logs, detailed Scheduled execution tracking, and live endpoints inspection.
+			</p>
+
+			<div
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					gap: '12px',
+					width: '100%',
+					maxWidth: '320px',
+					marginBottom: '28px',
+					textAlign: 'left',
+				}}
+			>
+				<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+					<i className="fa-solid fa-terminal" style={{ color: '#6366f1', width: '16px' }}></i>
+					<span style={{ fontSize: '13px', color: '#374151' }}>Real-time Log Viewer</span>
+				</div>
+				<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+					<i className="fa-solid fa-clock" style={{ color: '#6366f1', width: '16px' }}></i>
+					<span style={{ fontSize: '13px', color: '#374151' }}>Scheduled execution tracking</span>
+				</div>
+				<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+					<i className="fa-solid fa-bolt" style={{ color: '#6366f1', width: '16px' }}></i>
+					<span style={{ fontSize: '13px', color: '#374151' }}>Live Lambda Execution</span>
+				</div>
+			</div>
+
+			<Button
+				variant="solid"
+				color="primary"
+				size="large"
+				style={{
+					width: '100%',
+					maxWidth: '320px',
+					padding: '10px 24px',
+					borderRadius: '8px',
+					fontSize: '14px',
+					fontWeight: 600,
+					cursor: 'pointer',
+				}}
+				onClick={handleUpgrade}
+			>
+				Upgrade Workspace to Pro
+			</Button>
+		</div>
+	);
+};
+
+export default UpgradeBanner;