feat: add SQS + EventBridge

packages/frontend/src/components/ApiGatewayRoutePanel.tsx

@@ -1,9 +1,10 @@
 import {useEffect, useState} from 'react'
-import {ArrowRight, Braces, Link2, ListTree, Loader2, Rocket, Send, Waypoints, X} from 'lucide-react'
+import {ArrowRight, Braces, Copy, Link2, ListTree, Loader2, Rocket, Send, Trash2, Waypoints, X} from 'lucide-react'
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
-import {createApiGatewayLambdaRoute, listApiGatewayRoutes, listCloudResources, testApiGatewayRoute} from '@/api/cloudProxyClient'
+import {createApiGatewayLambdaRoute, deleteApiGatewayRoute, listApiGatewayRoutes, listCloudResources, testApiGatewayRoute} from '@/api/cloudProxyClient'
 import type {CloudProvider} from '@/types/cloud'
 import type {CloudResource} from '@/types/resource'
+import {LogsQueryPanel} from './LogsQueryPanel'
 
 interface ApiGatewayRoutePanelProps {
     cloud: CloudProvider
@@ -18,7 +19,11 @@ export function ApiGatewayRoutePanel({cloud, resource, runtimeReachable}: ApiGat
     const [functionName, setFunctionName] = useState('')
     const [testBody, setTestBody] = useState('{}')
     const [testHeaders, setTestHeaders] = useState('{\n  "content-type": "application/json"\n}')
+    const [testQuery, setTestQuery] = useState('')
+    const [curlCopied, setCurlCopied] = useState(false)
     const [bodyFormatError, setBodyFormatError] = useState<string | null>(null)
+    const [logsRefreshKey, setLogsRefreshKey] = useState(0)
+    const [deleteConfirmation, setDeleteConfirmation] = useState<string | null>(null)
     const queryClient = useQueryClient()
     const functionsQuery = useQuery({
         queryKey: ['cloud-resources', cloud, 'serverless'],
@@ -38,7 +43,11 @@ export function ApiGatewayRoutePanel({cloud, resource, runtimeReachable}: ApiGat
         setFunctionName('')
         setTestBody('{}')
         setTestHeaders('{\n  "content-type": "application/json"\n}')
+        setTestQuery('')
+        setCurlCopied(false)
         setBodyFormatError(null)
+        setLogsRefreshKey(0)
+        setDeleteConfirmation(null)
     }, [resource?.id])
 
     const routeMutation = useMutation({
@@ -52,8 +61,17 @@ export function ApiGatewayRoutePanel({cloud, resource, runtimeReachable}: ApiGat
             stage,
             body: testBody,
             headers: parseHeaders(testHeaders),
-            query: '',
+            query: testQuery,
         }),
+        onSuccess: () => setLogsRefreshKey((value) => value + 1),
+    })
+    const deleteRouteMutation = useMutation({
+        mutationFn: ({resourceId, path, method}: {resourceId: string; path: string; method: string}) => deleteApiGatewayRoute(cloud, resource!.id, {resourceId, path, method, stage}),
+        onSuccess: () => {
+            setDeleteConfirmation(null)
+            testMutation.reset()
+            queryClient.invalidateQueries({queryKey: ['api-gateway-routes', cloud, resource!.id]})
+        },
     })
 
     if (!resource || resource.service !== 'apigateway') {
@@ -69,6 +87,8 @@ export function ApiGatewayRoutePanel({cloud, resource, runtimeReachable}: ApiGat
 
     const functions = functionsQuery.data?.filter((item) => item.type === 'lambda') ?? []
     const canCreate = cloud === 'aws' && runtimeReachable && Boolean(functionName) && !routeMutation.isPending
+    const existingPath = routesQuery.data?.routes.some((route) => route.path === path) ?? false
+    const curlCommand = buildCurlCommand(resource.id, stage, path, method, testHeaders, testQuery, testBody)
 
     return (
         <section className="table-panel">
@@ -78,6 +98,14 @@ export function ApiGatewayRoutePanel({cloud, resource, runtimeReachable}: ApiGat
                     <h3><Link2 size={15}/> Connect Lambda</h3>
                     <p className="muted compact-text">Creates and deploys one Lambda proxy route to the selected REST API.</p>
                 </div>
+                {testMutation.data && functionName && (
+                    <LogsQueryPanel
+                        cloud={cloud}
+                        logGroupName={`/aws/lambda/${functionName}`}
+                        runtimeReachable={runtimeReachable}
+                        autoRunKey={logsRefreshKey}
+                    />
+                )}
             </div>
             <div className="resource-create-inline">
                 <form className="inspector-action-form apigateway-route-form" onSubmit={(event) => {
@@ -87,7 +115,7 @@ export function ApiGatewayRoutePanel({cloud, resource, runtimeReachable}: ApiGat
                     <label className="dynamic-field">
                         <span>Route path</span>
                         <input className="input" value={path} onChange={(event) => setPath(event.target.value)} placeholder="/orders" required/>
-                        <small>One path segment, for example <code>/qrcode</code>.</small>
+                        <small>{existingPath ? `Adds ${method} to the existing ${path} resource.` : <>One path segment, for example <code>/qrcode</code>.</>}</small>
                     </label>
                     <label className="dynamic-field">
                         <span>Method</span>
@@ -137,7 +165,9 @@ export function ApiGatewayRoutePanel({cloud, resource, runtimeReachable}: ApiGat
                     <div className="apigateway-route-list">
                         {routesQuery.data.routes.map((route) => {
                             const selected = route.path === path && route.method === method
-                            return <button className={`apigateway-route-item${selected ? ' selected' : ''}`} type="button" key={`${route.resourceId}-${route.method}`} onClick={() => {
+                            const key = `${route.resourceId}-${route.method}`
+                            return <div className={`apigateway-route-item${selected ? ' selected' : ''}`} key={key}>
+                                <button className="apigateway-route-select" type="button" onClick={() => {
                                 setPath(route.path)
                                 setMethod(route.method)
                                 setFunctionName(route.functionName ?? '')
@@ -147,7 +177,13 @@ export function ApiGatewayRoutePanel({cloud, resource, runtimeReachable}: ApiGat
                                 <span className="apigateway-route-method">{route.method}</span>
                                 <code>{route.path}</code>
                                 <small>{route.functionName ?? 'No Lambda integration'}</small>
-                            </button>
+                                </button>
+                                {deleteConfirmation === key ? <div className="apigateway-route-confirm">
+                                    <span>Delete {route.method}?</span>
+                                    <button className="button danger compact" type="button" disabled={deleteRouteMutation.isPending} onClick={() => deleteRouteMutation.mutate(route)}>Delete</button>
+                                    <button className="button compact" type="button" disabled={deleteRouteMutation.isPending} onClick={() => setDeleteConfirmation(null)}>Cancel</button>
+                                </div> : <button className="icon-btn" type="button" aria-label={`Delete ${route.method} ${route.path}`} onClick={() => setDeleteConfirmation(key)}><Trash2 size={13}/></button>}
+                            </div>
                         })}
                     </div>
                 )}
@@ -190,6 +226,11 @@ export function ApiGatewayRoutePanel({cloud, resource, runtimeReachable}: ApiGat
                             <span>Request headers (JSON)</span>
                             <textarea className="textarea code-textarea small" value={testHeaders} onChange={(event) => setTestHeaders(event.target.value)} spellCheck={false}/>
                         </label>
+                        <label className="dynamic-field">
+                            <span>Query parameters</span>
+                            <input className="input" value={testQuery} onChange={(event) => setTestQuery(event.target.value)} placeholder="page=1&limit=20"/>
+                            <small>URL-encoded query string.</small>
+                        </label>
                         <div className="dynamic-field apigateway-test-body">
                             <div className="apigateway-test-body-label">
                                 <span>Request body</span>
@@ -225,6 +266,13 @@ export function ApiGatewayRoutePanel({cloud, resource, runtimeReachable}: ApiGat
                             {testMutation.isPending ? <Loader2 size={13}/> : <Send size={13}/>}
                             {testMutation.isPending ? 'Sending' : 'Send test request'}
                         </button>
+                        <button className="button" type="button" onClick={() => {
+                            void navigator.clipboard.writeText(curlCommand)
+                            setCurlCopied(true)
+                            window.setTimeout(() => setCurlCopied(false), 1200)
+                        }}>
+                            <Copy size={13}/>{curlCopied ? 'Copied' : 'Copy cURL'}
+                        </button>
                         {testMutation.isError && <p className="error-text compact-text">{testMutation.error instanceof Error ? testMutation.error.message : 'Unable to test API route.'}</p>}
                     </form>
                     <div className="apigateway-test-response">
@@ -271,3 +319,16 @@ function formatResponseBody(body: string): string {
         return body || '(empty response body)'
     }
 }
+
+function buildCurlCommand(apiId: string, stage: string, path: string, method: string, headersText: string, query: string, body: string): string {
+    let headers: Record<string, string> = {}
+    try {
+        headers = parseHeaders(headersText)
+    } catch {
+        // Keep cURL available while the user is editing invalid headers.
+    }
+    const url = `http://localhost:4566/execute-api/${apiId}/${stage}${path}${query ? `?${query}` : ''}`
+    const args = [`curl -X ${method}`, `'${url}'`, ...Object.entries(headers).map(([name, value]) => `-H '${name}: ${value.replace(/'/g, "'\\''")}'`)]
+    if (!['GET', 'HEAD', 'OPTIONS'].includes(method) && body) args.push(`--data '${body.replace(/'/g, "'\\''")}'`)
+    return args.join(' ')
+}