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

package/src/CypherEditor.tsx

@@ -13,7 +13,11 @@ import {
   placeholder,
   ViewUpdate,
 } from '@codemirror/view';
-import { type DbSchema } from '@neo4j-cypher/language-support';
+import {
+  formatQuery,
+  _internalFeatureFlags,
+  type DbSchema,
+} from '@neo4j-cypher/language-support';
 import debounce from 'lodash.debounce';
 import { Component, createRef } from 'react';
 import { DEBOUNCE_TIME } from './constants';
@@ -99,7 +103,7 @@ export interface CypherEditorProps {
    */
   featureFlags?: {
     consoleCommands?: boolean;
-    signatureInfoOnAutoCompletions?: boolean;
+    cypher25?: boolean;
   };
   /**
    * The schema to use for autocompletion and linting.
@@ -176,6 +180,22 @@ export interface CypherEditorProps {
   moveFocusOnTab?: boolean;
 }
 
+const format = (view: EditorView): void => {
+  const doc = view.state.doc.toString();
+    const { formattedString, newCursorPos } = formatQuery(
+      doc,
+      view.state.selection.main.anchor,
+    );
+    view.dispatch({
+      changes: {
+        from: 0,
+        to: doc.length,
+        insert: formattedString,
+      },
+      selection: { anchor: newCursorPos },
+    });
+}
+
 const executeKeybinding = (
   onExecute?: (cmd: string) => void,
   newLineOnEnter?: boolean,
@@ -195,7 +215,6 @@ const executeKeybinding = (
       run: insertNewline,
     },
   };
-
   if (onExecute) {
     keybindings['Ctrl-Enter'] = {
       key: 'Ctrl-Enter',
@@ -276,6 +295,13 @@ export class CypherEditor extends Component<
   editorView: React.MutableRefObject<EditorView> = createRef();
   private schemaRef: React.MutableRefObject<CypherConfig> = createRef();
 
+  /**
+   * Format Cypher query
+   */
+  format() {
+    format(this.editorView.current)
+  }
+
   /**
    * Focus the editor
    */
@@ -346,6 +372,8 @@ export class CypherEditor extends Component<
       newLineOnEnter,
     } = this.props;
 
+    _internalFeatureFlags.cypher25 = featureFlags?.cypher25 ?? false;
+
     this.schemaRef.current = {
       schema,
       lint,
@@ -382,7 +410,7 @@ export class CypherEditor extends Component<
           }),
         ]
       : [];
-
+    
     this.editorState.current = EditorState.create({
       extensions: [
         keyBindingCompartment.of(

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],
+          },
+        },
       }}
     />,
   );
@@ -375,7 +410,7 @@ test('shows deprecated procedures as strikethrough on auto-completion', async ({
 
   // We need to assert on the element having the right class
   // and trusting the CSS is making this truly strikethrough
-  await expect(page.locator('.cm-deprecated-completion')).toBeVisible();
+  await expect(page.locator('.cm-deprecated-element')).toBeVisible();
 });
 
 test('shows deprecated function as strikethrough on auto-completion', async ({
@@ -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],
+          },
+        },
       }}
     />,
   );
@@ -399,21 +435,14 @@ test('shows deprecated function as strikethrough on auto-completion', async ({
 
   // We need to assert on the element having the right class
   // and trusting the CSS is making this truly strikethrough
-  await expect(page.locator('.cm-deprecated-completion')).toBeVisible();
+  await expect(page.locator('.cm-deprecated-element')).toBeVisible();
 });
 
 test('does not signature help information on auto-completion if docs and signature are empty', async ({
   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/debounce.spec.tsx

@@ -27,43 +27,48 @@ test.fail(
   },
 );
 
-test('onExecute updates should override debounce updates', async ({
-  mount,
-  page,
-}) => {
-  const editorPage = new CypherEditorPage(page);
-  let value = '';
+// TODO Fix this test
+test.fixme(
+  'onExecute updates should override debounce updates',
+  async ({ mount, page }) => {
+    const editorPage = new CypherEditorPage(page);
+    let value = '';
 
-  const onExecute = () => {
-    value = '';
-    void component.update(
-      <CypherEditor value={value} onChange={onChange} onExecute={onExecute} />,
-    );
-  };
+    const onExecute = () => {
+      value = '';
+      void component.update(
+        <CypherEditor
+          value={value}
+          onChange={onChange}
+          onExecute={onExecute}
+        />,
+      );
+    };
 
-  const onChange = (val: string) => {
-    value = val;
-    void component.update(
-      <CypherEditor value={val} onChange={onChange} onExecute={onExecute} />,
-    );
-  };
+    const onChange = (val: string) => {
+      value = val;
+      void component.update(
+        <CypherEditor value={val} onChange={onChange} onExecute={onExecute} />,
+      );
+    };
 
-  const component = await mount(
-    <CypherEditor value={value} onChange={onChange} onExecute={onExecute} />,
-  );
+    const component = await mount(
+      <CypherEditor value={value} onChange={onChange} onExecute={onExecute} />,
+    );
 
-  await editorPage.getEditor().pressSequentially('RETURN 1');
-  await editorPage.getEditor().press('Enter');
-  await page.waitForTimeout(DEBOUNCE_TIME_WITH_MARGIN);
-  await expect(component).not.toContainText('RETURN 1');
+    await editorPage.getEditor().pressSequentially('RETURN 1');
+    await editorPage.getEditor().press('Enter');
+    await page.waitForTimeout(DEBOUNCE_TIME_WITH_MARGIN);
+    await expect(component).not.toContainText('RETURN 1');
 
-  await editorPage.getEditor().pressSequentially('RETURN 1');
-  await editorPage.getEditor().pressSequentially('');
-  await editorPage.getEditor().pressSequentially('RETURN 1');
-  await editorPage.getEditor().press('Enter');
-  await page.waitForTimeout(DEBOUNCE_TIME_WITH_MARGIN);
-  await expect(component).not.toContainText('RETURN 1');
-});
+    await editorPage.getEditor().pressSequentially('RETURN 1');
+    await editorPage.getEditor().pressSequentially('');
+    await editorPage.getEditor().pressSequentially('RETURN 1');
+    await editorPage.getEditor().press('Enter');
+    await page.waitForTimeout(DEBOUNCE_TIME_WITH_MARGIN);
+    await expect(component).not.toContainText('RETURN 1');
+  },
+);
 
 test('onExecute should fire after debounced updates', async ({
   mount,

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)');
 });