From 4bf350cc6281ee52576d5fc099cda459ab5d69d2 Mon Sep 17 00:00:00 2001
From: Brendan O'Handley <brendan.ohandley@grafana.com>
Date: Wed, 4 Sep 2024 08:11:17 -0500
Subject: [PATCH] Prometheus: Variable query editor, display selected label
 when using query type of label values (#92513)

display label, add test
---
 .../src/components/VariableQueryEditor.test.tsx               | 2 ++
 .../grafana-prometheus/src/components/VariableQueryEditor.tsx | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-prometheus/src/components/VariableQueryEditor.test.tsx b/packages/grafana-prometheus/src/components/VariableQueryEditor.test.tsx
index dd9b17beb3c..cb0f96ef54d 100644
--- a/packages/grafana-prometheus/src/components/VariableQueryEditor.test.tsx
+++ b/packages/grafana-prometheus/src/components/VariableQueryEditor.test.tsx
@@ -265,6 +265,8 @@ describe('PromVariableQueryEditor', () => {
     const labelSelect = screen.getByLabelText('label-select');
     await userEvent.type(labelSelect, 'this');
     await selectOptionInTest(labelSelect, 'this');
+    //display label in label select
+    await waitFor(() => expect(screen.getByText('this')).toBeInTheDocument());
 
     await waitFor(() =>
       expect(onChange).toHaveBeenCalledWith({
diff --git a/packages/grafana-prometheus/src/components/VariableQueryEditor.tsx b/packages/grafana-prometheus/src/components/VariableQueryEditor.tsx
index 6c1c470c69d..ab7f041590c 100644
--- a/packages/grafana-prometheus/src/components/VariableQueryEditor.tsx
+++ b/packages/grafana-prometheus/src/components/VariableQueryEditor.tsx
@@ -2,7 +2,7 @@
 import debounce from 'debounce-promise';
 import { FormEvent, useCallback, useEffect, useState } from 'react';
 
-import { QueryEditorProps, SelectableValue } from '@grafana/data';
+import { QueryEditorProps, SelectableValue, toOption } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { AsyncSelect, InlineField, InlineFieldRow, Input, Select, TextArea } from '@grafana/ui';
 
@@ -286,7 +286,7 @@ export const PromVariableQueryEditor = ({ onChange, query, datasource, range }:
               <AsyncSelect
                 aria-label="label-select"
                 onChange={onLabelChange}
-                value={label}
+                value={label ? toOption(label) : null}
                 defaultOptions={truncatedLabelOptions}
                 width={25}
                 allowCustomValue