@elyx-code/editor-ui 0.0.2

package/src/components/resources/http-api/HttpAPI.tsx

@@ -0,0 +1,566 @@
+import React, { useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import '../resources-dialog.css';
+import HTTPAPIClientModule from './HttpAPIClientModule';
+import { EditorService } from '../../../services/editor';
+import { InfrastructureResourceType } from '@elyx-code/definitions';
+import {
+	resolveActionDescriptorNameById,
+	toSentenceCase
+} from '@elyx-code/project-logic-tree';
+import Button from '../../../lib/button/Button';
+import short from 'short-uuid';
+import { getFunctionNameFromArn } from '../../../utils';
+
+const translator = short();
+
+export interface IHttpAPIProps {
+	onClose: () => void;
+	project: EditorService;
+}
+
+const HttpAPI: React.FC<IHttpAPIProps> = ({ onClose, project }) => {
+	const location = useLocation();
+	const navigate = useNavigate();
+
+	const activeTab =
+		location.pathname.split('/').pop() === 'test' ? 'test' : 'endpoints';
+
+	// 1. Fetch the overall HTTP API details from the live resources list
+	const httpApiResource = project?.liveResources?.find(
+		(r) => r.resourceType === InfrastructureResourceType.HttpApi
+	);
+
+	const routes = (httpApiResource?.details as any)?.routes || [];
+
+	// 2. Fetch the individual HTTP Endpoint Lambdas (physical functions)
+	const endpoints =
+		project?.liveResources?.filter(
+			(r) => r.resourceType === InfrastructureResourceType.HttpEndpoint
+		) || [];
+
+	const getFunctionNameForRoute = (route: any) => {
+		const functionIdParts =
+			route.target?.resource?.resourceId?.split('-') || [];
+		if (functionIdParts.length === 0) return '';
+
+		const shortId = functionIdParts[functionIdParts.length - 1];
+		let entityId = '';
+		try {
+			entityId = translator.toUUID(shortId);
+		} catch (e) {
+			entityId = shortId;
+		}
+
+		// Look for a matching endpoint Lambda resource
+		const matchingEndpoint = endpoints.find(
+			(r) =>
+				r.resourceId === entityId ||
+				r.resourceId === route.target?.resource?.resourceId
+		);
+
+		const details = matchingEndpoint?.details as any;
+		const rawFuncName =
+			details?.functionName || route.target?.resource?.resourceId || '';
+		return getFunctionNameFromArn(rawFuncName);
+	};
+
+	const getMatchingEndpoint = (route: any) => {
+		const functionIdParts =
+			route.target?.resource?.resourceId?.split('-') || [];
+		if (functionIdParts.length === 0) return null;
+
+		const shortId = functionIdParts[functionIdParts.length - 1];
+		let entityId = '';
+		try {
+			entityId = translator.toUUID(shortId);
+		} catch (e) {
+			entityId = shortId;
+		}
+
+		return (
+			endpoints.find(
+				(r) =>
+					r.resourceId === entityId ||
+					r.resourceId === route.target?.resource?.resourceId
+			) || null
+		);
+	};
+
+	// Column resizing state (loaded from UserSettings)
+	const [widths, setWidths] = useState<Record<string, number>>(() => {
+		const saved = project?.userSettings?.columnWidths || {};
+		return {
+			method: saved['http-col-method'] || 110,
+			path: saved['http-col-path'] || 320,
+			lambda: saved['http-col-lambda'] || 320,
+			actions: saved['http-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,
+				[`http-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
+	};
+
+	const getMethodColor = (method: string) => {
+		switch (method.toUpperCase()) {
+			case 'GET':
+				return '#0ea5e9';
+			case 'POST':
+				return '#22c55e';
+			case 'PUT':
+				return '#eab308';
+			case 'DELETE':
+				return '#ef4444';
+			default:
+				return '#6b7280';
+		}
+	};
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				height: 'calc(100% - 90px)',
+				fontFamily: "'Outfit', 'Inter', sans-serif"
+			}}
+		>
+			{/* Tab Bar */}
+			<div
+				style={{
+					display: 'flex',
+					borderBottom: '1px solid #e0e0e0',
+					padding: '0 40px',
+					marginTop: 6,
+					backgroundColor: '#fafafa'
+				}}
+			>
+				<button
+					onClick={() =>
+						navigate(
+							`${project?.editorBasePath}/resources/http-api`
+						)
+					}
+					style={{
+						padding: '16px 24px',
+						background: 'none',
+						border: 'none',
+						borderBottom:
+							activeTab === 'endpoints'
+								? '2px solid #4f46e5'
+								: '2px solid transparent',
+						color: activeTab === 'endpoints' ? '#4f46e5' : '#666',
+						fontWeight: activeTab === 'endpoints' ? 600 : 500,
+						fontSize: '14px',
+						cursor: 'pointer',
+						transition: 'all 0.2s'
+					}}
+				>
+					<i
+						className="fa-solid fa-list-check"
+						style={{ marginRight: '8px' }}
+					></i>
+					Endpoints
+				</button>
+				<button
+					onClick={() =>
+						navigate(
+							`${project?.editorBasePath}/resources/http-api/test`
+						)
+					}
+					style={{
+						padding: '16px 24px',
+						background: 'none',
+						border: 'none',
+						borderBottom:
+							activeTab === 'test'
+								? '2px solid #4f46e5'
+								: '2px solid transparent',
+						color: activeTab === 'test' ? '#4f46e5' : '#666',
+						fontWeight: activeTab === 'test' ? 600 : 500,
+						fontSize: '14px',
+						cursor: 'pointer',
+						transition: 'all 0.2s'
+					}}
+				>
+					<i
+						className="fa-solid fa-paper-plane"
+						style={{ marginRight: '8px' }}
+					></i>
+					Test API Client
+				</button>
+			</div>
+
+			{/* Tab Contents: Endpoints List */}
+			{activeTab === 'endpoints' && (
+				<div
+					style={{
+						padding: '24px 40px',
+						flex: 1,
+						overflowY: 'auto'
+					}}
+				>
+					<div style={{ marginBottom: '20px' }}>
+						<h3
+							style={{
+								margin: '0px',
+								fontSize: '16px',
+								fontWeight: 600,
+								color: '#333'
+							}}
+						>
+							HTTP Endpoints
+						</h3>
+						<span style={{ fontSize: '12px', color: '#888' }}>
+							Check routes status, urls, and view their execution
+							logs
+						</span>
+					</div>
+
+					{routes.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-link-slash"
+								style={{
+									fontSize: '48px',
+									marginBottom: '16px',
+									color: '#ddd'
+								}}
+							></i>
+							<p style={{ margin: '0px', fontSize: '14px' }}>
+								No endpoints exposed in this 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: '890px'
+								}}
+							>
+								<colgroup>
+									<col
+										style={{ width: `${widths.method}px` }}
+									/>
+									<col
+										style={{ width: `${widths.path}px` }}
+									/>
+									<col
+										style={{ width: `${widths.lambda}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.method)}>
+											Method
+											<div
+												style={resizerStyle}
+												onMouseDown={(e) =>
+													startResize('method', e)
+												}
+											/>
+										</th>
+										<th style={thStyle(widths.path)}>
+											Route Path
+											<div
+												style={resizerStyle}
+												onMouseDown={(e) =>
+													startResize('path', e)
+												}
+											/>
+										</th>
+										<th style={thStyle(widths.lambda)}>
+											Integrated Lambda
+											<div
+												style={resizerStyle}
+												onMouseDown={(e) =>
+													startResize('lambda', e)
+												}
+											/>
+										</th>
+										<th
+											style={{
+												...thStyle(widths.actions),
+												textAlign: 'right'
+											}}
+										>
+											Actions
+											<div
+												style={resizerStyle}
+												onMouseDown={(e) =>
+													startResize('actions', e)
+												}
+											/>
+										</th>
+									</tr>
+								</thead>
+								<tbody>
+									{routes.map((route: any, idx: number) => {
+										if (
+											route.target?.resource?.resourceId?.endsWith(
+												'-options'
+											)
+										)
+											return null;
+
+										const functionName =
+											getFunctionNameForRoute(route);
+										const method = route.method || 'GET';
+										const path = route.path || '/';
+
+										// Best-effort name resolution
+										const matchingEndpoint =
+											getMatchingEndpoint(route);
+										const rawName =
+											matchingEndpoint?.name ||
+											route.target?.resource?.name ||
+											'';
+										const readableName =
+											resolveActionDescriptorNameById(
+												rawName
+											) ||
+											toSentenceCase(rawName) ||
+											functionName ||
+											'N/A';
+
+										return (
+											<tr
+												key={idx}
+												style={{
+													borderBottom:
+														'1px solid #f0f0f0',
+													transition:
+														'background 0.2s'
+												}}
+												onMouseEnter={(e) =>
+													(e.currentTarget.style.backgroundColor =
+														'#fafafa')
+												}
+												onMouseLeave={(e) =>
+													(e.currentTarget.style.backgroundColor =
+														'transparent')
+												}
+											>
+												{/* Method */}
+												<td
+													style={{
+														padding: '16px 20px',
+														whiteSpace: 'nowrap'
+													}}
+												>
+													<span
+														style={{
+															display:
+																'inline-block',
+															padding: '4px 10px',
+															borderRadius: '6px',
+															backgroundColor: `${getMethodColor(method)}15`,
+															color: getMethodColor(
+																method
+															),
+															fontWeight: 700,
+															fontSize: '11px',
+															textAlign: 'center',
+															minWidth: '55px'
+														}}
+													>
+														{method}
+													</span>
+												</td>
+
+												{/* Path */}
+												<td
+													style={{
+														padding: '16px 20px',
+														fontWeight: 500,
+														color: '#333',
+														overflow: 'hidden',
+														textOverflow:
+															'ellipsis',
+														whiteSpace: 'nowrap'
+													}}
+												>
+													<code
+														style={{
+															fontFamily:
+																'monospace',
+															fontSize: '13px'
+														}}
+													>
+														{path}
+													</code>
+												</td>
+
+												{/* Function Name */}
+												<td
+													style={{
+														padding: '16px 20px',
+														overflow: 'hidden',
+														textOverflow:
+															'ellipsis',
+														whiteSpace: 'nowrap'
+													}}
+												>
+													<span
+														title={functionName}
+														style={{
+															color: '#333',
+															fontSize: '13px',
+															fontWeight: 500
+														}}
+													>
+														{readableName}
+													</span>
+												</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"
+														disabled={!functionName}
+														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>
+			)}
+
+			{/* Tab Contents: Hoppscotch Client (Keep alive when hidden) */}
+			<div
+				style={{
+					display: activeTab === 'test' ? 'block' : 'none',
+					flex: 1
+				}}
+			>
+				<HTTPAPIClientModule
+					envIdentifiers={
+						project.viewingBranch
+							? [project.viewingBranch]
+							: ['main']
+					}
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default HttpAPI;

package/src/components/resources/http-api/HttpAPIClientModule.tsx

@@ -0,0 +1,37 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { getAccessToken } from '../../../auth';
+import { useParams } from 'react-router-dom';
+import { Logger } from '@elyx-code/common-ts-utils';
+import { envConfig } from '../../../config';
+
+interface IHTTPAPIClientModuleProps {
+	envIdentifiers: string[];
+}
+
+const HTTPAPIClientModule: React.FC<IHTTPAPIClientModuleProps> = ({
+	envIdentifiers,
+}) => {
+	const { id: projectId } = useParams<{ id: string }>();
+	const iframeRef = useRef(null);
+
+	const init = useCallback(async () => {
+		const accessToken = await getAccessToken();
+
+		const url = `${envConfig.HTTP_CLIENT_URL}/?projectId=${projectId}&envIdentifiers=${envIdentifiers.join(',')}&accessToken=${accessToken}`;
+		Logger.log('HTTPAPIClientModule module URL', url);
+
+		iframeRef.current.src = url;
+	}, [projectId, envIdentifiers]);
+
+	useEffect(() => {
+		init();
+	}, [projectId]);
+
+	return (
+		<div style={{ display: 'flex', flexDirection: 'column' }}>
+			<iframe style={{ height: '670px', border: 'none' }} ref={iframeRef} />
+		</div>
+	);
+};
+
+export default HTTPAPIClientModule;