Add Label Background and Label Color for element with type Button (#502)

* support colors for button type added * provisioning updated * Update Components * Update CHANGELOG.md --------- Co-authored-by: Mikhail Volkov <[email protected]>
VolkovLabs · Sep 29, 2024 · 3831b5b · 3831b5b
1 parent f73c58c
commit 3831b5b
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,12 +1,13 @@
 # Change Log
 
-## 4.6.0 (IN PROGRESS)
+## 4.6.0 (2024-09-28)
 
 ### Features / Enhancements
 
 - Updated initial values for elements from data source (#490)
 - Added wrap button in the code editor (#491)
 - Updated loading bar for Initial Request (#492)
+- Added Label Background and Label Color for element with type Button (#502)
 
 ## 4.5.0 (2024-09-06)
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "@grafana/runtime": "^11.2.0",
     "@grafana/ui": "^11.2.0",
     "@hello-pangea/dnd": "^16.6.0",
-    "@volkovlabs/components": "^3.0.0",
+    "@volkovlabs/components": "^3.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "semver": "^7.6.3",

diff --git a/provisioning/dashboards/buttons.json b/provisioning/dashboards/buttons.json
@@ -18,7 +18,6 @@
   "editable": true,
   "fiscalYearStartMonth": 0,
   "graphTooltip": 0,
-  "id": 9,
   "links": [],
   "panels": [
     {
@@ -42,11 +41,7 @@
           "body": "Please confirm to update changed values",
           "cancel": "Cancel",
           "columns": {
-            "include": [
-              "name",
-              "oldValue",
-              "newValue"
-            ],
+            "include": ["name", "oldValue", "newValue"],
             "name": "Label",
             "newValue": "New Value",
             "oldValue": "Old Value"
@@ -58,11 +53,14 @@
         "elementValueChanged": "",
         "elements": [
           {
+            "background": "",
             "backgroundColor": "",
             "buttonLabel": "Button",
             "customCode": "",
             "foregroundColor": "",
-            "id": "butotn",
+            "id": "button",
+            "labelBackground": "",
+            "labelColor": "",
             "labelWidth": 10,
             "section": "",
             "show": "form",
@@ -154,12 +152,12 @@
           "contentType": "application/json",
           "getPayload": "const payload = {};\n\ncontext.panel.elements.forEach((element) => {\n  if (!element.value) {\n    return;\n  }\n\n  payload[element.id] = element.value;\n})\n\nreturn payload;",
           "method": "-",
-          "payload": "const payload = {};\n\ncontext.panel.elements.forEach((element) => {\n  if (!element.value) {\n    return;\n  }\n\n  payload[element.id] = element.value;\n})\n\nreturn payload;",
+          "payload": {},
           "payloadMode": "all"
         },
         "updateEnabled": "auto"
       },
-      "pluginVersion": "4.2.0",
+      "pluginVersion": "4.6.0",
       "targets": [
         {
           "datasource": {
@@ -193,11 +191,7 @@
           "body": "Please confirm to update changed values",
           "cancel": "Cancel",
           "columns": {
-            "include": [
-              "name",
-              "oldValue",
-              "newValue"
-            ],
+            "include": ["name", "oldValue", "newValue"],
             "name": "Label",
             "newValue": "New Value",
             "oldValue": "Old Value"
@@ -305,12 +299,12 @@
           "contentType": "application/json",
           "getPayload": "const payload = {};\n\ncontext.panel.elements.forEach((element) => {\n  if (!element.value) {\n    return;\n  }\n\n  payload[element.id] = element.value;\n})\n\nreturn payload;",
           "method": "-",
-          "payload": "const payload = {};\n\ncontext.panel.elements.forEach((element) => {\n  if (!element.value) {\n    return;\n  }\n\n  payload[element.id] = element.value;\n})\n\nreturn payload;",
+          "payload": {},
           "payloadMode": "all"
         },
         "updateEnabled": "auto"
       },
-      "pluginVersion": "4.2.0",
+      "pluginVersion": "4.6.0",
       "targets": [
         {
           "datasource": {
@@ -322,6 +316,157 @@
       ],
       "title": "In Footer",
       "type": "volkovlabs-form-panel"
+    },
+    {
+      "datasource": {
+        "type": "marcusolsson-static-datasource",
+        "uid": "P1D2C73DC01F2359B"
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 0,
+        "y": 8
+      },
+      "id": 3,
+      "options": {
+        "buttonGroup": {
+          "orientation": "center",
+          "size": "md"
+        },
+        "confirmModal": {
+          "body": "Please confirm to update changed values",
+          "cancel": "Cancel",
+          "columns": {
+            "include": ["name", "oldValue", "newValue"],
+            "name": "Label",
+            "newValue": "New Value",
+            "oldValue": "Old Value"
+          },
+          "confirm": "Confirm",
+          "elementDisplayMode": "modified",
+          "title": "Confirm update request"
+        },
+        "elementValueChanged": "",
+        "elements": [
+          {
+            "background": "#3274D9",
+            "backgroundColor": "",
+            "buttonLabel": "Button",
+            "customCode": "",
+            "foregroundColor": "",
+            "id": "button",
+            "labelBackground": "#AD0317",
+            "labelColor": "#ffffff",
+            "labelWidth": 10,
+            "section": "",
+            "show": "form",
+            "size": "md",
+            "title": "Button",
+            "tooltip": "",
+            "type": "button",
+            "uid": "53b461cc-4f03-4ffe-8884-2baccef8b6f0",
+            "unit": "",
+            "value": "",
+            "variant": "primary"
+          },
+          {
+            "backgroundColor": "",
+            "buttonLabel": "Button",
+            "customCode": "",
+            "foregroundColor": "",
+            "id": "button2",
+            "labelColor": "#A352CC",
+            "labelWidth": 10,
+            "section": "",
+            "show": "form",
+            "size": "sm",
+            "title": "Button 2",
+            "tooltip": "",
+            "type": "button",
+            "uid": "3ae3d2eb-db57-48bf-8d5f-9153b1f7092b",
+            "unit": "",
+            "value": "",
+            "variant": "secondary"
+          },
+          {
+            "hidden": false,
+            "id": "text",
+            "labelWidth": 10,
+            "section": "",
+            "title": "Text",
+            "tooltip": "",
+            "type": "string",
+            "uid": "9c170388-157f-4903-af83-9a8852ed7500",
+            "unit": "",
+            "value": ""
+          }
+        ],
+        "initial": {
+          "code": "console.log(context.panel.data, context.panel.response, context.panel.initial, context.panel.elements);\n\nreturn;\n\n/**\n * Data Source\n * Requires form elements to be defined\n */\nconst dataQuery = context.utils.toDataQueryResponse(context.panel.response);\nconsole.log(dataQuery);",
+          "contentType": "application/json",
+          "getPayload": "return {}",
+          "highlight": false,
+          "highlightColor": "red",
+          "method": "-",
+          "payload": {}
+        },
+        "layout": {
+          "orientation": "horizontal",
+          "padding": 10,
+          "sectionVariant": "default",
+          "variant": "single"
+        },
+        "reset": {
+          "backgroundColor": "purple",
+          "foregroundColor": "yellow",
+          "icon": "process",
+          "text": "Reset",
+          "variant": "hidden"
+        },
+        "resetAction": {
+          "code": "if (context.panel.response) {\n  context.grafana.notifySuccess(['Update', 'Values updated successfully.']);\n  context.grafana.locationService.reload();\n} else {\n  context.grafana.notifyError(['Update', 'An error occurred updating values.']);\n}",
+          "confirm": false,
+          "getPayload": "return {}",
+          "mode": "initial",
+          "payload": {}
+        },
+        "saveDefault": {
+          "icon": "save",
+          "text": "Save Default",
+          "variant": "hidden"
+        },
+        "submit": {
+          "backgroundColor": "purple",
+          "foregroundColor": "yellow",
+          "icon": "cloud-upload",
+          "text": "Submit",
+          "variant": "primary"
+        },
+        "sync": true,
+        "update": {
+          "code": "if (context.panel.response) {\n  context.grafana.notifySuccess(['Update', 'Values updated successfully.']);\n  context.grafana.locationService.reload();\n} else {\n  context.grafana.notifyError(['Update', 'An error occurred updating values.']);\n}",
+          "confirm": false,
+          "contentType": "application/json",
+          "getPayload": "const payload = {};\n\ncontext.panel.elements.forEach((element) => {\n  if (!element.value) {\n    return;\n  }\n\n  payload[element.id] = element.value;\n})\n\nreturn payload;",
+          "method": "-",
+          "payload": {},
+          "payloadMode": "all"
+        },
+        "updateEnabled": "auto"
+      },
+      "pluginVersion": "4.6.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "marcusolsson-static-datasource",
+            "uid": "P1D2C73DC01F2359B"
+          },
+          "refId": "A"
+        }
+      ],
+      "title": "In Form with colors",
+      "type": "volkovlabs-form-panel"
     }
   ],
   "schemaVersion": 39,
@@ -337,6 +482,6 @@
   "timezone": "browser",
   "title": "Buttons",
   "uid": "cdulr0ohehddsa",
-  "version": 5,
+  "version": 1,
   "weekStart": ""
 }
diff --git a/src/components/FormElement/components/CustomButtonElement/CustomButtonElement.tsx b/src/components/FormElement/components/CustomButtonElement/CustomButtonElement.tsx
@@ -4,7 +4,7 @@ import React, { useCallback } from 'react';
 
 import { FormElementType, TEST_IDS } from '@/constants';
 import { ButtonVariant, CustomButtonShow, ExecuteCustomCodeParams, FormElementByType, LocalFormElement } from '@/types';
-import { applyWidth, getButtonVariant } from '@/utils';
+import { applyLabelStyles, applyWidth, getButtonVariant } from '@/utils';
 
 /**
  * Properties
@@ -102,6 +102,7 @@ export const CustomButtonElement: React.FC<Props> = ({
           transparent={!element.title}
           disabled={element.disabled}
           data-testid={TEST_IDS.formElements.fieldCustomButtonContainer}
+          className={applyLabelStyles(element.labelBackground, element.labelColor)}
         >
           {content}
         </InlineField>