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

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';
@@ -169,3 +181,63 @@ 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: 10000 });
+  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: 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/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,
@@ -49,7 +52,7 @@ export const completionStyles: (
   completion: Completion & { deprecated?: boolean },
 ) => string = (completion) => {
   if (completion.deprecated) {
-    return 'cm-deprecated-completion';
+    return 'cm-deprecated-element';
   } else {
     return null;
   }
@@ -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/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/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),
   ]);
 }

package/src/lang-cypher/lintWorker.ts

@@ -1,14 +1,31 @@
-import { validateSemantics } from '@neo4j-cypher/language-support';
+import {
+  DbSchema,
+  lintCypherQuery as _lintCypherQuery,
+  _internalFeatureFlags,
+} from '@neo4j-cypher/language-support';
 import workerpool from 'workerpool';
 
-workerpool.worker({ validateSemantics });
+function lintCypherQuery(
+  query: string,
+  dbSchema: DbSchema,
+  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);
+}
 
-type LinterArgs = Parameters<typeof validateSemantics>;
+workerpool.worker({ lintCypherQuery });
 
-export type LinterTask = workerpool.Promise<
-  ReturnType<typeof validateSemantics>
->;
+type LinterArgs = Parameters<typeof lintCypherQuery>;
+
+export type LinterTask = workerpool.Promise<ReturnType<typeof lintCypherQuery>>;
 
 export type LintWorker = {
-  validateSemantics: (...args: LinterArgs) => LinterTask;
+  lintCypherQuery: (...args: LinterArgs) => LinterTask;
 };

package/src/lang-cypher/syntaxValidation.ts

@@ -1,7 +1,6 @@
 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';
@@ -16,73 +15,44 @@ const pool = workerpool.pool(WorkerURL, {
 let lastSemanticJob: LinterTask | undefined;
 
 export const cypherLinter: (config: CypherConfig) => Extension = (config) =>
-  linter((view) => {
-    if (!config.lint) {
-      return [];
-    }
-
-    const query = view.state.doc.toString();
-    const syntaxErrors = validateSyntax(query, config.schema ?? {});
-
-    return syntaxErrors.map(
-      (diagnostic): Diagnostic => ({
-        from: diagnostic.offsets.start,
-        to: diagnostic.offsets.end,
-        severity:
-          diagnostic.severity === DiagnosticSeverity.Error
-            ? 'error'
-            : 'warning',
-        message: diagnostic.message,
-      }),
-    );
-  });
-
-export const semanticAnalysisLinter: (config: CypherConfig) => Extension = (
-  config,
-) =>
   linter(async (view) => {
     if (!config.lint) {
       return [];
     }
-
     const query = view.state.doc.toString();
     if (query.length === 0) {
       return [];
     }
 
-    // we want to avoid the ANTLR4 reparse in the worker thread, this should hit our main thread cache
-    const parse = parserWrapper.parse(query);
-    const statements = parse.statementsParsing;
-
-    const anySyntacticError = statements.some(
-      (statement) => statement.syntaxErrors.length !== 0,
-    );
-
-    if (anySyntacticError) {
-      return [];
-    }
-
     try {
       if (lastSemanticJob !== undefined && !lastSemanticJob.resolved) {
         void lastSemanticJob.cancel();
       }
 
       const proxyWorker = (await pool.proxy()) as unknown as LintWorker;
-      lastSemanticJob = proxyWorker.validateSemantics(
+      lastSemanticJob = proxyWorker.lintCypherQuery(
         query,
         config.schema ?? {},
+        config.featureFlags ?? {},
       );
       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);