fix: Multiline support for WHERE Input boxes (#1208)

Co-authored-by: Brandon Pereira <brandon-pereira@users.noreply.github.com>

Author: teeohhem

.changeset/twenty-squids-argue.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+fix: Multiline support for WHERE Input boxes

packages/app/src/AutocompleteInput.tsx

@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import Fuse from 'fuse.js';
 import { OverlayTrigger } from 'react-bootstrap';
-import { TextInput, UnstyledButton } from '@mantine/core';
+import { Textarea, UnstyledButton } from '@mantine/core';
 
 import { useQueryHistory } from '@/utils';
 
@@ -27,7 +27,7 @@ export default function AutocompleteInput({
   queryHistoryType,
   'data-testid': dataTestId,
 }: {
-  inputRef: React.RefObject<HTMLInputElement>;
+  inputRef: React.RefObject<HTMLTextAreaElement>;
   value?: string;
   onChange: (value: string) => void;
   onSubmit?: () => void;
@@ -236,14 +236,19 @@ export default function AutocompleteInput({
       }}
       trigger={[]}
     >
-      <TextInput
+      <Textarea
         ref={inputRef}
-        type="text"
-        style={{ flexGrow: 1 }}
         placeholder={placeholder}
-        className="border-0 fs-8"
+        className="fs-8"
         value={value}
         size={size}
+        autosize
+        minRows={1}
+        maxRows={4}
+        style={{
+          flexGrow: 1,
+          resize: 'none',
+        }}
         data-testid={dataTestId}
         onChange={e => onChange(e.target.value)}
         onFocus={() => {
@@ -257,12 +262,12 @@ export default function AutocompleteInput({
           setIsSearchInputFocused(false);
         }}
         onKeyDown={e => {
-          if (e.key === 'Escape' && e.target instanceof HTMLInputElement) {
+          if (e.key === 'Escape' && e.target instanceof HTMLTextAreaElement) {
             e.target.blur();
           }
 
           // Autocomplete Navigation/Acceptance Keys
-          if (e.key === 'Tab' && e.target instanceof HTMLInputElement) {
+          if (e.key === 'Tab' && e.target instanceof HTMLTextAreaElement) {
             if (
               suggestedProperties.length > 0 &&
               selectedAutocompleteIndex < suggestedProperties.length &&
@@ -274,23 +279,31 @@ export default function AutocompleteInput({
               );
             }
           }
-          if (e.key === 'Enter' && e.target instanceof HTMLInputElement) {
+          if (e.key === 'Enter' && e.target instanceof HTMLTextAreaElement) {
             if (
               suggestedProperties.length > 0 &&
               selectedAutocompleteIndex < suggestedProperties.length &&
               selectedAutocompleteIndex >= 0
             ) {
+              e.preventDefault();
               onAcceptSuggestion(
                 suggestedProperties[selectedAutocompleteIndex].value,
               );
             } else {
-              if (queryHistoryType && value) {
-                setQueryHistory(value);
+              // Allow shift+enter to still create new lines
+              if (!e.shiftKey) {
+                e.preventDefault();
+                if (queryHistoryType && value) {
+                  setQueryHistory(value);
+                }
+                onSubmit?.();
               }
-              onSubmit?.();
             }
           }
-          if (e.key === 'ArrowDown' && e.target instanceof HTMLInputElement) {
+          if (
+            e.key === 'ArrowDown' &&
+            e.target instanceof HTMLTextAreaElement
+          ) {
             if (suggestedProperties.length > 0) {
               setSelectedAutocompleteIndex(
                 Math.min(
@@ -301,7 +314,7 @@ export default function AutocompleteInput({
               );
             }
           }
-          if (e.key === 'ArrowUp' && e.target instanceof HTMLInputElement) {
+          if (e.key === 'ArrowUp' && e.target instanceof HTMLTextAreaElement) {
             if (suggestedProperties.length > 0) {
               setSelectedAutocompleteIndex(
                 Math.max(selectedAutocompleteIndex - 1, 0),
@@ -311,15 +324,15 @@ export default function AutocompleteInput({
         }}
         rightSectionWidth={ref.current?.clientWidth ?? 'auto'}
         rightSection={
-          <div ref={ref}>
-            {language != null && onLanguageChange != null && (
+          language != null && onLanguageChange != null ? (
+            <div ref={ref}>
               <InputLanguageSwitch
                 showHotkey={showHotkey && isSearchInputFocused}
                 language={language}
                 onLanguageChange={onLanguageChange}
               />
-            )}
-          </div>
+            </div>
+          ) : undefined
         }
       />
     </OverlayTrigger>

packages/app/src/DBDashboardPage.tsx

@@ -1018,6 +1018,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
                 onSubmit={onSubmit}
                 label="GLOBAL WHERE"
                 enableHotkey
+                allowMultiline={true}
               />
             ) : (
               <SearchInputV2

packages/app/src/DBSearchPage.tsx

@@ -1418,6 +1418,7 @@ function DBSearchPage() {
                   label="WHERE"
                   queryHistoryType={QUERY_LOCAL_STORAGE.SEARCH_SQL}
                   enableHotkey
+                  allowMultiline={true}
                 />
               </Box>
             }

packages/app/src/SearchInputV2.tsx

@@ -54,7 +54,7 @@ export default function SearchInputV2({
     field: { onChange, value },
   } = useController(props);
 
-  const ref = useRef<HTMLInputElement>(null);
+  const ref = useRef<HTMLTextAreaElement>(null);
   const [parsedEnglishQuery, setParsedEnglishQuery] = useState<string>('');
 
   const autoCompleteOptions = useAutoCompleteOptions(

packages/app/src/ServicesDashboardPage.tsx

@@ -968,6 +968,7 @@ function ServicesDashboardPage() {
                   language="sql"
                   label="WHERE"
                   enableHotkey
+                  allowMultiline={true}
                 />
               }
               luceneInput={

packages/app/src/SessionSubpanel.tsx

@@ -156,7 +156,7 @@ export default function SessionSubpanel({
   );
 
   // Event Filter Input =========================
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
   const [_inputQuery, setInputQuery] = useState<string | undefined>(undefined);
   const inputQuery = _inputQuery ?? '';
   const [_searchedQuery, setSearchedQuery] = useQueryState('session_q', {

packages/app/src/SessionsPage.tsx

@@ -462,6 +462,7 @@ export default function SessionsPage() {
                       language="sql"
                       label="WHERE"
                       enableHotkey
+                      allowMultiline={true}
                     />
                   </Box>
                 }

packages/app/src/components/SQLInlineEditor.tsx

@@ -1,12 +1,4 @@
-import {
-  memo,
-  RefObject,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useController, UseControllerProps } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
 import {
@@ -122,24 +114,33 @@ type SQLInlineEditorProps = {
   additionalSuggestions?: string[];
   queryHistoryType?: string;
   parentRef?: HTMLElement | null;
+  allowMultiline?: boolean;
 };
 
-const styleTheme = EditorView.baseTheme({
-  '&.cm-editor.cm-focused': {
-    outline: '0px solid transparent',
-  },
-  '&.cm-editor': {
-    background: 'transparent !important',
-  },
-  '& .cm-tooltip-autocomplete': {
-    whiteSpace: 'nowrap',
-    wordWrap: 'break-word',
-    maxWidth: '100%',
-  },
-  '& .cm-scroller': {
-    overflowX: 'hidden',
-  },
-});
+const MAX_EDITOR_HEIGHT = '150px';
+
+const createStyleTheme = (allowMultiline: boolean = false) =>
+  EditorView.baseTheme({
+    '&.cm-editor.cm-focused': {
+      outline: '0px solid transparent',
+    },
+    '&.cm-editor': {
+      background: 'transparent !important',
+      ...(allowMultiline && { maxHeight: MAX_EDITOR_HEIGHT }),
+    },
+    '& .cm-tooltip-autocomplete': {
+      whiteSpace: 'nowrap',
+      wordWrap: 'break-word',
+      maxWidth: '100%',
+    },
+    '& .cm-scroller': {
+      overflowX: 'hidden',
+      ...(allowMultiline && {
+        maxHeight: MAX_EDITOR_HEIGHT,
+        overflowY: 'auto',
+      }),
+    },
+  });
 
 export default function SQLInlineEditor({
   tableConnections,
@@ -158,6 +159,7 @@ export default function SQLInlineEditor({
   additionalSuggestions = [],
   queryHistoryType,
   parentRef,
+  allowMultiline = false,
 }: SQLInlineEditorProps) {
   const { data: fields } = useAllFields(tableConnections ?? []);
   const filteredFields = useMemo(() => {
@@ -332,7 +334,8 @@ export default function SQLInlineEditor({
           }}
           extensions={[
             ...tooltipExt,
-            styleTheme,
+            createStyleTheme(allowMultiline),
+            ...(allowMultiline ? [EditorView.lineWrapping] : []),
             compartmentRef.current.of(
               sql({
                 upperCaseKeywords: true,
@@ -342,7 +345,7 @@ export default function SQLInlineEditor({
               keymap.of([
                 {
                   key: 'Enter',
-                  run: () => {
+                  run: view => {
                     if (onSubmit == null) {
                       return false;
                     }
@@ -353,6 +356,17 @@ export default function SQLInlineEditor({
                     return true;
                   },
                 },
+                ...(allowMultiline
+                  ? [
+                      {
+                        key: 'Shift-Enter',
+                        run: () => {
+                          // Allow default behavior (insert new line)
+                          return false;
+                        },
+                      },
+                    ]
+                  : []),
               ]),
             ),
             keymap.of([

packages/app/tests/e2e/features/search/search.spec.ts

@@ -117,8 +117,6 @@ test.describe('Search', { tag: '@search' }, () => {
       });
     });
 
-    //TODO: Add query test using sql
-
     test('Comprehensive Search Workflow - Search, View Results, Navigate Side Panel', async ({
       page,
     }) => {