feat(webui): Trigger submit action when pressing Enter on Monaco single line editor. (#1459)

Author: davemarco

components/webui/client/src/components/SqlInput/index.tsx

@@ -1,6 +1,8 @@
 // Reference: https://github.com/vikyd/vue-monaco-singleline
 import {useCallback} from "react";
 
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
+
 import SqlEditor, {
     SqlEditorProps,
     SqlEditorType,
@@ -26,6 +28,18 @@ const SqlInput = (props: SqlEditorProps) => {
                 });
             }
         });
+
+        // Add action to simulate form submission on Enter key
+        editor.addAction({
+            id: "run-query",
+            label: "Run Query",
+            keybindings: [monaco.KeyCode.Enter],
+            run: () => {
+                const formEl = editor.getDomNode()?.closest("form");
+                const submitBtn = formEl?.querySelector<HTMLButtonElement>('button[type="submit"]');
+                submitBtn?.click();
+            },
+        });
     }, []);
 
     return (

components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/CancelButton/index.tsx

@@ -45,6 +45,7 @@ const CancelButton = () => {
             <Button
                 className={styles["cancelButton"] || ""}
                 color={"red"}
+                htmlType={"button"}
                 icon={<CloseOutlined/>}
                 size={"middle"}
                 variant={"solid"}

components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/RunButton/GuidedRunButton.tsx

@@ -89,6 +89,7 @@ const GuidedRunButton = () => {
             <Button
                 className={styles["runButton"] || ""}
                 color={"green"}
+                htmlType={"submit"}
                 icon={<CaretRightOutlined/>}
                 size={"middle"}
                 variant={"solid"}