From 384a32f34bc7c0a6ff9b2adcc4d62aa40e387057 Mon Sep 17 00:00:00 2001
From: Haohan Yang <yanghaohanmail@gmail.com>
Date: Sat, 25 Jan 2025 13:37:27 +0100
Subject: [PATCH] Bug fix

---
 src/autocomplete.tsx           | 8 +++++---
 src/components/QueryEditor.tsx | 4 ++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/autocomplete.tsx b/src/autocomplete.tsx
index 4d44aea..4e0892d 100644
--- a/src/autocomplete.tsx
+++ b/src/autocomplete.tsx
@@ -1,10 +1,12 @@
 import { useRef, useEffect } from 'react';
 import { type Monaco, type monacoTypes } from '@grafana/ui';
 import { languages } from 'monaco-editor';
+import { DataSourceApi } from '@grafana/data';
 
 // Supports JSON only right now
 class CompletionProvider implements monacoTypes.languages.CompletionItemProvider {
   constructor(
+    private readonly datasource: DataSourceApi,
     private readonly monaco: Monaco,
     private readonly editor: monacoTypes.editor.IStandaloneCodeEditor,
   ) {}
@@ -67,7 +69,7 @@ class CompletionProvider implements monacoTypes.languages.CompletionItemProvider
         {
           label: '"$limit"',
           kind: languages.CompletionItemKind.Function,
-          insertText: '"\\$match": ${1:number}',
+          insertText: '"\\$limit": ${1:number}',
           range: range,
           detail: 'stage',
           insertTextRules: languages.CompletionItemInsertTextRule.InsertAsSnippet,
@@ -118,7 +120,7 @@ class CompletionProvider implements monacoTypes.languages.CompletionItemProvider
   }
 }
 
-export function useAutocomplete() {
+export function useAutocomplete(datasource: DataSourceApi) {
   const autocompleteDisposeFun = useRef<(() => void) | null>(null);
   useEffect(() => {
     return () => {
@@ -127,7 +129,7 @@ export function useAutocomplete() {
   }, []);
 
   return (editor: monacoTypes.editor.IStandaloneCodeEditor, monaco: Monaco) => {
-    const provider = new CompletionProvider(monaco, editor);
+    const provider = new CompletionProvider(datasource, monaco, editor);
     const { dispose } = monaco.languages.registerCompletionItemProvider('json', provider);
     autocompleteDisposeFun.current = dispose;
   };
diff --git a/src/components/QueryEditor.tsx b/src/components/QueryEditor.tsx
index 04a5c27..ec222d6 100644
--- a/src/components/QueryEditor.tsx
+++ b/src/components/QueryEditor.tsx
@@ -43,11 +43,11 @@ const languageOptions: Array<SelectableValue<string>> = [
   { label: 'JavaScript Shadow', value: QueryLanguage.JAVASCRIPT_SHADOW, description: 'JavaScript with Evaluation' },
 ];
 
-export function QueryEditor({ query, onChange, app }: Props) {
+export function QueryEditor({ query, onChange, app, datasource }: Props) {
   const codeEditorRef = useRef<monacoTypes.editor.IStandaloneCodeEditor | null>(null);
   const [queryTextError, setQueryTextError] = useState<string | null>(null);
   const [isOpen, setIsOpen] = useState(false);
-  const setupAutocompleteFn = useAutocomplete();
+  const setupAutocompleteFn = useAutocomplete(datasource);
 
   const [maxTimeMSText, setMaxTimeMSText] = useState<string>(
     query.aggregateMaxTimeMS ? query.aggregateMaxTimeMS.toString() : '',