feat: add API Gateway route testing and discovery

packages/frontend/src/components/ApiGatewayRoutePanel.test.tsx

@@ -1,5 +1,5 @@
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query'
-import {render, screen, waitFor} from '@testing-library/react'
+import {fireEvent, render, screen, waitFor} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import {expect, test, vi} from 'vitest'
 import {ApiGatewayRoutePanel} from './ApiGatewayRoutePanel'
@@ -7,7 +7,9 @@ import type {CloudResource} from '@/types/resource'
 
 const apiMocks = vi.hoisted(() => ({
     createApiGatewayLambdaRoute: vi.fn(),
+    listApiGatewayRoutes: vi.fn(),
     listCloudResources: vi.fn(),
+    testApiGatewayRoute: vi.fn(),
 }))
 
 vi.mock('@/api/cloudProxyClient', () => apiMocks)
@@ -24,6 +26,7 @@ const lambda: CloudResource = {
 
 test('creates and displays a deployed Lambda proxy route', async () => {
     apiMocks.listCloudResources.mockResolvedValue([lambda])
+    apiMocks.listApiGatewayRoutes.mockResolvedValue({routes: [], stages: ['dev']})
     apiMocks.createApiGatewayLambdaRoute.mockResolvedValue({
         resourceId: 'resource-123', deploymentId: 'deployment-123', invokeUrl: 'http://localhost:4566/execute-api/api-123/dev/orders',
     })
@@ -48,3 +51,76 @@ test('creates and displays a deployed Lambda proxy route', async () => {
     })
     expect(await screen.findByText('Route deployed')).toBeInTheDocument()
 })
+
+test('sends a route test request and displays its response', async () => {
+    apiMocks.listCloudResources.mockResolvedValue([lambda])
+    apiMocks.listApiGatewayRoutes.mockResolvedValue({routes: [], stages: ['dev']})
+    apiMocks.testApiGatewayRoute.mockResolvedValue({
+        statusCode: 200,
+        headers: {'content-type': 'application/json'},
+        body: '{"message":"Hello"}',
+        durationMs: 12,
+    })
+    const user = userEvent.setup()
+    const queryClient = new QueryClient({defaultOptions: {queries: {retry: false}}})
+
+    render(
+        <QueryClientProvider client={queryClient}>
+            <ApiGatewayRoutePanel cloud="aws" resource={api} runtimeReachable/>
+        </QueryClientProvider>,
+    )
+
+    await user.click(screen.getByRole('button', {name: 'Send test request'}))
+
+    await waitFor(() => {
+        expect(apiMocks.testApiGatewayRoute).toHaveBeenCalledWith('aws', 'api-123', {
+            path: '/hello', method: 'GET', stage: 'dev', body: '{}',
+            headers: {'content-type': 'application/json'}, query: '',
+        })
+    })
+    expect(await screen.findByText('200', {selector: '.apigateway-test-result .status-success'})).toBeInTheDocument()
+    expect(screen.getByText(/"message": "Hello"/)).toBeInTheDocument()
+    await user.click(screen.getByRole('button', {name: 'Dismiss response'}))
+    expect(document.querySelector('.apigateway-test-result')).not.toBeInTheDocument()
+})
+
+test('formats the request body as JSON', async () => {
+    apiMocks.listCloudResources.mockResolvedValue([lambda])
+    apiMocks.listApiGatewayRoutes.mockResolvedValue({routes: [], stages: ['dev']})
+    const user = userEvent.setup()
+    const queryClient = new QueryClient({defaultOptions: {queries: {retry: false}}})
+
+    render(
+        <QueryClientProvider client={queryClient}>
+            <ApiGatewayRoutePanel cloud="aws" resource={api} runtimeReachable/>
+        </QueryClientProvider>,
+    )
+
+    const body = screen.getByLabelText('Request body')
+    fireEvent.change(body, {target: {value: '{"name":"Ada"}'}})
+    await user.click(screen.getByRole('button', {name: 'Format JSON'}))
+
+    expect(body).toHaveValue('{\n  "name": "Ada"\n}')
+})
+
+test('selects a deployed route for testing', async () => {
+    apiMocks.listCloudResources.mockResolvedValue([lambda])
+    apiMocks.listApiGatewayRoutes.mockResolvedValue({
+        routes: [{resourceId: 'resource-123', path: '/orders', method: 'POST', functionName: 'orders-handler'}],
+        stages: ['dev'],
+    })
+    const user = userEvent.setup()
+    const queryClient = new QueryClient({defaultOptions: {queries: {retry: false}}})
+
+    render(
+        <QueryClientProvider client={queryClient}>
+            <ApiGatewayRoutePanel cloud="aws" resource={api} runtimeReachable/>
+        </QueryClientProvider>,
+    )
+
+    await user.click(await screen.findByRole('button', {name: /POST.*\/orders.*orders-handler/}))
+
+    expect(screen.getByPlaceholderText('/orders')).toHaveValue('/orders')
+    expect(screen.getAllByRole('combobox')[0]).toHaveValue('POST')
+    expect(screen.getAllByRole('combobox')[1]).toHaveValue('orders-handler')
+})

packages/frontend/src/components/ApiGatewayRoutePanel.tsx

@@ -1,7 +1,7 @@
 import {useEffect, useState} from 'react'
-import {Link2, Loader2, Rocket} from 'lucide-react'
-import {useMutation, useQuery} from '@tanstack/react-query'
-import {createApiGatewayLambdaRoute, listCloudResources} from '@/api/cloudProxyClient'
+import {ArrowRight, Braces, Link2, ListTree, Loader2, Rocket, Send, Waypoints, X} from 'lucide-react'
+import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
+import {createApiGatewayLambdaRoute, listApiGatewayRoutes, listCloudResources, testApiGatewayRoute} from '@/api/cloudProxyClient'
 import type {CloudProvider} from '@/types/cloud'
 import type {CloudResource} from '@/types/resource'
 
@@ -16,21 +16,44 @@ export function ApiGatewayRoutePanel({cloud, resource, runtimeReachable}: ApiGat
     const [method, setMethod] = useState('GET')
     const [stage, setStage] = useState('dev')
     const [functionName, setFunctionName] = useState('')
+    const [testBody, setTestBody] = useState('{}')
+    const [testHeaders, setTestHeaders] = useState('{\n  "content-type": "application/json"\n}')
+    const [bodyFormatError, setBodyFormatError] = useState<string | null>(null)
+    const queryClient = useQueryClient()
     const functionsQuery = useQuery({
         queryKey: ['cloud-resources', cloud, 'serverless'],
         queryFn: ({signal}) => listCloudResources(cloud, 'serverless', undefined, signal),
         enabled: cloud === 'aws' && Boolean(resource) && runtimeReachable,
     })
+    const routesQuery = useQuery({
+        queryKey: ['api-gateway-routes', cloud, resource?.id],
+        queryFn: ({signal}) => listApiGatewayRoutes(cloud, resource!.id, signal),
+        enabled: cloud === 'aws' && Boolean(resource) && runtimeReachable,
+    })
 
     useEffect(() => {
         setPath('/hello')
         setMethod('GET')
         setStage('dev')
         setFunctionName('')
+        setTestBody('{}')
+        setTestHeaders('{\n  "content-type": "application/json"\n}')
+        setBodyFormatError(null)
     }, [resource?.id])
 
     const routeMutation = useMutation({
         mutationFn: () => createApiGatewayLambdaRoute(cloud, resource!.id, {path, method, stage, functionName}),
+        onSuccess: () => queryClient.invalidateQueries({queryKey: ['api-gateway-routes', cloud, resource!.id]}),
+    })
+    const testMutation = useMutation({
+        mutationFn: () => testApiGatewayRoute(cloud, resource!.id, {
+            path,
+            method,
+            stage,
+            body: testBody,
+            headers: parseHeaders(testHeaders),
+            query: '',
+        }),
     })
 
     if (!resource || resource.service !== 'apigateway') {
@@ -99,6 +122,152 @@ export function ApiGatewayRoutePanel({cloud, resource, runtimeReachable}: ApiGat
                     </div>
                 )}
             </div>
+            <div className="apigateway-route-explorer">
+                <div className="dynamic-stage-header">
+                    <div>
+                        <p className="eyebrow">Deployed Routes</p>
+                        <h3><ListTree size={15}/> Route explorer</h3>
+                        <p className="muted compact-text">Select a route to fill the test workspace from its deployed API Gateway configuration.</p>
+                    </div>
+                </div>
+                {routesQuery.isLoading && <p className="muted compact-text">Loading deployed routes...</p>}
+                {routesQuery.isError && <p className="error-text compact-text">{routesQuery.error instanceof Error ? routesQuery.error.message : 'Unable to load API routes.'}</p>}
+                {routesQuery.data?.routes.length === 0 && <p className="muted compact-text">No deployed methods yet. Create and deploy a route above.</p>}
+                {routesQuery.data && routesQuery.data.routes.length > 0 && (
+                    <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={() => {
+                                setPath(route.path)
+                                setMethod(route.method)
+                                setFunctionName(route.functionName ?? '')
+                                setStage(routesQuery.data.stages.includes(stage) ? stage : routesQuery.data.stages[0] ?? stage)
+                                testMutation.reset()
+                            }}>
+                                <span className="apigateway-route-method">{route.method}</span>
+                                <code>{route.path}</code>
+                                <small>{route.functionName ?? 'No Lambda integration'}</small>
+                            </button>
+                        })}
+                    </div>
+                )}
+            </div>
+            <div className="apigateway-test-panel">
+                <div className="dynamic-stage-header">
+                    <div>
+                        <p className="eyebrow">Test Route</p>
+                        <h3><Send size={15}/> Send request</h3>
+                        <p className="muted compact-text">Invokes <code>{method} /{stage}{path}</code> through the local API Gateway endpoint.</p>
+                    </div>
+                </div>
+                <div className="apigateway-request-flow" aria-label="API request flow">
+                    <div className="apigateway-flow-step">
+                        <Send size={16}/>
+                        <div><strong>Test request</strong><small>{method} {path}</small></div>
+                    </div>
+                    <ArrowRight className="apigateway-flow-arrow" size={16}/>
+                    <div className="apigateway-flow-step">
+                        <Waypoints size={16}/>
+                        <div><strong>API Gateway</strong><small>{resource.name} · {stage}</small></div>
+                    </div>
+                    <ArrowRight className="apigateway-flow-arrow" size={16}/>
+                    <div className="apigateway-flow-step">
+                        <Braces size={16}/>
+                        <div><strong>Lambda proxy</strong><small>{functionName || 'Connected Lambda'}</small></div>
+                    </div>
+                    <ArrowRight className="apigateway-flow-arrow" size={16}/>
+                    <div className="apigateway-flow-step apigateway-flow-response">
+                        <ArrowRight size={16}/>
+                        <div><strong>Response</strong><small>Status, headers, body</small></div>
+                    </div>
+                </div>
+                <div className="apigateway-test-workspace">
+                    <form className="apigateway-test-form" onSubmit={(event) => {
+                        event.preventDefault()
+                        if (!testMutation.isPending) testMutation.mutate()
+                    }}>
+                        <label className="dynamic-field">
+                            <span>Request headers (JSON)</span>
+                            <textarea className="textarea code-textarea small" value={testHeaders} onChange={(event) => setTestHeaders(event.target.value)} spellCheck={false}/>
+                        </label>
+                        <div className="dynamic-field apigateway-test-body">
+                            <div className="apigateway-test-body-label">
+                                <span>Request body</span>
+                                <button className="button ghost apigateway-format-button" type="button" onClick={() => {
+                                    try {
+                                        setTestBody(JSON.stringify(JSON.parse(testBody || '{}'), null, 2))
+                                        setBodyFormatError(null)
+                                    } catch {
+                                        setBodyFormatError('Request body must be valid JSON to format it.')
+                                    }
+                                }}>Format JSON</button>
+                            </div>
+                            <textarea aria-label="Request body" className="textarea code-textarea" value={testBody} onChange={(event) => {
+                                setTestBody(event.target.value)
+                                setBodyFormatError(null)
+                            }} onKeyDown={(event) => {
+                                if (event.key !== 'Tab') return
+                                event.preventDefault()
+                                const textarea = event.currentTarget
+                                const start = textarea.selectionStart
+                                const end = textarea.selectionEnd
+                                const indentation = event.shiftKey && testBody.slice(Math.max(0, start - 2), start) === '  ' ? '' : '  '
+                                const indentStart = indentation ? start : Math.max(0, start - 2)
+                                setTestBody(`${testBody.slice(0, indentStart)}${indentation}${testBody.slice(end)}`)
+                                requestAnimationFrame(() => {
+                                    textarea.selectionStart = indentStart + indentation.length
+                                    textarea.selectionEnd = indentStart + indentation.length
+                                })
+                            }} spellCheck={false}/>
+                            {bodyFormatError && <small className="error-text">{bodyFormatError}</small>}
+                        </div>
+                        <button className="button primary apigateway-test-submit" type="submit" disabled={testMutation.isPending}>
+                            {testMutation.isPending ? <Loader2 size={13}/> : <Send size={13}/>}
+                            {testMutation.isPending ? 'Sending' : 'Send test request'}
+                        </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">
+                    {testMutation.data ? (
+                    <div className="apigateway-test-result">
+                        <div className="apigateway-test-result-header">
+                            <strong>Response <span className={testMutation.data.statusCode < 400 ? 'status-success' : 'status-error'}>{testMutation.data.statusCode}</span></strong>
+                            <div className="apigateway-test-result-actions">
+                                <small>{testMutation.data.durationMs} ms</small>
+                                <button className="icon-button" type="button" onClick={() => testMutation.reset()} aria-label="Dismiss response"><X size={14}/></button>
+                            </div>
+                        </div>
+                        <details>
+                            <summary>Response headers</summary>
+                            <pre>{JSON.stringify(testMutation.data.headers, null, 2)}</pre>
+                        </details>
+                        <pre>{formatResponseBody(testMutation.data.body)}</pre>
+                    </div>
+                    ) : <p className="muted compact-text">Send a request to inspect the API response.</p>}
+                    </div>
+                </div>
+            </div>
         </section>
     )
 }
+
+function parseHeaders(value: string): Record<string, string> {
+    let parsed: unknown
+    try {
+        parsed = JSON.parse(value || '{}')
+    } catch {
+        throw new Error('Request headers must be valid JSON.')
+    }
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed) || Object.values(parsed).some((header) => typeof header !== 'string')) {
+        throw new Error('Request headers must be a JSON object with string values.')
+    }
+    return parsed as Record<string, string>
+}
+
+function formatResponseBody(body: string): string {
+    try {
+        return JSON.stringify(JSON.parse(body), null, 2)
+    } catch {
+        return body || '(empty response body)'
+    }
+}