From 3e64e2ecb23a03ed52ce7271b1b912b1c78d0cbd Mon Sep 17 00:00:00 2001
From: Leonardo Petrora <29212725+lpetrora@users.noreply.github.com>
Date: Mon, 18 Nov 2024 13:11:08 +0100
Subject: [PATCH] User defined variables incorrectly rendered

It fixes an issue with variable names on Grafana 11.3, where these
variables were rendered as undefined.

Github issue #278

CMK-20263
---
 src/ui/components.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/ui/components.tsx b/src/ui/components.tsx
index 99d053a..09086a6 100644
--- a/src/ui/components.tsx
+++ b/src/ui/components.tsx
@@ -83,9 +83,10 @@ export const CheckMkGenericAsyncSelect = function <Value extends string | (strin
         const data = await autocompleter(inputValue);
         if (showVariables !== false) {
           for (const variable of getTemplateSrv().getVariables()) {
+            const variableId = variable?.id || variable.name;
             data.splice(0, 0, {
-              value: `$${variable.id}` as Value,
-              label: `$${variable.id}`,
+              value: `$${variableId}` as Value,
+              label: `$${variableId}`,
               isGrafanaVariable: true,
             });
           }