@elyx-code/editor-ui 0.0.2

package/src/components/resources/functions/FunctionsList.tsx

@@ -0,0 +1,454 @@
+import React, { useState } from 'react';
+import { InfrastructureResourceType } from '@elyx-code/definitions';
+import {
+	resolveActionDescriptorNameById,
+	toSentenceCase
+} from '@elyx-code/project-logic-tree';
+import { EditorService } from '../../../services/editor';
+import Button from '../../../lib/button/Button';
+import UpgradeBanner from '../UpgradeBanner';
+import { useWorkspaceStore } from '../../../store/workspace';
+
+interface IFunctionsListProps {
+	onClose: () => void;
+	project: EditorService;
+}
+
+const mockFunctions = [
+	{
+		resourceId: 'func-1111-fake',
+		name: 'action_project_publication_completed',
+		resourceType: InfrastructureResourceType.ServerlessFunction,
+		details: {
+			functionName: 'elyx-dev-action_project_publication_completed',
+			arn: 'arn:aws:lambda:us-east-1:123456789012:function:elyx-dev-action_project_publication_completed',
+			description:
+				'Fires when a project publication is completed to update status and send notifications.'
+		}
+	},
+	{
+		resourceId: 'func-2222-fake',
+		name: 'action_user_signup_completed',
+		resourceType: InfrastructureResourceType.ServerlessFunction,
+		details: {
+			functionName: 'elyx-dev-action_user_signup_completed',
+			arn: 'arn:aws:lambda:us-east-1:123456789012:function:elyx-dev-action_user_signup_completed',
+			description:
+				'Triggered upon user signup to initialize workspace profiles.'
+		}
+	},
+	{
+		resourceId: 'func-3333-fake',
+		name: 'action_stripe_webhook_received',
+		resourceType: InfrastructureResourceType.ServerlessFunction,
+		details: {
+			functionName: 'elyx-dev-action_stripe_webhook_received',
+			arn: 'arn:aws:lambda:us-east-1:123456789012:function:elyx-dev-action_stripe_webhook_received',
+			description:
+				'Processes stripe payment events and updates workspace feature entitlements.'
+		}
+	}
+];
+
+const FunctionsList: React.FC<IFunctionsListProps> = ({ project }) => {
+	const activeWorkspace = useWorkspaceStore((state) => state.activeWorkspace);
+	const showPaywall = !(activeWorkspace?.features?.logging ?? false);
+
+	const realFunctions =
+		project?.liveResources?.filter(
+			(r) =>
+				r.resourceType === InfrastructureResourceType.ServerlessFunction
+		) || [];
+
+	const functions = showPaywall ? mockFunctions : realFunctions;
+
+	// Column resizing state (loaded from UserSettings)
+	const [widths, setWidths] = useState<Record<string, number>>(() => {
+		const saved = project?.userSettings?.columnWidths || {};
+		return {
+			name: saved['funcs-col-name'] || 250,
+			arn: saved['funcs-col-arn'] || 280,
+			desc: saved['funcs-col-desc'] || 280,
+			actions: saved['funcs-col-actions'] || 140
+		};
+	});
+
+	const startResize = (colKey: string, e: React.MouseEvent) => {
+		e.preventDefault();
+		const startX = e.pageX;
+		const startWidth = widths[colKey];
+
+		const handleMouseMove = (moveEvent: MouseEvent) => {
+			const deltaX = moveEvent.pageX - startX;
+			const newWidth = Math.max(80, startWidth + deltaX);
+			setWidths((prev) => ({
+				...prev,
+				[colKey]: newWidth
+			}));
+		};
+
+		const handleMouseUp = (upEvent: MouseEvent) => {
+			window.removeEventListener('mousemove', handleMouseMove);
+			window.removeEventListener('mouseup', handleMouseUp);
+
+			const deltaX = upEvent.pageX - startX;
+			const finalWidth = Math.max(80, startWidth + deltaX);
+			const currentSettings = project?.userSettings?.columnWidths || {};
+			const updatedSettings = {
+				...currentSettings,
+				[`funcs-col-${colKey}`]: finalWidth
+			};
+			project?.userSettings?.set('columnWidths', updatedSettings);
+		};
+
+		window.addEventListener('mousemove', handleMouseMove);
+		window.addEventListener('mouseup', handleMouseUp);
+	};
+
+	const thStyle = (width: number): React.CSSProperties => ({
+		padding: '16px 20px',
+		position: 'relative',
+		width: `${width}px`,
+		userSelect: 'none'
+	});
+
+	const resizerStyle: React.CSSProperties = {
+		position: 'absolute',
+		top: 0,
+		right: 0,
+		bottom: 0,
+		width: '6px',
+		cursor: 'col-resize',
+		zIndex: 10
+	};
+
+	return (
+		<div
+			style={{
+				position: 'relative',
+				height: 'calc(100% - 90px)',
+				display: 'flex',
+				flexDirection: 'column'
+			}}
+		>
+			<div
+				style={{
+					padding: '24px 40px',
+					display: 'flex',
+					flexDirection: 'column',
+					height: '100%',
+					overflowY: 'auto',
+					fontFamily: "'Outfit', 'Inter', sans-serif",
+					filter: showPaywall ? 'blur(3px)' : 'none',
+					opacity: showPaywall ? 0.4 : 1,
+					pointerEvents: showPaywall ? 'none' : 'auto',
+					userSelect: showPaywall ? 'none' : 'auto'
+				}}
+			>
+				<div style={{ marginBottom: '24px' }}>
+					<h2
+						style={{
+							margin: '0px',
+							fontSize: '18px',
+							fontWeight: 600
+						}}
+					>
+						Serverless Functions
+					</h2>
+					<span style={{ fontSize: '12px', color: '#666' }}>
+						Inspect deployed serverless functions and view their
+						execution logs
+					</span>
+				</div>
+
+				{functions.length === 0 ? (
+					<div
+						style={{
+							display: 'flex',
+							flexDirection: 'column',
+							alignItems: 'center',
+							justifyContent: 'center',
+							padding: '80px 0',
+							border: '1px dashed #ccc',
+							borderRadius: '12px',
+							backgroundColor: '#fafafa',
+							color: '#888'
+						}}
+					>
+						<i
+							className="fa-solid fa-bolt"
+							style={{
+								fontSize: '48px',
+								marginBottom: '16px',
+								color: '#ddd'
+							}}
+						></i>
+						<p style={{ margin: '0px', fontSize: '14px' }}>
+							No serverless functions exist in this published
+							version of the project.
+						</p>
+					</div>
+				) : (
+					<div
+						style={{
+							border: '1px solid #e0e0e0',
+							borderRadius: '12px',
+							overflowX: 'auto', // horizontal scroll
+							boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
+							backgroundColor: '#fff'
+						}}
+					>
+						<table
+							style={{
+								width: '100%',
+								borderCollapse: 'collapse',
+								textAlign: 'left',
+								fontSize: '13px',
+								tableLayout: 'fixed', // fixed layout for sizing
+								minWidth: '800px'
+							}}
+						>
+							<colgroup>
+								<col style={{ width: `${widths.name}px` }} />
+								<col style={{ width: `${widths.arn}px` }} />
+								<col style={{ width: `${widths.desc}px` }} />
+								<col style={{ width: `${widths.actions}px` }} />
+							</colgroup>
+							<thead>
+								<tr
+									style={{
+										backgroundColor: '#f8f9fa',
+										borderBottom: '1px solid #e0e0e0',
+										color: '#555',
+										fontWeight: 600
+									}}
+								>
+									<th style={thStyle(widths.name)}>
+										Name
+										<div
+											style={resizerStyle}
+											onMouseDown={(e) =>
+												startResize('name', e)
+											}
+										/>
+									</th>
+									<th style={thStyle(widths.arn)}>
+										ARN / AWS Resource
+										<div
+											style={resizerStyle}
+											onMouseDown={(e) =>
+												startResize('arn', e)
+											}
+										/>
+									</th>
+									<th style={thStyle(widths.desc)}>
+										Description
+										<div
+											style={resizerStyle}
+											onMouseDown={(e) =>
+												startResize('desc', e)
+											}
+										/>
+									</th>
+									<th
+										style={{
+											...thStyle(widths.actions),
+											textAlign: 'right'
+										}}
+									>
+										Actions
+										<div
+											style={resizerStyle}
+											onMouseDown={(e) =>
+												startResize('actions', e)
+											}
+										/>
+									</th>
+								</tr>
+							</thead>
+							<tbody>
+								{functions.map((func) => {
+									const details = (func.details as any) || {};
+									const functionName =
+										details.functionName || '';
+
+									// Best-effort name resolution
+									const rawName = func.name || '';
+									const readableName =
+										resolveActionDescriptorNameById(
+											rawName
+										) ||
+										toSentenceCase(rawName) ||
+										'Serverless Function';
+
+									return (
+										<tr
+											key={func.resourceId}
+											style={{
+												borderBottom:
+													'1px solid #f0f0f0',
+												transition: 'background 0.2s'
+											}}
+											onMouseEnter={(e) =>
+												(e.currentTarget.style.backgroundColor =
+													'#fafafa')
+											}
+											onMouseLeave={(e) =>
+												(e.currentTarget.style.backgroundColor =
+													'transparent')
+											}
+										>
+											{/* Name */}
+											<td
+												style={{
+													padding: '16px 20px',
+													fontWeight: 500,
+													color: '#333',
+													overflow: 'hidden',
+													textOverflow: 'ellipsis',
+													whiteSpace: 'nowrap'
+												}}
+											>
+												<div
+													style={{
+														display: 'flex',
+														alignItems: 'center',
+														gap: '8px'
+													}}
+												>
+													<i
+														className="fa-solid fa-bolt"
+														style={{
+															color: '#4f46e5'
+														}}
+													></i>
+													{readableName}
+												</div>
+												<div
+													style={{
+														fontSize: '11px',
+														color: '#888',
+														marginTop: '2px'
+													}}
+												>
+													ID:{' '}
+													{func.resourceId?.substring(
+														0,
+														18
+													)}
+													...
+												</div>
+											</td>
+
+											{/* ARN */}
+											<td
+												style={{
+													padding: '16px 20px',
+													overflow: 'hidden',
+													textOverflow: 'ellipsis',
+													whiteSpace: 'nowrap'
+												}}
+											>
+												<code
+													title={details.arn}
+													style={{
+														padding: '4px 8px',
+														backgroundColor:
+															'#f1f3f5',
+														borderRadius: '4px',
+														fontFamily: 'monospace',
+														fontSize: '11px',
+														color: '#495057'
+													}}
+												>
+													{details.arn || 'N/A'}
+												</code>
+											</td>
+
+											{/* Description */}
+											<td
+												style={{
+													padding: '16px 20px',
+													color: '#495057',
+													overflow: 'hidden',
+													textOverflow: 'ellipsis',
+													whiteSpace: 'nowrap'
+												}}
+											>
+												{details.description ||
+													'No description provided.'}
+											</td>
+
+											{/* Actions */}
+											<td
+												style={{
+													padding: '16px 20px',
+													textAlign: 'right',
+													whiteSpace: 'nowrap',
+													display: 'flex',
+													justifyContent: 'end'
+												}}
+											>
+												<Button
+													variant="outlined"
+													size="small"
+													iconStart="fa-solid fa-terminal"
+													onClick={(
+														e: React.MouseEvent
+													) => {
+														// Check if new tab
+														if (
+															e.metaKey ||
+															e.ctrlKey
+														) {
+															// Open same target in new tab
+															window.open(
+																`${project?.editorBasePath}/resources/logs/${functionName}`,
+																'_blank'
+															);
+															return;
+														}
+
+														EditorService.navigate(
+															`${project?.editorBasePath}/resources/logs/${functionName}`
+														);
+													}}
+												>
+													View Logs
+												</Button>
+											</td>
+										</tr>
+									);
+								})}
+							</tbody>
+						</table>
+					</div>
+				)}
+			</div>
+
+			{showPaywall && (
+				<div
+					style={{
+						position: 'absolute',
+						top: '50%',
+						left: '50%',
+						transform: 'translate(-50%, -50%)',
+						zIndex: 100,
+						width: '90%',
+						maxWidth: '480px',
+						display: 'flex',
+						flexDirection: 'column',
+						alignItems: 'center',
+						justifyContent: 'center',
+						pointerEvents: 'none',
+						backgroundColor: 'transparent'
+					}}
+				>
+					<UpgradeBanner />
+				</div>
+			)}
+		</div>
+	);
+};
+
+export default FunctionsList;