feat: add ⌥+⏎ as a shortcut for the verb form (#3546)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Wes <[email protected]>

frontend/console/e2e/cron.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test'
-import { navigateToDecl } from './helpers'
+import { navigateToDecl, pressShortcut } from './helpers'
 
 test('shows cron verb form', async ({ page }) => {
   await navigateToDecl(page, 'cron', 'thirtySeconds')
@@ -24,3 +24,16 @@ test('send cron request', async ({ page }) => {
 
   expect(responseJson).toEqual({})
 })
+
+test('submit cron form using ⌘+⏎ shortcut', async ({ page }) => {
+  await navigateToDecl(page, 'cron', 'thirtySeconds')
+
+  await pressShortcut(page, 'Enter')
+
+  const responseEditor = page.locator('#response-editor .cm-content[role="textbox"]')
+  await expect(responseEditor).toBeVisible()
+
+  const responseText = await responseEditor.textContent()
+  const responseJson = JSON.parse(responseText?.trim() || '{}')
+  expect(responseJson).toEqual({})
+})

frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx

@@ -1,4 +1,5 @@
 import { Copy01Icon } from 'hugeicons-react'
+import { useEffect, useRef } from 'react'
 import { Button } from '../../../../components/Button'
 
 export const VerbFormInput = ({
@@ -18,13 +19,32 @@ export const VerbFormInput = ({
   onSubmit: (path: string) => void
   handleCopyButton?: () => void
 }) => {
+  const formRef = useRef<HTMLFormElement>(null)
+
   const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (event) => {
     event.preventDefault()
     onSubmit(path)
   }
 
+  const shortcutText = `Send ${window.navigator.userAgent.includes('Mac') ? '⌘ + ⏎' : 'Ctrl + ⏎'}`
+
+  useEffect(() => {
+    const handleKeydown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+        event.preventDefault()
+        formRef.current?.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }))
+      }
+    }
+
+    window.addEventListener('keydown', handleKeydown)
+
+    return () => {
+      window.removeEventListener('keydown', handleKeydown)
+    }
+  }, [path, readOnly, onSubmit])
+
   return (
-    <form onSubmit={handleSubmit} className='rounded-lg'>
+    <form ref={formRef} onSubmit={handleSubmit} className='rounded-lg'>
       <div className='flex rounded-md'>
         <span id='call-type' className='inline-flex items-center rounded-l-md border border-r-0 border-gray-300 dark:border-gray-500 px-3 ml-4 sm:text-sm'>
           {requestType}
@@ -38,7 +58,7 @@ export const VerbFormInput = ({
           readOnly={readOnly}
           onChange={(event) => setPath(event.target.value)}
         />
-        <Button variant='primary' size='md' type='submit' title='Send' className='mx-2'>
+        <Button variant='primary' size='md' type='submit' title={shortcutText} className='mx-2'>
           Send
         </Button>
         <Button variant='secondary' size='md' type='button' title='Copy' onClick={handleCopyButton} className='mr-2'>