feat(compass-editor, compass-query-bar): added star icon to autocompl…

…ete favorite queries (#6075)
mongodb-js · Jul 31, 2024 · 262c958 · 262c958
1 parent 83dfacb
commit 262c958
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 17 deletions.
diff --git a/packages/compass-editor/src/codemirror/query-autocompleter-with-history.test.ts b/packages/compass-editor/src/codemirror/query-autocompleter-with-history.test.ts
@@ -11,12 +11,14 @@ describe('query history autocompleter', function () {
 
   const savedQueries: SavedQuery[] = [
     {
+      type: 'recent',
       lastExecuted: new Date('2023-06-01T12:00:00Z'),
       queryProperties: {
         filter: { status: 'active' },
       },
     },
     {
+      type: 'recent',
       lastExecuted: new Date('2023-06-02T14:00:00Z'),
       queryProperties: {
         filter: { age: { $gt: 30 } },
@@ -29,6 +31,7 @@ describe('query history autocompleter', function () {
       },
     },
     {
+      type: 'recent',
       lastExecuted: new Date('2023-06-03T16:00:00Z'),
       queryProperties: {
         filter: { score: { $gte: 85 } },
@@ -40,6 +43,7 @@ describe('query history autocompleter', function () {
       },
     },
     {
+      type: 'recent',
       lastExecuted: new Date('2023-06-04T18:00:00Z'),
       queryProperties: {
         filter: { isActive: true },
@@ -51,6 +55,7 @@ describe('query history autocompleter', function () {
       },
     },
     {
+      type: 'recent',
       lastExecuted: new Date('2023-06-05T20:00:00Z'),
       queryProperties: {
         filter: { category: 'electronics' },

diff --git a/packages/compass-editor/src/codemirror/query-history-autocompleter.ts b/packages/compass-editor/src/codemirror/query-history-autocompleter.ts
@@ -14,6 +14,7 @@ import { highlightCode } from '@lezer/highlight';
 import { type CodemirrorThemeType, highlightStyles } from '../editor';
 
 export type SavedQuery = {
+  type: string;
   lastExecuted: Date;
   queryProperties: {
     [propertyName: string]: any;
@@ -36,7 +37,7 @@ export const createQueryHistoryAutocompleter = (
 
     const options = savedQueries.map((query) => ({
       label: createQuery(query),
-      type: 'query-history',
+      type: query.type === 'recent' ? 'query-history' : 'favorite',
       detail: formatDate(query.lastExecuted.getTime()),
       info: () => createInfo(query, theme).dom,
       apply: () => {

diff --git a/packages/compass-editor/src/editor.tsx b/packages/compass-editor/src/editor.tsx
@@ -351,6 +351,23 @@ function getStylesForTheme(theme: CodemirrorThemeType) {
           backgroundPosition: 'center',
         },
       },
+      '& .cm-completionIcon-favorite': {
+        marginRight: `${spacing[200]}px`,
+        '&:after': {
+          content: '""',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '16px',
+          height: '16px',
+          backgroundImage: `url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.65373 0.832474C5.78183 0.524491 6.21813 0.52449 6.34622 0.832474L7.49904 3.60417C7.55301 3.73401 7.67511 3.82272 7.81528 3.83396L10.8076 4.07385C11.1401 4.1005 11.2749 4.51545 11.0216 4.73244L8.74176 6.68534C8.63496 6.77682 8.58839 6.92036 8.62101 7.05714L9.31746 9.9771C9.39486 10.3015 9.04191 10.558 8.75729 10.3841L6.19545 8.8194C6.07544 8.74612 5.92451 8.74612 5.80451 8.8194L3.2427 10.3841C2.95804 10.558 2.60507 10.3015 2.68246 9.9771L3.37898 7.05714C3.41161 6.92036 3.36497 6.77682 3.25817 6.68534L0.978375 4.73244C0.725048 4.51545 0.859867 4.1005 1.19236 4.07385L4.18464 3.83396C4.32481 3.82272 4.44691 3.73401 4.50092 3.60417L5.65373 0.832474Z' fill='${encodeURIComponent(
+            editorPalette[theme].autocompleteColor
+          )}'/%3E%3C/svg%3E")`,
+          backgroundSize: 'contain',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center',
+        },
+      },
       '& .cm-completionIcon-field': {
         marginRight: `${spacing[50]}px`,
         display: 'flex',
@@ -912,6 +929,7 @@ const BaseEditor = React.forwardRef<EditorRef, EditorProps>(function BaseEditor(
         ? autocompletion({
             activateOnTyping: true,
             override: [completer],
+            maxRenderedOptions: 50,
           })
         : [];
     },

diff --git a/packages/compass-editor/src/index.ts b/packages/compass-editor/src/index.ts
@@ -21,5 +21,8 @@ export { createQueryAutocompleter } from './codemirror/query-autocompleter';
 export { createStageAutocompleter } from './codemirror/stage-autocompleter';
 export { createAggregationAutocompleter } from './codemirror/aggregation-autocompleter';
 export { createSearchIndexAutocompleter } from './codemirror/search-index-autocompleter';
-export { createQueryHistoryAutocompleter } from './codemirror/query-history-autocompleter';
+export {
+  createQueryHistoryAutocompleter,
+  type SavedQuery,
+} from './codemirror/query-history-autocompleter';
 export { createQueryWithHistoryAutocompleter } from './codemirror/query-autocompleter-with-history';
diff --git a/packages/compass-query-bar/src/components/option-editor.spec.tsx b/packages/compass-query-bar/src/components/option-editor.spec.tsx
@@ -177,17 +177,19 @@ describe('OptionEditor', function () {
             value=""
             savedQueries={[
               {
-                _id: '1',
-                _ns: '1',
-                filter: { a: 1 },
-                _lastExecuted: new Date(),
+                type: 'recent',
+                lastExecuted: new Date(),
+                queryProperties: {
+                  filter: { a: 1 },
+                },
               },
               {
-                _id: '1',
-                _ns: '1',
-                filter: { a: 2 },
-                sort: { a: -1 },
-                _lastExecuted: new Date(),
+                type: 'recent',
+                lastExecuted: new Date(),
+                queryProperties: {
+                  filter: { a: 2 },
+                  sort: { a: -1 },
+                },
               },
             ]}
             onApplyQuery={onApplySpy}

diff --git a/packages/compass-query-bar/src/components/option-editor.tsx b/packages/compass-query-bar/src/components/option-editor.tsx
@@ -21,10 +21,10 @@ import { usePreference } from 'compass-preferences-model/provider';
 import { lenientlyFixQuery } from '../query/leniently-fix-query';
 import type { RootState } from '../stores/query-bar-store';
 import { useAutocompleteFields } from '@mongodb-js/compass-field-store';
-import type { RecentQuery } from '@mongodb-js/my-queries-storage';
 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';
 
 const editorContainerStyles = css({
   position: 'relative',
@@ -100,7 +100,7 @@ type OptionEditorProps = {
   ['data-testid']?: string;
   insights?: Signal | Signal[];
   disabled?: boolean;
-  savedQueries: RecentQuery[];
+  savedQueries: SavedQuery[];
   onApplyQuery: (query: BaseQuery) => void;
 };
 
@@ -160,8 +160,9 @@ export const OptionEditor: React.FunctionComponent<OptionEditorProps> = ({
           savedQueries
             .filter((query) => !('update' in query))
             .map((query) => ({
-              lastExecuted: query._lastExecuted,
-              queryProperties: getQueryAttributes(query),
+              type: query.type,
+              lastExecuted: query.lastExecuted,
+              queryProperties: query.queryProperties,
             }))
             .sort(
               (a, b) => a.lastExecuted.getTime() - b.lastExecuted.getTime()
@@ -264,8 +265,16 @@ const ConnectedOptionEditor = (state: RootState) => ({
   namespace: state.queryBar.namespace,
   serverVersion: state.queryBar.serverVersion,
   savedQueries: [
-    ...state.queryBar.recentQueries,
-    ...state.queryBar.favoriteQueries,
+    ...state.queryBar.recentQueries.map((query) => ({
+      type: 'recent',
+      lastExecuted: query._lastExecuted,
+      queryProperties: getQueryAttributes(query),
+    })),
+    ...state.queryBar.favoriteQueries.map((query) => ({
+      type: 'favorite',
+      lastExecuted: query._lastExecuted,
+      queryProperties: getQueryAttributes(query),
+    })),
   ],
 });