feat(query-bar): autoinsert empty document for all fields in the quer…

…y bar (#5135) * feat(query-bar): autofix query in all editor inputs in query bar * fix(editor): fix bracket keymap order; rename json-editor to editor * chore(query-bar): rename prop
mongodb-js · Nov 20, 2023 · cf521a9 · cf521a9
1 parent 23d5a33
commit cf521a9
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 22 deletions.
diff --git a/packages/compass-editor/src/codemirror/document-autocompleter.ts b/packages/compass-editor/src/codemirror/document-autocompleter.ts
@@ -1,6 +1,6 @@
 import type { CompletionSource } from '@codemirror/autocomplete';
 import { completer, wrapField } from '../autocompleter';
-import { languageName } from '../json-editor';
+import { languageName } from '../editor';
 import { resolveTokenAtCursor, completeWordsInString } from './utils';
 import type { Token } from './utils';
 

diff --git a/packages/compass-editor/src/codemirror/utils.test.ts b/packages/compass-editor/src/codemirror/utils.test.ts
@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import { languages } from '../json-editor';
+import { languages } from '../editor';
 import { EditorView } from '@codemirror/view';
 import { getAncestryOfToken, resolveTokenAtCursor } from './utils';
 import { CompletionContext } from '@codemirror/autocomplete';

diff --git a/packages/compass-editor/src/json-editor.tsx → packages/compass-editor/src/editor.tsx b/packages/compass-editor/src/json-editor.tsx → packages/compass-editor/src/editor.tsx
@@ -877,8 +877,10 @@ const BaseEditor = React.forwardRef<EditorRef, EditorProps>(function BaseEditor(
             key: 'Ctrl-Shift-c',
             run: copyAll,
           },
-          ...defaultKeymap,
+          // Close brackets keymap overrides default backspace handler for
+          // matching bracket case
           ...closeBracketsKeymap,
+          ...defaultKeymap,
           ...historyKeymap,
           ...foldKeymap,
           ...completionKeymap,

diff --git a/packages/compass-editor/src/index.ts b/packages/compass-editor/src/index.ts
@@ -6,15 +6,15 @@ export {
   CodemirrorMultilineEditor,
   setCodemirrorEditorValue,
   getCodemirrorEditorValue,
-} from './json-editor';
+} from './editor';
 export type {
   EditorView,
   Command,
   Annotation,
   Action,
   EditorRef,
   Completer,
-} from './json-editor';
+} from './editor';
 export { createDocumentAutocompleter } from './codemirror/document-autocompleter';
 export { createValidationAutocompleter } from './codemirror/validation-autocompleter';
 export { createQueryAutocompleter } from './codemirror/query-autocompleter';

diff --git a/packages/compass-editor/test/completer.ts b/packages/compass-editor/test/completer.ts
@@ -5,19 +5,23 @@ import type {
   CompletionResult,
 } from '@codemirror/autocomplete';
 import { CompletionContext } from '@codemirror/autocomplete';
-import { languages } from '../src/json-editor';
+import { languages } from '../src/editor';
 
 export const setupCodemirrorCompleter = <
   T extends (...args: any[]) => CompletionSource
 >(
   completer: T
 ) => {
-  const el = window.document.createElement('div');
-  window.document.body.appendChild(el);
-  const editor = new EditorView({
-    doc: '',
-    extensions: [languages['javascript-expression']()],
-    parent: el,
+  let el: HTMLDivElement;
+  let editor: EditorView;
+  before(function () {
+    el = window.document.createElement('div');
+    window.document.body.appendChild(el);
+    editor = new EditorView({
+      doc: '',
+      extensions: [languages['javascript-expression']()],
+      parent: el,
+    });
   });
   const getCompletions = (text = '', ...args: Parameters<T>) => {
     editor.dispatch({

diff --git a/packages/compass-query-bar/src/components/option-editor.spec.tsx b/packages/compass-query-bar/src/components/option-editor.spec.tsx
@@ -30,7 +30,11 @@ describe('OptionEditor', function () {
   describe('with autofix enabled', function () {
     it('fills the input with an empty object "{}" when empty on focus', async function () {
       render(
-        <OptionEditor hasAutofix onChange={() => {}} value=""></OptionEditor>
+        <OptionEditor
+          insertEmptyDocOnFocus
+          onChange={() => {}}
+          value=""
+        ></OptionEditor>
       );
 
       expect(screen.getByRole('textbox').textContent).to.eq('');
@@ -45,7 +49,7 @@ describe('OptionEditor', function () {
     it('does not change input value when empty on focus', async function () {
       render(
         <OptionEditor
-          hasAutofix
+          insertEmptyDocOnFocus
           onChange={() => {}}
           value="{ foo: 1 }"
         ></OptionEditor>
@@ -62,7 +66,11 @@ describe('OptionEditor', function () {
 
     it('should adjust pasted query if pasting over empty brackets with the cursor in the middle', async function () {
       render(
-        <OptionEditor hasAutofix onChange={() => {}} value=""></OptionEditor>
+        <OptionEditor
+          insertEmptyDocOnFocus
+          onChange={() => {}}
+          value=""
+        ></OptionEditor>
       );
 
       userEvent.tab();
@@ -82,7 +90,11 @@ describe('OptionEditor', function () {
 
     it('should not modify user text whe pasting when cursor moved', async function () {
       render(
-        <OptionEditor hasAutofix onChange={() => {}} value=""></OptionEditor>
+        <OptionEditor
+          insertEmptyDocOnFocus
+          onChange={() => {}}
+          value=""
+        ></OptionEditor>
       );
 
       userEvent.tab();
@@ -104,7 +116,11 @@ describe('OptionEditor', function () {
 
     it('should not modify user text when pasting in empty input', async function () {
       render(
-        <OptionEditor hasAutofix onChange={() => {}} value=""></OptionEditor>
+        <OptionEditor
+          insertEmptyDocOnFocus
+          onChange={() => {}}
+          value=""
+        ></OptionEditor>
       );
 
       userEvent.tab();

diff --git a/packages/compass-query-bar/src/components/option-editor.tsx b/packages/compass-query-bar/src/components/option-editor.tsx
@@ -82,7 +82,11 @@ const insightsBadgeStyles = css({
 type OptionEditorProps = {
   id?: string;
   hasError?: boolean;
-  hasAutofix?: boolean;
+  /**
+   * When `true` will insert an empty document in the input on focus and put
+   * cursor in the middle of the inserted string. Default is `true`
+   */
+  insertEmptyDocOnFocus?: boolean;
   onChange: (value: string) => void;
   onApply?(): void;
   onBlur?(): void;
@@ -97,7 +101,7 @@ type OptionEditorProps = {
 export const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
   id,
   hasError = false,
-  hasAutofix = false,
+  insertEmptyDocOnFocus = true,
   onChange,
   onApply,
   onBlur,
@@ -150,7 +154,7 @@ export const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
   }, [schemaFields, serverVersion]);
 
   const onFocus = () => {
-    if (hasAutofix) {
+    if (insertEmptyDocOnFocus) {
       rafraf(() => {
         if (editorRef.current?.editorContents === '') {
           editorRef.current?.applySnippet('\\{${}}');
@@ -160,7 +164,7 @@ export const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
   };
 
   const onPaste = (event: React.ClipboardEvent<HTMLDivElement>) => {
-    if (hasAutofix && editorRef.current) {
+    if (insertEmptyDocOnFocus && editorRef.current) {
       const { main: currentSelection } =
         editorRef.current.editor?.state.selection ?? {};
       const currentContents = editorRef.current.editorContents;

diff --git a/packages/compass-query-bar/src/components/query-option.tsx b/packages/compass-query-bar/src/components/query-option.tsx
@@ -191,7 +191,6 @@ const QueryOption: React.FunctionComponent<QueryOptionProps> = ({
             data-testid={`query-bar-option-${name}-input`}
             onApply={onApply}
             insights={insights}
-            hasAutofix={name === 'filter'}
           />
         ) : (
           <WithOptionDefinitionTextInputProps definition={optionDefinition}>