Add hover

Author: haohanyang

.gitignore

@@ -43,6 +43,4 @@ venv/
 mongodb-datasource/
 grafana-storage/
 
-mongo-docs/
-
-src/editor/completions.json
+mongo-docs/

scripts/completions.js

@@ -2,6 +2,7 @@ import React, { useRef, useCallback } from 'react';
 import { CodeEditor, type MonacoEditor } from '@grafana/ui';
 import { useAutocomplete } from '../editor/autocomplete';
 import { useValidation } from '../editor/validation';
+import { useHover } from '../editor/hover';
 
 interface QueryEditorRawProps {
   query: string;
@@ -17,6 +18,7 @@ export function QueryEditorRaw({ query, onBlur, language, width, height, fontSiz
   const monacoRef = useRef<MonacoEditor | null>(null);
 
   const setupAutocompleteFn = useAutocomplete();
+  const setupHoverFn = useHover();
   const setupValidationFn = useValidation();
 
   const formatQuery = useCallback(() => {
@@ -32,6 +34,7 @@ export function QueryEditorRaw({ query, onBlur, language, width, height, fontSiz
           monacoRef.current = editor;
           setupValidationFn(editor, monaco);
           setupAutocompleteFn(editor, monaco);
+          setupHoverFn(editor, monaco);
         }}
         height={height || '240px'}
         width={width ? `${width - 2}px` : undefined}

src/components/QueryEditorRaw.tsx

@@ -1,5 +1,5 @@
 import { useRef, useEffect } from 'react';
-import { type Monaco, type monacoTypes } from '@grafana/ui';
+import { type Monaco, type monacoTypes, type MonacoEditor } from '@grafana/ui';
 import { languages } from 'monaco-editor';
 import completionData from './completions.json';
 
@@ -9,10 +9,9 @@ interface CompletionState {
   fields?: string[] | string;
 }
 
-
 // Supports JSON only right now
 class CompletionProvider implements monacoTypes.languages.CompletionItemProvider {
-  constructor(private readonly editor: monacoTypes.editor.IStandaloneCodeEditor) { }
+  constructor(private readonly editor: MonacoEditor) {}
 
   provideCompletionItems(
     model: monacoTypes.editor.ITextModel,
@@ -71,36 +70,34 @@ export function useAutocomplete() {
     };
   }, []);
 
-  return (editor: monacoTypes.editor.IStandaloneCodeEditor, monaco: Monaco) => {
+  return (editor: MonacoEditor, monaco: Monaco) => {
     const provider = new CompletionProvider(editor);
     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`
+      let insertText = `"\\${name}": {\n\t`;
       for (let i = 0; i < fields.length; i++) {
-        const field = fields[i]
-        insertText += `"${field}": \${${i + 1}:${field}}`
+        const field = fields[i];
+        insertText += `"${field}": \${${i + 1}:${field}}`;
 
         if (i == 0) {
-          insertText += '$0'
+          insertText += '$0';
         }
 
         if (i != fields.length - 1) {
-          insertText += ',\n\t'
+          insertText += ',\n\t';
         }
       }
+      insertText += '\n}';
 
-      return insertText
+      return insertText;
     }
-    return `"\\${name}": \${1:${fields}}`
+    return `"\\${name}": \${1:${fields}}`;
   }
-  return `"\\${name}": {\n\t$0\n}`
-}
+  return `"\\${name}": {\n\t$0\n}`;
+}