Enhance JsonEditor and RequestBuilder to support JSON Schema autocompletion; add getRequestBodySchema utility for improved request handling

Author: yceruto

spa/src/components/api-tester/ApiTesterModal.tsx

@@ -222,6 +222,8 @@ function ApiTesterModalContent({ endpoint, spec, onClose }: ApiTesterModalProps)
               examples={tester.examples}
               selectedExampleKey={tester.selectedExampleKey}
               onExampleSelect={tester.selectExample}
+              bodySchema={tester.bodySchema}
+              spec={spec}
             />
           </div>
 

spa/src/components/api-tester/JsonEditor.tsx

@@ -1,14 +1,20 @@
-import { useMemo } from 'react';
+import { useMemo, useRef, useCallback } from 'react';
 import CodeMirror from '@uiw/react-codemirror';
 import { json } from '@codemirror/lang-json';
 import { keymap, EditorView } from '@codemirror/view';
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { autocompletion } from '@codemirror/autocomplete';
+import type { CompletionContext } from '@codemirror/autocomplete';
 import { tags } from '@lezer/highlight';
 import { useTheme } from '../../hooks/useTheme';
+import type { SchemaObject, OpenApiSpec } from '../../openapi';
+import { jsonSchemaComplete } from '../../utils/jsonSchemaCompletion';
 
 interface JsonEditorProps {
   value: string;
   onChange: (value: string) => void;
+  schema?: SchemaObject | null;
+  spec?: OpenApiSpec | null;
 }
 
 const ctrlEnterPassthrough = keymap.of([
@@ -41,6 +47,32 @@ const lightTheme = EditorView.theme({
     borderRight: '1px solid rgb(226 232 240)', // slate-200
     color: 'rgb(148 163 184)',              // slate-400
   },
+  '.cm-tooltip-autocomplete': {
+    backgroundColor: 'rgb(255 255 255)',
+    border: '1px solid rgb(226 232 240)',
+    borderRadius: '6px',
+    boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
+    fontSize: '11px',
+  },
+  '.cm-tooltip-autocomplete ul li': {
+    padding: '2px 8px',
+  },
+  '.cm-tooltip-autocomplete ul li[aria-selected]': {
+    backgroundColor: 'rgb(224 231 255)',    // primary-100
+    color: 'rgb(67 56 202)',                // primary-700
+  },
+  '.cm-completionDetail': {
+    color: 'rgb(148 163 184)',              // slate-400
+    fontStyle: 'normal',
+    marginLeft: '8px',
+  },
+  '.cm-completionInfo': {
+    fontSize: '11px',
+    padding: '4px 8px',
+    backgroundColor: 'rgb(255 255 255)',
+    border: '1px solid rgb(226 232 240)',
+    borderRadius: '6px',
+  },
 }, { dark: false });
 
 const lightHighlight = HighlightStyle.define([
@@ -75,6 +107,32 @@ const darkTheme = EditorView.theme({
     borderRight: '1px solid rgb(51 65 85 / 0.5)', // slate-700/50
     color: 'rgb(71 85 105)',                   // slate-600
   },
+  '.cm-tooltip-autocomplete': {
+    backgroundColor: 'rgb(30 41 59)',          // slate-800
+    border: '1px solid rgb(51 65 85)',         // slate-700
+    borderRadius: '6px',
+    boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.3)',
+    fontSize: '11px',
+  },
+  '.cm-tooltip-autocomplete ul li': {
+    padding: '2px 8px',
+  },
+  '.cm-tooltip-autocomplete ul li[aria-selected]': {
+    backgroundColor: 'rgb(55 48 163 / 0.4)',   // primary-800/40
+    color: 'rgb(165 180 252)',                  // primary-300
+  },
+  '.cm-completionDetail': {
+    color: 'rgb(100 116 139)',                 // slate-500
+    fontStyle: 'normal',
+    marginLeft: '8px',
+  },
+  '.cm-completionInfo': {
+    fontSize: '11px',
+    padding: '4px 8px',
+    backgroundColor: 'rgb(30 41 59)',          // slate-800
+    border: '1px solid rgb(51 65 85)',         // slate-700
+    borderRadius: '6px',
+  },
 }, { dark: true });
 
 const darkHighlight = HighlightStyle.define([
@@ -86,15 +144,25 @@ const darkHighlight = HighlightStyle.define([
   { tag: tags.punctuation, color: 'rgb(148 163 184)' },   // slate-400
 ]);
 
-export function JsonEditor({ value, onChange }: JsonEditorProps) {
+export function JsonEditor({ value, onChange, schema, spec }: JsonEditorProps) {
   const { isDark } = useTheme();
 
+  const schemaRef = useRef(schema);
+  const specRef = useRef(spec);
+  schemaRef.current = schema;
+  specRef.current = spec;
+
+  const completionSource = useCallback((ctx: CompletionContext) => {
+    return jsonSchemaComplete(ctx, schemaRef.current, specRef.current);
+  }, []);
+
   const extensions = useMemo(() => [
     json(),
     ctrlEnterPassthrough,
     isDark ? darkTheme : lightTheme,
     syntaxHighlighting(isDark ? darkHighlight : lightHighlight),
-  ], [isDark]);
+    autocompletion({ override: [completionSource], activateOnTyping: true }),
+  ], [isDark, completionSource]);
 
   return (
     <div className="h-full [&_.cm-editor]:!h-full [&_.cm-editor]:!outline-none [&_.cm-editor]:!text-xs [&_.cm-scroller]:!font-mono">
@@ -108,6 +176,8 @@ export function JsonEditor({ value, onChange }: JsonEditorProps) {
           lineNumbers: false,
           foldGutter: false,
           highlightActiveLine: false,
+          completionKeymap: false,
+          autocompletion: false,
         }}
       />
     </div>

spa/src/components/api-tester/RequestBuilder.tsx

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect } from 'react';
 import type { KeyValuePair } from './useApiTester';
 import type { NamedExample } from '../../utils/schema';
+import type { SchemaObject, OpenApiSpec } from '../../openapi';
 import { KeyValueEditor } from './KeyValueEditor';
 import { JsonEditor } from './JsonEditor';
 import { ExampleSelector } from './ExampleSelector';
@@ -36,6 +37,8 @@ interface RequestBuilderProps {
   examples: NamedExample[];
   selectedExampleKey: string | null;
   onExampleSelect: (example: NamedExample) => void;
+  bodySchema: SchemaObject | null;
+  spec: OpenApiSpec;
 }
 
 type Tab = 'body' | 'params' | 'headers';
@@ -59,6 +62,8 @@ export function RequestBuilder({
   examples,
   selectedExampleKey,
   onExampleSelect,
+  bodySchema,
+  spec,
 }: RequestBuilderProps) {
   const showBody = METHODS_WITH_BODY.has(method);
   const [activeTab, setActiveTab] = useState<Tab>(showBody ? 'body' : 'params');
@@ -162,7 +167,7 @@ export function RequestBuilder({
               </div>
             )}
             <div className="flex-1 min-h-0">
-              <JsonEditor value={body} onChange={onBodyChange} />
+              <JsonEditor value={body} onChange={onBodyChange} schema={bodySchema} spec={spec} />
             </div>
           </div>
         )}

spa/src/components/api-tester/useApiTester.ts

@@ -1,7 +1,8 @@
 import { useState, useCallback, useMemo, useEffect } from 'react';
 import type { Endpoint, OpenApiSpec } from '../../openapi';
-import { generateExampleJson, resolveSchema, compilePathPatterns, matchUrlToPath, getRequestBodyExamples } from '../../utils/schema';
+import { generateExampleJson, resolveSchema, compilePathPatterns, matchUrlToPath, getRequestBodyExamples, getRequestBodySchema } from '../../utils/schema';
 import type { NamedExample } from '../../utils/schema';
+import type { SchemaObject } from '../../openapi';
 
 const METHODS_WITH_BODY = new Set(['POST', 'PUT', 'PATCH']);
 
@@ -194,6 +195,7 @@ export interface UseApiTesterReturn {
   examples: NamedExample[];
   selectedExampleKey: string | null;
   selectExample: (example: NamedExample) => void;
+  bodySchema: SchemaObject | null;
 }
 
 export function useApiTester(endpoint: Endpoint, spec: OpenApiSpec): UseApiTesterReturn {
@@ -344,6 +346,12 @@ export function useApiTester(endpoint: Endpoint, spec: OpenApiSpec): UseApiTeste
     return getRequestBodyExamples(spec, matchedPath, request.method);
   }, [request.url, request.method, baseUrl, compiledPatterns, spec]);
 
+  const bodySchema = useMemo(() => {
+    const matchedPath = matchUrlToPath(request.url, baseUrl, compiledPatterns);
+    if (!matchedPath) return null;
+    return getRequestBodySchema(spec, matchedPath, request.method);
+  }, [request.url, request.method, baseUrl, compiledPatterns, spec]);
+
   // Clear selection when examples change and the selected key is no longer available
   useEffect(() => {
     if (selectedExampleKey && !examples.some(e => e.key === selectedExampleKey)) {
@@ -386,5 +394,6 @@ export function useApiTester(endpoint: Endpoint, spec: OpenApiSpec): UseApiTeste
     examples,
     selectedExampleKey,
     selectExample,
+    bodySchema,
   };
 }