@neo4j-cypher/react-codemirror 2.0.0-next.12 → 2.0.0-next.13

package/src/e2e_tests/signatureHelp.spec.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/unbound-method */
 import { testData } from '@neo4j-cypher/language-support';
 import { expect, test } from '@playwright/experimental-ct-react';
 import { Locator } from 'playwright/test';
@@ -10,6 +11,8 @@ type TooltipExpectations = {
   excludes?: string[];
 };
 
+const importCsvProc = testData.mockSchema.procedures['apoc.import.csv'];
+
 function testTooltip(tooltip: Locator, expectations: TooltipExpectations) {
   const includes = expectations.includes ?? [];
   const excludes = expectations.excludes ?? [];
@@ -83,8 +86,9 @@ test('Signature help shows the description for the first argument', async ({
 
   await testTooltip(tooltip, {
     includes: [
-      'nodes :: LIST<MAP>',
-      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+      testData.mockSchema.procedures['apoc.import.csv'].argumentDescription[0]
+        .description,
+      testData.mockSchema.procedures['apoc.import.csv'].description,
     ],
   });
 });
@@ -103,8 +107,8 @@ test('Signature help shows the description for the first argument when the curso
 
   await testTooltip(tooltip, {
     includes: [
-      'nodes :: LIST<MAP>',
-      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+      importCsvProc.argumentDescription[0].description,
+      importCsvProc.description,
     ],
   });
 });
@@ -127,8 +131,8 @@ test('Signature help shows the description for the second argument', async ({
 
   await testTooltip(tooltip, {
     includes: [
-      'rels :: LIST<MAP>',
-      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+      importCsvProc.argumentDescription[1].description,
+      importCsvProc.description,
     ],
   });
 });
@@ -147,8 +151,8 @@ test('Signature help shows the description for the second argument when the curs
 
   await testTooltip(tooltip, {
     includes: [
-      'rels :: LIST<MAP>',
-      'Imports `NODE` and `RELATIONSHIP` values with the given labels and types from the provided CSV file',
+      importCsvProc.argumentDescription[1].description,
+      importCsvProc.description,
     ],
   });
 });

package/src/lang-cypher/autocomplete.ts

@@ -77,73 +77,56 @@ export const cypherAutocomplete: (config: CypherConfig) => CompletionSource =
     }
 
     const options = autocomplete(
-      documentText,
+      // TODO This is a temporary hack because completions are not working well
+      documentText.slice(0, context.pos),
       config.schema ?? {},
       context.pos,
       context.explicit,
     );
 
-    if (config.featureFlags?.signatureInfoOnAutoCompletions) {
-      return {
-        from: context.matchBefore(/(\w|\$)*$/).from,
-        options: options.map((o) => {
-          let maybeInfo = {};
-          let emptyInfo = true;
-          const newDiv = document.createElement('div');
+    return {
+      from: context.matchBefore(/(\w|\$)*$/).from,
+      options: options.map((o) => {
+        let maybeInfo = {};
+        let emptyInfo = true;
+        const newDiv = document.createElement('div');
 
-          if (o.signature) {
-            const header = document.createElement('p');
-            header.setAttribute('class', 'cm-completionInfo-signature');
-            header.textContent = o.signature;
-            if (header.textContent.length > 0) {
-              emptyInfo = false;
-              newDiv.appendChild(header);
-            }
+        if (o.signature) {
+          const header = document.createElement('p');
+          header.setAttribute('class', 'cm-completionInfo-signature');
+          header.textContent = o.signature;
+          if (header.textContent.length > 0) {
+            emptyInfo = false;
+            newDiv.appendChild(header);
           }
+        }
 
-          if (o.documentation) {
-            const paragraph = document.createElement('p');
-            paragraph.textContent = getDocString(o.documentation);
-            if (paragraph.textContent.length > 0) {
-              emptyInfo = false;
-              newDiv.appendChild(paragraph);
-            }
+        if (o.documentation) {
+          const paragraph = document.createElement('p');
+          paragraph.textContent = getDocString(o.documentation);
+          if (paragraph.textContent.length > 0) {
+            emptyInfo = false;
+            newDiv.appendChild(paragraph);
           }
+        }
 
-          if (!emptyInfo) {
-            maybeInfo = {
-              info: () => Promise.resolve(newDiv),
-            };
-          }
-          const deprecated =
-            o.tags?.find((tag) => tag === CompletionItemTag.Deprecated) ??
-            false;
-          // The negative boost moves the deprecation down the list
-          // so we offer the user the completions that are
-          // deprecated the last
-          const maybeDeprecated = deprecated
-            ? { boost: -99, deprecated: true }
-            : {};
-
-          return {
-            label: o.label,
-            type: completionKindToCodemirrorIcon(o.kind),
-            apply:
-              o.kind === CompletionItemKind.Snippet
-                ? // codemirror requires an empty snippet space to be able to tab out of the completion
-                  snippet((o.insertText ?? o.label) + '${}')
-                : undefined,
-            detail: o.detail,
-            ...maybeDeprecated,
-            ...maybeInfo,
+        if (!emptyInfo) {
+          maybeInfo = {
+            info: () => Promise.resolve(newDiv),
           };
-        }),
-      };
-    } else {
-      return {
-        from: context.matchBefore(/(\w|\$)*$/).from,
-        options: options.map((o) => ({
-          label: o.label,
+        }
+        const deprecated =
+          o.tags?.find((tag) => tag === CompletionItemTag.Deprecated) ?? false;
+        // The negative boost moves the deprecation down the list
+        // so we offer the user the completions that are
+        // deprecated the last
+        const maybeDeprecated = deprecated
+          ? { boost: -99, deprecated: true }
+          : {};
+
+        return {
+          label: o.insertText ? o.insertText : o.label,
+          displayLabel: o.label,
           type: completionKindToCodemirrorIcon(o.kind),
           apply:
             o.kind === CompletionItemKind.Snippet
@@ -151,7 +134,9 @@ export const cypherAutocomplete: (config: CypherConfig) => CompletionSource =
                 snippet((o.insertText ?? o.label) + '${}')
               : undefined,
           detail: o.detail,
-        })),
-      };
-    }
+          ...maybeDeprecated,
+          ...maybeInfo,
+        };
+      }),
+    };
   };

package/src/lang-cypher/createCypherTheme.ts

@@ -121,6 +121,9 @@ export const createCypherTheme = ({
     '& .cm-signature-help-panel-name': {
       padding: '5px',
     },
+    '& .cm-signature-help-panel-arg-description': {
+      padding: '5px',
+    },
     '& .cm-signature-help-panel-description': {
       padding: '5px',
     },

package/src/lang-cypher/langCypher.ts

@@ -22,7 +22,6 @@ export type CypherConfig = {
   lint?: boolean;
   showSignatureTooltipBelow?: boolean;
   featureFlags?: {
-    signatureInfoOnAutoCompletions?: boolean;
     consoleCommands?: boolean;
   };
   schema?: DbSchema;

package/src/lang-cypher/signatureHelp.ts

@@ -1,7 +1,10 @@
 import { EditorState, StateField } from '@codemirror/state';
 import { showTooltip, Tooltip } from '@codemirror/view';
 import { signatureHelp } from '@neo4j-cypher/language-support';
-import { SignatureInformation } from 'vscode-languageserver-types';
+import {
+  MarkupContent,
+  SignatureInformation,
+} from 'vscode-languageserver-types';
 import { CypherConfig } from './langCypher';
 import { getDocString } from './utils';
 
@@ -38,24 +41,32 @@ const createSignatureHelpElement =
 
     const signatureLabel = document.createElement('div');
     signatureLabel.className = 'cm-signature-help-panel-name';
-    signatureLabel.appendChild(document.createTextNode(`${signature.label}(`));
+    const methodName = signature.label.slice(0, signature.label.indexOf('('));
+    const returnType = signature.label.slice(signature.label.indexOf(')') + 1);
+    signatureLabel.appendChild(document.createTextNode(`${methodName}(`));
+    let currentParamDescription: string | undefined = undefined;
 
     parameters.forEach((param, index) => {
-      if (typeof param.documentation === 'string') {
+      if (typeof param.label === 'string') {
         const span = document.createElement('span');
-        span.appendChild(document.createTextNode(param.documentation));
+        span.appendChild(document.createTextNode(param.label));
         if (index !== parameters.length - 1) {
           span.appendChild(document.createTextNode(', '));
         }
 
         if (index === activeParameter) {
           span.className = 'cm-signature-help-panel-current-argument';
+          const paramDoc = param.documentation;
+          currentParamDescription = MarkupContent.is(paramDoc)
+            ? paramDoc.value
+            : paramDoc;
         }
         signatureLabel.appendChild(span);
       }
     });
 
     signatureLabel.appendChild(document.createTextNode(')'));
+    signatureLabel.appendChild(document.createTextNode(returnType));
 
     contents.appendChild(signatureLabel);
 
@@ -64,11 +75,18 @@ const createSignatureHelpElement =
 
     contents.appendChild(separator);
 
-    const description = document.createElement('div');
-    description.className = 'cm-signature-help-panel-description';
-    description.appendChild(document.createTextNode(doc));
-
-    contents.appendChild(description);
+    if (currentParamDescription !== undefined) {
+      const argDescription = document.createElement('div');
+      argDescription.className = 'cm-signature-help-panel-arg-description';
+      argDescription.appendChild(
+        document.createTextNode(currentParamDescription),
+      );
+      contents.appendChild(argDescription);
+    }
+    const methodDescription = document.createElement('div');
+    methodDescription.className = 'cm-signature-help-panel-description';
+    methodDescription.appendChild(document.createTextNode(doc));
+    contents.appendChild(methodDescription);
 
     return { dom };
   };