Add suggestions for code editors (#327)

* Add suggestions for code editors

* Update tests

---------

Co-authored-by: Mikhail Volkov <mikhail@volkovlabs.io>

src/__mocks__/@grafana/ui.tsx

@@ -6,11 +6,12 @@ const actual = jest.requireActual('@grafana/ui');
 /**
  * Mock Code Editor
  */
-const CodeEditor = jest.fn(({ onBlur, ...restProps }) => {
+const CodeEditor = jest.fn(({ onBlur, getSuggestions, ...restProps }) => {
   return (
     <input
       aria-label={restProps['aria-label']}
       value={restProps.value}
+      autoComplete={getSuggestions?.()}
       onChange={(event) => {
         if (onBlur) {
           onBlur(event.target.value);

src/components/CustomCodeEditor/CustomCodeEditor.test.tsx

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 import React from 'react';
 
 import { CODE_EDITOR_SUGGESTIONS } from '../../constants';
+import { CodeEditorType } from '../../types';
 import { getCustomCodeEditorSelectors } from '../../utils';
 import { CustomCodeEditor } from './CustomCodeEditor';
 
@@ -177,7 +178,8 @@ describe('Custom Code Editor', () => {
       getComponent({
         item: {
           settings: {
-            suggestions: true,
+            type: CodeEditorType.REQUEST,
+            variablesSuggestions: true,
           },
         },
       })
@@ -186,7 +188,7 @@ describe('Custom Code Editor', () => {
     /**
      * Check if suggestions are correct
      */
-    expect(suggestionsResult).toEqual(expect.arrayContaining(CODE_EDITOR_SUGGESTIONS));
+    expect(suggestionsResult).toEqual(expect.arrayContaining(CODE_EDITOR_SUGGESTIONS.request));
     expect(suggestionsResult).toEqual(
       expect.arrayContaining([
         {
@@ -207,7 +209,7 @@ describe('Custom Code Editor', () => {
     );
   });
 
-  it('Should skip adding suggestions', () => {
+  it('Should not add suggestions', () => {
     let suggestionsResult;
     const variableWithDescription = { name: 'var1', description: 'Var description', label: 'Var Label' };
     const variableWithoutDescription = { name: 'var2', description: '', label: 'Var 2' };
@@ -229,7 +231,9 @@ describe('Custom Code Editor', () => {
      */
     render(
       getComponent({
-        item: {},
+        item: {
+          settings: {},
+        },
       })
     );
 

src/components/CustomCodeEditor/CustomCodeEditor.tsx

@@ -45,23 +45,23 @@ export const CustomCodeEditor: React.FC<Props> = ({ value, item, onChange }) =>
    * Will skip adding suggestions if settings are not defined to avoid duplicates
    */
   const getSuggestions = useCallback((): CodeEditorSuggestionItem[] => {
-    if (!item.settings?.suggestions) {
-      return [];
-    }
-
     /**
      * Add Variables
      */
-    const suggestions = templateSrv.getVariables().map((variable) => {
-      return {
-        label: `\$\{${variable.name}\}`,
-        kind: CodeEditorSuggestionItemKind.Property,
-        detail: variable.description ? variable.description : variable.label,
-      };
-    });
+    const variablesSuggestions = item.settings?.variablesSuggestions
+      ? templateSrv.getVariables().map((variable) => {
+          return {
+            label: `\$\{${variable.name}\}`,
+            kind: CodeEditorSuggestionItemKind.Property,
+            detail: variable.description ? variable.description : variable.label,
+          };
+        })
+      : [];
 
-    return [...CODE_EDITOR_SUGGESTIONS, ...suggestions];
-  }, [templateSrv, item.settings?.suggestions]);
+    return item.settings?.type
+      ? CODE_EDITOR_SUGGESTIONS[item.settings.type].concat(variablesSuggestions)
+      : variablesSuggestions;
+  }, [item.settings, templateSrv]);
 
   /**
    * Return

src/components/ElementEditor/ElementEditor.tsx

@@ -3,6 +3,7 @@ import { Field, InlineField, InlineFieldRow, Input, RadioButtonGroup, Select, us
 import React, { ChangeEvent } from 'react';
 
 import {
+  CODE_EDITOR_SUGGESTIONS,
   CODE_LANGUAGE_OPTIONS,
   FORM_ELEMENT_TYPE_OPTIONS,
   FormElementType,
@@ -542,6 +543,7 @@ export const ElementEditor: React.FC<Props> = ({
                 monacoOptions={{ formatOnPaste: true, formatOnType: true }}
                 showLineNumbers={true}
                 aria-label={TEST_IDS.formElementsEditor.fieldGetOptions}
+                getSuggestions={() => CODE_EDITOR_SUGGESTIONS.elementGetOptions}
               />
             </Field>
           )}
@@ -578,6 +580,7 @@ export const ElementEditor: React.FC<Props> = ({
           monacoOptions={{ formatOnPaste: true, formatOnType: true }}
           showLineNumbers={true}
           aria-label={TEST_IDS.formElementsEditor.fieldShowIf}
+          getSuggestions={() => CODE_EDITOR_SUGGESTIONS.elementShowIf}
         />
       </Field>
 
@@ -597,6 +600,7 @@ export const ElementEditor: React.FC<Props> = ({
               monacoOptions={{ formatOnPaste: true, formatOnType: true }}
               showLineNumbers={true}
               aria-label={TEST_IDS.formElementsEditor.fieldDisableIf}
+              getSuggestions={() => CODE_EDITOR_SUGGESTIONS.elementDisableIf}
             />
           </Field>
         )}

src/constants/code-editor.ts

@@ -1,7 +1,7 @@
 import { SelectableValue } from '@grafana/data';
 import { CodeEditorSuggestionItem, CodeEditorSuggestionItemKind } from '@grafana/ui';
 
-import { CodeLanguage } from '../types';
+import { CodeEditorType, CodeLanguage } from '../types';
 
 /**
  * Code Editor Config
@@ -29,9 +29,9 @@ export const CODE_LANGUAGE_OPTIONS: SelectableValue[] = [
 ];
 
 /**
- * Suggestions
+ * Request Code Suggestions
  */
-export const CODE_EDITOR_SUGGESTIONS: CodeEditorSuggestionItem[] = [
+const REQUEST_CODE_SUGGESTIONS: CodeEditorSuggestionItem[] = [
   {
     label: 'options',
     kind: CodeEditorSuggestionItemKind.Property,
@@ -102,7 +102,12 @@ export const CODE_EDITOR_SUGGESTIONS: CodeEditorSuggestionItem[] = [
     kind: CodeEditorSuggestionItemKind.Method,
     detail: 'Parse the results from /api/ds/query.',
   },
+];
 
+/**
+ * Base Context Suggestions
+ */
+const BASE_CONTEXT_SUGGESTIONS: CodeEditorSuggestionItem[] = [
   /**
    * Context
    */
@@ -220,3 +225,129 @@ export const CODE_EDITOR_SUGGESTIONS: CodeEditorSuggestionItem[] = [
     detail: 'Parse the results from /api/ds/query.',
   },
 ];
+
+/**
+ * Suggestions
+ */
+export const CODE_EDITOR_SUGGESTIONS: Record<CodeEditorType, CodeEditorSuggestionItem[]> = {
+  /**
+   * Initial, update or reset request
+   */
+  [CodeEditorType.REQUEST]: [...REQUEST_CODE_SUGGESTIONS, ...BASE_CONTEXT_SUGGESTIONS],
+
+  /**
+   * Get data source payload
+   */
+  [CodeEditorType.GET_PAYLOAD]: [
+    {
+      label: 'elements',
+      kind: CodeEditorSuggestionItemKind.Property,
+      detail: 'Form Elements.',
+    },
+    {
+      label: 'initial',
+      kind: CodeEditorSuggestionItemKind.Property,
+      detail: 'Parsed values from the Initial Request.',
+    },
+  ],
+
+  /**
+   * Element value changed
+   */
+  [CodeEditorType.ELEMENT_VALUE_CHANGED]: [
+    ...BASE_CONTEXT_SUGGESTIONS,
+    {
+      label: 'context.element',
+      kind: CodeEditorSuggestionItemKind.Property,
+      detail: 'Form Element which value has been changed.',
+    },
+    {
+      label: 'context.panel.setError',
+      kind: CodeEditorSuggestionItemKind.Method,
+      detail: 'Set panel error.',
+    },
+    {
+      label: 'context.panel.enableReset',
+      kind: CodeEditorSuggestionItemKind.Method,
+      detail: 'Enable reset button.',
+    },
+    {
+      label: 'context.panel.disableReset',
+      kind: CodeEditorSuggestionItemKind.Method,
+      detail: 'Disable reset button.',
+    },
+    {
+      label: 'context.panel.enableSubmit',
+      kind: CodeEditorSuggestionItemKind.Method,
+      detail: 'Enable submit button.',
+    },
+    {
+      label: 'context.panel.disableSubmit',
+      kind: CodeEditorSuggestionItemKind.Method,
+      detail: 'Disable submit button.',
+    },
+    {
+      label: 'context.panel.enableSaveDefault',
+      kind: CodeEditorSuggestionItemKind.Method,
+      detail: 'Enable save default button.',
+    },
+    {
+      label: 'context.panel.disableSaveDefault',
+      kind: CodeEditorSuggestionItemKind.Method,
+      detail: 'Disable save default button.',
+    },
+  ],
+
+  /**
+   * Element disable if
+   */
+  [CodeEditorType.ELEMENT_DISABLE_IF]: [
+    {
+      label: 'elements',
+      kind: CodeEditorSuggestionItemKind.Property,
+      detail: 'Form Elements.',
+    },
+    {
+      label: 'replaceVariables',
+      kind: CodeEditorSuggestionItemKind.Method,
+      detail: 'Interpolate variables.',
+    },
+  ],
+
+  /**
+   * Element show if
+   */
+  [CodeEditorType.ELEMENT_SHOW_IF]: [
+    {
+      label: 'elements',
+      kind: CodeEditorSuggestionItemKind.Property,
+      detail: 'Form Elements.',
+    },
+    {
+      label: 'replaceVariables',
+      kind: CodeEditorSuggestionItemKind.Method,
+      detail: 'Interpolate variables.',
+    },
+  ],
+
+  /**
+   * Element get options
+   */
+  [CodeEditorType.ELEMENT_GET_OPTIONS]: [
+    {
+      label: 'data',
+      kind: CodeEditorSuggestionItemKind.Property,
+      detail: 'Result set of panel queries.',
+    },
+    {
+      label: 'elements',
+      kind: CodeEditorSuggestionItemKind.Property,
+      detail: 'Form Elements.',
+    },
+    {
+      label: 'replaceVariables',
+      kind: CodeEditorSuggestionItemKind.Method,
+      detail: 'Interpolate variables.',
+    },
+  ],
+};