diff --git a/packages/compass-editor/src/codemirror/query-history-autocompleter.ts b/packages/compass-editor/src/codemirror/query-history-autocompleter.ts index 1f50dda7c6d..c617d9251c5 100644 --- 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 index 5d70deb773f..8c166a9c638 100644 --- 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(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( 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 index c1c2033ed27..db74d34b930 100644 --- 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 = ({ }, []); const schemaFields = useAutocompleteFields(namespace); + const maxTimeMSPreference = usePreference('maxTimeMS'); const completer = useMemo(() => { return isQueryHistoryAutocompleteEnabled @@ -179,7 +185,25 @@ export const OptionEditor: React.FunctionComponent = ({ 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({ @@ -187,6 +211,7 @@ export const OptionEditor: React.FunctionComponent = ({ serverVersion, }); }, [ + maxTimeMSPreference, savedQueries, schemaFields, serverVersion,