@neo4j-cypher/react-codemirror 2.0.0-next.16 → 2.0.0-next.17

package/src/e2e_tests/autoCompletion.spec.tsx

@@ -194,14 +194,60 @@ 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
       schema={{
         functions: {
-          function123: {
-            ...testData.emptyFunction,
-            name: 'function123',
+          'CYPHER 5': {
+            function123: {
+              ...testData.emptyFunction,
+              name: 'function123',
+            },
           },
         },
       }}
@@ -227,7 +273,9 @@ test('can complete procedures', async ({ page, mount }) => {
     <CypherEditor
       schema={{
         procedures: {
-          'db.ping': { ...testData.emptyProcedure, name: 'db.ping' },
+          'CYPHER 5': {
+            'db.ping': { ...testData.emptyProcedure, name: 'db.ping' },
+          },
         },
       }}
     />,
@@ -308,16 +356,9 @@ test('shows signature help information on auto-completion for procedures', async
   page,
   mount,
 }) => {
-  await mount(
-    <CypherEditor
-      schema={testData.mockSchema}
-      featureFlags={{
-        signatureInfoOnAutoCompletions: true,
-      }}
-    />,
-  );
+  await mount(<CypherEditor schema={testData.mockSchema} />);
   const procName = 'apoc.periodic.iterate';
-  const procedure = testData.mockSchema.procedures[procName];
+  const procedure = testData.mockSchema.procedures['CYPHER 5'][procName];
 
   const textField = page.getByRole('textbox');
   await textField.fill('CALL apoc.periodic.');
@@ -333,16 +374,9 @@ test('shows signature help information on auto-completion for functions', async
   page,
   mount,
 }) => {
-  await mount(
-    <CypherEditor
-      schema={testData.mockSchema}
-      featureFlags={{
-        signatureInfoOnAutoCompletions: true,
-      }}
-    />,
-  );
+  await mount(<CypherEditor schema={testData.mockSchema} />);
   const fnName = 'apoc.coll.combinations';
-  const fn = testData.mockSchema.functions[fnName];
+  const fn = testData.mockSchema.functions['CYPHER 5'][fnName];
 
   const textField = page.getByRole('textbox');
   await textField.fill('RETURN apoc.coll.');
@@ -363,10 +397,11 @@ test('shows deprecated procedures as strikethrough on auto-completion', async ({
   await mount(
     <CypherEditor
       schema={{
-        procedures: { [procName]: testData.mockSchema.procedures[procName] },
-      }}
-      featureFlags={{
-        signatureInfoOnAutoCompletions: true,
+        procedures: {
+          'CYPHER 5': {
+            [procName]: testData.mockSchema.procedures['CYPHER 5'][procName],
+          },
+        },
       }}
     />,
   );
@@ -387,10 +422,11 @@ test('shows deprecated function as strikethrough on auto-completion', async ({
   await mount(
     <CypherEditor
       schema={{
-        functions: { [fnName]: testData.mockSchema.functions[fnName] },
-      }}
-      featureFlags={{
-        signatureInfoOnAutoCompletions: true,
+        functions: {
+          'CYPHER 5': {
+            [fnName]: testData.mockSchema.functions['CYPHER 5'][fnName],
+          },
+        },
       }}
     />,
   );
@@ -406,14 +442,7 @@ test('does not signature help information on auto-completion if docs and signatu
   page,
   mount,
 }) => {
-  await mount(
-    <CypherEditor
-      schema={testData.mockSchema}
-      featureFlags={{
-        signatureInfoOnAutoCompletions: true,
-      }}
-    />,
-  );
+  await mount(<CypherEditor schema={testData.mockSchema} />);
 
   const textField = page.getByRole('textbox');
   await textField.fill('C');
@@ -430,17 +459,16 @@ test('shows signature help information on auto-completion if description is not
     <CypherEditor
       schema={{
         procedures: {
-          'db.ping': {
-            ...testData.emptyProcedure,
-            description: 'foo',
-            signature: '',
-            name: 'db.ping',
+          'CYPHER 5': {
+            'db.ping': {
+              ...testData.emptyProcedure,
+              description: 'foo',
+              signature: '',
+              name: 'db.ping',
+            },
           },
         },
       }}
-      featureFlags={{
-        signatureInfoOnAutoCompletions: true,
-      }}
     />,
   );
 
@@ -459,17 +487,16 @@ test('shows signature help information on auto-completion if signature is not em
     <CypherEditor
       schema={{
         procedures: {
-          'db.ping': {
-            ...testData.emptyProcedure,
-            description: '',
-            signature: 'foo',
-            name: 'db.ping',
+          'CYPHER 5': {
+            'db.ping': {
+              ...testData.emptyProcedure,
+              description: '',
+              signature: 'foo',
+              name: 'db.ping',
+            },
           },
         },
       }}
-      featureFlags={{
-        signatureInfoOnAutoCompletions: true,
-      }}
     />,
   );
 
@@ -479,3 +506,41 @@ test('shows signature help information on auto-completion if signature is not em
   await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
   await expect(page.locator('.cm-completionInfo')).toBeVisible();
 });
+
+test('completions depend on the Cypher version', async ({ page, mount }) => {
+  await mount(
+    <CypherEditor
+      schema={{
+        functions: {
+          'CYPHER 5': {
+            cypher5Function: {
+              ...testData.emptyFunction,
+              name: 'cypher5Function',
+            },
+          },
+          'CYPHER 25': {
+            cypher25Function: {
+              ...testData.emptyFunction,
+              name: 'cypher25Function',
+            },
+          },
+        },
+      }}
+      featureFlags={{ cypher25: true }}
+    />,
+  );
+
+  const textField = page.getByRole('textbox');
+
+  await textField.fill('CYPHER 5 RETURN cypher');
+
+  await expect(
+    page.locator('.cm-tooltip-autocomplete').getByText('cypher5Function'),
+  ).toBeVisible();
+
+  await textField.fill('CYPHER 25 RETURN cypher');
+
+  await expect(
+    page.locator('.cm-tooltip-autocomplete').getByText('cypher25Function'),
+  ).toBeVisible();
+});

package/src/e2e_tests/e2eUtils.ts

@@ -59,17 +59,29 @@ export class CypherEditorPage {
     return this.checkNotificationMessage('warning', queryChunk, expectedMsg);
   }
 
+  async checkNoNotificationMessage(type: 'error' | 'warning') {
+    await this.page.waitForTimeout(10000);
+    await expect(this.page.locator('.cm-lintRange-' + type)).toHaveCount(0, {
+      timeout: 10000,
+    });
+    await expect(this.page.locator('.cm-lintPoint-' + type)).toHaveCount(0, {
+      timeout: 10000,
+    });
+  }
+
   private async checkNotificationMessage(
     type: 'error' | 'warning',
     queryChunk: string,
     expectedMsg: string,
   ) {
     await expect(this.page.locator('.cm-lintRange-' + type).last()).toBeVisible(
-      { timeout: 3000 },
+      { timeout: 10000 },
     );
 
     await this.page.getByText(queryChunk, { exact: true }).hover();
-    await expect(this.page.locator('.cm-tooltip-hover').last()).toBeVisible();
+    await expect(this.page.locator('.cm-tooltip-hover').last()).toBeVisible({
+      timeout: 10000,
+    });
     await expect(this.page.getByText(expectedMsg)).toBeVisible();
     /* Return the mouse to the beginning of the query and
        This is because if for example we have an overlay with a 

package/src/e2e_tests/performanceTest.spec.tsx

@@ -100,7 +100,7 @@ test('benchmarking & performance test session', async ({
 
   await editorPage.checkErrorMessage(
     'RETRN',
-    'Unexpected token. Did you mean RETURN?',
+    `Invalid input 'RETRN': expected a graph pattern, 'FOREACH', ',', 'ORDER BY', 'CALL', 'CREATE', 'LOAD CSV', 'DELETE', 'DETACH', 'FINISH', 'INSERT', 'LIMIT', 'MATCH', 'MERGE', 'NODETACH', 'OFFSET', 'OPTIONAL', 'REMOVE', 'RETURN', 'SET', 'SKIP', 'UNION', 'UNWIND', 'USE', 'USING', 'WHERE', 'WITH' or <EOF>`,
   );
 
   await editorPage

package/src/e2e_tests/signatureHelp.spec.tsx

@@ -11,7 +11,8 @@ type TooltipExpectations = {
   excludes?: string[];
 };
 
-const importCsvProc = testData.mockSchema.procedures['apoc.import.csv'];
+const importCsvProc =
+  testData.mockSchema.procedures['CYPHER 5']['apoc.import.csv'];
 
 function testTooltip(tooltip: Locator, expectations: TooltipExpectations) {
   const includes = expectations.includes ?? [];
@@ -20,7 +21,7 @@ function testTooltip(tooltip: Locator, expectations: TooltipExpectations) {
   const included = Promise.all(
     includes.map((text) => {
       return expect(tooltip).toContainText(text, {
-        timeout: 2000,
+        timeout: 10000,
       });
     }),
   );
@@ -28,7 +29,7 @@ function testTooltip(tooltip: Locator, expectations: TooltipExpectations) {
   const excluded = Promise.all(
     excludes.map((text) => {
       return expect(tooltip).not.toContainText(text, {
-        timeout: 2000,
+        timeout: 10000,
       });
     }),
   );
@@ -48,7 +49,7 @@ test('Signature help works for functions', async ({ page, mount }) => {
   );
 
   await expect(page.locator('.cm-signature-help-panel')).toBeVisible({
-    timeout: 2000,
+    timeout: 10000,
   });
 });
 
@@ -64,7 +65,7 @@ test('Signature help works for procedures', async ({ page, mount }) => {
   );
 
   await expect(page.locator('.cm-signature-help-panel')).toBeVisible({
-    timeout: 2000,
+    timeout: 10000,
   });
 });
 
@@ -86,9 +87,9 @@ test('Signature help shows the description for the first argument', async ({
 
   await testTooltip(tooltip, {
     includes: [
-      testData.mockSchema.procedures['apoc.import.csv'].argumentDescription[0]
-        .description,
-      testData.mockSchema.procedures['apoc.import.csv'].description,
+      testData.mockSchema.procedures['CYPHER 5']['apoc.import.csv']
+        .argumentDescription[0].description,
+      testData.mockSchema.procedures['CYPHER 5']['apoc.import.csv'].description,
     ],
   });
 });
@@ -289,7 +290,7 @@ test('Signature help does not show any help when method finished', async ({
   );
 
   await expect(page.locator('.cm-signature-help-panel')).not.toBeVisible({
-    timeout: 2000,
+    timeout: 10000,
   });
 });
 
@@ -308,7 +309,7 @@ test('Signature help does not blow up on empty query', async ({
   );
 
   await expect(page.locator('.cm-signature-help-panel')).not.toBeVisible({
-    timeout: 2000,
+    timeout: 10000,
   });
 });
 
@@ -331,7 +332,7 @@ test('Signature help is shown below the text by default', async ({
   await expect(
     page.locator('.cm-signature-help-panel.cm-tooltip-below'),
   ).toBeVisible({
-    timeout: 2000,
+    timeout: 10000,
   });
 });
 
@@ -355,7 +356,7 @@ test('Setting showSignatureTooltipBelow to true shows the signature help above t
   await expect(
     page.locator('.cm-signature-help-panel.cm-tooltip-below'),
   ).toBeVisible({
-    timeout: 2000,
+    timeout: 10000,
   });
 });
 
@@ -379,6 +380,66 @@ test('Setting showSignatureTooltipBelow to false shows the signature help above
   await expect(
     page.locator('.cm-signature-help-panel.cm-tooltip-above'),
   ).toBeVisible({
-    timeout: 2000,
+    timeout: 10000,
+  });
+});
+
+test('Signature help depends on the Cypher version', async ({
+  page,
+  mount,
+}) => {
+  const cypher5ArgDescription = 'The Cypher 5 statement to run.';
+  const cypher25ArgDescription = 'The Cypher 25 statement to run.';
+
+  await mount(
+    <CypherEditor
+      schema={{
+        functions: {
+          'CYPHER 5': {
+            cypher5Function: {
+              ...testData.emptyFunction,
+              argumentDescription: [
+                {
+                  isDeprecated: false,
+                  description: cypher5ArgDescription,
+                  name: 'statement',
+                  type: 'STRING',
+                },
+              ],
+              name: 'cypher5Function',
+            },
+          },
+          'CYPHER 25': {
+            cypher25Function: {
+              ...testData.emptyFunction,
+              argumentDescription: [
+                {
+                  isDeprecated: false,
+                  description: cypher25ArgDescription,
+                  name: 'statement',
+                  type: 'STRING',
+                },
+              ],
+              name: 'cypher25Function',
+            },
+          },
+        },
+      }}
+      featureFlags={{ cypher25: true }}
+    />,
+  );
+
+  const textField = page.getByRole('textbox');
+  await textField.fill('CYPHER 5 RETURN cypher5Function(');
+  const tooltip = page.locator('.cm-signature-help-panel');
+
+  await testTooltip(tooltip, {
+    includes: [cypher5ArgDescription],
+  });
+
+  await textField.fill('CYPHER 25 RETURN cypher25Function(');
+
+  await testTooltip(tooltip, {
+    includes: [cypher25ArgDescription],
   });
 });

package/src/e2e_tests/snippets.spec.tsx

@@ -65,11 +65,11 @@ test('can accept completion inside pattern snippet', async ({
     page.locator('.cm-tooltip-autocomplete').getByText('City'),
   ).toBeVisible();
 
-  await textField.press('Tab');
+  await textField.press('Tab', { delay: 300 });
   await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
 
   // tab out of the snippet
-  await textField.press('Tab');
+  await textField.press('Tab', { delay: 300 });
 
   await expect(textField).toHaveText('MATCH ()-[]->()-[ ]->(:City)');
 });

package/src/e2e_tests/syntaxValidation.spec.tsx

@@ -13,7 +13,7 @@ test('Prop lint set to false disables syntax validation', async ({
   await mount(<CypherEditor value={query} lint={false} />);
 
   await expect(page.locator('.cm-lintRange-error').last()).not.toBeVisible({
-    timeout: 2000,
+    timeout: 10000,
   });
 });
 
@@ -24,7 +24,7 @@ test('Can turn linting back on', async ({ page, mount }) => {
   const component = await mount(<CypherEditor value={query} lint={false} />);
 
   await expect(page.locator('.cm-lintRange-error').last()).not.toBeVisible({
-    timeout: 2000,
+    timeout: 10000,
   });
 
   await component.update(<CypherEditor value={query} lint={true} />);
@@ -33,7 +33,7 @@ test('Can turn linting back on', async ({ page, mount }) => {
 
   await editorPage.checkErrorMessage(
     'METCH',
-    'Unrecognized keyword. Did you mean MATCH?',
+    `Invalid input 'METCH': expected 'FOREACH', 'ALTER', 'ORDER BY', 'CALL', 'USING PERIODIC COMMIT', 'CREATE', 'LOAD CSV', 'START DATABASE', 'STOP DATABASE', 'DEALLOCATE', 'DELETE', 'DENY', 'DETACH', 'DROP', 'DRYRUN', 'FINISH', 'GRANT', 'INSERT', 'LIMIT', 'MATCH', 'MERGE', 'NODETACH', 'OFFSET', 'OPTIONAL', 'REALLOCATE', 'REMOVE', 'RENAME', 'RETURN', 'REVOKE', 'ENABLE SERVER', 'SET', 'SHOW', 'SKIP', 'TERMINATE', 'UNWIND', 'USE' or 'WITH'`,
   );
 });
 
@@ -45,10 +45,22 @@ test('Syntactic errors are surfaced', async ({ page, mount }) => {
 
   await editorPage.checkErrorMessage(
     'METCH',
-    'Unrecognized keyword. Did you mean MATCH?',
+    `Invalid input 'METCH': expected 'FOREACH', 'ALTER', 'ORDER BY', 'CALL', 'USING PERIODIC COMMIT', 'CREATE', 'LOAD CSV', 'START DATABASE', 'STOP DATABASE', 'DEALLOCATE', 'DELETE', 'DENY', 'DETACH', 'DROP', 'DRYRUN', 'FINISH', 'GRANT', 'INSERT', 'LIMIT', 'MATCH', 'MERGE', 'NODETACH', 'OFFSET', 'OPTIONAL', 'REALLOCATE', 'REMOVE', 'RENAME', 'RETURN', 'REVOKE', 'ENABLE SERVER', 'SET', 'SHOW', 'SKIP', 'TERMINATE', 'UNWIND', 'USE' or 'WITH'`,
   );
 });
 
+test('Does not trigger syntax errors for backticked parameters in parameter creation', async ({
+  page,
+  mount,
+}) => {
+  const editorPage = new CypherEditorPage(page);
+
+  const query = ':param x => "abc"';
+  await mount(<CypherEditor value={query} />);
+
+  await editorPage.checkNoNotificationMessage('error');
+});
+
 test('Errors for undefined labels are surfaced', async ({ page, mount }) => {
   const editorPage = new CypherEditorPage(page);
   const query = 'MATCH (n: Person) RETURN n';
@@ -170,33 +182,62 @@ test('Validation errors are correctly overlapped', async ({ page, mount }) => {
   );
 });
 
-test('Strikethroughs are shown for deprecated functions', async ({ page, mount }) => {
+test('Strikethroughs are shown for deprecated functions', async ({
+  page,
+  mount,
+}) => {
   const editorPage = new CypherEditorPage(page);
   const query = `RETURN id()`;
 
   await mount(<CypherEditor value={query} schema={testData.mockSchema} />);
-  await expect(editorPage.page.locator('.cm-deprecated-element').last()).toBeVisible(
-    { timeout: 3000 },
-  );
-  await editorPage.checkWarningMessage(
-    'id',
-    "Function id is deprecated.",
-  );
-
+  await expect(
+    editorPage.page.locator('.cm-deprecated-element').last(),
+  ).toBeVisible({ timeout: 10000 });
+  await editorPage.checkWarningMessage('id', 'Function id is deprecated.');
 });
 
-test('Strikethroughs are shown for deprecated procedures', async ({ page, mount }) => {
+test('Strikethroughs are shown for deprecated procedures', async ({
+  page,
+  mount,
+}) => {
   const editorPage = new CypherEditorPage(page);
   const query = `CALL apoc.create.uuids()`;
 
   await mount(<CypherEditor value={query} schema={testData.mockSchema} />);
-  await expect(editorPage.page.locator('.cm-deprecated-element').last()).toBeVisible(
-    { timeout: 3000 },
+  await expect(
+    editorPage.page.locator('.cm-deprecated-element').last(),
+  ).toBeVisible({ timeout: 10000 });
+
+  await editorPage.checkWarningMessage(
+    'apoc.create.uuids',
+    'Procedure apoc.create.uuids is deprecated.',
+  );
+});
+
+test('Syntax validation depends on the Cypher version', async ({
+  page,
+  mount,
+}) => {
+  await mount(
+    <CypherEditor
+      schema={testData.mockSchema}
+      featureFlags={{ cypher25: true }}
+    />,
   );
 
+  const editorPage = new CypherEditorPage(page);
+  const textField = page.getByRole('textbox');
+  await textField.fill('CYPHER 5 CALL apoc.create.uuids(5)');
+
   await editorPage.checkWarningMessage(
     'apoc.create.uuids',
-    "Procedure apoc.create.uuids is deprecated.",
+    'Procedure apoc.create.uuids is deprecated.',
   );
 
+  await textField.fill('CYPHER 25 CALL apoc.create.uuids(5)');
+
+  await editorPage.checkErrorMessage(
+    'apoc.create.uuids',
+    'Procedure apoc.create.uuids is not present in the database.',
+  );
 });

package/src/lang-cypher/autocomplete.ts

@@ -3,7 +3,10 @@ import {
   CompletionSource,
   snippet,
 } from '@codemirror/autocomplete';
-import { autocomplete } from '@neo4j-cypher/language-support';
+import {
+  autocomplete,
+  shouldAutoCompleteYield,
+} from '@neo4j-cypher/language-support';
 import {
   CompletionItemKind,
   CompletionItemTag,
@@ -58,15 +61,18 @@ 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 yieldTriggered = shouldAutoCompleteYield(documentText, offset);
     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 +84,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,
     );
 

package/src/lang-cypher/langCypher.ts

@@ -4,14 +4,11 @@ import {
   Language,
   LanguageSupport,
 } from '@codemirror/language';
-import {
-  _internalFeatureFlags,
-  type DbSchema,
-} from '@neo4j-cypher/language-support';
+import { type DbSchema } from '@neo4j-cypher/language-support';
 import { completionStyles, cypherAutocomplete } from './autocomplete';
 import { ParserAdapter } from './parser-adapter';
 import { signatureHelpTooltip } from './signatureHelp';
-import { cypherLinter, semanticAnalysisLinter } from './syntaxValidation';
+import { cypherLinter } from './syntaxValidation';
 
 const facet = defineLanguageFacet({
   commentTokens: { block: { open: '/*', close: '*/' }, line: '//' },
@@ -23,6 +20,7 @@ export type CypherConfig = {
   showSignatureTooltipBelow?: boolean;
   featureFlags?: {
     consoleCommands?: boolean;
+    cypher25?: boolean;
   };
   schema?: DbSchema;
   useLightVersion: boolean;
@@ -30,12 +28,6 @@ export type CypherConfig = {
 };
 
 export function cypher(config: CypherConfig) {
-  const featureFlags = config.featureFlags;
-  // We allow to override the consoleCommands feature flag
-  if (featureFlags.consoleCommands !== undefined) {
-    _internalFeatureFlags.consoleCommands = featureFlags.consoleCommands;
-  }
-
   const parserAdapter = new ParserAdapter(facet, config);
 
   const cypherLanguage = new Language(facet, parserAdapter, [], 'cypher');
@@ -46,7 +38,6 @@ export function cypher(config: CypherConfig) {
       optionClass: completionStyles,
     }),
     cypherLinter(config),
-    semanticAnalysisLinter(config),
     signatureHelpTooltip(config),
   ]);
 }