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 index 948d9f6c433..c85205ec492 100644 --- 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 index fc42264993f..b9c78e80e20 100644 --- 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 index 88bf441c32a..5d70deb773f 100644 --- 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(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 index 70024a73d80..f9a6a1876f8 100644 --- 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 index 4f1ca44a923..47d0688a832 100644 --- 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 index 1d300354e38..74abd00fa2b 100644 --- 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 = ({ 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), + })), ], });