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

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/performanceTest.spec.tsx

@@ -10,7 +10,12 @@ declare global {
   }
 }
 
-test('benchmarking & performance test session', async ({ mount, page }) => {
+test('benchmarking & performance test session', async ({
+  browserName,
+  mount,
+  page,
+}) => {
+  test.skip(browserName !== 'chromium');
   const client = await page.context().newCDPSession(page);
   if (process.env.BENCHMARKING === 'true') {
     test.setTimeout(1000000);

package/src/e2e_tests/syntaxHighlighting.spec.tsx

@@ -21,7 +21,9 @@ RETURN variable;`;
     ),
   );
   keywordcolors.every((kw) =>
-    expect(kw).toEqual(lightThemeConstants.highlightStyles.keyword),
+    expect(kw).toEqual(
+      lightThemeConstants.highlightStyles.keyword.toLowerCase(),
+    ),
   );
 
   const labelReltype = await Promise.all(
@@ -30,34 +32,34 @@ RETURN variable;`;
     ),
   );
   labelReltype.every((kw) =>
-    expect(kw).toEqual(lightThemeConstants.highlightStyles.label),
+    expect(kw).toEqual(lightThemeConstants.highlightStyles.label.toLowerCase()),
   );
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('parameter')),
-  ).toEqual(lightThemeConstants.highlightStyles.paramValue);
+  ).toEqual(lightThemeConstants.highlightStyles.paramValue.toLowerCase());
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('property')),
-  ).toEqual(lightThemeConstants.highlightStyles.property);
+  ).toEqual(lightThemeConstants.highlightStyles.property.toLowerCase());
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('false')),
-  ).toEqual(lightThemeConstants.highlightStyles.booleanLiteral);
+  ).toEqual(lightThemeConstants.highlightStyles.booleanLiteral.toLowerCase());
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('String')),
-  ).toEqual(lightThemeConstants.highlightStyles.stringLiteral);
+  ).toEqual(lightThemeConstants.highlightStyles.stringLiteral.toLowerCase());
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('comment')),
-  ).toEqual(lightThemeConstants.highlightStyles.comment);
+  ).toEqual(lightThemeConstants.highlightStyles.comment.toLowerCase());
 
   expect(
     await editorPage.getHexColorOfLocator(
       page.getByText('1234', { exact: true }),
     ),
-  ).toEqual(lightThemeConstants.highlightStyles.numberLiteral);
+  ).toEqual(lightThemeConstants.highlightStyles.numberLiteral.toLowerCase());
 
   expect(await editorPage.editorBackgroundIsUnset()).toEqual(false);
 });
@@ -80,7 +82,9 @@ RETURN variable;`;
     ),
   );
   keywordcolors.every((kw) =>
-    expect(kw).toEqual(darkThemeConstants.highlightStyles.keyword),
+    expect(kw).toEqual(
+      darkThemeConstants.highlightStyles.keyword.toLowerCase(),
+    ),
   );
 
   const labelReltype = await Promise.all(
@@ -89,34 +93,34 @@ RETURN variable;`;
     ),
   );
   labelReltype.every((kw) =>
-    expect(kw).toEqual(darkThemeConstants.highlightStyles.label),
+    expect(kw).toEqual(darkThemeConstants.highlightStyles.label.toLowerCase()),
   );
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('parameter')),
-  ).toEqual(darkThemeConstants.highlightStyles.paramValue);
+  ).toEqual(darkThemeConstants.highlightStyles.paramValue.toLowerCase());
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('property')),
-  ).toEqual(darkThemeConstants.highlightStyles.property);
+  ).toEqual(darkThemeConstants.highlightStyles.property.toLowerCase());
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('false')),
-  ).toEqual(darkThemeConstants.highlightStyles.booleanLiteral);
+  ).toEqual(darkThemeConstants.highlightStyles.booleanLiteral.toLowerCase());
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('String')),
-  ).toEqual(darkThemeConstants.highlightStyles.stringLiteral);
+  ).toEqual(darkThemeConstants.highlightStyles.stringLiteral.toLowerCase());
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('comment')),
-  ).toEqual(darkThemeConstants.highlightStyles.comment);
+  ).toEqual(darkThemeConstants.highlightStyles.comment.toLowerCase());
 
   expect(
     await editorPage.getHexColorOfLocator(
       page.getByText('1234', { exact: true }),
     ),
-  ).toEqual(darkThemeConstants.highlightStyles.numberLiteral);
+  ).toEqual(darkThemeConstants.highlightStyles.numberLiteral.toLowerCase());
 
   expect(await editorPage.editorBackgroundIsUnset()).toEqual(false);
 });
@@ -129,7 +133,7 @@ test('can live switch theme ', async ({ page, mount }) => {
     await editorPage.getHexColorOfLocator(
       page.getByText('RETURN', { exact: true }),
     ),
-  ).toEqual(lightThemeConstants.highlightStyles.keyword);
+  ).toEqual(lightThemeConstants.highlightStyles.keyword.toLowerCase());
 
   await component.update(<CypherEditor theme="dark" value="RETURN" />);
 
@@ -137,7 +141,7 @@ test('can live switch theme ', async ({ page, mount }) => {
     await editorPage.getHexColorOfLocator(
       page.getByText('RETURN', { exact: true }),
     ),
-  ).toEqual(darkThemeConstants.highlightStyles.keyword);
+  ).toEqual(darkThemeConstants.highlightStyles.keyword.toLowerCase());
 });
 
 test('respects prop to allow overriding bkg color', async ({ page, mount }) => {
@@ -162,7 +166,7 @@ multilinestring";`;
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('multilinestring')),
-  ).toEqual(lightThemeConstants.highlightStyles.stringLiteral);
+  ).toEqual(lightThemeConstants.highlightStyles.stringLiteral.toLowerCase());
 });
 
 test('highlights multiline label correctly', async ({ page, mount }) => {
@@ -177,7 +181,7 @@ Label\`)
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('Label')),
-  ).toEqual(lightThemeConstants.highlightStyles.label);
+  ).toEqual(lightThemeConstants.highlightStyles.label.toLowerCase());
 });
 
 test('highlights multiline comment correctly', async ({ page, mount }) => {
@@ -192,5 +196,5 @@ comment
 
   expect(
     await editorPage.getHexColorOfLocator(page.getByText('comment')),
-  ).toEqual(lightThemeConstants.highlightStyles.comment);
+  ).toEqual(lightThemeConstants.highlightStyles.comment.toLowerCase());
 });

package/src/e2e_tests/syntaxValidation.spec.tsx

@@ -1,3 +1,4 @@
+import { testData } from '@neo4j-cypher/language-support';
 import { expect, test } from '@playwright/experimental-ct-react';
 import { CypherEditor } from '../CypherEditor';
 import { CypherEditorPage } from './e2eUtils';
@@ -86,6 +87,20 @@ test('Errors for multiline undefined labels are highlighted correctly', async ({
   await editorPage.checkWarningMessage('Bar`', expectedMsg);
 });
 
+test('Semantic errors work in firefox', async ({
+  browserName,
+  page,
+  mount,
+}) => {
+  test.skip(browserName !== 'firefox');
+  const editorPage = new CypherEditorPage(page);
+  const query = 'MATCH (n:OperationalPoint)--(m:OperationalPoint) RETURN s,m,n';
+
+  await mount(<CypherEditor value={query} schema={testData.mockSchema} />);
+
+  await editorPage.checkErrorMessage('s,m,n', 'Variable `s` not defined');
+});
+
 test('Semantic errors are surfaced when there are no syntactic errors', async ({
   page,
   mount,
@@ -154,3 +169,34 @@ test('Validation errors are correctly overlapped', async ({ page, mount }) => {
     "Invalid input. '-1' is not a valid value. Must be a positive integer",
   );
 });
+
+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.",
+  );
+
+});
+
+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 editorPage.checkWarningMessage(
+    'apoc.create.uuids',
+    "Procedure apoc.create.uuids is deprecated.",
+  );
+
+});

package/src/lang-cypher/autocomplete.ts

@@ -49,7 +49,7 @@ export const completionStyles: (
   completion: Completion & { deprecated?: boolean },
 ) => string = (completion) => {
   if (completion.deprecated) {
-    return 'cm-deprecated-completion';
+    return 'cm-deprecated-element';
   } else {
     return null;
   }

package/src/lang-cypher/constants.ts

@@ -40,6 +40,8 @@ export const cypherTokenTypeToNode = (facet: Facet<unknown>) => ({
   relationship: NodeType.define({ id: 26, name: 'label' }),
   boolean: NodeType.define({ id: 27, name: 'booleanLiteral' }),
   number: NodeType.define({ id: 28, name: 'numberLiteral' }),
+  setting: NodeType.define({ id: 29, name: 'setting' }),
+  settingValue: NodeType.define({ id: 30, name: 'settingValue' }),
 });
 
 export type PrismSpecificTokenType =
@@ -78,6 +80,8 @@ export const tokenTypeToStyleTag: Record<HighlightedCypherTokenTypes, Tag> = {
   punctuation: tags.punctuation,
   separator: tags.separator,
   consoleCommand: tags.macroName,
+  setting: tags.attributeName,
+  settingValue: tags.attributeValue,
 };
 
 export const parserAdapterNodeSet = (nodes: Record<string, NodeType>) =>

package/src/lang-cypher/createCypherTheme.ts

@@ -130,7 +130,7 @@ export const createCypherTheme = ({
     '.cm-completionInfo-signature': {
       color: 'darkgrey',
     },
-    '.cm-deprecated-completion': {
+    '.cm-deprecated-element': {
       'text-decoration': 'line-through',
     },
     '.cm-tooltip-autocomplete': {

package/src/lang-cypher/syntaxValidation.ts

@@ -1,7 +1,7 @@
 import { Diagnostic, linter } from '@codemirror/lint';
 import { Extension } from '@codemirror/state';
 import { parserWrapper, validateSyntax } from '@neo4j-cypher/language-support';
-import { DiagnosticSeverity } from 'vscode-languageserver-types';
+import { DiagnosticSeverity, DiagnosticTag } from 'vscode-languageserver-types';
 import workerpool from 'workerpool';
 import type { CypherConfig } from './langCypher';
 import type { LinterTask, LintWorker } from './lintWorker';
@@ -74,15 +74,22 @@ export const semanticAnalysisLinter: (config: CypherConfig) => Extension = (
       );
       const result = await lastSemanticJob;
 
-      return result.map((diag) => {
+      const a: Diagnostic[] = result.map((diagnostic) => {
         return {
-          from: diag.offsets.start,
-          to: diag.offsets.end,
+          from: diagnostic.offsets.start,
+          to: diagnostic.offsets.end,
           severity:
-            diag.severity === DiagnosticSeverity.Error ? 'error' : 'warning',
-          message: diag.message,
+            diagnostic.severity === DiagnosticSeverity.Error
+              ? 'error'
+              : 'warning',
+          message: diagnostic.message,
+          ...(diagnostic.tags !== undefined &&
+          diagnostic.tags.includes(DiagnosticTag.Deprecated)
+            ? { markClass: 'cm-deprecated-element' }
+            : {}),
         };
       });
+      return a;
     } catch (err) {
       if (!(err instanceof workerpool.Promise.CancellationError)) {
         console.error(String(err) + ' ' + query);