feat(editor, query-bar): on query history autocomplete move cursor to…

… end of content, small ux updates (#6199)
mongodb-js · Sep 5, 2024 · 7d60fbd · 7d60fbd
1 parent 69ce0b2
commit 7d60fbd
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 5 deletions.
diff --git a/packages/compass-editor/src/codemirror/query-history-autocompleter.ts b/packages/compass-editor/src/codemirror/query-history-autocompleter.ts
@@ -76,9 +76,16 @@ function getMatchingQueryHistoryItemsForInput({
       const fieldStringSimplified =
         simplifyQueryStringForAutocomplete(fieldString);
 
+      if (input === fieldStringSimplified) {
+        // Don't show an option if the user has typed the whole field.
+        return false;
+      }
+
       if (fieldStringSimplified.startsWith(input)) {
+        // When the user is typing their first field, we can return early.
         return true;
       }
+
       const inputIndex = inputToMatch.indexOf(fieldStringSimplified);
       if (inputIndex !== -1) {
         inputToMatch = inputToMatch.replace(fieldStringSimplified, '');

diff --git a/packages/compass-editor/src/editor.tsx b/packages/compass-editor/src/editor.tsx
@@ -32,6 +32,7 @@ import {
   foldEffect,
 } from '@codemirror/language';
 import {
+  cursorDocEnd,
   defaultKeymap,
   history,
   historyKeymap,
@@ -433,7 +434,7 @@ function getStylesForTheme(theme: CodemirrorThemeType) {
         marginTop: 0,
         paddingTop: 0,
         fontSize: '12px',
-        maxHeight: '70vh',
+        maxHeight: `${spacing[1600] * 5}px`,
       },
       '& .cm-tooltip .completion-info p': {
         margin: 0,
@@ -698,6 +699,7 @@ export type EditorRef = {
   prettify: () => boolean;
   applySnippet: (template: string) => boolean;
   focus: () => boolean;
+  cursorDocEnd: () => boolean;
   startCompletion: () => boolean;
   readonly editorContents: string | null;
   readonly editor: EditorView | null;
@@ -808,6 +810,12 @@ const BaseEditor = React.forwardRef<EditorRef, EditorProps>(function BaseEditor(
           editorViewRef.current.focus();
           return true;
         },
+        cursorDocEnd() {
+          if (!editorViewRef.current) {
+            return false;
+          }
+          return cursorDocEnd(editorViewRef.current);
+        },
         startCompletion() {
           if (!editorViewRef.current) {
             return false;
@@ -1455,6 +1463,9 @@ const MultilineEditor = React.forwardRef<EditorRef, MultilineEditorProps>(
           applySnippet(template: string) {
             return editorRef.current?.applySnippet(template) ?? false;
           },
+          cursorDocEnd() {
+            return editorRef.current?.cursorDocEnd() ?? false;
+          },
           startCompletion() {
             return editorRef.current?.startCompletion() ?? false;
           },

diff --git a/packages/compass-query-bar/src/components/option-editor.tsx b/packages/compass-query-bar/src/components/option-editor.tsx
@@ -10,7 +10,11 @@ import {
   rafraf,
   useDarkMode,
 } from '@mongodb-js/compass-components';
-import type { Command, EditorRef } from '@mongodb-js/compass-editor';
+import type {
+  Command,
+  EditorRef,
+  SavedQuery,
+} from '@mongodb-js/compass-editor';
 import {
   CodemirrorInlineEditor as InlineEditor,
   createQueryAutocompleter,
@@ -23,8 +27,9 @@ import type { RootState } from '../stores/query-bar-store';
 import { useAutocompleteFields } from '@mongodb-js/compass-field-store';
 import { applyFromHistory } from '../stores/query-bar-reducer';
 import { getQueryAttributes } from '../utils';
-import type { BaseQuery } from '../constants/query-properties';
-import type { SavedQuery } from '@mongodb-js/compass-editor';
+import type { BaseQuery, QueryFormFields } from '../constants/query-properties';
+import { mapQueryToFormFields } from '../utils/query';
+import { DEFAULT_FIELD_VALUES } from '../constants/query-bar-store';
 
 const editorContainerStyles = css({
   position: 'relative',
@@ -155,6 +160,7 @@ export const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
   }, []);
 
   const schemaFields = useAutocompleteFields(namespace);
+  const maxTimeMSPreference = usePreference('maxTimeMS');
 
   const completer = useMemo(() => {
     return isQueryHistoryAutocompleteEnabled
@@ -179,14 +185,33 @@ export const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
             fields: schemaFields,
             serverVersion,
           },
-          onApply: onApplyQuery,
+          onApply: (query: SavedQuery['queryProperties']) => {
+            onApplyQuery(query);
+            if (!query[optionName]) {
+              return;
+            }
+            const formFields = mapQueryToFormFields(
+              { maxTimeMS: maxTimeMSPreference },
+              {
+                ...DEFAULT_FIELD_VALUES,
+                ...query,
+              }
+            );
+            const optionFormField =
+              formFields[optionName as keyof QueryFormFields];
+            if (optionFormField?.string) {
+              // When we did apply something we want to move the cursor to the end of the input.
+              editorRef.current?.cursorDocEnd();
+            }
+          },
           theme: darkMode ? 'dark' : 'light',
         })
       : createQueryAutocompleter({
           fields: schemaFields,
           serverVersion,
         });
   }, [
+    maxTimeMSPreference,
     savedQueries,
     schemaFields,
     serverVersion,