@neo4j-cypher/react-codemirror 2.0.0-alpha.0 → 2.0.0-canary-e8a1279

package/src/e2e_tests/syntaxValidation.spec.tsx

@@ -0,0 +1,156 @@
+import { expect, test } from '@playwright/experimental-ct-react';
+import { CypherEditor } from '../CypherEditor';
+import { CypherEditorPage } from './e2eUtils';
+
+test.use({ viewport: { width: 1000, height: 500 } });
+test('Prop lint set to false disables syntax validation', async ({
+  page,
+  mount,
+}) => {
+  const query = 'METCH (n) RETURN n';
+
+  await mount(<CypherEditor value={query} lint={false} />);
+
+  await expect(page.locator('.cm-lintRange-error').last()).not.toBeVisible({
+    timeout: 2000,
+  });
+});
+
+test('Can turn linting back on', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = 'METCH (n) RETURN n';
+
+  const component = await mount(<CypherEditor value={query} lint={false} />);
+
+  await expect(page.locator('.cm-lintRange-error').last()).not.toBeVisible({
+    timeout: 2000,
+  });
+
+  await component.update(<CypherEditor value={query} lint={true} />);
+
+  await editorPage.getEditor().fill('METCH (n) RETURN n');
+
+  await editorPage.checkErrorMessage(
+    'METCH',
+    'Unrecognized keyword. Did you mean MATCH?',
+  );
+});
+
+test('Syntactic errors are surfaced', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = 'METCH (n) RETURN n';
+
+  await mount(<CypherEditor value={query} />);
+
+  await editorPage.checkErrorMessage(
+    'METCH',
+    'Unrecognized keyword. Did you mean MATCH?',
+  );
+});
+
+test('Errors for undefined labels are surfaced', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = 'MATCH (n: Person) RETURN n';
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={{ labels: ['Movie'], relationshipTypes: [] }}
+    />,
+  );
+
+  await editorPage.checkWarningMessage(
+    'Person',
+    "Label Person is not present in the database. Make sure you didn't misspell it or that it is available when you run this statement in your application",
+  );
+});
+
+test('Errors for multiline undefined labels are highlighted correctly', async ({
+  page,
+  mount,
+}) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = `MATCH (n:\`Foo
+    Bar\`) RETURN n`;
+  const expectedMsg = `Label \`Foo
+    Bar\` is not present in the database. Make sure you didn't misspell it or that it is available when you run this statement in your application`;
+
+  await mount(
+    <CypherEditor
+      value={query}
+      schema={{ labels: ['Movie'], relationshipTypes: [] }}
+    />,
+  );
+
+  await editorPage.checkWarningMessage('`Foo', expectedMsg);
+  await editorPage.checkWarningMessage('Bar`', expectedMsg);
+});
+
+test('Semantic errors are surfaced when there are no syntactic errors', async ({
+  page,
+  mount,
+}) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = 'MATCH (n) RETURN m';
+
+  await mount(<CypherEditor value={query} />);
+
+  await editorPage.checkErrorMessage('m', 'Variable `m` not defined');
+});
+
+test('Semantic errors are correctly accumulated', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = 'CALL { MATCH (n) } IN TRANSACTIONS OF -1 ROWS';
+
+  await mount(<CypherEditor value={query} />);
+
+  await editorPage.checkErrorMessage(
+    'MATCH (n)',
+    'Query cannot conclude with MATCH (must be a RETURN clause, a FINISH clause, an update clause, a unit subquery call, or a procedure call with no YIELD).',
+  );
+
+  await editorPage.checkErrorMessage(
+    '-1',
+    "Invalid input. '-1' is not a valid value. Must be a positive integer",
+  );
+});
+
+test('Multiline errors are correctly placed', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = `CALL { 
+    MATCH (n) 
+  } IN TRANSACTIONS 
+  OF -1 ROWS`;
+
+  await mount(<CypherEditor value={query} />);
+
+  await editorPage.checkErrorMessage(
+    'MATCH (n)',
+    'Query cannot conclude with MATCH (must be a RETURN clause, a FINISH clause, an update clause, a unit subquery call, or a procedure call with no YIELD)',
+  );
+
+  await editorPage.checkErrorMessage(
+    '-1',
+    "Invalid input. '-1' is not a valid value. Must be a positive integer",
+  );
+});
+
+test('Validation errors are correctly overlapped', async ({ page, mount }) => {
+  const editorPage = new CypherEditorPage(page);
+  const query = `CALL { MATCH (n)
+    RETURN n
+  } IN TRANSACTIONS 
+  OF -1 ROWS`;
+
+  await mount(<CypherEditor value={query} />);
+
+  await editorPage.checkErrorMessage(
+    '-1',
+    'Query cannot conclude with CALL (must be a RETURN clause, a FINISH clause, an update clause, a unit subquery call, or a procedure call with no YIELD).',
+  );
+
+  await editorPage.checkErrorMessage(
+    '-1',
+    "Invalid input. '-1' is not a valid value. Must be a positive integer",
+  );
+});

package/src/historyNavigation.ts

@@ -0,0 +1,191 @@
+import { Extension, StateEffect } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
+
+import { StateField } from '@codemirror/state';
+
+type HistoryState = {
+  history: string[];
+  index: number;
+  draft: string;
+  documentUpdate: string | null;
+};
+const DRAFT_ENTRY_INDEX = -1;
+const historyInitialState = {
+  history: [],
+  index: DRAFT_ENTRY_INDEX,
+  documentUpdate: null,
+  draft: '',
+};
+
+const historyState = StateField.define<HistoryState>({
+  create() {
+    return historyInitialState;
+  },
+  toJSON(value) {
+    return JSON.stringify(value);
+  },
+  update(value, transaction) {
+    for (const effect of transaction.effects) {
+      if (effect.is(moveInHistory)) {
+        if (value.history.length === 0) {
+          return {
+            ...value,
+            documentUpdate: null,
+          };
+        }
+
+        const currentHistoryIndex = value.index;
+        if (effect.value === 'BACK') {
+          const newHistoryIndex = currentHistoryIndex + 1;
+
+          if (newHistoryIndex === value.history.length) {
+            return {
+              ...value,
+              documentUpdate: null,
+            };
+          }
+
+          let draft = value.draft;
+          if (currentHistoryIndex === DRAFT_ENTRY_INDEX) {
+            draft = transaction.state.doc.toString();
+          }
+
+          return {
+            ...value,
+            draft,
+            index: newHistoryIndex,
+            documentUpdate: value.history[newHistoryIndex],
+          };
+        } else if (effect.value === 'FORWARDS') {
+          const newHistoryIndex = currentHistoryIndex - 1;
+
+          if (currentHistoryIndex === DRAFT_ENTRY_INDEX) {
+            return { ...value, documentUpdate: null };
+          }
+
+          if (newHistoryIndex === DRAFT_ENTRY_INDEX) {
+            return {
+              ...value,
+              index: newHistoryIndex,
+              documentUpdate: value.draft,
+            };
+          } else {
+            return {
+              ...value,
+              index: newHistoryIndex,
+              documentUpdate: value.history[newHistoryIndex],
+            };
+          }
+        }
+      } else if (effect.is(replaceHistory)) {
+        return {
+          ...value,
+          index: DRAFT_ENTRY_INDEX,
+          history: effect.value,
+        };
+      }
+    }
+    return value;
+  },
+});
+
+type HistoryNavigation = 'BACK' | 'FORWARDS';
+const moveInHistory = StateEffect.define<HistoryNavigation>();
+export const replaceHistory = StateEffect.define<string[]>();
+
+function navigateHistory(view: EditorView, direction: HistoryNavigation) {
+  view.dispatch(
+    view.state.update({
+      effects: moveInHistory.of(direction),
+      selection: { anchor: view.state.doc.length },
+    }),
+  );
+
+  const updatedHistory = view.state.field<HistoryState>(historyState, false);
+  if (updatedHistory.documentUpdate !== null) {
+    view.dispatch(
+      view.state.update({
+        changes: {
+          from: 0,
+          to: view.state.doc.length,
+          insert: updatedHistory.documentUpdate,
+        },
+      }),
+    );
+  }
+}
+
+type ReplProps = {
+  history?: string[];
+};
+
+export const replMode = ({ history }: ReplProps): Extension[] => {
+  return [
+    historyState.init(() => ({
+      ...historyInitialState,
+      history,
+    })),
+    keymap.of([
+      {
+        key: 'ArrowUp',
+        preventDefault: true,
+        run: (view) => {
+          // If text is selected or cursor is not at top of document, do nothing
+          const { empty, head } = view.state.selection.main;
+          if (!empty || head !== 0) {
+            return false;
+          }
+
+          navigateHistory(view, 'BACK');
+          return true;
+        },
+      },
+      {
+        mac: 'Cmd-ArrowUp',
+        win: 'Ctrl-ArrowUp',
+        linux: 'Ctrl-ArrowUp',
+        preventDefault: true,
+        run: (view) => {
+          // If text is selected or cursor is not at top of document, do nothing
+          const { empty, head } = view.state.selection.main;
+          if (!empty || head !== 0) {
+            return false;
+          }
+
+          navigateHistory(view, 'BACK');
+          return true;
+        },
+      },
+      {
+        key: 'ArrowDown',
+        preventDefault: true,
+        run: (view) => {
+          const { empty, head } = view.state.selection.main;
+          // If text is selected or cursor is not at end of document, do nothing
+          if (!empty || head !== view.state.doc.length) {
+            return false;
+          }
+          navigateHistory(view, 'FORWARDS');
+
+          return true;
+        },
+      },
+      {
+        mac: 'Cmd-ArrowDown',
+        win: 'Ctrl-ArrowDown',
+        linux: 'Ctrl-ArrowDown',
+        preventDefault: true,
+        run: (view) => {
+          const { empty, head } = view.state.selection.main;
+          // If text is selected or cursor is not at end of document, do nothing
+          if (!empty || head !== view.state.doc.length) {
+            return false;
+          }
+          navigateHistory(view, 'FORWARDS');
+
+          return true;
+        },
+      },
+    ]),
+  ];
+};