Added automatic trigger of completions on "YIELD "

.changeset/fifty-zebras-grow.md

@@ -0,0 +1,7 @@
+---
+'@neo4j-cypher/language-support': patch
+'@neo4j-cypher/react-codemirror': patch
+'@neo4j-cypher/language-server': patch
+---
+
+Automatically opens autocompletions after "YIELD "

packages/language-server/src/autocompletion.ts

@@ -21,26 +21,38 @@ export function doAutoCompletion(
     const position: Position = completionParams.position;
     const offset = textDocument.offsetAt(position);
 
-    const completions: CompletionItem[] = autocomplete(
-      // TODO This is a temporary hack because completions are not working well
-      textDocument.getText().slice(0, offset),
-      neo4j.metadata?.dbSchema ?? {},
-      offset,
-      completionParams.context.triggerKind === CompletionTriggerKind.Invoked,
-    );
+    const yieldTriggerPhrase = 'yield ';
+    const text = textDocument.getText().slice(0, offset);
+    const precedingText = text
+      .slice(Math.max(0, offset - yieldTriggerPhrase.length), offset)
+      .toLowerCase();
+    const yieldTriggered =
+      precedingText === yieldTriggerPhrase &&
+      completionParams.context?.triggerCharacter === ' ';
+    const manualOrCharacterOrInwordTriggered =
+      completionParams.context?.triggerCharacter !== ' ';
+    if (yieldTriggered || manualOrCharacterOrInwordTriggered) {
+      const completions: CompletionItem[] = autocomplete(
+        // TODO This is a temporary hack because completions are not working well
+        textDocument.getText().slice(0, offset),
+        neo4j.metadata?.dbSchema ?? {},
+        offset,
+        completionParams.context.triggerKind === CompletionTriggerKind.Invoked,
+      );
 
-    const result = completions.map((item) => {
-      if (item.signature) {
-        return {
-          ...item,
-          detail: item.detail + ' ' + item.signature,
-          signature: undefined,
-        };
-      } else {
-        return item;
-      }
-    });
+      const result = completions.map((item) => {
+        if (item.signature) {
+          return {
+            ...item,
+            detail: item.detail + ' ' + item.signature,
+            signature: undefined,
+          };
+        } else {
+          return item;
+        }
+      });
 
-    return result;
+      return result;
+    }
   };
 }

packages/language-server/src/server.ts

@@ -51,7 +51,7 @@ connection.onInitialize(() => {
       // Tell the client what features does the server support
       completionProvider: {
         resolveProvider: false,
-        triggerCharacters: ['.', ':', '{', '$', ')'],
+        triggerCharacters: ['.', ':', '{', '$', ')', ' '],
       },
       semanticTokensProvider: {
         documentSelector: [{ language: 'cypher' }],

packages/react-codemirror/src/e2e_tests/autoCompletion.spec.tsx

@@ -194,6 +194,44 @@ test('can complete rel types', async ({ page, mount }) => {
   await expect(component).toContainText('MATCH (n)-[:KNOWS');
 });
 
+test('can complete YIELD clauses without manual trigger', async ({ page, mount }) => {
+  const component = await mount(
+    <CypherEditor
+      schema={{
+        procedures: testData.mockSchema.procedures,
+      }}
+    />,
+  );
+
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('CALL dbms.components() YIELD ');
+
+  await page.locator('.cm-tooltip-autocomplete').getByText('edition').click();
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  await expect(component).toContainText('CALL dbms.components() YIELD edition');
+});
+
+test('automatic yield trigger is not case sensitive', async ({ page, mount }) => {
+  const component = await mount(
+    <CypherEditor
+      schema={{
+        procedures: testData.mockSchema.procedures,
+      }}
+    />,
+  );
+
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('CALL dbms.components() yIeLd ');
+
+  await page.locator('.cm-tooltip-autocomplete').getByText('edition').click();
+  await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+
+  await expect(component).toContainText('CALL dbms.components() yIeLd edition');
+});
+
 test('can complete functions', async ({ page, mount }) => {
   const component = await mount(
     <CypherEditor

packages/react-codemirror/src/lang-cypher/autocomplete.ts

@@ -58,15 +58,22 @@ export const completionStyles: (
 export const cypherAutocomplete: (config: CypherConfig) => CompletionSource =
   (config) => (context) => {
     const documentText = context.state.doc.toString();
-
+    const offset = context.pos;
     const triggerCharacters = ['.', ':', '{', '$', ')'];
-    const lastCharacter = documentText.at(context.pos - 1);
-
+    const lastCharacter = documentText.at(offset - 1);
+    const yieldTriggerPhrase = 'yield ';
+    const precedingText = documentText
+      .slice(Math.max(0, offset - yieldTriggerPhrase.length), offset)
+      .toLowerCase();
+    const yieldTriggered = yieldTriggerPhrase === precedingText;
     const lastWord = context.matchBefore(/\w*/);
     const inWord = lastWord.from !== lastWord.to;
 
     const shouldTriggerCompletion =
-      inWord || context.explicit || triggerCharacters.includes(lastCharacter);
+      inWord ||
+      context.explicit ||
+      triggerCharacters.includes(lastCharacter) ||
+      yieldTriggered;
 
     if (config.useLightVersion && !context.explicit) {
       return null;
@@ -78,9 +85,9 @@ export const cypherAutocomplete: (config: CypherConfig) => CompletionSource =
 
     const options = autocomplete(
       // TODO This is a temporary hack because completions are not working well
-      documentText.slice(0, context.pos),
+      documentText.slice(0, offset),
       config.schema ?? {},
-      context.pos,
+      offset,
       context.explicit,
     );