Update element helpers

CHANGELOG.md

@@ -8,6 +8,8 @@
 - Added form-element of type color (#561)
 - Updated new lines in Text Area and Code Editor (#563)
 - Added support variables in data sources (#564)
+- Updated packages for Code Editor (#569)
+- Updated element helpers (#570)
 
 ## 4.9.0 (2024-11-16)
 

provisioning/dashboards/panels.json

@@ -24,7 +24,7 @@
   "editable": true,
   "fiscalYearStartMonth": 0,
   "graphTooltip": 0,
-  "id": 3,
+  "id": 4,
   "links": [],
   "panels": [
     {
@@ -120,7 +120,6 @@
         },
         "updateEnabled": "auto"
       },
-      "pluginVersion": "4.9.0",
       "targets": [
         {
           "refId": "A"
@@ -245,7 +244,6 @@
         },
         "updateEnabled": "auto"
       },
-      "pluginVersion": "4.9.0",
       "targets": [
         {
           "refId": "A"
@@ -346,7 +344,6 @@
         },
         "updateEnabled": "auto"
       },
-      "pluginVersion": "4.9.0",
       "targets": [
         {
           "refId": "A"
@@ -494,7 +491,6 @@
         },
         "updateEnabled": "auto"
       },
-      "pluginVersion": "4.9.0",
       "targets": [
         {
           "refId": "A"
@@ -641,7 +637,6 @@
         },
         "updateEnabled": "auto"
       },
-      "pluginVersion": "4.9.0",
       "targets": [
         {
           "refId": "A"
@@ -822,7 +817,6 @@
         },
         "updateEnabled": "auto"
       },
-      "pluginVersion": "4.9.0",
       "targets": [
         {
           "refId": "A"
@@ -869,7 +863,7 @@
         "elements": [
           {
             "id": "amount",
-            "showIf": "const test = context.grafana.replaceVariables('$var');\nreturn test === 'test'",
+            "showIf": "const test = '$var'\nreturn test === 'test'",
             "title": "Amount",
             "type": "number",
             "uid": "16cf7be7-c7b0-4742-afa8-e069f5e06558",
@@ -905,14 +899,17 @@
             "id": "select",
             "options": [
               {
+                "id": "max",
                 "label": "Max",
                 "value": "max"
               },
               {
+                "id": "min",
                 "label": "Min",
                 "value": "min"
               },
               {
+                "id": "avg",
                 "label": "Average",
                 "value": "avg"
               }
@@ -932,10 +929,12 @@
             "id": "radio",
             "options": [
               {
+                "id": "plus",
                 "label": "Plus",
                 "value": "plus"
               },
               {
+                "id": "minus",
                 "label": "Minus",
                 "value": "minus"
               }
@@ -1039,7 +1038,6 @@
         "width": 0,
         "widthMode": "auto"
       },
-      "pluginVersion": "4.9.0",
       "targets": [
         {
           "refId": "A"
@@ -1251,7 +1249,6 @@
         "width": 0,
         "widthMode": "auto"
       },
-      "pluginVersion": "4.9.0",
       "targets": [
         {
           "refId": "A"
@@ -1358,7 +1355,6 @@
         },
         "updateEnabled": "auto"
       },
-      "pluginVersion": "4.9.0",
       "targets": [
         {
           "refId": "A"

src/components/CustomButtonsRow/CustomButtonsRow.tsx

@@ -47,14 +47,14 @@ export const CustomButtonsRow: React.FC<Props> = ({ elements, initial, replaceVa
   const visibleElements = useMemo(() => {
     return elements
       .filter((element) => {
-        return element.helpers.showIf({ elements, replaceVariables });
+        return element.helpers.showIf({ elements });
       })
       .map((element) => ({
         ...element,
-        disabled: element.helpers.disableIf({ elements, replaceVariables }),
-        options: element.helpers.getOptions({ elements, replaceVariables, data }),
+        disabled: element.helpers.disableIf({ elements }),
+        options: element.helpers.getOptions({ elements, data }),
       }));
-  }, [data, elements, replaceVariables]);
+  }, [data, elements]);
 
   return (
     <>

src/components/FormElements/FormElements.tsx

@@ -114,13 +114,13 @@ export const FormElements: React.FC<Props> = ({
   const visibleElements = useMemo(() => {
     return elements
       .filter((element) => {
-        return element.helpers.showIf({ elements, replaceVariables });
+        return element.helpers.showIf({ elements });
       })
       .map((element) => ({
         ...element,
         title: replaceVariables(element.title),
-        disabled: element.helpers.disableIf({ elements, replaceVariables }),
-        options: element.helpers.getOptions({ elements, replaceVariables, data }),
+        disabled: element.helpers.disableIf({ elements }),
+        options: element.helpers.getOptions({ elements, data }),
       }));
   }, [data, elements, replaceVariables]);
 

src/components/FormElementsEditor/FormElementsEditor.tsx

@@ -54,6 +54,7 @@ export const FormElementsEditor: React.FC<Props> = ({ value, onChange, context }
     onChangeElementOption,
     onElementRemove,
   } = useFormLayout({
+    replaceVariables: context.replaceVariables,
     onChangeElementsOption: onChange,
     value,
   });
@@ -187,7 +188,7 @@ export const FormElementsEditor: React.FC<Props> = ({ value, onChange, context }
       </div>
 
       <hr />
-      <NewElement elements={elements} onSave={onElementAdd} />
+      <NewElement elements={elements} onSave={onElementAdd} replaceVariables={context.replaceVariables} />
     </div>
   );
 };

src/components/FormPanel/FormPanel.tsx

@@ -169,6 +169,7 @@ export const FormPanel: React.FC<Props> = ({
     getSection,
     getAllSections,
   } = useFormLayout({
+    replaceVariables: replaceVariables,
     onChangeElementsOption: onChangeOptions,
     value: options.elements,
     isAutoSave: false,
@@ -1187,10 +1188,7 @@ export const FormPanel: React.FC<Props> = ({
                     /**
                      * Skip hidden element
                      */
-                    if (
-                      ('hidden' in element && element.hidden) ||
-                      !element.helpers.showIf({ elements, replaceVariables })
-                    ) {
+                    if (('hidden' in element && element.hidden) || !element.helpers.showIf({ elements })) {
                       return;
                     }
 

src/components/InitialFieldsEditor/InitialFieldsEditor.tsx

@@ -19,6 +19,7 @@ export const InitialFieldsEditor: React.FC<Props> = ({ value, onChange, context
    * Form Elements State
    */
   const { elements, isChanged, onSaveUpdates, onChangeElement } = useFormLayout({
+    replaceVariables: context.replaceVariables,
     onChangeElementsOption: onChange,
     value,
   });

src/components/LayoutSectionsEditor/LayoutSectionsEditor.tsx

@@ -26,6 +26,7 @@ export const LayoutSectionsEditor: React.FC<Props> = ({ value, onChange, context
    * Sections
    */
   const { sections, onChangeSections } = useFormLayout({
+    replaceVariables: context.replaceVariables,
     onChangeSectionsOption: onChange,
     layoutSections: value,
   });

src/components/NewElement/NewElement.tsx

@@ -1,4 +1,4 @@
-import { SelectableValue } from '@grafana/data';
+import { InterpolateFunction, SelectableValue } from '@grafana/data';
 import { Alert, Button, CollapsableSection, InlineField, Input, Select } from '@grafana/ui';
 import React, { ChangeEvent, useCallback, useState } from 'react';
 
@@ -19,12 +19,17 @@ interface Props {
    * On Save
    */
   onSave: (element: LocalFormElement) => void;
+
+  /**
+   * On Save
+   */
+  replaceVariables?: InterpolateFunction;
 }
 
 /**
  * New Element
  */
-export const NewElement: React.FC<Props> = ({ onSave, elements }) => {
+export const NewElement: React.FC<Props> = ({ onSave, elements, replaceVariables }) => {
   /**
    * States
    */
@@ -51,13 +56,13 @@ export const NewElement: React.FC<Props> = ({ onSave, elements }) => {
     /**
      * Save Element
      */
-    onSave(getElementWithNewType(toLocalFormElement(newElement), newElement.type));
+    onSave(getElementWithNewType(toLocalFormElement(newElement, replaceVariables), newElement.type));
 
     /**
      * Reset input values
      */
     setNewElement(FORM_ELEMENT_DEFAULT);
-  }, [elements, newElement, onSave]);
+  }, [elements, newElement, onSave, replaceVariables]);
 
   return (
     <CollapsableSection

src/hooks/useFormLayout.ts

@@ -1,4 +1,4 @@
-import { EventBusSrv, SelectableValue } from '@grafana/data';
+import { EventBusSrv, InterpolateFunction, SelectableValue } from '@grafana/data';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { FormElement, LayoutSection, LayoutSectionWithElements, LocalFormElement } from '../types';
@@ -30,7 +30,9 @@ export const useFormLayout = ({
   value,
   isAutoSave = true,
   layoutSections,
+  replaceVariables,
 }: {
+  replaceVariables?: InterpolateFunction;
   onChangeElementsOption?: (elements: FormElement[]) => void;
   value?: FormElement[];
   isAutoSave?: boolean;
@@ -43,7 +45,7 @@ export const useFormLayout = ({
    * States
    */
   const [elements, setElements, elementsRef] = useMutableState<LocalFormElement[]>(
-    normalizeElementsForLocalState(value)
+    normalizeElementsForLocalState(value, replaceVariables)
   );
   const [sections, setSections, sectionsRef] = useMutableState<LayoutSection[]>(layoutSections || []);
   const [isChanged, setIsChanged] = useState(false);
@@ -209,18 +211,20 @@ export const useFormLayout = ({
    */
   const setFormValue = useCallback(
     (objectValues: Record<string, unknown>) => {
-      onChangeElements(setFormValueHandler(elementsRef.current, normalizeElementsForLocalState(value), objectValues));
+      onChangeElements(
+        setFormValueHandler(elementsRef.current, normalizeElementsForLocalState(value, replaceVariables), objectValues)
+      );
     },
-    [elementsRef, onChangeElements, value]
+    [elementsRef, onChangeElements, replaceVariables, value]
   );
 
   /**
    * Update local elements
    */
   useEffect(() => {
-    setElements(normalizeElementsForLocalState(value));
+    setElements(normalizeElementsForLocalState(value, replaceVariables));
     setIsChanged(false);
-  }, [setElements, value]);
+  }, [replaceVariables, setElements, value]);
 
   /**
    * Add new section