From 823aaaeb7c7e91378994fc7910f3f94783a20f2e Mon Sep 17 00:00:00 2001
From: Andreas Christou <andreas.christou@grafana.com>
Date: Fri, 24 Feb 2023 16:37:09 +0000
Subject: [PATCH] AzureMonitor: Fix template variables in ARG subscription
 field (#63731)

Add support for template variables in sub field
---
 .../ArgQueryEditor/ArgQueryEditor.test.tsx    | 26 +++++++++++++++++++
 .../ArgQueryEditor/ArgQueryEditor.tsx         |  4 ++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/public/app/plugins/datasource/azuremonitor/components/ArgQueryEditor/ArgQueryEditor.test.tsx b/public/app/plugins/datasource/azuremonitor/components/ArgQueryEditor/ArgQueryEditor.test.tsx
index e1c2cbad433..2ec87df7808 100644
--- a/public/app/plugins/datasource/azuremonitor/components/ArgQueryEditor/ArgQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/ArgQueryEditor/ArgQueryEditor.test.tsx
@@ -92,4 +92,30 @@ describe('ArgQueryEditor', () => {
     expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ subscriptions: ['foo', 'bar'] }));
     expect(onChange).not.toHaveBeenCalledWith(expect.objectContaining({ subscriptions: ['foo', 'bar', 'foobar'] }));
   });
+
+  it('should keep a template variable if used in the subscription field', async () => {
+    const onChange = jest.fn();
+    const datasource = createMockDatasource({
+      getSubscriptions: jest.fn().mockResolvedValue([{ value: 'foo' }]),
+    });
+    const query = createMockQuery({
+      subscriptions: ['$test'],
+    });
+    render(
+      <ArgQueryEditor
+        {...defaultProps}
+        datasource={datasource}
+        onChange={onChange}
+        query={query}
+        variableOptionGroup={{ label: 'Template Variables', options: [{ label: '$test', value: '$test' }] }}
+      />
+    );
+    expect(
+      await screen.findByTestId(selectors.components.queryEditor.argsQueryEditor.container.input)
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByTestId(selectors.components.queryEditor.argsQueryEditor.subscriptions.input)
+    ).toHaveTextContent('$test');
+    expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ subscriptions: ['$test'] }));
+  });
 });
diff --git a/public/app/plugins/datasource/azuremonitor/components/ArgQueryEditor/ArgQueryEditor.tsx b/public/app/plugins/datasource/azuremonitor/components/ArgQueryEditor/ArgQueryEditor.tsx
index 79aaec260f1..49fcfa9b33f 100644
--- a/public/app/plugins/datasource/azuremonitor/components/ArgQueryEditor/ArgQueryEditor.tsx
+++ b/public/app/plugins/datasource/azuremonitor/components/ArgQueryEditor/ArgQueryEditor.tsx
@@ -33,7 +33,9 @@ function selectSubscriptions(
   if (querySubscriptions.length === 0 && fetchedSubscriptions.length) {
     querySubscriptions = [fetchedSubscriptions[0]];
   }
-  const commonSubscriptions = intersection(querySubscriptions, fetchedSubscriptions);
+
+  const templateVars = querySubscriptions.filter((sub) => sub.includes('$'));
+  const commonSubscriptions = intersection(querySubscriptions, fetchedSubscriptions).concat(templateVars);
   if (fetchedSubscriptions.length && querySubscriptions.length > commonSubscriptions.length) {
     // If not all of the query subscriptions are in the list of fetched subscriptions, then
     // select only the ones present (or the first one if none is present)