Add raw SQL chart run shortcut (#2458)

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Aaron Knudtson <knudtty@users.noreply.github.com>

Author: knudtty

.changeset/raw-sql-chart-shortcut.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+Add Cmd/Ctrl+Enter support for running raw SQL chart queries from the SQL editor.

packages/app/src/components/ChartEditor/RawSqlChartEditor.tsx

@@ -262,6 +262,7 @@ export default function RawSqlChartEditor({
           placeholder={placeholderSQl}
           tableConnections={tableConnections}
           additionalCompletions={additionalCompletions}
+          onSubmit={onSubmit}
         />
         <div className={resizeStyles.resizeYHandle} onMouseDown={startResize} />
       </Box>

packages/app/src/components/SQLEditor/SQLEditor.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useController, UseControllerProps } from 'react-hook-form';
 import { acceptCompletion } from '@codemirror/autocomplete';
 import { TableConnection } from '@hyperdx/common-utils/dist/core/metadata';
@@ -7,6 +7,7 @@ import CodeMirror, {
   Compartment,
   EditorView,
   keymap,
+  Prec,
   ReactCodeMirrorRef,
 } from '@uiw/react-codemirror';
 
@@ -30,8 +31,17 @@ type SQLEditorProps = {
   additionalCompletions?: SQLCompletion[];
   dateRange?: [Date, Date];
   timestampValueExpression?: string;
+  onSubmit?: () => void;
 };
 
+export const createRunQueryKeyBinding = (onSubmit: () => void) => ({
+  key: 'Mod-Enter',
+  run: () => {
+    onSubmit();
+    return true;
+  },
+});
+
 export default function SQLEditor({
   onChange,
   placeholder,
@@ -42,11 +52,20 @@ export default function SQLEditor({
   additionalCompletions,
   dateRange,
   timestampValueExpression,
+  onSubmit,
 }: SQLEditorProps) {
   const { colorScheme } = useMantineColorScheme();
   const ref = useRef<ReactCodeMirrorRef>(null);
   const compartmentRef = useRef<Compartment>(new Compartment());
 
+  const runQueryKeymap = useMemo(
+    () =>
+      onSubmit == null
+        ? []
+        : [Prec.highest(keymap.of([createRunQueryKeyBinding(onSubmit)]))],
+    [onSubmit],
+  );
+
   const { data: fields } = useMultipleAllFields(tableConnections ?? [], {
     dateRange,
     timestampValueExpression,
@@ -111,6 +130,7 @@ export default function SQLEditor({
               upperCaseKeywords: true,
             }),
           ),
+          ...runQueryKeymap,
           keymap.of([
             {
               key: 'Tab',

packages/app/src/components/SQLEditor/__tests__/SQLEditor.test.tsx

@@ -0,0 +1,16 @@
+import { createRunQueryKeyBinding } from '../SQLEditor';
+
+jest.mock('@/hooks/useMetadata', () => ({
+  useMultipleAllFields: jest.fn().mockReturnValue({ data: [] }),
+}));
+
+describe('SQLEditor', () => {
+  it('creates a Cmd/Ctrl+Enter key binding that submits the query', () => {
+    const onSubmit = jest.fn();
+    const binding = createRunQueryKeyBinding(onSubmit);
+
+    expect(binding.key).toBe('Mod-Enter');
+    expect(binding.run()).toBe(true);
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+});