Skip to content

Commit 7d60fbd

Browse files
authored
feat(editor, query-bar): on query history autocomplete move cursor to end of content, small ux updates (#6199)
1 parent 69ce0b2 commit 7d60fbd

File tree

3 files changed

+48
-5
lines changed

3 files changed

+48
-5
lines changed

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,9 +76,16 @@ function getMatchingQueryHistoryItemsForInput({
7676
const fieldStringSimplified =
7777
simplifyQueryStringForAutocomplete(fieldString);
7878

79+
if (input === fieldStringSimplified) {
80+
// Don't show an option if the user has typed the whole field.
81+
return false;
82+
}
83+
7984
if (fieldStringSimplified.startsWith(input)) {
85+
// When the user is typing their first field, we can return early.
8086
return true;
8187
}
88+
8289
const inputIndex = inputToMatch.indexOf(fieldStringSimplified);
8390
if (inputIndex !== -1) {
8491
inputToMatch = inputToMatch.replace(fieldStringSimplified, '');

packages/compass-editor/src/editor.tsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import {
3232
foldEffect,
3333
} from '@codemirror/language';
3434
import {
35+
cursorDocEnd,
3536
defaultKeymap,
3637
history,
3738
historyKeymap,
@@ -433,7 +434,7 @@ function getStylesForTheme(theme: CodemirrorThemeType) {
433434
marginTop: 0,
434435
paddingTop: 0,
435436
fontSize: '12px',
436-
maxHeight: '70vh',
437+
maxHeight: `${spacing[1600] * 5}px`,
437438
},
438439
'& .cm-tooltip .completion-info p': {
439440
margin: 0,
@@ -698,6 +699,7 @@ export type EditorRef = {
698699
prettify: () => boolean;
699700
applySnippet: (template: string) => boolean;
700701
focus: () => boolean;
702+
cursorDocEnd: () => boolean;
701703
startCompletion: () => boolean;
702704
readonly editorContents: string | null;
703705
readonly editor: EditorView | null;
@@ -808,6 +810,12 @@ const BaseEditor = React.forwardRef<EditorRef, EditorProps>(function BaseEditor(
808810
editorViewRef.current.focus();
809811
return true;
810812
},
813+
cursorDocEnd() {
814+
if (!editorViewRef.current) {
815+
return false;
816+
}
817+
return cursorDocEnd(editorViewRef.current);
818+
},
811819
startCompletion() {
812820
if (!editorViewRef.current) {
813821
return false;
@@ -1455,6 +1463,9 @@ const MultilineEditor = React.forwardRef<EditorRef, MultilineEditorProps>(
14551463
applySnippet(template: string) {
14561464
return editorRef.current?.applySnippet(template) ?? false;
14571465
},
1466+
cursorDocEnd() {
1467+
return editorRef.current?.cursorDocEnd() ?? false;
1468+
},
14581469
startCompletion() {
14591470
return editorRef.current?.startCompletion() ?? false;
14601471
},

packages/compass-query-bar/src/components/option-editor.tsx

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@ import {
1010
rafraf,
1111
useDarkMode,
1212
} from '@mongodb-js/compass-components';
13-
import type { Command, EditorRef } from '@mongodb-js/compass-editor';
13+
import type {
14+
Command,
15+
EditorRef,
16+
SavedQuery,
17+
} from '@mongodb-js/compass-editor';
1418
import {
1519
CodemirrorInlineEditor as InlineEditor,
1620
createQueryAutocompleter,
@@ -23,8 +27,9 @@ import type { RootState } from '../stores/query-bar-store';
2327
import { useAutocompleteFields } from '@mongodb-js/compass-field-store';
2428
import { applyFromHistory } from '../stores/query-bar-reducer';
2529
import { getQueryAttributes } from '../utils';
26-
import type { BaseQuery } from '../constants/query-properties';
27-
import type { SavedQuery } from '@mongodb-js/compass-editor';
30+
import type { BaseQuery, QueryFormFields } from '../constants/query-properties';
31+
import { mapQueryToFormFields } from '../utils/query';
32+
import { DEFAULT_FIELD_VALUES } from '../constants/query-bar-store';
2833

2934
const editorContainerStyles = css({
3035
position: 'relative',
@@ -155,6 +160,7 @@ export const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
155160
}, []);
156161

157162
const schemaFields = useAutocompleteFields(namespace);
163+
const maxTimeMSPreference = usePreference('maxTimeMS');
158164

159165
const completer = useMemo(() => {
160166
return isQueryHistoryAutocompleteEnabled
@@ -179,14 +185,33 @@ export const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
179185
fields: schemaFields,
180186
serverVersion,
181187
},
182-
onApply: onApplyQuery,
188+
onApply: (query: SavedQuery['queryProperties']) => {
189+
onApplyQuery(query);
190+
if (!query[optionName]) {
191+
return;
192+
}
193+
const formFields = mapQueryToFormFields(
194+
{ maxTimeMS: maxTimeMSPreference },
195+
{
196+
...DEFAULT_FIELD_VALUES,
197+
...query,
198+
}
199+
);
200+
const optionFormField =
201+
formFields[optionName as keyof QueryFormFields];
202+
if (optionFormField?.string) {
203+
// When we did apply something we want to move the cursor to the end of the input.
204+
editorRef.current?.cursorDocEnd();
205+
}
206+
},
183207
theme: darkMode ? 'dark' : 'light',
184208
})
185209
: createQueryAutocompleter({
186210
fields: schemaFields,
187211
serverVersion,
188212
});
189213
}, [
214+
maxTimeMSPreference,
190215
savedQueries,
191216
schemaFields,
192217
serverVersion,

0 commit comments

Comments
 (0)