From ad73303328474c4433d1806e82f437526c2ec99a Mon Sep 17 00:00:00 2001
From: grafakus <marc.mignonsin@grafana.com>
Date: Tue, 18 Nov 2025 19:36:08 +0100
Subject: [PATCH] VariableEditorForm checks to display preview with multiple
 props

---
 .../settings/variables/VariableEditorForm.tsx             | 8 ++++----
 .../settings/variables/components/QueryVariableForm.tsx   | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/public/app/features/dashboard-scene/settings/variables/VariableEditorForm.tsx b/public/app/features/dashboard-scene/settings/variables/VariableEditorForm.tsx
index a3b0be31e80..53d5ee64915 100644
--- a/public/app/features/dashboard-scene/settings/variables/VariableEditorForm.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/VariableEditorForm.tsx
@@ -68,7 +68,9 @@ export function VariableEditorForm({ variable, onTypeChange, onGoBack, onDelete
   const onHideChange = (hide: VariableHide) => variable.setState({ hide });
 
   const isHasVariableOptions = hasVariableOptions(variable);
-  const hasMultiProps = 'valuesFormat' in variable.state && variable.state.valuesFormat === 'json';
+  const optionsForSelect = isHasVariableOptions ? variable.getOptionsForSelect(false) : [];
+  const hasJsonValuesFormat = 'valuesFormat' in variable.state && variable.state.valuesFormat === 'json';
+  const hasMultiProps = hasJsonValuesFormat || optionsForSelect.every((o) => Boolean(o.properties));
 
   const onDeleteVariable = (hideModal: () => void) => () => {
     reportInteraction('Delete variable');
@@ -124,9 +126,7 @@ export function VariableEditorForm({ variable, onTypeChange, onGoBack, onDelete
 
       {EditorToRender && <EditorToRender variable={variable} onRunQuery={onRunQuery} />}
 
-      {isHasVariableOptions && (
-        <VariableValuesPreview options={variable.getOptionsForSelect(false)} hasMultiProps={hasMultiProps} />
-      )}
+      {isHasVariableOptions && <VariableValuesPreview options={optionsForSelect} hasMultiProps={hasMultiProps} />}
 
       <div className={styles.buttonContainer}>
         <Stack gap={2}>
diff --git a/public/app/features/dashboard-scene/settings/variables/components/QueryVariableForm.tsx b/public/app/features/dashboard-scene/settings/variables/components/QueryVariableForm.tsx
index 837a1877330..d9b29b13b37 100644
--- a/public/app/features/dashboard-scene/settings/variables/components/QueryVariableForm.tsx
+++ b/public/app/features/dashboard-scene/settings/variables/components/QueryVariableForm.tsx
@@ -127,11 +127,11 @@ export function QueryVariableEditorForm({
             VariableQueryEditor={VariableQueryEditor}
             timeRange={timeRange}
           />
+          {/* TODO: remove me after finished testing - each DS can/should implement their own UI */}
           <Field
-            // TODO: add translation
+            // eslint-disable-next-line @grafana/i18n/no-untranslated-strings
             label="Enable access to all the fields of the query results"
             description={
-              // TODO: add translation
               <Trans i18nKey="">
                 Check{' '}
                 <TextLink href="https://grafana.com/docs/grafana/latest/variables/xxx" external>