fix: Make auto-complete replace existing suggestion suffix

Author: pulpdrew

.changeset/smooth-poems-film.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+fix: Improve auto-complete behavior for aliases and maps

packages/app/src/components/SQLEditor/__tests__/utils.test.ts

@@ -39,6 +39,23 @@ function getSuggestionLabels(
     .map(o => o.label);
 }
 
+/**
+ * Returns the range [from, to] that CodeMirror would replace when the user
+ * accepts a suggestion. This lets us verify that the entire identifier
+ * (including any trailing characters after the cursor) gets replaced.
+ */
+function getReplacementRange(
+  doc: string,
+  pos: number,
+): { from: number; to: number } | null {
+  const source = createIdentifierCompletionSource(TEST_COMPLETIONS);
+  const state = EditorState.create({ doc });
+  const context = new CompletionContext(state, pos, false);
+  const result = source(context);
+  if (result == null) return null;
+  return { from: result.from, to: result.to ?? pos };
+}
+
 describe('Auto-Complete source', () => {
   it.each([
     { doc: 'SELECT col', expected: ['column1', 'column2'] },
@@ -102,4 +119,32 @@ describe('Auto-Complete source', () => {
       expect(getSuggestionLabels('SELECT CAST')).toEqual([]);
     });
   });
+
+  describe('mid-identifier completion', () => {
+    it.each([
+      {
+        name: "cursor before trailing ']",
+        doc: "ResourceAttributes['host.']",
+        pos: 25, // after 'host.'
+        expectedRange: { from: 0, to: 27 },
+      },
+      {
+        name: 'cursor in middle of a word',
+        doc: 'SELECT column1',
+        pos: 10, // after 'col'
+        expectedRange: { from: 7, to: 14 },
+      },
+      {
+        name: 'cursor at end of identifier (no trailing chars)',
+        doc: 'SELECT column1',
+        pos: 14,
+        expectedRange: { from: 7, to: 14 },
+      },
+    ])(
+      'replacement range covers full identifier when $name',
+      ({ doc, pos, expectedRange }) => {
+        expect(getReplacementRange(doc, pos)).toEqual(expectedRange);
+      },
+    );
+  });
 });

packages/app/src/components/SQLEditor/utils.ts

@@ -19,16 +19,21 @@ export type SQLCompletion = {
   type?: string;
 };
 
+// Characters that form SQL identifiers in our editor: word chars, dots,
+// single quotes, brackets, $, {, }, and : — to support expressions like
+// `ResourceAttributes['service.name']`, `$__dateFilter`, `{name:Type}`.
+const IDENTIFIER_CHAR = "[\\w.'[\\]${}:]";
+const IDENTIFIER_BEFORE = new RegExp(`${IDENTIFIER_CHAR}+`);
+const IDENTIFIER_AFTER = new RegExp(`^${IDENTIFIER_CHAR}+`);
+const IDENTIFIER_VALID_FOR = new RegExp(`^${IDENTIFIER_CHAR}*$`);
+
 /**
  * Creates a custom CodeMirror completion source for SQL identifiers (column names, table
  * names, functions, etc.) that inserts them verbatim, without quoting.
  */
 export function createIdentifierCompletionSource(completions: Completion[]) {
   return (context: CompletionContext) => {
-    // Match word characters, dots, single quotes, brackets, $, {, }, and :
-    // to support identifiers like `ResourceAttributes['service.name']`,
-    // macros like `$__dateFilter`, and query params like `{name:Type}`
-    const prefix = context.matchBefore(/[\w.'[\]${}:]+/);
+    const prefix = context.matchBefore(IDENTIFIER_BEFORE);
     if (!prefix && !context.explicit) return null;
 
     // Suppress suggestions after AS keyword since the user is typing a custom alias
@@ -37,10 +42,18 @@ export function createIdentifierCompletionSource(completions: Completion[]) {
       .trimEnd();
     if (/\bAS$/i.test(textBefore)) return null;
 
+    // Look forward from cursor to include trailing identifier characters
+    // (e.g. the `']` in `ResourceAttributes['host.']`) so accepting a
+    // suggestion replaces the entire identifier, not just up to the cursor.
+    const docText = context.state.doc.sliceString(context.pos);
+    const suffix = docText.match(IDENTIFIER_AFTER);
+    const to = suffix ? context.pos + suffix[0].length : context.pos;
+
     return {
       from: prefix?.from ?? context.pos,
+      to,
       options: completions,
-      validFor: /^[\w.'[\]${}:]*$/,
+      validFor: IDENTIFIER_VALID_FOR,
     };
   };
 }