Add more operators

Author: haohanyang

src/editor/autocomplete.ts

@@ -1,13 +1,7 @@
 import { useRef, useEffect } from 'react';
 import { type Monaco, type monacoTypes, type MonacoEditor } from '@grafana/ui';
 import { languages } from 'monaco-editor';
-import { STAGE_OPERATORS } from '@mongodb-js/mongodb-constants'
-
-interface CompletionState {
-  name: string;
-  description: string;
-  fields?: string[] | string;
-}
+import { STAGE_OPERATORS, EXPRESSION_OPERATORS, ACCUMULATORS, CONVERSION_OPERATORS, QUERY_OPERATORS } from '@mongodb-js/mongodb-constants'
 
 // Supports JSON only right now
 class CompletionProvider implements monacoTypes.languages.CompletionItemProvider {
@@ -46,18 +40,27 @@ class CompletionProvider implements monacoTypes.languages.CompletionItemProvider
       endColumn: word.endColumn,
     };
 
-    const suggestions: languages.CompletionItem[] = STAGE_OPERATORS.map((stage) => ({
+    const stageSuggestions: languages.CompletionItem[] = STAGE_OPERATORS.map((stage) => ({
       label: `"${stage.name}"`,
       kind: languages.CompletionItemKind.Function,
       insertText: `"\\${stage.name}": ${stage.snippet}`,
       range: range,
-      detail: 'stage',
+      detail: stage.meta,
       documentation: stage.description,
       insertTextRules: languages.CompletionItemInsertTextRule.InsertAsSnippet,
     }));
 
+    const expressionSuggestions: languages.CompletionItem[] = [...EXPRESSION_OPERATORS, ...ACCUMULATORS, ...CONVERSION_OPERATORS, ...QUERY_OPERATORS].map((expression) => ({
+      label: `"${expression.name}"`,
+      kind: languages.CompletionItemKind.Function,
+      insertText: `"\\${expression.name}": \${1:expression}`,
+      range: range,
+      detail: expression.meta,
+      insertTextRules: languages.CompletionItemInsertTextRule.InsertAsSnippet,
+    }));
+
     return {
-      suggestions: suggestions,
+      suggestions: [...stageSuggestions, ...expressionSuggestions],
     };
   }
 }
@@ -75,29 +78,4 @@ export function useAutocomplete() {
     const { dispose } = monaco.languages.registerCompletionItemProvider('json', provider);
     autocompleteDisposeFun.current = dispose;
   };
-}
-
-function createInsertText({ name, fields }: CompletionState) {
-  if (fields) {
-    if (Array.isArray(fields)) {
-      let insertText = `"\\${name}": {\n\t`;
-      for (let i = 0; i < fields.length; i++) {
-        const field = fields[i];
-        insertText += `"${field}": \${${i + 1}:${field}}`;
-
-        if (i === 0) {
-          insertText += '$0';
-        }
-
-        if (i !== fields.length - 1) {
-          insertText += ',\n\t';
-        }
-      }
-      insertText += '\n}';
-
-      return insertText;
-    }
-    return `"\\${name}": \${1:${fields}}`;
-  }
-  return `"\\${name}": {\n\t$0\n}`;
-}
+}