From ac7eecdb47e6aebb78964f022f082f9cb814a4e4 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Fri, 14 Apr 2023 10:24:25 +0200
Subject: [PATCH] [v9.5.x] Loki Variable Query Editor: Fix bug when the query
 is updated (#66536)

Loki Variable Query Editor: Fix bug when the query is updated (#66509)

* Variable Query Editor: Remove options override in effect

* Add regression test

(cherry picked from commit 46742f6d96b33d35ba6d18ff267913cb18df8209)

Co-authored-by: Matias Chomicki <matyax@gmail.com>
---
 .../components/VariableQueryEditor.test.tsx   | 51 +++++++++++--------
 .../loki/components/VariableQueryEditor.tsx   |  4 --
 2 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/public/app/plugins/datasource/loki/components/VariableQueryEditor.test.tsx b/public/app/plugins/datasource/loki/components/VariableQueryEditor.test.tsx
index 0f66035ed62..81a4259c334 100644
--- a/public/app/plugins/datasource/loki/components/VariableQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/loki/components/VariableQueryEditor.test.tsx
@@ -26,7 +26,14 @@ describe('LokiVariableQueryEditor', () => {
       onChange: () => {},
     };
 
-    jest.spyOn(props.datasource, 'labelNamesQuery').mockResolvedValue([]);
+    jest.spyOn(props.datasource, 'labelNamesQuery').mockResolvedValue([
+      {
+        text: 'moon',
+      },
+      {
+        text: 'luna',
+      },
+    ]);
   });
 
   test('Allows to create a Label names variable', async () => {
@@ -47,14 +54,6 @@ describe('LokiVariableQueryEditor', () => {
 
   test('Allows to create a Label values variable', async () => {
     const onChange = jest.fn();
-    jest.spyOn(props.datasource, 'labelNamesQuery').mockResolvedValue([
-      {
-        text: 'moon',
-      },
-      {
-        text: 'luna',
-      },
-    ]);
     render(<LokiVariableQueryEditor {...props} onChange={onChange} />);
 
     expect(onChange).not.toHaveBeenCalled();
@@ -77,14 +76,6 @@ describe('LokiVariableQueryEditor', () => {
 
   test('Allows to create a Label values variable with custom label', async () => {
     const onChange = jest.fn();
-    jest.spyOn(props.datasource, 'labelNamesQuery').mockResolvedValue([
-      {
-        text: 'moon',
-      },
-      {
-        text: 'luna',
-      },
-    ]);
     render(<LokiVariableQueryEditor {...props} onChange={onChange} />);
 
     expect(onChange).not.toHaveBeenCalled();
@@ -106,12 +97,12 @@ describe('LokiVariableQueryEditor', () => {
   });
 
   test('Migrates legacy string queries to LokiVariableQuery instances', async () => {
-    const query = 'label_values(log stream selector, label_selector)';
+    const query = 'label_values(log stream selector, luna)';
     // @ts-expect-error
     render(<LokiVariableQueryEditor {...props} onChange={() => {}} query={query} />);
 
     await waitFor(() => expect(screen.getByText('Label values')).toBeInTheDocument());
-    await waitFor(() => expect(screen.getByText('label_selector')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText('luna')).toBeInTheDocument());
     await waitFor(() => expect(screen.getByDisplayValue('log stream selector')).toBeInTheDocument());
   });
 
@@ -122,7 +113,7 @@ describe('LokiVariableQueryEditor', () => {
         onChange={() => {}}
         query={{
           type: LokiVariableQueryType.LabelValues,
-          label: 'label_selector',
+          label: 'luna',
           stream: 'log stream selector',
           refId,
         }}
@@ -130,7 +121,25 @@ describe('LokiVariableQueryEditor', () => {
     );
 
     await waitFor(() => expect(screen.getByText('Label values')).toBeInTheDocument());
-    await waitFor(() => expect(screen.getByText('label_selector')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText('luna')).toBeInTheDocument());
     await waitFor(() => expect(screen.getByDisplayValue('log stream selector')).toBeInTheDocument());
   });
+
+  test('Label options are not lost when selecting one', async () => {
+    const { rerender } = render(<LokiVariableQueryEditor {...props} onChange={() => {}} />);
+
+    await selectOptionInTest(screen.getByLabelText('Query type'), 'Label values');
+    await selectOptionInTest(screen.getByLabelText('Label'), 'luna');
+
+    const updatedQuery = {
+      refId: 'test',
+      type: LokiVariableQueryType.LabelValues,
+      label: 'luna',
+    };
+    rerender(<LokiVariableQueryEditor {...props} query={updatedQuery} onChange={() => {}} />);
+
+    await selectOptionInTest(screen.getByLabelText('Label'), 'moon');
+    await selectOptionInTest(screen.getByLabelText('Label'), 'luna');
+    await screen.findByText('luna');
+  });
 });
diff --git a/public/app/plugins/datasource/loki/components/VariableQueryEditor.tsx b/public/app/plugins/datasource/loki/components/VariableQueryEditor.tsx
index d9c47dc894c..033b28aba0d 100644
--- a/public/app/plugins/datasource/loki/components/VariableQueryEditor.tsx
+++ b/public/app/plugins/datasource/loki/components/VariableQueryEditor.tsx
@@ -31,10 +31,6 @@ export const LokiVariableQueryEditor = ({ onChange, query, datasource }: Props)
     setType(variableQuery.type);
     setLabel(variableQuery.label || '');
     setStream(variableQuery.stream || '');
-
-    if (variableQuery.label) {
-      setLabelOptions([{ label: variableQuery.label, value: variableQuery.label }]);
-    }
   }, [query]);
 
   useEffect(() => {