From 091f75e2ed0231dd09f746ebb54554a82e2eeae2 Mon Sep 17 00:00:00 2001
From: Bradley Dwyer <bradleydwyer@tbd.email>
Date: Tue, 10 Dec 2024 06:38:56 +1000
Subject: [PATCH] =?UTF-8?q?feat:=20add=20=E2=8C=A5+=E2=8F=8E=20as=20a=20sh?=
 =?UTF-8?q?ortcut=20for=20the=20verb=20form=20(#3546)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Wes <wesbillman@users.noreply.github.com>
---
 frontend/console/e2e/cron.spec.ts             | 15 +++++++++++-
 .../modules/decls/verb/VerbFormInput.tsx      | 24 +++++++++++++++++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/frontend/console/e2e/cron.spec.ts b/frontend/console/e2e/cron.spec.ts
index d408f11ed1..1b7643cba9 100644
--- a/frontend/console/e2e/cron.spec.ts
+++ b/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({})
+})
diff --git a/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx b/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx
index 1432816467..2643c4810d 100644
--- a/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx
+++ b/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'>