chore(compass-editor, compass-query-bar): replace ace editor with codemirror in query bar (#4150)

* chore(compass-field-store, compass-editor): keep field type as field description in field store for completions

* chore(compass-editor): add inline editor based on codemirror; contain editor reflows; add support for custom commands

* chore(compass-query-bar): replace ace inline editor with codemirror one in query bar

* chore(compass-fields-store): update fields store tests

* chore(compass-editor): adjust autocopmleter styles

* chore(e2e): update tests to expect codemirror instead of ace

* chore(e2e): fix eslint check

* chore(e2e): fix reset button disabled check

* chore(query-bar): do not rely on query state state to disable the button

* chore(e2e): fix flaky run find operation for macos

* chore(compass-editor): insert tab instead of line indent on tab press

* chore(compass-editor): fix 1px height added to the first line when placeholder is shown

* chore(editor): tab size 2

* chore(e2e): reset preferences even if test failed; click apply until click is registered

* chore(e2e): wait for modal to close; always reset maxtimems

Author: gribnoysup

packages/compass-e2e-tests/helpers/commands/click-visible.ts

@@ -26,5 +26,11 @@ export async function clickVisible(
   if (options?.screenshot) {
     await browser.saveScreenshot(options.screenshot);
   }
-  await clickElement.click();
+  if (await clickElement.isEnabled()) {
+    await clickElement.click();
+  } else {
+    throw new Error(
+      `Trying to click ${selector}, but the element is not enabled`
+    );
+  }
 }

packages/compass-e2e-tests/helpers/commands/codemirror.ts

@@ -35,8 +35,8 @@ export async function getCodemirrorEditorTextAll(
 
 export async function setCodemirrorEditorValue(
   browser: CompassBrowser,
-  text: string,
-  selector: string = Selectors.DocumentJSONEntry
+  selector: string,
+  text: string
 ) {
   await browser.execute(
     function (selector, text) {

packages/compass-e2e-tests/helpers/commands/get-query-id.ts

@@ -9,3 +9,9 @@ export async function getQueryId(
   const queryBarSelectorElement = await browser.$(queryBarSelector);
   return queryBarSelectorElement.getAttribute('data-result-id');
 }
+
+export async function getApplyId(browser: CompassBrowser, tabName: string) {
+  const queryBarSelector = Selectors.queryBar(tabName);
+  const queryBarSelectorElement = await browser.$(queryBarSelector);
+  return queryBarSelectorElement.getAttribute('data-apply-id');
+}

packages/compass-e2e-tests/helpers/commands/run-find-operation.ts

@@ -6,7 +6,7 @@ async function setFilter(
   tabName: string,
   value: string
 ) {
-  await browser.setAceValue(
+  await browser.setCodemirrorEditorValue(
     Selectors.queryBarOptionInputFilter(tabName),
     value
   );
@@ -17,7 +17,7 @@ async function setProject(
   tabName: string,
   value: string
 ) {
-  await browser.setAceValue(
+  await browser.setCodemirrorEditorValue(
     Selectors.queryBarOptionInputProject(tabName),
     value
   );
@@ -28,15 +28,18 @@ export async function setSort(
   tabName: string,
   value: string
 ) {
-  await browser.setAceValue(Selectors.queryBarOptionInputSort(tabName), value);
+  await browser.setCodemirrorEditorValue(
+    Selectors.queryBarOptionInputSort(tabName),
+    value
+  );
 }
 
 async function setCollation(
   browser: CompassBrowser,
   tabName: string,
   value: string
 ) {
-  await browser.setAceValue(
+  await browser.setCodemirrorEditorValue(
     Selectors.queryBarOptionInputCollation(tabName),
     value
   );
@@ -102,14 +105,14 @@ async function maybeResetQuery(browser: CompassBrowser, tabName: string) {
     // look up the current resultId
     const initialResultId = await browser.getQueryId(tabName);
 
-    await resetButton.click();
-
-    // wait for the button to become disabled which should happen once it reset
-    // all the filter fields
     await browser.waitUntil(async () => {
+      // In some very rare cases on particularly slow machines in CI (looking at
+      // you macos hosts) clicking doesn't register on the first try, to work
+      // around that, we try to click with pause until the button is disabled
+      await browser.clickVisible(Selectors.queryBarResetFilterButton(tabName));
+      await browser.pause(50);
       return !(await resetButton.isEnabled());
     });
-
     // now we can easily see if we get a new resultId
     // (which we should because resetting re-runs the query)
     await browser.waitUntil(async () => {
@@ -165,6 +168,7 @@ export async function runFindOperation(
     limit = '',
     // TODO(COMPASS-6606): allow for the same in other tabs with query bar
     waitForResult = true,
+    expandOptions: keepOptionsExpanded = false,
   } = {}
 ): Promise<void> {
   if (project || sort || maxTimeMS || collation || skip || limit) {
@@ -180,6 +184,10 @@ export async function runFindOperation(
     await collapseOptions(browser, tabName);
   }
 
+  if (keepOptionsExpanded) {
+    await expandOptions(browser, tabName);
+  }
+
   await setFilter(browser, tabName, filter);
 
   await browser.runFind(tabName, waitForResult);

packages/compass-e2e-tests/helpers/commands/run-find.ts

@@ -6,10 +6,19 @@ export async function runFind(
   tabName: string,
   waitForResult: boolean
 ): Promise<void> {
-  // look up the current resultId
+  // look up the current resultId and applyId
   const initialResultId = await browser.getQueryId(tabName);
+  const initialApplyId = await browser.getApplyId(tabName);
 
-  await browser.clickVisible(Selectors.queryBarApplyFilterButton(tabName));
+  // In some rare cases in ci (for example when clicking button in a query bar
+  // right after closing a modal, clicks are not registering correctly on
+  // certain machine types, in this case we continue clicking until we see that
+  // applyId changed
+  await browser.waitUntil(async () => {
+    await browser.clickVisible(Selectors.queryBarApplyFilterButton(tabName));
+    await browser.pause(50);
+    return (await browser.getApplyId(tabName)) !== initialApplyId;
+  });
 
   if (waitForResult) {
     // now we can easily see if we get a new resultId

packages/compass-e2e-tests/tests/collection-documents-tab.test.ts

@@ -91,6 +91,7 @@ describe('Collection documents tab', function () {
   let compass: Compass;
   let browser: CompassBrowser;
   let telemetry: Telemetry;
+  let maxTimeMSBefore: string;
 
   before(async function () {
     telemetry = await startTelemetryServer();
@@ -102,6 +103,7 @@ describe('Collection documents tab', function () {
     await createNumbersCollection();
     await browser.connectWithConnectionString();
     await browser.navigateToCollectionTab('test', 'numbers', 'Documents');
+    maxTimeMSBefore = (await browser.getFeature('maxTimeMS')) as string;
   });
 
   after(async function () {
@@ -110,6 +112,7 @@ describe('Collection documents tab', function () {
   });
 
   afterEach(async function () {
+    await browser.setFeature('maxTimeMS', maxTimeMSBefore);
     await afterTest(compass, this.currentTest);
   });
 
@@ -220,10 +223,7 @@ describe('Collection documents tab', function () {
 
   for (const maxTimeMSMode of ['ui', 'preference'] as const) {
     it(`supports maxTimeMS (set via ${maxTimeMSMode})`, async function () {
-      let maxTimeMSBefore;
       if (maxTimeMSMode === 'preference') {
-        maxTimeMSBefore = await browser.getFeature('maxTimeMS');
-
         await browser.openSettingsModal();
         const settingsModal = await browser.$(Selectors.SettingsModal);
         await settingsModal.waitForDisplayed();
@@ -234,6 +234,7 @@ describe('Collection documents tab', function () {
           '1'
         );
         await browser.clickVisible(Selectors.SaveSettingsButton);
+        await settingsModal.waitForDisplayed({ reverse: true });
       }
 
       // execute a query that will take a long time, but set a maxTimeMS shorter than that
@@ -255,10 +256,6 @@ describe('Collection documents tab', function () {
       expect(errorText).to.include(
         'Operation exceeded time limit. Please try increasing the maxTimeMS for the query in the expanded filter options.'
       );
-
-      if (maxTimeMSMode === 'preference') {
-        await browser.setFeature('maxTimeMS', maxTimeMSBefore);
-      }
     });
   }
 
@@ -400,8 +397,8 @@ FindIterable<Document> result = collection.find(filter);`);
     const newjson = JSON.stringify({ ...JSON.parse(json), j: 1234 });
 
     await browser.setCodemirrorEditorValue(
-      newjson,
-      Selectors.DocumentJSONEntry
+      Selectors.DocumentJSONEntry,
+      newjson
     );
 
     const footer = await document.$(Selectors.DocumentFooterMessage);
@@ -453,8 +450,8 @@ FindIterable<Document> result = collection.find(filter);`);
     });
 
     await browser.setCodemirrorEditorValue(
-      newjson,
-      Selectors.DocumentJSONEntry
+      Selectors.DocumentJSONEntry,
+      newjson
     );
 
     const footer = await document.$(Selectors.DocumentFooterMessage);
@@ -557,6 +554,7 @@ FindIterable<Document> result = collection.find(filter);`);
     const insertConfirm = await browser.$(Selectors.InsertConfirm);
     await insertConfirm.waitForEnabled();
     await browser.clickVisible(Selectors.InsertConfirm);
+    await insertDialog.waitForDisplayed({ reverse: true });
 
     await browser.runFindOperation('Documents', '{ i: 10042 }');
 

packages/compass-e2e-tests/tests/in-use-encryption.test.ts

@@ -562,8 +562,8 @@ describe('CSFLE / QE', function () {
           phoneNumber: '10101010',
         });
         await browser.setCodemirrorEditorValue(
-          newjson,
-          Selectors.DocumentJSONEntry
+          Selectors.DocumentJSONEntry,
+          newjson
         );
 
         const footer = await document.$(Selectors.DocumentFooterMessage);

packages/compass-e2e-tests/tests/time-to-first-query.test.ts

@@ -1,7 +1,6 @@
 import { expect } from 'chai';
 import { beforeTests, afterTests, afterTest } from '../helpers/compass';
 import type { Compass } from '../helpers/compass';
-import * as Selectors from '../helpers/selectors';
 import { createNumbersCollection } from '../helpers/insert-data';
 
 describe('Time to first query', function () {
@@ -32,23 +31,7 @@ describe('Time to first query', function () {
 
     await browser.navigateToCollectionTab('test', 'numbers', 'Documents');
 
-    // search for the document with id == 42 and wait for just one result to appear
-    const aceCommentElement = await browser.$(
-      '[data-testid="query-bar-option-filter"] .ace_scroller'
-    );
-    await aceCommentElement.click();
-
-    await browser.keys('{ i: 42 }');
-    const filterButtonElement = await browser.$(
-      Selectors.queryBarApplyFilterButton('Documents')
-    );
-    await filterButtonElement.click();
-    await browser.waitUntil(async () => {
-      // we start off with 20 results (assuming no filter) and we expect to
-      // have just one once the filter finishes
-      const result = await browser.$$('.document-list .document');
-      return result.length === 1;
-    });
+    await browser.runFindOperation('Documents', '{ i: 42 }');
 
     const documentElementValue = await browser.$(
       '.document-list .document .element-value-is-int32'
@@ -68,23 +51,7 @@ describe('Time to first query', function () {
 
     await browser.navigateToCollectionTab('test', 'numbers', 'Documents');
 
-    // search for the document with id == 42 and wait for just one result to appear
-    const aceCommentElement = await browser.$(
-      '[data-testid="query-bar-option-filter"] .ace_scroller'
-    );
-    await aceCommentElement.click();
-
-    await browser.keys('{ i: 42 }');
-    const filterButtonElement = await browser.$(
-      Selectors.queryBarApplyFilterButton('Documents')
-    );
-    await filterButtonElement.click();
-    await browser.waitUntil(async () => {
-      // we start off with 20 results (assuming no filter) and we expect to
-      // have just one once the filter finishes
-      const result = await browser.$$('.document-list .document');
-      return result.length === 1;
-    });
+    await browser.runFindOperation('Documents', '{ i: 42 }');
 
     const documentElementValue = await browser.$(
       '.document-list .document .element-value-is-int32'

packages/compass-editor/src/index.ts

@@ -11,8 +11,8 @@ export { InlineEditor } from './inline-editor';
 export { prettify } from './prettify';
 export type { FormatOptions } from './prettify';
 export { Editor } from './multiline-editor';
-export { JSONEditor } from './json-editor';
-export type { EditorView } from './json-editor';
+export { JSONEditor, CodemirrorInlineEditor } from './json-editor';
+export type { EditorView, Command } from './json-editor';
 export { SyntaxHighlight } from './syntax-highlight';
 export { createDocumentAutocompleter } from './codemirror/document-autocompleter';
 export { createValidationAutocompleter } from './codemirror/validation-autocompleter';