1) Add help dialog. 2) Trigger auto-completion dropdown whenever

completions available

GitOrigin-RevId: 6cc63410235eec1d8bc40c00f4a84b1a1a131b88

Author: Adam Erb

misk-admin/web-actions/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, useCallback } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 
 import { createRoot } from 'react-dom/client';
 import RequestEditor from '@web-actions/ui/RequestEditor';
@@ -11,7 +11,9 @@ import {
   Heading,
   Input,
   IconButton,
+  Button,
 } from '@chakra-ui/react';
+import HelpPanel from '@web-actions/ui/HelpPanel';
 import ReadOnlyEditor from '@web-actions/ui/ReadOnlyViewer';
 import 'ace-builds';
 import 'ace-builds/webpack-resolver';
@@ -34,6 +36,7 @@ function App() {
     callables: [],
   });
   const [loading, setLoading] = useState<boolean>(true);
+  const [isHelpOpen, setIsHelpOpen] = useState<boolean>(false);
   const endPointSelectorRef = useRef<EndpointSelector>();
   const requestEditorRef = useRef<RequestEditor>();
 
@@ -60,16 +63,26 @@ function App() {
   useEffect(() => {
     const handleKeyPress = (event: KeyboardEvent) => {
       const isShortcutKey = event.ctrlKey || event.metaKey;
+
+      if (isShortcutKey && event.key === '/') {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsHelpOpen((prev) => !prev);
+        return;
+      }
+
       if (isShortcutKey && event.key === 'k') {
         event.preventDefault();
         endPointSelectorRef.current?.focusSelect();
       } else if (isShortcutKey && event.key === 'Enter') {
         requestEditorRef.current?.submitRequest();
       }
     };
-    document.addEventListener('keydown', handleKeyPress);
+
+    document.addEventListener('keydown', handleKeyPress, true);
+
     return () => {
-      document.removeEventListener('keydown', handleKeyPress);
+      document.removeEventListener('keydown', handleKeyPress, true);
     };
   }, []);
 
@@ -106,13 +119,23 @@ function App() {
         bg="gray.600"
         alignItems="start"
       >
-        <EndpointSelector
-          ref={endPointSelectorRef as any}
-          onDismiss={() => {
-            requestEditorRef?.current?.focusEditor();
-          }}
-          endpointSelectionCallbacks={endpointSelectionCallbacks}
-        />
+        <HStack width="100%" justifyContent="space-between">
+          <EndpointSelector
+            ref={endPointSelectorRef as any}
+            onDismiss={() => {
+              requestEditorRef?.current?.focusEditor();
+            }}
+            endpointSelectionCallbacks={endpointSelectionCallbacks}
+          />
+          <Button
+            colorScheme="blue"
+            size="sm"
+            onClick={() => setIsHelpOpen(true)}
+          >
+            Help (⌘/)
+          </Button>
+        </HStack>
+        <HelpPanel isOpen={isHelpOpen} onClose={() => setIsHelpOpen(false)} />
         <HStack spacing={2} flexGrow={1} width="100%">
           <VStack height="100%" flexGrow={1} alignItems="start">
             <Heading color="white" size="sm" fontWeight="semibold">

misk-admin/web-actions/src/web-actions/completion/CompletionProvider.ts

@@ -77,6 +77,9 @@ export default class CompletionProvider {
             currIndex - completion.cursorOffset - 1,
           );
           editor.moveCursorTo(moveCursorTo.row, moveCursorTo.column);
+          if (type.isObject()) {
+            editor.triggerCompletionDialog();
+          }
         },
         prefix,
       };

misk-admin/web-actions/src/web-actions/completion/Editor.ts

@@ -6,4 +6,5 @@ export default interface Editor {
   delete(row: number, column: number): void;
   indexToPosition(index: number): Position;
   positionToIndex(position: Position): number;
+  triggerCompletionDialog(): void;
 }

misk-admin/web-actions/src/web-actions/completion/__test__/FakeEditor.ts

@@ -22,6 +22,8 @@ export default class FakeEditor implements Editor {
   cursor: PositionWithIndex = { row: 0, column: 0, index: 0 };
   completions?: CompletionProvider;
 
+  triggerCompletionDialog() {}
+
   moveCursorTo(row: number, column: number) {
     let index = 0;
     for (let i = 0; i < row; i++) {

misk-admin/web-actions/src/web-actions/ui/AceEditor.ts

@@ -2,8 +2,17 @@ import Editor from '@web-actions/completion/Editor';
 import { Ace, Range } from 'ace-builds';
 import Position from '@web-actions/completion/Position';
 
+export function triggerCompletionDialog(editor: Ace.Editor | null | undefined) {
+  if (!editor) {
+    return;
+  }
+  setTimeout(() => {
+    editor.commands?.byName?.startAutocomplete?.exec(editor);
+  }, 100);
+}
+
 export default class AceEditor implements Editor {
-  private editor: Ace.Editor;
+  private readonly editor: Ace.Editor;
 
   constructor(editor: Ace.Editor) {
     this.editor = editor;
@@ -28,6 +37,10 @@ export default class AceEditor implements Editor {
   delete(row: number, column: number): void {
     this.editor.session.remove(charRange(row, column));
   }
+
+  triggerCompletionDialog() {
+    triggerCompletionDialog(this.editor);
+  }
 }
 
 function charRange(row: number, column: number): Ace.Range {

misk-admin/web-actions/src/web-actions/ui/HelpPanel.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  Heading,
+  Text,
+  UnorderedList,
+  OrderedList,
+  ListItem,
+  Code,
+  VStack,
+  useColorModeValue,
+} from '@chakra-ui/react';
+
+interface HelpPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function HelpPanel({
+  isOpen,
+  onClose,
+}: HelpPanelProps): JSX.Element {
+  const bgColor = useColorModeValue('white', 'gray.800');
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="xl" scrollBehavior="inside">
+      <ModalOverlay backdropFilter="blur(2px)" />
+      <ModalContent bg={bgColor} maxW="600px">
+        <ModalHeader>Web Actions Help</ModalHeader>
+        <ModalCloseButton />
+
+        <ModalBody pb={6}>
+          <VStack align="stretch" spacing={6}>
+            <section>
+              <Heading as="h3" size="md" mb={2}>
+                Overview
+              </Heading>
+              <Text>
+                Web Actions allows you edit and submit requests to Misk Action
+                endpoints.
+              </Text>
+            </section>
+
+            <section>
+              <Heading as="h3" size="md" mb={2}>
+                Usage
+              </Heading>
+              <OrderedList spacing={1} pl={4}>
+                <ListItem>Trigger the action selector with ⌘K</ListItem>
+                <ListItem>Type to filter options, and select with ⏎</ListItem>
+                <ListItem>
+                  Use the Request Editor to modify request. ⌃Space triggers
+                  auto-completions.
+                </ListItem>
+                <ListItem>Submit request with ⌘⏎</ListItem>
+                <ListItem>Repeat</ListItem>
+              </OrderedList>
+            </section>
+
+            <section>
+              <Heading as="h3" size="md" mb={2}>
+                Keyboard Shortcuts
+              </Heading>
+              <UnorderedList spacing={1} pl={4}>
+                <ListItem>⌘K - Open web action selector</ListItem>
+                <ListItem>⌘⏎ - Submit request</ListItem>
+                <ListItem>
+                  ⌃Space - Trigger auto-completion in request editor
+                </ListItem>
+                <ListItem>⌘/ - Toggle help panel</ListItem>
+                <ListItem>
+                  Esc - Dismiss action selector / completion dialogs
+                </ListItem>
+              </UnorderedList>
+            </section>
+          </VStack>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}

misk-admin/web-actions/src/web-actions/ui/RequestEditor.tsx

@@ -8,6 +8,7 @@ import { CopyIcon } from '@chakra-ui/icons';
 import { CommandParser } from '@web-actions/parsing/CommandParser';
 import { MiskWebActionDefinition } from '@web-actions/api/responseTypes';
 import { EndpointSelectionCallbacks } from '@web-actions/ui/EndpointSelection';
+import { triggerCompletionDialog } from '@web-actions/ui/AceEditor';
 
 interface State {
   loading: boolean;
@@ -81,6 +82,8 @@ export default class RequestEditor extends React.Component<Props, State> {
       this.editor?.setValue('{\n  \n}', -1);
       this.editor?.moveCursorTo(1, 2);
       this.editor?.focus();
+
+      triggerCompletionDialog(this.editor);
     }
   }