feat: add API Gateway route testing and discovery

2026-09-24 08:56:22 -04:00
parent 7e49be27f1
commit 9bbe80b5f2
10 changed files with 802 additions and 6 deletions
@@ -24,7 +24,9 @@ export const apiEndpointKeys = {
      invoke: "clouds.services.resources.invoke",
      encrypt: "clouds.services.resources.encrypt",
      decrypt: "clouds.services.resources.decrypt",
-      createApiGatewayRoute: "clouds.services.resources.apigateway.route.create",
+       createApiGatewayRoute: "clouds.services.resources.apigateway.route.create",
+       listApiGatewayRoutes: "clouds.services.resources.apigateway.routes.list",
+       testApiGatewayRoute: "clouds.services.resources.apigateway.route.test",
    },
    storage: {
      objects: {
@@ -300,6 +302,22 @@ export const endpointRegistry: EndpointRegistry = new Map([
      telemetry: { service: "apigateway" },
    },
  ],
+  [
+    apiEndpointKeys.clouds.resources.listApiGatewayRoutes,
+    {
+      path: "/clouds/:cloud/services/apigateway/resources/:id/routes",
+      method: "GET",
+      telemetry: { service: "apigateway" },
+    },
+  ],
+  [
+    apiEndpointKeys.clouds.resources.testApiGatewayRoute,
+    {
+      path: "/clouds/:cloud/services/apigateway/resources/:id/routes/test",
+      method: "POST",
+      telemetry: { service: "apigateway" },
+    },
+  ],
  [
    apiEndpointKeys.clouds.resources.get,
    {
@@ -217,6 +217,34 @@ export interface ApiGatewayLambdaRoute {
  invokeUrl: string;
 }

+export interface TestApiGatewayRouteInput {
+  path: string;
+  method: string;
+  stage: string;
+  body: string;
+  headers: Record<string, string>;
+  query: string;
+}
+
+export interface ApiGatewayTestRouteResult {
+  statusCode: number;
+  headers: Record<string, string>;
+  body: string;
+  durationMs: number;
+}
+
+export interface ApiGatewayRouteOverview {
+  resourceId: string;
+  path: string;
+  method: string;
+  functionName: string | null;
+}
+
+export interface ApiGatewayRoutesResult {
+  routes: ApiGatewayRouteOverview[];
+  stages: string[];
+}
+
 export async function createApiGatewayLambdaRoute(
  cloud: CloudProvider,
  apiId: string,
@@ -231,6 +259,33 @@ export async function createApiGatewayLambdaRoute(
  return res.data;
 }

+export async function listApiGatewayRoutes(
+  cloud: CloudProvider,
+  apiId: string,
+  signal?: AbortSignal,
+): Promise<ApiGatewayRoutesResult> {
+  const res = await apiClient.call<ApiGatewayRoutesResult>(
+    apiEndpointKeys.clouds.resources.listApiGatewayRoutes,
+    requestOptions(cloud, "apigateway", { signal }),
+    { cloud, id: apiId },
+  );
+  return res.data;
+}
+
+export async function testApiGatewayRoute(
+  cloud: CloudProvider,
+  apiId: string,
+  input: TestApiGatewayRouteInput,
+  signal?: AbortSignal,
+): Promise<ApiGatewayTestRouteResult> {
+  const res = await apiClient.call<ApiGatewayTestRouteResult, TestApiGatewayRouteInput>(
+    apiEndpointKeys.clouds.resources.testApiGatewayRoute,
+    requestOptions(cloud, "apigateway", { signal, body: input, timeout: INVOKE_TIMEOUT_MS }),
+    { cloud, id: apiId },
+  );
+  return res.data;
+}
+
 export type KmsEncryptionAlgorithm =
  | "SYMMETRIC_DEFAULT"
  | "RSAES_OAEP_SHA_1"
@@ -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')
+})
@@ -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)'
+    }
+}
@@ -2557,6 +2557,223 @@ pre,
    overflow-wrap: anywhere;
 }

+.apigateway-test-panel {
+    border-top: 1px solid var(--border);
+    margin-top: 18px;
+    padding-top: 16px;
+}
+
+.apigateway-route-explorer {
+    border-top: 1px solid var(--border);
+    margin-top: 18px;
+    padding-top: 16px;
+}
+
+.apigateway-route-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+.apigateway-route-item {
+    align-items: center;
+    background: var(--surface-subtle);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text);
+    cursor: pointer;
+    display: flex;
+    gap: 8px;
+    padding: 7px 9px;
+    text-align: left;
+}
+
+.apigateway-route-item:hover,
+.apigateway-route-item.selected {
+    border-color: var(--accent);
+}
+
+.apigateway-route-item small {
+    color: var(--text-muted);
+    font-size: 11px;
+}
+
+.apigateway-route-method {
+    color: var(--accent);
+    font-size: 11px;
+    font-weight: 700;
+}
+
+.apigateway-test-form {
+    display: grid;
+    gap: 12px;
+    grid-template-columns: minmax(0, 1fr);
+}
+
+.apigateway-test-workspace {
+    display: grid;
+    gap: 22px;
+    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
+    margin-top: 12px;
+}
+
+.apigateway-test-response {
+    border-left: 1px solid var(--border);
+    min-height: 280px;
+    padding-left: 22px;
+}
+
+.apigateway-request-flow {
+    align-items: center;
+    background: var(--surface-subtle);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    display: flex;
+    gap: 8px;
+    margin-top: 12px;
+    overflow-x: auto;
+    padding: 10px;
+}
+
+.apigateway-flow-step {
+    align-items: center;
+    display: flex;
+    flex: 1 0 144px;
+    gap: 8px;
+    min-width: 144px;
+}
+
+.apigateway-flow-step > svg {
+    color: var(--accent);
+    flex: 0 0 auto;
+}
+
+.apigateway-flow-step strong,
+.apigateway-flow-step small {
+    display: block;
+}
+
+.apigateway-flow-step strong {
+    font-size: 12px;
+}
+
+.apigateway-flow-step small {
+    color: var(--text-muted);
+    font-size: 11px;
+    margin-top: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.apigateway-flow-arrow {
+    color: var(--text-muted);
+    flex: 0 0 auto;
+}
+
+.apigateway-flow-response > svg {
+    color: var(--status-success);
+}
+
+.apigateway-test-form .dynamic-field {
+    gap: 5px;
+}
+
+.apigateway-test-form .code-textarea {
+    min-height: 120px;
+}
+
+.apigateway-test-body {
+    grid-column: auto;
+}
+
+.apigateway-test-body-label {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+}
+
+.apigateway-format-button {
+    font-size: 11px;
+    min-height: 24px;
+    padding: 2px 7px;
+}
+
+.apigateway-test-body .code-textarea {
+    min-height: 120px;
+}
+
+.apigateway-test-submit {
+    grid-column: auto;
+    justify-self: start;
+}
+
+.apigateway-test-result {
+    background: var(--surface-subtle);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    margin: 0;
+    max-width: none;
+    padding: 12px;
+}
+
+.apigateway-test-result-header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+}
+
+.apigateway-test-result-actions {
+    align-items: center;
+    display: flex;
+    gap: 6px;
+}
+
+.apigateway-test-result pre {
+    margin: 8px 0 0;
+    max-height: 260px;
+    overflow: auto;
+}
+
+.apigateway-test-result details {
+    font-size: 12px;
+}
+
+.status-success {
+    color: var(--status-success);
+}
+
+.status-error {
+    color: var(--status-error);
+}
+
+@media (max-width: 700px) {
+    .apigateway-test-form {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .apigateway-test-body {
+        grid-column: auto;
+    }
+
+    .apigateway-test-workspace {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .apigateway-test-response {
+        border-left: 0;
+        border-top: 1px solid var(--border);
+        min-height: 0;
+        padding: 16px 0 0;
+    }
+
+    .apigateway-request-flow {
+        justify-content: flex-start;
+    }
+}
+
 .snapshot-list {
    display: grid;
    gap: 8px;