feat(compass-editor, compass-query-bar): query history autocomplete formatting COMPASS-8063 (#6060)

Author: VivianTNT

package-lock.json

@@ -71,7 +71,7 @@
     "@codemirror/lint": "^6.1.1",
     "@codemirror/state": "^6.1.4",
     "@codemirror/view": "^6.7.1",
-    "@lezer/highlight": "^1.1.3",
+    "@lezer/highlight": "^1.2.0",
     "@mongodb-js/compass-components": "^1.28.1",
     "@mongodb-js/mongodb-constants": "^0.10.0",
     "mongodb-query-parser": "^4.2.0",

packages/compass-editor/package.json

@@ -68,13 +68,13 @@ describe('query history autocompleter', function () {
 
   it('returns all saved queries as completions on click', async function () {
     expect(
-      await getCompletions('{}', savedQueries, undefined, mockOnApply)
+      await getCompletions('{}', savedQueries, undefined, mockOnApply, 'light')
     ).to.have.lengthOf(5);
   });
 
   it('returns combined completions when user starts typing', async function () {
     expect(
-      await getCompletions('foo', savedQueries, undefined, mockOnApply)
+      await getCompletions('foo', savedQueries, undefined, mockOnApply, 'light')
     ).to.have.lengthOf(50);
   });
 
@@ -88,7 +88,8 @@ describe('query history autocompleter', function () {
           '{ bar: 1, buz: 2, foo: "b',
           savedQueries,
           undefined,
-          mockOnApply
+          mockOnApply,
+          'light'
         )
       ).map((completion) => completion.label)
     ).to.deep.eq(['bar', '1', 'buz', '2', 'foo', ...prettifiedSavedQueries]);

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

@@ -11,15 +11,18 @@ import type {
 } from '@codemirror/autocomplete';
 import type { CompletionOptions } from '../autocompleter';
 import { css } from '@mongodb-js/compass-components';
+import type { CodemirrorThemeType } from '../editor';
 
 export const createQueryWithHistoryAutocompleter = (
   recentQueries: SavedQuery[],
   options: Pick<CompletionOptions, 'fields' | 'serverVersion'> = {},
-  onApply: (query: SavedQuery['queryProperties']) => void
+  onApply: (query: SavedQuery['queryProperties']) => void,
+  theme: CodemirrorThemeType
 ): CompletionSource => {
   const queryHistoryAutocompleter = createQueryHistoryAutocompleter(
     recentQueries,
-    onApply
+    onApply,
+    theme
   );
 
   const originalQueryAutocompleter = createQueryAutocompleter(options);

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

@@ -2,20 +2,28 @@ import type {
   CompletionContext,
   CompletionSource,
 } from '@codemirror/autocomplete';
-import { formatDate, spacing } from '@mongodb-js/compass-components';
+import {
+  fontFamilies,
+  formatDate,
+  spacing,
+  css,
+} from '@mongodb-js/compass-components';
 import { toJSString } from 'mongodb-query-parser';
-import { css } from '@mongodb-js/compass-components';
+import { languages } from '../editor';
+import { highlightCode } from '@lezer/highlight';
+import { type CodemirrorThemeType, highlightStyles } from '../editor';
 
 export type SavedQuery = {
   lastExecuted: Date;
   queryProperties: {
-    [properyName: string]: any;
+    [propertyName: string]: any;
   };
 };
 
 export const createQueryHistoryAutocompleter = (
   savedQueries: SavedQuery[],
-  onApply: (query: SavedQuery['queryProperties']) => void
+  onApply: (query: SavedQuery['queryProperties']) => void,
+  theme: CodemirrorThemeType
 ): CompletionSource => {
   return function queryCompletions(context: CompletionContext) {
     if (savedQueries.length === 0) {
@@ -30,7 +38,7 @@ export const createQueryHistoryAutocompleter = (
       label: createQuery(query),
       type: 'text',
       detail: formatDate(query.lastExecuted.getTime()),
-      info: () => createInfo(query).dom,
+      info: () => createInfo(query, theme).dom,
       apply: () => {
         onApply(query.queryProperties);
       },
@@ -54,15 +62,15 @@ export const createQueryHistoryAutocompleter = (
 const queryLabelStyles = css({
   textTransform: 'capitalize',
   fontWeight: 'bold',
-  margin: `${spacing[2]}px 0`,
+  fontFamily: fontFamilies.default,
 });
 
 const queryCodeStyles = css({
-  maxHeight: '30vh',
-});
-
-const completionInfoStyles = css({
-  overflow: 'auto',
+  fontFamily: fontFamilies.code,
+  margin: `${spacing[50]}px`,
+  marginLeft: `${spacing[100]}px`,
+  padding: 0,
+  whiteSpace: 'pre-wrap',
 });
 
 export function createQuery(query: SavedQuery): string {
@@ -72,16 +80,22 @@ export function createQuery(query: SavedQuery): string {
     const noFilterKey = key === 'filter' ? '' : `${key}: `;
     res += formattedQuery ? `, ${noFilterKey}${formattedQuery}` : '';
   });
-  const len = res.length;
-  return len <= 100 ? res.slice(2, res.length) : res.slice(2, 100);
+  return res.slice(2, res.length);
 }
 
-function createInfo(query: SavedQuery): {
+const javascriptExpressionLanguageParser =
+  languages['javascript-expression']().language.parser;
+
+function createInfo(
+  query: SavedQuery,
+  theme: CodemirrorThemeType
+): {
   dom: Node;
   destroy?: () => void;
 } {
+  const customHighlighter = highlightStyles[theme];
   const container = document.createElement('div');
-  container.className = completionInfoStyles;
+
   Object.entries(query.queryProperties).forEach(([key, value]) => {
     const formattedQuery = toJSString(value);
     const codeDiv = document.createElement('div');
@@ -92,7 +106,32 @@ function createInfo(query: SavedQuery): {
 
     const code = document.createElement('pre');
     code.className = queryCodeStyles;
-    if (formattedQuery) code.textContent = formattedQuery;
+
+    function emit(text: string, classes: string | null) {
+      const node = document.createTextNode(text);
+      if (classes) {
+        const span = document.createElement('span');
+        span.appendChild(node);
+        span.className = classes;
+        code.appendChild(span);
+      } else {
+        code.appendChild(node);
+      }
+    }
+
+    function emitBreak() {
+      code.appendChild(document.createTextNode('\n'));
+    }
+
+    if (formattedQuery) {
+      highlightCode(
+        formattedQuery,
+        javascriptExpressionLanguageParser.parse(formattedQuery),
+        customHighlighter,
+        emit,
+        emitBreak
+      );
+    }
 
     codeDiv.append(label);
     codeDiv.appendChild(code);

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

@@ -144,7 +144,7 @@ const tabKeymap: KeyBinding[] = [
   indentWithTab,
 ];
 
-type CodemirrorThemeType = 'light' | 'dark';
+export type CodemirrorThemeType = 'light' | 'dark';
 
 export const editorPalette = {
   light: {
@@ -324,6 +324,10 @@ function getStylesForTheme(theme: CodemirrorThemeType) {
       },
       '& .cm-tooltip.cm-tooltip-autocomplete > ul': {
         fontFamily: fontFamilies.code,
+        boxShadow: `0 ${spacing[50]}px ${spacing[200]}px rgba(0, 0, 0, 0.25)`,
+      },
+      '& .cm-tooltip-autocomplete ul li': {
+        display: 'flex',
       },
       '& .cm-tooltip-autocomplete ul li[aria-selected]': {
         color: editorPalette[theme].autocompleteColor,
@@ -333,16 +337,31 @@ function getStylesForTheme(theme: CodemirrorThemeType) {
       '& .cm-completionIcon': {
         display: 'none',
       },
+      '& .cm-completionLabel': {
+        flex: 1,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      },
       '& .cm-completionDetail': {
         color: rgba(editorPalette[theme].autocompleteColor, 0.5),
         fontStyle: 'normal',
         marginRight: '1em',
+        marginLeft: '1em',
       },
       '& .cm-completionMatchedText': {
         color: editorPalette[theme].autocompleteMatchColor,
         fontWeight: 'bold',
         textDecoration: 'none',
       },
+      '.cm-tooltip.cm-completionInfo': {
+        boxShadow: `0 ${spacing[50]}px ${spacing[200]}px rgba(0, 0, 0, 0.25)`,
+        overflow: 'auto',
+        marginTop: 0,
+        paddingTop: 0,
+        fontSize: '12px',
+        maxHeight: '70vh',
+      },
       '& .cm-tooltip .completion-info p': {
         margin: 0,
         marginRight: `${spacing[2]}px`,
@@ -1521,3 +1540,4 @@ export { MultilineEditor as CodemirrorMultilineEditor };
 export { setCodemirrorEditorValue };
 export { getCodemirrorEditorValue };
 export type { CompletionSource as Completer };
+export { highlightStyles };

packages/compass-editor/src/editor.tsx

@@ -204,7 +204,6 @@ describe('OptionEditor', function () {
       userEvent.click(screen.getByRole('textbox'));
       await waitFor(() => {
         expect(screen.getAllByText('{ a: 1 }')[0]).to.be.visible;
-        expect(screen.getAllByText('{ a: 1 }')[1]).to.be.visible;
         expect(screen.getByText('{ a: 2 }, sort: { a: -1 }')).to.be.visible;
       });
 

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

@@ -8,6 +8,7 @@ import {
   spacing,
   SignalPopover,
   rafraf,
+  useDarkMode,
 } from '@mongodb-js/compass-components';
 import type { Command, EditorRef } from '@mongodb-js/compass-editor';
 import {
@@ -133,6 +134,8 @@ export const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
     hover: true,
   });
 
+  const darkMode = useDarkMode();
+
   const onApplyRef = useRef(onApply);
   onApplyRef.current = onApply;
 
@@ -167,7 +170,8 @@ export const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
             fields: schemaFields,
             serverVersion,
           },
-          onApplyQuery
+          onApplyQuery,
+          darkMode ? 'dark' : 'light'
         )
       : createQueryAutocompleter({
           fields: schemaFields,
@@ -179,6 +183,7 @@ export const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
     serverVersion,
     onApplyQuery,
     isQueryHistoryAutocompleteEnabled,
+    darkMode,
   ]);
 
   const onFocus = () => {