From 41dba29ee4755a6971359316588c910dc8863203 Mon Sep 17 00:00:00 2001
From: Bradley Dwyer <bradleydwyer@tbd.email>
Date: Wed, 27 Nov 2024 13:50:07 +1000
Subject: [PATCH 1/8] =?UTF-8?q?feat:=20add=20=E2=8C=A5+=E2=8F=8E=20as=20a?=
 =?UTF-8?q?=20shortcut=20for=20the=20verb=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/decls/verb/VerbFormInput.tsx      | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx b/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx
index 1432816467..fd5a2f48e7 100644
--- a/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx
+++ b/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx
@@ -1,5 +1,6 @@
 import { Copy01Icon } from 'hugeicons-react'
 import { Button } from '../../../../components/Button'
+import {useEffect, useRef} from "react";
 
 export const VerbFormInput = ({
   requestType,
@@ -18,13 +19,29 @@ 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)
   }
 
+  useEffect(() => {
+    const handleGlobalKeyDown = (event: KeyboardEvent) => {
+      if (event.altKey && event.key === 'Enter') {
+        event.preventDefault()
+        formRef.current?.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }))
+      }
+    }
+
+    document.addEventListener('keydown', handleGlobalKeyDown)
+    return () => {
+      document.removeEventListener('keydown', handleGlobalKeyDown)
+    }
+  }, [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 +55,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='Send (⌥+⏎)' className='mx-2'>
           Send
         </Button>
         <Button variant='secondary' size='md' type='button' title='Copy' onClick={handleCopyButton} className='mr-2'>

From 18a2896228148fe818970c66044945bb19f9a893 Mon Sep 17 00:00:00 2001
From: Bradley Dwyer <bradleydwyer@tbd.email>
Date: Wed, 27 Nov 2024 14:58:36 +1000
Subject: [PATCH 2/8] Fix linting errors.

---
 .../console/src/features/modules/decls/verb/VerbFormInput.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx b/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx
index fd5a2f48e7..948075beb9 100644
--- a/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx
+++ b/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx
@@ -1,6 +1,6 @@
 import { Copy01Icon } from 'hugeicons-react'
+import { useEffect, useRef } from 'react'
 import { Button } from '../../../../components/Button'
-import {useEffect, useRef} from "react";
 
 export const VerbFormInput = ({
   requestType,

From edb45345fbfc2f518639c5f899ad5d9572c51a69 Mon Sep 17 00:00:00 2001
From: Bradley Dwyer <bradleydwyer@tbd.email>
Date: Wed, 27 Nov 2024 15:50:38 +1000
Subject: [PATCH 3/8] Add tests for verb send keyboard shortcut

---
 frontend/console/e2e/cron.spec.ts | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/frontend/console/e2e/cron.spec.ts b/frontend/console/e2e/cron.spec.ts
index d408f11ed1..e34828b9dc 100644
--- a/frontend/console/e2e/cron.spec.ts
+++ b/frontend/console/e2e/cron.spec.ts
@@ -24,3 +24,34 @@ test('send cron request', async ({ page }) => {
 
   expect(responseJson).toEqual({})
 })
+
+test('submit cron form using ⌥+⏎ shortcut', async ({ page }) => {
+  await navigateToDecl(page, 'cron', 'thirtySeconds')
+
+  await page.locator('input#request-path').focus()
+
+  await page.keyboard.press('Alt+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({})
+})
+
+test('submit cron form using ⌥+⏎ shortcut without focusing first', async ({ page }) => {
+  await navigateToDecl(page, 'cron', 'thirtySeconds')
+
+  await page.keyboard.press('Alt+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({})
+})
+

From 334123a2617bc7dbfd3b230037b67fea5d622e33 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 27 Nov 2024 05:52:56 +0000
Subject: [PATCH 4/8] chore(autofmt): Automated formatting

---
 frontend/console/e2e/cron.spec.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/console/e2e/cron.spec.ts b/frontend/console/e2e/cron.spec.ts
index e34828b9dc..ff972de56e 100644
--- a/frontend/console/e2e/cron.spec.ts
+++ b/frontend/console/e2e/cron.spec.ts
@@ -54,4 +54,3 @@ test('submit cron form using ⌥+⏎ shortcut without focusing first', async ({
 
   expect(responseJson).toEqual({})
 })
-

From 9d93ffc70b957d49f6f4f3f5aca337aac7f65ffc Mon Sep 17 00:00:00 2001
From: Bradley Dwyer <bradleydwyer@tbd.email>
Date: Thu, 28 Nov 2024 09:56:13 +1000
Subject: [PATCH 5/8] Switch to Command/Control key.

---
 frontend/console/e2e/cron.spec.ts                | 12 ++++++++----
 .../modules/decls/verb/VerbFormInput.tsx         | 16 +++++++++-------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/frontend/console/e2e/cron.spec.ts b/frontend/console/e2e/cron.spec.ts
index ff972de56e..30fef4c8a4 100644
--- a/frontend/console/e2e/cron.spec.ts
+++ b/frontend/console/e2e/cron.spec.ts
@@ -25,12 +25,14 @@ test('send cron request', async ({ page }) => {
   expect(responseJson).toEqual({})
 })
 
-test('submit cron form using ⌥+⏎ shortcut', async ({ page }) => {
+test('submit cron form using ⌘+⏎ shortcut', async ({ page }) => {
   await navigateToDecl(page, 'cron', 'thirtySeconds')
 
   await page.locator('input#request-path').focus()
 
-  await page.keyboard.press('Alt+Enter')
+  const isMac = process.platform === 'darwin';
+  const commandKey = isMac ? 'Meta' : 'Control';
+  await page.keyboard.press(`${commandKey}+Enter`);
 
   const responseEditor = page.locator('#response-editor .cm-content[role="textbox"]')
   await expect(responseEditor).toBeVisible()
@@ -41,10 +43,12 @@ test('submit cron form using ⌥+⏎ shortcut', async ({ page }) => {
   expect(responseJson).toEqual({})
 })
 
-test('submit cron form using ⌥+⏎ shortcut without focusing first', async ({ page }) => {
+test('submit cron form using ⌘+⏎ shortcut without focusing first', async ({ page }) => {
   await navigateToDecl(page, 'cron', 'thirtySeconds')
 
-  await page.keyboard.press('Alt+Enter')
+  const isMac = process.platform === 'darwin';
+  const commandKey = isMac ? 'Meta' : 'Control';
+  await page.keyboard.press(`${commandKey}+Enter`);
 
   const responseEditor = page.locator('#response-editor .cm-content[role="textbox"]')
   await expect(responseEditor).toBeVisible()
diff --git a/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx b/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx
index 948075beb9..c69016c874 100644
--- a/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx
+++ b/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx
@@ -26,17 +26,19 @@ export const VerbFormInput = ({
     onSubmit(path)
   }
 
+  const shortcutText = `Send ${window.navigator.userAgent.includes('Mac') ? '⌘ + ⏎' : 'Ctrl + ⏎'}`
+
   useEffect(() => {
-    const handleGlobalKeyDown = (event: KeyboardEvent) => {
-      if (event.altKey && event.key === 'Enter') {
+    const handleKeydown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
         event.preventDefault()
-        formRef.current?.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }))
-      }
+        formRef.current?.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }))      }
     }
 
-    document.addEventListener('keydown', handleGlobalKeyDown)
+    document.addEventListener('keydown', handleKeydown)
+
     return () => {
-      document.removeEventListener('keydown', handleGlobalKeyDown)
+      document.removeEventListener('keydown', handleKeydown)
     }
   }, [path, readOnly, onSubmit])
 
@@ -55,7 +57,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'>

From b62db646179aeab177bf1f17edac0aee94ab93c1 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 27 Nov 2024 23:58:40 +0000
Subject: [PATCH 6/8] chore(autofmt): Automated formatting

---
 frontend/console/e2e/cron.spec.ts                    | 12 ++++++------
 .../features/modules/decls/verb/VerbFormInput.tsx    |  3 ++-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/console/e2e/cron.spec.ts b/frontend/console/e2e/cron.spec.ts
index 30fef4c8a4..13f88c8af4 100644
--- a/frontend/console/e2e/cron.spec.ts
+++ b/frontend/console/e2e/cron.spec.ts
@@ -30,9 +30,9 @@ test('submit cron form using ⌘+⏎ shortcut', async ({ page }) => {
 
   await page.locator('input#request-path').focus()
 
-  const isMac = process.platform === 'darwin';
-  const commandKey = isMac ? 'Meta' : 'Control';
-  await page.keyboard.press(`${commandKey}+Enter`);
+  const isMac = process.platform === 'darwin'
+  const commandKey = isMac ? 'Meta' : 'Control'
+  await page.keyboard.press(`${commandKey}+Enter`)
 
   const responseEditor = page.locator('#response-editor .cm-content[role="textbox"]')
   await expect(responseEditor).toBeVisible()
@@ -46,9 +46,9 @@ test('submit cron form using ⌘+⏎ shortcut', async ({ page }) => {
 test('submit cron form using ⌘+⏎ shortcut without focusing first', async ({ page }) => {
   await navigateToDecl(page, 'cron', 'thirtySeconds')
 
-  const isMac = process.platform === 'darwin';
-  const commandKey = isMac ? 'Meta' : 'Control';
-  await page.keyboard.press(`${commandKey}+Enter`);
+  const isMac = process.platform === 'darwin'
+  const commandKey = isMac ? 'Meta' : 'Control'
+  await page.keyboard.press(`${commandKey}+Enter`)
 
   const responseEditor = page.locator('#response-editor .cm-content[role="textbox"]')
   await expect(responseEditor).toBeVisible()
diff --git a/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx b/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx
index c69016c874..3c6164aca2 100644
--- a/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx
+++ b/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx
@@ -32,7 +32,8 @@ export const VerbFormInput = ({
     const handleKeydown = (event: KeyboardEvent) => {
       if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
         event.preventDefault()
-        formRef.current?.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }))      }
+        formRef.current?.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }))
+      }
     }
 
     document.addEventListener('keydown', handleKeydown)

From 97b2bedf55c24d348b128265cd19f3ef68155009 Mon Sep 17 00:00:00 2001
From: Bradley Dwyer <bradleydwyer@tbd.email>
Date: Thu, 28 Nov 2024 11:30:27 +1000
Subject: [PATCH 7/8] Workaround some flakyness in playwright key events

---
 frontend/console/e2e/cron.spec.ts             | 28 +++++++++++++++----
 .../modules/decls/verb/VerbFormInput.tsx      |  4 +--
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/frontend/console/e2e/cron.spec.ts b/frontend/console/e2e/cron.spec.ts
index 13f88c8af4..4b5bcac03c 100644
--- a/frontend/console/e2e/cron.spec.ts
+++ b/frontend/console/e2e/cron.spec.ts
@@ -30,9 +30,17 @@ test('submit cron form using ⌘+⏎ shortcut', async ({ page }) => {
 
   await page.locator('input#request-path').focus()
 
-  const isMac = process.platform === 'darwin'
-  const commandKey = isMac ? 'Meta' : 'Control'
-  await page.keyboard.press(`${commandKey}+Enter`)
+  // The keypress is sometimes flakey in playwright, so try 3 times. Ideally we'd find a better way to do this.
+  for (let attempt = 0; attempt < 3; attempt++) {
+    try {
+      await page.keyboard.press('ControlOrMeta+Enter')
+      const responseEditor = page.locator('#response-editor .cm-content[role="textbox"]')
+      await expect(responseEditor).toBeVisible()
+      break
+    } catch (error) {
+      if (attempt === 2) throw error
+    }
+  }
 
   const responseEditor = page.locator('#response-editor .cm-content[role="textbox"]')
   await expect(responseEditor).toBeVisible()
@@ -46,9 +54,17 @@ test('submit cron form using ⌘+⏎ shortcut', async ({ page }) => {
 test('submit cron form using ⌘+⏎ shortcut without focusing first', async ({ page }) => {
   await navigateToDecl(page, 'cron', 'thirtySeconds')
 
-  const isMac = process.platform === 'darwin'
-  const commandKey = isMac ? 'Meta' : 'Control'
-  await page.keyboard.press(`${commandKey}+Enter`)
+  // The keypress is sometimes flakey in playwright, so try 3 times. Ideally we'd find a better way to do this.
+  for (let attempt = 0; attempt < 3; attempt++) {
+    try {
+      await page.keyboard.press('ControlOrMeta+Enter')
+      const responseEditor = page.locator('#response-editor .cm-content[role="textbox"]')
+      await expect(responseEditor).toBeVisible()
+      break
+    } catch (error) {
+      if (attempt === 2) throw error
+    }
+  }
 
   const responseEditor = page.locator('#response-editor .cm-content[role="textbox"]')
   await expect(responseEditor).toBeVisible()
diff --git a/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx b/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx
index 3c6164aca2..2643c4810d 100644
--- a/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx
+++ b/frontend/console/src/features/modules/decls/verb/VerbFormInput.tsx
@@ -36,10 +36,10 @@ export const VerbFormInput = ({
       }
     }
 
-    document.addEventListener('keydown', handleKeydown)
+    window.addEventListener('keydown', handleKeydown)
 
     return () => {
-      document.removeEventListener('keydown', handleKeydown)
+      window.removeEventListener('keydown', handleKeydown)
     }
   }, [path, readOnly, onSubmit])
 

From df10a64a1d2fc8ebc1d79b081d6830f5f343918a Mon Sep 17 00:00:00 2001
From: Bradley Dwyer <bradleydwyer@tbd.email>
Date: Thu, 28 Nov 2024 11:42:31 +1000
Subject: [PATCH 8/8] thrown error not always caught by test harness

---
 frontend/console/e2e/cron.spec.ts | 25 +++++++++----------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/frontend/console/e2e/cron.spec.ts b/frontend/console/e2e/cron.spec.ts
index 4b5bcac03c..d86da68586 100644
--- a/frontend/console/e2e/cron.spec.ts
+++ b/frontend/console/e2e/cron.spec.ts
@@ -36,19 +36,16 @@ test('submit cron form using ⌘+⏎ shortcut', async ({ page }) => {
       await page.keyboard.press('ControlOrMeta+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({})
       break
     } catch (error) {
       if (attempt === 2) throw error
     }
   }
-
-  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({})
 })
 
 test('submit cron form using ⌘+⏎ shortcut without focusing first', async ({ page }) => {
@@ -60,17 +57,13 @@ test('submit cron form using ⌘+⏎ shortcut without focusing first', async ({
       await page.keyboard.press('ControlOrMeta+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({})
       break
     } catch (error) {
       if (attempt === 2) throw error
     }
   }
-
-  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({})
 })