@neo4j-cypher/react-codemirror 2.0.0-canary-89dc5bb → 2.0.0-canary-5acfe46

package/src/e2e_tests/autoCompletion.spec.tsx

@@ -194,7 +194,10 @@ 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 }) => {
+test('can complete YIELD clauses without manual trigger', async ({
+  page,
+  mount,
+}) => {
   const component = await mount(
     <CypherEditor
       schema={{
@@ -213,7 +216,10 @@ test('can complete YIELD clauses without manual trigger', async ({ page, mount }
   await expect(component).toContainText('CALL dbms.components() YIELD edition');
 });
 
-test('automatic yield trigger is not case sensitive', async ({ page, mount }) => {
+test('automatic yield trigger is not case sensitive', async ({
+  page,
+  mount,
+}) => {
   const component = await mount(
     <CypherEditor
       schema={{
@@ -237,9 +243,11 @@ test('can complete functions', async ({ page, mount }) => {
     <CypherEditor
       schema={{
         functions: {
-          function123: {
-            ...testData.emptyFunction,
-            name: 'function123',
+          'CYPHER 5': {
+            function123: {
+              ...testData.emptyFunction,
+              name: 'function123',
+            },
           },
         },
       }}
@@ -265,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' },
+          },
         },
       }}
     />,
@@ -346,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.');
@@ -371,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.');
@@ -401,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],
+          },
+        },
       }}
     />,
   );
@@ -425,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],
+          },
+        },
       }}
     />,
   );
@@ -444,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');
@@ -468,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,
-      }}
     />,
   );
 
@@ -497,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,
-      }}
     />,
   );
 
@@ -517,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

@@ -60,12 +60,12 @@ export class CypherEditorPage {
   }
 
   async checkNoNotificationMessage(type: 'error' | 'warning') {
-    await this.page.waitForTimeout(3000);
+    await this.page.waitForTimeout(10000);
     await expect(this.page.locator('.cm-lintRange-' + type)).toHaveCount(0, {
-      timeout: 3000,
+      timeout: 10000,
     });
     await expect(this.page.locator('.cm-lintPoint-' + type)).toHaveCount(0, {
-      timeout: 3000,
+      timeout: 10000,
     });
   }
 
@@ -75,11 +75,13 @@ export class CypherEditorPage {
     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/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} />);
@@ -192,7 +192,7 @@ test('Strikethroughs are shown for deprecated functions', async ({
   await mount(<CypherEditor value={query} schema={testData.mockSchema} />);
   await expect(
     editorPage.page.locator('.cm-deprecated-element').last(),
-  ).toBeVisible({ timeout: 3000 });
+  ).toBeVisible({ timeout: 10000 });
   await editorPage.checkWarningMessage('id', 'Function id is deprecated.');
 });
 
@@ -206,10 +206,38 @@ test('Strikethroughs are shown for deprecated procedures', async ({
   await mount(<CypherEditor value={query} schema={testData.mockSchema} />);
   await expect(
     editorPage.page.locator('.cm-deprecated-element').last(),
-  ).toBeVisible({ timeout: 3000 });
+  ).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.',
+  );
+
+  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/langCypher.ts

@@ -20,6 +20,7 @@ export type CypherConfig = {
   showSignatureTooltipBelow?: boolean;
   featureFlags?: {
     consoleCommands?: boolean;
+    cypher25?: boolean;
   };
   schema?: DbSchema;
   useLightVersion: boolean;

package/src/lang-cypher/lintWorker.ts

@@ -8,12 +8,15 @@ import workerpool from 'workerpool';
 function lintCypherQuery(
   query: string,
   dbSchema: DbSchema,
-  featureFlags: { consoleCommands?: boolean } = {},
+  featureFlags: { consoleCommands?: boolean; cypher25?: boolean } = {},
 ) {
   // We allow to override the consoleCommands feature flag
   if (featureFlags.consoleCommands !== undefined) {
     _internalFeatureFlags.consoleCommands = featureFlags.consoleCommands;
   }
+  if (featureFlags.cypher25 !== undefined) {
+    _internalFeatureFlags.cypher25 = featureFlags.cypher25;
+  }
   return _lintCypherQuery(query, dbSchema);
 }
 

package/dist/e2e_tests/helpers.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/e2e_tests/helpers.spec.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { test } from '@playwright/experimental-ct-react';
-import { CypherEditor } from '../CypherEditor';
-import { CypherEditorPage } from './e2eUtils';
-test.use({ viewport: { width: 1000, height: 500 } });
-test.fail('checkNoNotification fails on query with error', async ({ page, mount }) => {
-    const editorPage = new CypherEditorPage(page);
-    const query = 'METCH (n) RETURN n';
-    await mount(_jsx(CypherEditor, { value: query }));
-    await editorPage.checkNoNotificationMessage('error');
-});
-//# sourceMappingURL=helpers.spec.js.map

package/dist/e2e_tests/helpers.spec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"helpers.spec.js","sourceRoot":"","sources":["../../src/e2e_tests/helpers.spec.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,mCAAmC,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAE9C,IAAI,CAAC,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC;AAErD,IAAI,CAAC,IAAI,CACP,+CAA+C,EAC/C,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAE9C,MAAM,KAAK,GAAG,oBAAoB,CAAC;IACnC,MAAM,KAAK,CAAC,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC;IAE5C,MAAM,UAAU,CAAC,0BAA0B,CAAC,OAAO,CAAC,CAAC;AACvD,CAAC,CACF,CAAC"}

package/src/e2e_tests/helpers.spec.tsx

@@ -1,17 +0,0 @@
-import { test } from '@playwright/experimental-ct-react';
-import { CypherEditor } from '../CypherEditor';
-import { CypherEditorPage } from './e2eUtils';
-
-test.use({ viewport: { width: 1000, height: 500 } });
-
-test.fail(
-  'checkNoNotification fails on query with error',
-  async ({ page, mount }) => {
-    const editorPage = new CypherEditorPage(page);
-
-    const query = 'METCH (n) RETURN n';
-    await mount(<CypherEditor value={query} />);
-
-    await editorPage.checkNoNotificationMessage('error');
-  },
-);