Monaco: add suggestions for template variables (#25921)

* now with suggestions

* using suggestions API

* using variable suggestions

* using variable suggestions

* show variables

* minor cleanup

* add @alpha warning

* Do not produce data variables if panel does not support queries

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

public/app/features/dashboard/components/PanelEditor/PanelOptionsEditor.tsx

@@ -5,11 +5,13 @@ import {
   PanelOptionsEditorItem,
   PanelPlugin,
   StandardEditorContext,
+  VariableSuggestionsScope,
 } from '@grafana/data';
 import { get as lodashGet, set as lodashSet } from 'lodash';
 import { Field, Label } from '@grafana/ui';
 import groupBy from 'lodash/groupBy';
 import { OptionsGroup } from './OptionsGroup';
+import { getPanelOptionsVariableSuggestions } from 'app/features/panel/panellinks/link_srv';
 
 interface PanelOptionsEditorProps<TOptions> {
   plugin: PanelPlugin;
@@ -38,9 +40,12 @@ export const PanelOptionsEditor: React.FC<PanelOptionsEditorProps<any>> = ({
   };
 
   const context: StandardEditorContext<any> = {
-    data: data ?? [],
+    data: data || [],
     replaceVariables,
     options,
+    getSuggestions: (scope?: VariableSuggestionsScope) => {
+      return getPanelOptionsVariableSuggestions(plugin, data);
+    },
   };
 
   return (

public/app/features/panel/panellinks/link_srv.ts

@@ -19,6 +19,7 @@ import {
   urlUtil,
   textUtil,
   DataLink,
+  PanelPlugin,
 } from '@grafana/data';
 
 const timeRangeVars = [
@@ -231,6 +232,18 @@ export const getCalculationValueDataLinksVariableSuggestions = (dataFrames: Data
   return [...seriesVars, ...fieldVars, ...valueVars, valueCalcVar, ...getPanelLinksVariableSuggestions()];
 };
 
+export const getPanelOptionsVariableSuggestions = (plugin: PanelPlugin, data?: DataFrame[]): VariableSuggestion[] => {
+  const dataVariables = plugin.meta.skipDataQuery ? [] : getDataFrameVars(data || []);
+  return [
+    ...dataVariables, // field values
+    ...templateSrv.getVariables().map(variable => ({
+      value: variable.name as string,
+      label: variable.name,
+      origin: VariableOrigin.Template,
+    })),
+  ];
+};
+
 export interface LinkService {
   getDataLinkUIModel: <T>(link: DataLink, scopedVars: ScopedVars, origin: T) => LinkModel<T>;
   getAnchorInfo: (link: any) => any;

public/app/plugins/panel/text/TextPanelEditor.tsx

@@ -1,7 +1,13 @@
 import React, { FC, useMemo } from 'react';
 import { css, cx } from 'emotion';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { CodeEditor, stylesFactory, useTheme } from '@grafana/ui';
+import {
+  CodeEditor,
+  stylesFactory,
+  useTheme,
+  CodeEditorSuggestionItem,
+  variableSuggestionToCodeEditorSuggestion,
+} from '@grafana/ui';
 import { GrafanaTheme, StandardEditorProps } from '@grafana/data';
 
 import { TextOptions } from './types';
@@ -10,6 +16,14 @@ export const TextPanelEditor: FC<StandardEditorProps<string, any, TextOptions>>
   const language = useMemo(() => context.options?.mode ?? 'markdown', [context]);
   const theme = useTheme();
   const styles = getStyles(theme);
+
+  const getSuggestions = (): CodeEditorSuggestionItem[] => {
+    if (!context.getSuggestions) {
+      return [];
+    }
+    return context.getSuggestions().map(v => variableSuggestionToCodeEditorSuggestion(v));
+  };
+
   return (
     <div className={cx(styles.editorBox)}>
       <AutoSizer disableHeight>
@@ -17,7 +31,6 @@ export const TextPanelEditor: FC<StandardEditorProps<string, any, TextOptions>>
           if (width === 0) {
             return null;
           }
-
           return (
             <CodeEditor
               value={value}
@@ -28,6 +41,7 @@ export const TextPanelEditor: FC<StandardEditorProps<string, any, TextOptions>>
               showMiniMap={false}
               showLineNumbers={false}
               height="200px"
+              getSuggestions={getSuggestions}
             />
           );
         }}