Support callable GET & PUT misk actions

Adam Erb · svc-squareup-copybara · commit f35741ff3fd5 · 2025-02-24T12:26:34.000Z
GitOrigin-RevId: 7a11efdc1d8d0e1974f12d527b26a918c604e9ff
diff --git a/misk-admin/web-actions/src/index.tsx b/misk-admin/web-actions/src/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 
 import { createRoot } from 'react-dom/client';
 import RequestEditor from '@web-actions/ui/RequestEditor';
@@ -9,6 +9,8 @@ import {
   Spinner,
   VStack,
   Heading,
+  Input,
+  IconButton,
 } from '@chakra-ui/react';
 import ReadOnlyEditor from '@web-actions/ui/ReadOnlyViewer';
 import 'ace-builds';
@@ -19,21 +21,39 @@ import EndpointSelector, {
 import { ViewState } from 'src/viewState';
 import { fetchCached } from '@web-actions/network/http';
 import { MiskMetadataResponse } from '@web-actions/api/responseTypes';
+import { Select } from '@chakra-ui/react';
+import { createIcon } from '@chakra-ui/icons';
 
 const endpointSelectionCallbacks: EndpointSelectionCallbacks = [];
 
 function App() {
   const [viewState, setViewState] = useState<ViewState>({
+    path: '',
     selectedAction: null,
     response: null,
+    callables: [],
   });
   const [loading, setLoading] = useState<boolean>(true);
   const endPointSelectorRef = useRef<EndpointSelector>();
   const requestEditorRef = useRef<RequestEditor>();
 
   useEffect(() => {
     endpointSelectionCallbacks.push((selectedAction) => {
-      setViewState((curr) => ({ ...curr, selectedAction }));
+      const callables = selectedAction.getCallablesByMethod();
+      const defaultCallable = callables[0];
+
+      requestEditorRef.current?.setEndpointSelection(defaultCallable);
+
+      setViewState((curr) => ({
+        ...curr,
+        selectedAction: selectedAction,
+        path:
+          defaultCallable?.pathPattern ||
+          selectedAction.all[0]?.pathPattern ||
+          '',
+        selectedCallable: defaultCallable,
+        callables: callables,
+      }));
     });
   }, []);
 
@@ -43,6 +63,8 @@ function App() {
       if (isShortcutKey && event.key === 'k') {
         event.preventDefault();
         endPointSelectorRef.current?.focusSelect();
+      } else if (isShortcutKey && event.key === 'Enter') {
+        requestEditorRef.current?.submitRequest();
       }
     };
     document.addEventListener('keydown', handleKeyPress);
@@ -54,7 +76,11 @@ function App() {
   fetchCached<MiskMetadataResponse>(`/api/web-actions/metadata`).finally(() => {
     setLoading(false);
   });
-
+  const ActionIcon = createIcon({
+    displayName: 'ActionIcon',
+    viewBox: '0 0 24 24',
+    path: <polygon points="5 3 19 12 5 21 5 3" fill="currentColor" />,
+  });
   return (
     <Box>
       {loading && (
@@ -92,6 +118,60 @@ function App() {
             <Heading color="white" size="sm" fontWeight="semibold">
               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"
+                bg="white"
+                onChange={(e) => {
+                  requestEditorRef.current?.setPath(e.target.value);
+                  setViewState({
+                    ...viewState,
+                    path: e.target.value,
+                  });
+                }}
+              />
+              {viewState.selectedCallable && (
+                <IconButton
+                  aria-label="Run"
+                  colorScheme={'green'}
+                  onClick={() => {}}
+                >
+                  <ActionIcon />
+                </IconButton>
+              )}
+            </HStack>
+            <Heading color="white" size="xs" fontWeight="semibold">
+              Body
+            </Heading>
             <RequestEditor
               ref={requestEditorRef as any}
               endpointSelectionCallbacks={endpointSelectionCallbacks}
@@ -106,7 +186,7 @@ function App() {
           </VStack>
           <VStack height="100%" flexGrow={1} alignItems="start">
             <Heading color="white" size="sm" fontWeight="semibold">
-              Endpoint Details
+              Endpoint Metadata
             </Heading>
             <ReadOnlyEditor
               content={() => {
diff --git a/misk-admin/web-actions/src/viewState.tsx b/misk-admin/web-actions/src/viewState.tsx
@@ -1,6 +1,12 @@
-import { ActionGroup } from '@web-actions/api/responseTypes';
+import {
+  ActionGroup,
+  MiskWebActionDefinition,
+} from '@web-actions/api/responseTypes';
 
 export interface ViewState {
+  callables: MiskWebActionDefinition[];
+  selectedCallable?: MiskWebActionDefinition;
+  path: string;
   selectedAction: ActionGroup | null;
   response: string | null;
 }
diff --git a/misk-admin/web-actions/src/web-actions/api/RealMetadataClient.ts b/misk-admin/web-actions/src/web-actions/api/RealMetadataClient.ts
@@ -2,31 +2,58 @@ import {
   ActionGroup,
   MiskActions,
   MiskMetadataResponse,
+  MiskWebActionDefinition,
 } from '@web-actions/api/responseTypes';
 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'));
+}
+
 export default class RealMetadataClient implements MetadataClient {
   async fetchMetadata(): Promise<MiskActions> {
     const response = await fetchCached<MiskMetadataResponse>(
       `/api/web-actions/metadata`,
     );
     const actionMap: Record<string, ActionGroup> = {};
     response.all['web-actions'].metadata.forEach((it) => {
-      let group = actionMap[it.name];
+      const qualifiedName = it.packageName + '.' + it.name;
+
+      let group = actionMap[qualifiedName];
       if (group === undefined) {
-        group = { name: it.name, all: [] };
-        actionMap[it.name] = group;
+        group = {
+          name: qualifiedName,
+          callables: {},
+          getCallablesByMethod(): MiskWebActionDefinition[] {
+            return [
+              this.callables['POST'],
+              this.callables['PUT'],
+              this.callables['GET'],
+            ].filter((it) => it !== undefined);
+          },
+          all: [],
+        };
+        actionMap[qualifiedName] = group;
       }
 
-      if (
-        it.requestMediaTypes.some((mediaType) =>
-          mediaType.startsWith('application/json'),
-        )
+      function maybeAddCallable(
+        method: string,
+        predicate: (it: MiskWebActionDefinition) => boolean = () => true,
       ) {
-        group.defaultCallable = it;
+        if (
+          it.httpMethod === method &&
+          group.callables[method] === undefined &&
+          predicate(it)
+        ) {
+          group.callables[method] = it;
+        }
       }
 
+      maybeAddCallable('POST', (it) => containsJson(it.requestMediaTypes));
+      maybeAddCallable('PUT', (it) => containsJson(it.requestMediaTypes));
+      maybeAddCallable('GET');
+
       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
@@ -8,6 +8,8 @@ export interface MiskMetadataResponse {
 
 export interface MiskWebActionDefinition {
   name: string;
+  httpMethod?: string;
+  packageName: string;
   requestType: string;
   pathPattern: string;
   types: MiskObjectTypes;
@@ -27,7 +29,8 @@ export interface MiskFieldDefinition {
 
 export interface ActionGroup {
   name: string;
-  defaultCallable?: MiskWebActionDefinition;
+  callables: Record<string, MiskWebActionDefinition>;
+  getCallablesByMethod(): MiskWebActionDefinition[];
   all: MiskWebActionDefinition[];
 }
 
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,8 +1,8 @@
-import MetadataClient from '@web-actions/api/MetadataClient';
-import { MiskActions } from '@web-actions/api/responseTypes';
+import { MiskWebActionDefinition } from '@web-actions/api/responseTypes';
 
-export const MyAction = {
+export const MyAction: MiskWebActionDefinition = {
   name: 'MyAction',
+  packageName: 'xyz.block',
   requestType: 'MyActionRequest',
   pathPattern: '/api/v1/my-action',
   requestMediaTypes: ['application/x-protobuf'],
@@ -34,21 +34,6 @@ export const MyAction = {
           annotations: [],
         },
       ],
-      'my-object-type': {
-        fields: [],
-      },
     },
   },
 };
-
-export default class FakeMetadataClient implements MetadataClient {
-  async fetchMetadata(): Promise<MiskActions> {
-    return Promise.resolve({
-      MyAction: {
-        name: 'MyAction',
-        defaultCallable: MyAction,
-        all: [MyAction],
-      },
-    });
-  }
-}
diff --git a/misk-admin/web-actions/src/web-actions/ui/EndpointSelection.tsx b/misk-admin/web-actions/src/web-actions/ui/EndpointSelection.tsx
@@ -41,13 +41,14 @@ export default class EndpointSelection extends React.Component<Props, State> {
 
   componentDidMount() {
     this.metadataClient.fetchMetadata().then((actions: MiskActions) => {
-      const options = Object.entries(actions).map(([key, value]) => ({
-        value,
-        label: key,
-      }));
+      const options = Object.entries(actions)
+        .map(([key, value]) => ({
+          value: value,
+          label: key,
+        }))
+        .sort((a, b) => a.value.name.localeCompare(b.value.name));
       this.fuse = new Fuse(options, {
         keys: ['label'],
-        threshold: 0.3,
         useExtendedSearch: true,
       });
       this.setState({
diff --git a/misk-admin/web-actions/src/web-actions/ui/RequestEditor.tsx b/misk-admin/web-actions/src/web-actions/ui/RequestEditor.tsx
