AzureMonitor: Allow template variables in the subscription field (#44312) (#44331)

(cherry picked from commit addeba7f05)

Co-authored-by: Andres Martinez Gotor <andres.martinez@grafana.com>

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/dataHooks.test.ts

@@ -1,5 +1,9 @@
 import { renderHook } from '@testing-library/react-hooks';
+import { MockedObjectDeep } from 'ts-jest/dist/utils/testing';
 
+import createMockDatasource from '../../__mocks__/datasource';
+import Datasource from '../../datasource';
+import { AzureMetricQuery, AzureMonitorOption, AzureMonitorQuery, AzureQueryType } from '../../types';
 import {
   DataHook,
   updateSubscriptions,
@@ -11,10 +15,6 @@ import {
   useResourceTypes,
   useSubscriptions,
 } from './dataHooks';
-import { AzureMetricQuery, AzureMonitorOption, AzureMonitorQuery, AzureQueryType } from '../../types';
-import createMockDatasource from '../../__mocks__/datasource';
-import { MockedObjectDeep } from 'ts-jest/dist/utils/testing';
-import Datasource from '../../datasource';
 
 interface WaitableMock extends jest.Mock<any, any> {
   waitToBeCalled(): Promise<unknown>;
@@ -363,6 +363,11 @@ describe('AzureMonitor: updateSubscriptions', () => {
       query: { ...bareQuery, subscription: 'foo' },
       subscriptionOptions: [{ label: 'foo', value: 'foo' }],
     },
+    {
+      description: 'should not update with a template variable',
+      query: { ...bareQuery, subscription: '$foo' },
+      subscriptionOptions: [],
+    },
     {
       description: 'should update with the first subscription',
       query: { ...bareQuery },

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/dataHooks.ts

@@ -1,4 +1,5 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+
 import Datasource from '../../datasource';
 import { AzureMonitorErrorish, AzureMonitorOption, AzureMonitorQuery } from '../../types';
 import { hasOption, toOption } from '../../utils/common';
@@ -57,7 +58,10 @@ export const updateSubscriptions = (
   const { subscription } = query;
 
   // Return early if subscriptions havent loaded, or if the query already has a subscription
-  if (!subscriptionOptions.length || (subscription && hasOption(subscriptionOptions, subscription))) {
+  if (
+    !subscriptionOptions.length ||
+    (subscription && (hasOption(subscriptionOptions, subscription) || subscription.includes('$')))
+  ) {
     return;
   }