Always request JSON response when available, and allow calling

aerb · svc-squareup-copybara · commit b69ab0ef3854 · 2025-04-03T15:15:35.000Z
POST endpoint with no request media type

GitOrigin-RevId: 121b6b19e164efa3e8d7f69da31d4a66d00f8222
diff --git a/misk-admin-web-actions/src/index.tsx b/misk-admin-web-actions/src/index.tsx
@@ -30,7 +30,6 @@ import { createIcon } from '@chakra-ui/icons';
 import { useSubmitRequest } from '@web-actions/hooks/useSubmitRequest';
 import { useKeyboardShortcuts } from '@web-actions/hooks/useKeyboardShortcuts';
 import { useAppEvent } from '@web-actions/hooks/useAppEvent';
-import { Select } from '@chakra-ui/react';
 import { APP_EVENTS } from '@web-actions/events/appEvents';
 
 function App() {
@@ -51,27 +50,19 @@ function App() {
     submitting,
     response,
   } = useSubmitRequest(
-    viewState.selectedCallable ?? null,
+    viewState.selectedAction ?? null,
     viewState.path,
     viewState.headers,
     () => requestEditorRef.current?.editor?.getValue() ?? '',
   );
 
   useAppEvent(APP_EVENTS.ENDPOINT_SELECTED, (selectedAction: ActionGroup) => {
-    const callables = selectedAction.getCallablesByMethod();
-    const defaultCallable = callables[0];
-
-    requestEditorRef.current?.setEndpointSelection(defaultCallable);
+    requestEditorRef.current?.setEndpointSelection(selectedAction);
 
     setViewState((curr) => ({
       ...curr,
       selectedAction: selectedAction,
-      path:
-        defaultCallable?.pathPattern ||
-        selectedAction.all[0]?.pathPattern ||
-        '',
-      selectedCallable: defaultCallable,
-      callables: callables,
+      path: selectedAction.path,
     }));
   });
 
@@ -196,34 +187,6 @@ function App() {
               Request
             </Heading>
             <HStack flexGrow={1} w="100%">
-              {viewState.callables.length > 0 && (
-                <Select
-                  value={viewState.selectedCallable?.httpMethod}
-                  bg="white"
-                  width="fit-content"
-                  minWidth="fit-content"
-                  onChange={(e) => {
-                    const selected = viewState.callables.find(
-                      (it) => it.httpMethod === e.target.value,
-                    );
-                    requestEditorRef.current?.setEndpointSelection(selected);
-                    setViewState({
-                      ...viewState,
-                      path: selected?.pathPattern || '',
-                      selectedCallable: selected,
-                    });
-                  }}
-                >
-                  {viewState.callables.map((callable) => (
-                    <option
-                      key={callable.httpMethod}
-                      value={callable.httpMethod}
-                    >
-                      {callable.httpMethod}
-                    </option>
-                  ))}
-                </Select>
-              )}
               <Input
                 value={viewState.path}
                 placeholder="Path"
@@ -235,7 +198,7 @@ function App() {
                   });
                 }}
               />
-              {viewState.selectedCallable && (
+              {viewState.selectedAction?.canCall === true && (
                 <IconButton
                   aria-label="Run"
                   colorScheme={'green'}
diff --git a/misk-admin-web-actions/src/viewState.tsx b/misk-admin-web-actions/src/viewState.tsx
@@ -5,8 +5,6 @@ import {
 import { Header } from '@web-actions/services/ApiService';
 
 export interface ViewState {
-  callables: MiskWebActionDefinition[];
-  selectedCallable?: MiskWebActionDefinition;
   path: string;
   selectedAction: ActionGroup | null;
   loading: boolean;
diff --git a/misk-admin-web-actions/src/web-actions/api/RealMetadataClient.ts b/misk-admin-web-actions/src/web-actions/api/RealMetadataClient.ts
@@ -7,8 +7,12 @@ import {
 import { fetchCached } from '@web-actions/network/http';
 import MetadataClient from '@web-actions/api/MetadataClient';
 
-function containsJson(mediaType: string[]) {
-  return mediaType.some((it) => it.startsWith('application/json'));
+function containsJsonOrAny(mediaType: string[]) {
+  return (
+    mediaType.length == 0 ||
+    mediaType.some((it) => it.startsWith('application/json')) ||
+    mediaType.some((it) => it.startsWith('*/*'))
+  );
 }
 
 export default class RealMetadataClient implements MetadataClient {
@@ -19,43 +23,35 @@ export default class RealMetadataClient implements MetadataClient {
     const actionMap: Record<string, ActionGroup> = {};
 
     response.all['web-actions'].metadata.forEach((it) => {
+      it.requestType = it.requestType === 'null' ? null : it.requestType;
+
       const qualifiedName = `${it.packageName}.${it.name}`;
       const groupKey = `${it.httpMethod} ${it.pathPattern} ${qualifiedName}`;
       let group = actionMap[groupKey];
+
       if (group === undefined) {
         group = {
           actionName: qualifiedName,
           path: it.pathPattern,
           httpMethod: it.httpMethod || '',
-          callables: {},
-          getCallablesByMethod(): MiskWebActionDefinition[] {
-            return [
-              this.callables['POST'],
-              this.callables['PUT'],
-              this.callables['GET'],
-            ].filter((it) => it !== undefined);
-          },
+          callables: [],
           all: [],
+          responseMediaTypes: [],
+          requestMediaTypes: [],
+          canCall: false,
+          types: it.types,
+          requestType: it.requestType,
         };
         actionMap[groupKey] = group;
       }
 
-      function maybeAddCallable(
-        method: string,
-        predicate: (it: MiskWebActionDefinition) => boolean = () => true,
-      ) {
-        if (
-          it.httpMethod === method &&
-          group.callables[method] === undefined &&
-          predicate(it)
-        ) {
-          group.callables[method] = it;
-        }
+      if (it.httpMethod === 'GET' || containsJsonOrAny(it.requestMediaTypes)) {
+        group.canCall = true;
+        group.callables.push(it);
       }
 
-      maybeAddCallable('POST', (it) => containsJson(it.requestMediaTypes));
-      maybeAddCallable('PUT', (it) => containsJson(it.requestMediaTypes));
-      maybeAddCallable('GET');
+      group.requestMediaTypes.push(...it.requestMediaTypes);
+      group.responseMediaTypes.push(it.responseMediaType);
 
       group.all.push(it);
     });
diff --git a/misk-admin-web-actions/src/web-actions/api/responseTypes.ts b/misk-admin-web-actions/src/web-actions/api/responseTypes.ts
@@ -10,10 +10,11 @@ export interface MiskWebActionDefinition {
   name: string;
   httpMethod?: string;
   packageName: string;
-  requestType: string;
+  requestType: string | null;
   pathPattern: string;
   types: MiskObjectTypes;
   requestMediaTypes: string[];
+  responseMediaType: string;
 }
 
 export interface MiskObjectType {
@@ -31,9 +32,13 @@ export interface ActionGroup {
   actionName: string;
   path: string;
   httpMethod: string;
-  callables: Record<string, MiskWebActionDefinition>;
-  getCallablesByMethod(): MiskWebActionDefinition[];
+  responseMediaTypes: string[];
+  requestMediaTypes: string[];
+  canCall: boolean;
+  callables: MiskWebActionDefinition[];
   all: MiskWebActionDefinition[];
+  types: MiskObjectTypes;
+  requestType: string | null;
 }
 
 export type MiskActions = Record<string, ActionGroup>;
diff --git a/misk-admin-web-actions/src/web-actions/completion/CompletionProvider.ts b/misk-admin-web-actions/src/web-actions/completion/CompletionProvider.ts
@@ -1,4 +1,5 @@
 import {
+  ActionGroup,
   MiskFieldDefinition,
   MiskWebActionDefinition,
 } from '@web-actions/api/responseTypes';
@@ -23,7 +24,7 @@ interface CompletionArgs {
 }
 
 export default class CompletionProvider {
-  private selection: MiskWebActionDefinition | null = null;
+  private selection: ActionGroup | null = null;
 
   private deleteTrailing(editor: Editor, curr: Position, values: string) {
     for (const c of values) {
@@ -177,7 +178,9 @@ export default class CompletionProvider {
 
   async getCompletions(args: CompletionArgs): Promise<Completion[]> {
     const topLevel = parseDocument(args.text, args.cursor.index);
-    topLevel.applyTypes(this.selection);
+    const callables = this.selection?.callables ?? [];
+
+    topLevel.applyTypes(callables[0] ?? null);
 
     const cursorNode = topLevel.findCursor();
 
@@ -211,7 +214,7 @@ export default class CompletionProvider {
     return [];
   }
 
-  setSelection(selection: MiskWebActionDefinition | null) {
+  setSelection(selection: ActionGroup | null) {
     this.selection = selection;
   }
 }
diff --git a/misk-admin-web-actions/src/web-actions/completion/__test__/CompletionTester.ts b/misk-admin-web-actions/src/web-actions/completion/__test__/CompletionTester.ts
@@ -1,8 +1,14 @@
 import FakeEditor from '@web-actions/completion/__test__/FakeEditor';
-import { MyAction } from '@web-actions/completion/__test__/FakeMetadataClient';
+import {
+  MyAction,
+  MyActionGroup,
+} from '@web-actions/completion/__test__/FakeMetadataClient';
 import Completion from '@web-actions/completion/Completion';
 import { providerWithAction } from '@web-actions/completion/__test__/completion.spec';
-import { MiskWebActionDefinition } from '@web-actions/api/responseTypes';
+import {
+  ActionGroup,
+  MiskWebActionDefinition,
+} from '@web-actions/api/responseTypes';
 
 class CompletionTester {
   private editor: FakeEditor;
@@ -48,10 +54,10 @@ class CompletionTester {
 
 export function givenEditor(
   text: string,
-  action?: MiskWebActionDefinition,
+  action?: ActionGroup,
 ): CompletionTester {
   const editor = new FakeEditor();
-  editor.completions = providerWithAction(action || MyAction);
+  editor.completions = providerWithAction(action || MyActionGroup);
   editor.setTextWithCursor(text);
   return new CompletionTester(editor);
 }
diff --git a/misk-admin-web-actions/src/web-actions/completion/__test__/FakeMetadataClient.ts b/misk-admin-web-actions/src/web-actions/completion/__test__/FakeMetadataClient.ts
@@ -1,11 +1,15 @@
-import { MiskWebActionDefinition } from '@web-actions/api/responseTypes';
+import {
+  ActionGroup,
+  MiskWebActionDefinition,
+} from '@web-actions/api/responseTypes';
 
 export const MyAction: MiskWebActionDefinition = {
   name: 'MyAction',
   packageName: 'xyz.block',
   requestType: 'MyActionRequest',
   pathPattern: '/api/v1/my-action',
   requestMediaTypes: ['application/x-protobuf'],
+  responseMediaType: 'application/json',
   types: {
     MyActionRequest: {
       fields: [
@@ -37,3 +41,16 @@ export const MyAction: MiskWebActionDefinition = {
     },
   },
 };
+
+export const MyActionGroup: ActionGroup = {
+  actionName: MyAction.name,
+  path: MyAction.pathPattern,
+  httpMethod: MyAction.httpMethod || '',
+  responseMediaTypes: [MyAction.responseMediaType],
+  requestMediaTypes: MyAction.requestMediaTypes,
+  canCall: true,
+  callables: [MyAction],
+  all: [MyAction],
+  types: MyAction.types,
+  requestType: MyAction.requestType,
+};
diff --git a/misk-admin-web-actions/src/web-actions/completion/__test__/completion.spec.ts b/misk-admin-web-actions/src/web-actions/completion/__test__/completion.spec.ts
@@ -1,20 +1,18 @@
 import CompletionProvider from '@web-actions/completion/CompletionProvider';
 import FakeEditor from '@web-actions/completion/__test__/FakeEditor';
-import { MyAction } from '@web-actions/completion/__test__/FakeMetadataClient';
+import { MyActionGroup } from '@web-actions/completion/__test__/FakeMetadataClient';
 import { givenEditor } from '@web-actions/completion/__test__/CompletionTester';
-import { MiskWebActionDefinition } from '@web-actions/api/responseTypes';
+import { ActionGroup } from '@web-actions/api/responseTypes';
 
-export function providerWithAction(
-  action: MiskWebActionDefinition,
-): CompletionProvider {
+export function providerWithAction(action: ActionGroup): CompletionProvider {
   const p = new CompletionProvider();
   p.setSelection(action);
   return p;
 }
 
 test('completion from object body', async () => {
   const editor = new FakeEditor();
-  editor.completions = providerWithAction(MyAction);
+  editor.completions = providerWithAction(MyActionGroup);
 
   editor.setTextWithCursor(`
     {
@@ -30,7 +28,7 @@ test('completion from object body', async () => {
 
 test('completion from object body within field name', async () => {
   const editor = new FakeEditor();
-  editor.completions = providerWithAction(MyAction);
+  editor.completions = providerWithAction(MyActionGroup);
   editor.setTextWithCursor(`
     {
       "|"
@@ -45,7 +43,7 @@ test('completion from object body within field name', async () => {
 
 test('completion from object body within field value', async () => {
   const editor = new FakeEditor();
-  editor.completions = providerWithAction(MyAction);
+  editor.completions = providerWithAction(MyActionGroup);
   editor.setTextWithCursor(`
     {
       "text": |
@@ -60,7 +58,7 @@ test('completion from object body within field value', async () => {
 
 test('completion from literal in quotes', async () => {
   const editor = new FakeEditor();
-  editor.completions = providerWithAction(MyAction);
+  editor.completions = providerWithAction(MyActionGroup);
   editor.setTextWithCursor(`
     {
       "text": "|",
@@ -75,13 +73,6 @@ test('completion from literal in quotes', async () => {
 
 test('completion from enum', async () => {
   const startingWith = [
-    // `
-    // {
-    //   "enum": "|",
-    // }`, `
-    // {
-    //   "enum": |,
-    // }`,
     `
     {
       "enum": |
diff --git a/misk-admin-web-actions/src/web-actions/hooks/useSubmitRequest.ts b/misk-admin-web-actions/src/web-actions/hooks/useSubmitRequest.ts
@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import { MiskWebActionDefinition } from '@web-actions/api/responseTypes';
+import { ActionGroup } from '@web-actions/api/responseTypes';
 import { ApiService, Header } from '@web-actions/services/ApiService';
 
 export interface SubmitRequestState {
@@ -9,7 +9,7 @@ export interface SubmitRequestState {
 }
 
 export function useSubmitRequest(
-  selectedCallable: MiskWebActionDefinition | null,
+  selectedCallable: ActionGroup | null,
   path: string,
   headers: Header[],
   getRequestBody: () => string,
diff --git a/misk-admin-web-actions/src/web-actions/parsing/ast/TopLevel.ts b/misk-admin-web-actions/src/web-actions/parsing/ast/TopLevel.ts
@@ -1,6 +1,9 @@
 import AstNode from '@web-actions/parsing/ast/AstNode';
 import Unexpected from '@web-actions/parsing/ast/Unexpected';
-import { MiskWebActionDefinition } from '@web-actions/api/responseTypes';
+import {
+  ActionGroup,
+  MiskWebActionDefinition,
+} from '@web-actions/api/responseTypes';
 import Obj from '@web-actions/parsing/ast/Obj';
 import MiskType from '@web-actions/api/MiskType';
 
@@ -33,9 +36,9 @@ export default class TopLevel extends AstNode {
     );
   }
 
-  applyTypes(actionDefinition: MiskWebActionDefinition | null) {
+  applyTypes(actionDefinition: ActionGroup | null) {
     if (this.obj) {
-      if (actionDefinition) {
+      if (actionDefinition && actionDefinition.requestType) {
         const type = actionDefinition.types[actionDefinition.requestType];
         if (type) {
           this.obj.applyTypes(
diff --git a/misk-admin-web-actions/src/web-actions/services/ApiService.ts b/misk-admin-web-actions/src/web-actions/services/ApiService.ts
diff --git a/misk-admin-web-actions/src/web-actions/ui/ContextAwareCompleter.tsx b/misk-admin-web-actions/src/web-actions/ui/ContextAwareCompleter.tsx
diff --git a/misk-admin-web-actions/src/web-actions/ui/RequestEditor.tsx b/misk-admin-web-actions/src/web-actions/ui/RequestEditor.tsx
diff --git a/misk-admin-web-actions/webpack.config.js b/misk-admin-web-actions/webpack.config.js
