feat(compass-editor, compass-query-bar): autocomplete icon COMPASS-8031 #6064
Conversation
… completions above it
VivianTNT
added
feature flagged
| @@ -21,6 +21,7 @@ export function mapMongoDBCompletionToCodemirrorCompletion( | |||
| ? completion.value | |||
| : wrapField(completion.value, escape === 'always'), | |||
| detail: completion.meta?.startsWith('field') ? 'field' : completion.meta, | |||
| type: 'base-autocompleter', | |||
There was a problem hiding this comment.
Adding this will start showing the rectangle box icon for all of our possible autocompletion types (field, query, bson, etc). This is shown in the screenshot. Should we instead show different icons for these different types? Maybe something similar to what VSCode does? https://code.visualstudio.com/docs/editor/intellisense#_types-of-completions
Alternatively, we could hide icons for now and do that as a separate pr. It likely won't be too much so I think I'd prefer if we do it here.
From a quick look I'm thinking right now we only need to add a new the regular box, which we can use for the functions, which would be BSON and query. Then we use the existing base-autocompleter/field rectangle box for the field autocompletions. Maybe there are more icons we can use for now? Not sure.
We get those non-field autocompletions from here: https://github.com/mongodb-js/devtools-shared/tree/main/packages/mongodb-constants
Maybe some of the json-schema completions are keywords.
| }, | ||
| '& .cm-completionLabel': { | ||
| flex: 1, | ||
| overflow: 'hidden', | ||
| textOverflow: 'ellipsis', | ||
| whiteSpace: 'nowrap', | ||
| lineHeight: '110%', |
There was a problem hiding this comment.
I noticed each completion wasn't centered vertically and for some reason couldn't get it to work using other properties (display: flex interferes with the ellipses). lineHeight is supposed to be the actual height of one completion box but I didn't know how to get that value so the 110% was more or less guess and check. Can definitely look more into this!
There was a problem hiding this comment.
Cool, not a blocker or a big issue, was mostly curious. The css properties alignItems, alignSelf, justifyContent or justifySelf might be useful for the container or the classes here. They can help vertically align things in flex. It also may be that the icon is changing the height of the container. I can take more of a look later if you'd like.
There was a problem hiding this comment.
I think it might be because originally each of the completions were very slightly scrollable. I removed being able to scroll individual completions so that might have messed up the height, but not sure about this.
Description
COMPASS-8031
Added icons next to each autocompletion item based on which type of completion it is; clock for query history, rectangular box for base completions.
Checklist
Motivation and Context
Types of changes