From 82ae879cf7187953fa1bc088569d1a53bfcd3d86 Mon Sep 17 00:00:00 2001
From: "grafana-delivery-bot[bot]"
 <132647405+grafana-delivery-bot[bot]@users.noreply.github.com>
Date: Thu, 14 Dec 2023 12:55:35 +0200
Subject: [PATCH] [v10.2.x] Templating: Json interpolation of single-value
 default selection does not create valid json (#79503)

Templating: Json interpolation of single-value default selection does not create valid json (#79137)

(cherry picked from commit 31d79c05027b5ecd46d880c6ba629d36af8c6848)

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>
(cherry picked from commit fe27d4835e24aef5781bed792a6644534779c12c)
---
 public/app/features/variables/state/actions.test.ts | 6 +++---
 public/app/features/variables/state/actions.ts      | 6 +++++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/public/app/features/variables/state/actions.test.ts b/public/app/features/variables/state/actions.test.ts
index d2c8c3445cd..094ded8c786 100644
--- a/public/app/features/variables/state/actions.test.ts
+++ b/public/app/features/variables/state/actions.test.ts
@@ -305,7 +305,7 @@ describe('shared actions', () => {
           key,
           setCurrentVariableValue(
             toVariablePayload(stats, {
-              option: { text: ALL_VARIABLE_TEXT, value: ALL_VARIABLE_VALUE, selected: false },
+              option: { text: [ALL_VARIABLE_TEXT], value: [ALL_VARIABLE_VALUE], selected: true },
             })
           )
         ),
@@ -473,8 +473,8 @@ describe('shared actions', () => {
         ${['A', 'B', 'C']} | ${['B']}      | ${'C'}       | ${['B']}      | ${true}
         ${['A', 'B', 'C']} | ${['B', 'C']} | ${undefined} | ${['B', 'C']} | ${true}
         ${['A', 'B', 'C']} | ${['B', 'C']} | ${'C'}       | ${['B', 'C']} | ${true}
-        ${['A', 'B', 'C']} | ${['X']}      | ${undefined} | ${'A'}        | ${false}
-        ${['A', 'B', 'C']} | ${['X']}      | ${'C'}       | ${'A'}        | ${false}
+        ${['A', 'B', 'C']} | ${['X']}      | ${undefined} | ${['A']}      | ${true}
+        ${['A', 'B', 'C']} | ${['X']}      | ${'C'}       | ${['A']}      | ${true}
       `(
         'then correct actions are dispatched',
         async ({ withOptions, withCurrent, defaultValue, expectedText, expectedSelected }) => {
diff --git a/public/app/features/variables/state/actions.ts b/public/app/features/variables/state/actions.ts
index 6739f74bf94..e7ea07df89e 100644
--- a/public/app/features/variables/state/actions.ts
+++ b/public/app/features/variables/state/actions.ts
@@ -506,7 +506,11 @@ export const validateVariableSelectionState = (
       // if none pick first
       if (selected.length === 0) {
         const option = variableInState.options[0];
-        return setValue(variableInState, option);
+        return setValue(variableInState, {
+          value: typeof option.value === 'string' ? [option.value] : option.value,
+          text: typeof option.text === 'string' ? [option.text] : option.text,
+          selected: true,
+        });
       }
 
       const option: VariableOption = {