chore(compass-editor): validation autocompleter with json COMPASS-6572 (#4157)

Author: mabaasit

packages/compass-editor/src/codemirror/ace-compat-autocompleter.ts

@@ -4,11 +4,11 @@ import type {
   CompletionResult,
   CompletionSource,
 } from '@codemirror/autocomplete';
-import { completeAnyWord, ifIn } from '@codemirror/autocomplete';
 import { snippetCompletion } from '@codemirror/autocomplete';
-import { syntaxTree } from '@codemirror/language';
 import type { CompletionResult as MongoDBCompletionResult } from '../autocompleter';
 import { wrapField } from '../autocompleter';
+import { resolveTokenAtCursor } from './utils';
+import type { Token } from './utils';
 
 export function mapMongoDBCompletionToCodemirrorCompletion(
   completion: MongoDBCompletionResult,
@@ -33,17 +33,11 @@ export function mapMongoDBCompletionToCodemirrorCompletion(
 
 type Prefix = { from: number; to: number; text: string };
 
-export const completeWordsInString = ifIn(['String'], completeAnyWord);
-
 /**
  * Ace autocompleter "valid" identifier regex
  */
 export const ID_REGEX = /[a-zA-Z_0-9$\-\u00A2-\u2000\u2070-\uFFFF]+/;
 
-export function resolveTokenAtCursor(context: CompletionContext) {
-  return syntaxTree(context.state).resolveInner(context.pos, -1);
-}
-
 export function createCompletionResultForIdPrefix({
   prefix,
   completions,
@@ -65,7 +59,7 @@ export function createCompletionResultForIdPrefix({
 
 type AceCompatCompletionSource = (options: {
   prefix: Prefix;
-  token: ReturnType<typeof resolveTokenAtCursor>;
+  token: Token;
   context: CompletionContext;
 }) => ReturnType<CompletionSource>;
 

packages/compass-editor/src/codemirror/document-autocompleter.ts

@@ -1,19 +1,8 @@
-import type {
-  CompletionContext,
-  CompletionSource,
-} from '@codemirror/autocomplete';
-import { syntaxTree } from '@codemirror/language';
-import { completeAnyWord, ifIn } from '@codemirror/autocomplete';
+import type { CompletionSource } from '@codemirror/autocomplete';
 import { completer, wrapField } from '../autocompleter';
 import { languageName } from '../json-editor';
-
-const completeWordsInString = ifIn(['String'], completeAnyWord);
-
-function resolveTokenAtCursor(context: CompletionContext) {
-  return syntaxTree(context.state).resolveInner(context.pos, -1);
-}
-
-type Token = ReturnType<typeof resolveTokenAtCursor>;
+import { resolveTokenAtCursor, completeWordsInString } from './utils';
+import type { Token } from './utils';
 
 function isJSONPropertyName(token: Token): boolean {
   return (

packages/compass-editor/src/codemirror/query-autocompleter.ts

@@ -2,10 +2,10 @@ import type { CompletionSource } from '@codemirror/autocomplete';
 import type { CompleteOptions } from '../autocompleter';
 import { completer } from '../autocompleter';
 import {
-  completeWordsInString,
   createAceCompatAutocompleter,
   createCompletionResultForIdPrefix,
 } from './ace-compat-autocompleter';
+import { completeWordsInString } from './utils';
 
 /**
  * Autocompleter for the document object, only autocompletes field names in the

packages/compass-editor/src/codemirror/stage-autocompleter.ts

@@ -2,10 +2,10 @@ import type { CompletionSource } from '@codemirror/autocomplete';
 import type { CompleteOptions } from '../autocompleter';
 import { completer } from '../autocompleter';
 import {
-  completeWordsInString,
   createAceCompatAutocompleter,
   createCompletionResultForIdPrefix,
 } from './ace-compat-autocompleter';
+import { completeWordsInString } from './utils';
 import { createQueryAutocompleter } from './query-autocompleter';
 
 /**

packages/compass-editor/src/codemirror/utils.test.ts

@@ -0,0 +1,73 @@
+import { expect } from 'chai';
+import { languages } from '../json-editor';
+import { EditorView } from '@codemirror/view';
+import { getAncestryOfToken, resolveTokenAtCursor } from './utils';
+import { CompletionContext } from '@codemirror/autocomplete';
+
+const parseDocument = (_doc = '') => {
+  const pos = _doc.indexOf('${}');
+  const doc = _doc.replace('${}', '');
+  const editor = new EditorView({
+    doc,
+    extensions: [languages.javascript()],
+  });
+  const context = new CompletionContext(editor.state, pos, false);
+  const token = resolveTokenAtCursor(context);
+  return { token, document: context.state.sliceDoc(0) };
+};
+
+describe('codemirror utils', function () {
+  describe('getAncestryOfToken', function () {
+    const useCases = {
+      'simple object': {
+        doc: '{ a: ${} }',
+        expected: ['a'],
+      },
+      'nested object': {
+        doc: '{ "a": { "b": ${} } }',
+        expected: ['a', 'b'],
+      },
+      'nested with array and object': {
+        doc: '{ a: { b: [1, 2, { c: ${} }] } }',
+        expected: ['a', 'b', '[2]', 'c'],
+      },
+      'property in no quotes': {
+        doc: '{ nam${} }',
+        expected: [],
+      },
+      'property in single quotes': {
+        doc: "{ $jsonSchema: { 'nam'${} } }",
+        expected: ['$jsonSchema'],
+      },
+      'property in double quotes': {
+        doc: "{ $jsonSchema: { properties: { 'nam'${} } } }",
+        expected: ['$jsonSchema', 'properties'],
+      },
+      'numeric value as a property name': {
+        doc: '{ name: { address: { 123${} } } }',
+        expected: ['name', 'address'],
+      },
+
+      'boolean value as a property name': {
+        doc: '{ name: { address: { true${} } } }',
+        expected: ['name', 'address'],
+      },
+
+      'value in an object': {
+        doc: '{ name: nam${} }',
+        expected: ['name'],
+      },
+      'string value in an object': {
+        doc: '{ name: "nam"${} }',
+        expected: ['name'],
+      },
+    };
+    for (const [name, { doc, expected }] of Object.entries(useCases)) {
+      it(`get ancestry - ${name}`, function () {
+        const { token, document } = parseDocument(doc);
+        const ancestry = getAncestryOfToken(token, document);
+        expect(ancestry).to.deep.equal(expected);
+      });
+    }
+  });
+});

packages/compass-editor/src/codemirror/utils.ts

@@ -0,0 +1,65 @@
+import { completeAnyWord, ifIn } from '@codemirror/autocomplete';
+import type { CompletionContext } from '@codemirror/autocomplete';
+import { syntaxTree } from '@codemirror/language';
+
+export const completeWordsInString = ifIn(['String'], completeAnyWord);
+
+export function resolveTokenAtCursor(context: CompletionContext) {
+  return syntaxTree(context.state).resolveInner(context.pos - 1);
+}
+
+export type Token = ReturnType<typeof resolveTokenAtCursor>;
+
+/**
+ * Returns the list of possible ancestors of the token.
+ */
+const getAncestorList = (
+  node: Token | undefined | null,
+  doc: string
+): string[] => {
+  const ancestors: string[] = [];
+
+  if (!node?.parent) {
+    return ancestors;
+  }
+
+  // In order to find the index of an node in an array, we have to check for the parent.
+  // And then use siblings to find the index. We can't use the node.parent as it does not
+  // contain all the childern and reference to the current node.
+  if (['ArrayExpression', 'Array'].includes(node.parent.name)) {
+    let prevSibling = node.prevSibling;
+    let index = 0;
+    while (prevSibling) {
+      if (![':', ',', '['].includes(prevSibling.name)) {
+        index++;
+      }
+      prevSibling = prevSibling.prevSibling;
+    }
+    ancestors.push(`[${index}]`);
+  }
+  if (node.name === 'Property' && node.firstChild) {
+    const { from, to } = node.firstChild;
+    const ancestor = doc.slice(from, to).replace(/"/g, '').replace(/'/g, '');
+    ancestors.push(ancestor);
+  }
+  return ancestors.concat(getAncestorList(node.parent, doc));
+};
+
+/**
+ * Walks the syntax tree from the token and returns a list
+ * of all the ancestors of the token. The array indexes are
+ * represented as `[0-9]`.
+ */
+export function getAncestryOfToken(token: Token, document: string): string[] {
+  // If we are at the property name, we ignore it to correctly
+  // find the parent.
+  const isAutocompletingPropertyName =
+    ['ObjectExpression', 'PropertyDefinition'].includes(token.name) ||
+    (token.parent?.parent?.name === 'ObjectExpression' && !token.prevSibling);
+  // We reverse the list as we want to start from the root.
+  const list = getAncestorList(
+    isAutocompletingPropertyName ? token.parent?.parent : token,
+    document
+  ).reverse();
+  return list;
+}

packages/compass-editor/src/codemirror/validation-autocompleter.test.ts

@@ -0,0 +1,53 @@
+import { expect } from 'chai';
+import { createValidationAutocompleter } from './validation-autocompleter';
+import { setupCodemirrorCompleter } from '../../test/completer';
+
+describe('validation autocompleter', function () {
+  const { getCompletions, cleanup } = setupCodemirrorCompleter(
+    createValidationAutocompleter
+  );
+
+  after(cleanup);
+
+  it('returns $jsonSchema by default', function () {
+    const completions = getCompletions('');
+    expect(completions.map((x) => x.label)).to.deep.equal(['$jsonSchema']);
+  });
+
+  it('returns query operators when completing at root', function () {
+    const completions = getCompletions('{ $');
+    expect(completions).to.have.lengthOf(33);
+  });
+
+  it('returns field names when autocompleting required', function () {
+    const completions = getCompletions('{ $jsonSchema: { required: ["i', {
+      fields: ['_id', 'name', 'age'],
+    });
+    expect(completions.map((x) => x.label)).to.deep.equal([
+      '_id',
+      'name',
+      'age',
+    ]);
+  });
+
+  it('returns bson type when autocompleting bsonType as a string', function () {
+    const completions = getCompletions('{ $jsonSchema: { bsonType: "a');
+    expect(completions).to.have.lengthOf(19);
+  });
+
+  it('returns bson type when autocompleting bsonType as a array', function () {
+    const completions = getCompletions('{ $jsonSchema: { bsonType: ["a');
+    expect(completions).to.have.lengthOf(19);
+  });
+
+  it('returns field names when autocompleting properties', function () {
+    const completions = getCompletions('{ $jsonSchema: { properties: { "a', {
+      fields: ['_id', 'name', 'age'],
+    });
+    expect(completions.map((x) => x.label)).to.deep.equal([
+      '_id',
+      'name',
+      'age',
+    ]);
+  });
+});