Azure Monitor: Add feature gating for new MetricsQueryEditor with resource picker (#46124)

* Azure Monitor: Use feature toggle for dev of new UI for Metrics Queries.

* Fixes after CR

packages/grafana-data/src/types/featureToggles.gen.ts

@@ -46,4 +46,5 @@ export interface FeatureToggles {
   dashboardComments?: boolean;
   annotationComments?: boolean;
   migrationLocking?: boolean;
+  azureMonitorResourcePickerForMetrics?: boolean;
 }

pkg/services/featuremgmt/registry.go

@@ -162,5 +162,12 @@ var (
 			Description: "Lock database during migrations",
 			State:       FeatureStateBeta,
 		},
+		{
+			Name:            "azureMonitorResourcePickerForMetrics",
+			Description:     "New UI for Azure Monitor Metrics Query",
+			State:           FeatureStateAlpha,
+			RequiresDevMode: true,
+			FrontendOnly:    true,
+		},
 	}
 )

pkg/services/featuremgmt/toggles_gen.go

@@ -122,4 +122,8 @@ const (
 	// FlagMigrationLocking
 	// Lock database during migrations
 	FlagMigrationLocking = "migrationLocking"
+
+	// FlagAzureMonitorResourcePickerForMetrics
+	// New UI for Azure Monitor Metrics Query
+	FlagAzureMonitorResourcePickerForMetrics = "azureMonitorResourcePickerForMetrics"
 )

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/NewMetricsQueryEditor/MetricsQueryEditor.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface MetricsQueryEditorProps {}
+
+const MetricsQueryEditor: React.FC<MetricsQueryEditorProps> = ({}) => {
+  return <div data-testid="azure-monitor-metrics-query-editor-with-resource-picker">New Query Editor</div>;
+};
+
+export default MetricsQueryEditor;

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryEditor.test.tsx

@@ -1,4 +1,5 @@
 import * as ui from '@grafana/ui';
+import { config } from '@grafana/runtime';
 import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import selectEvent from 'react-select-event';
@@ -130,4 +131,26 @@ describe('Azure Monitor QueryEditor', () => {
 
     expect(screen.queryByText('Application Insights')).toBeInTheDocument();
   });
+
+  it('renders the new query editor for metrics when enabled with a feature toggle', async () => {
+    const originalConfigValue = config.featureToggles.azureMonitorResourcePickerForMetrics;
+
+    // To do this irl go to custom.ini file and add resourcePickerForMetrics = true under [feature_toggles]
+    config.featureToggles.azureMonitorResourcePickerForMetrics = true;
+
+    const mockDatasource = createMockDatasource();
+    const mockQuery = {
+      ...createMockQuery(),
+      queryType: AzureQueryType.AzureMonitor,
+    };
+
+    render(<QueryEditor query={mockQuery} datasource={mockDatasource} onChange={() => {}} onRunQuery={() => {}} />);
+
+    await waitFor(() =>
+      expect(screen.getByTestId('azure-monitor-metrics-query-editor-with-resource-picker')).toBeInTheDocument()
+    );
+
+    // reset config to not impact future tests
+    config.featureToggles.azureMonitorResourcePickerForMetrics = originalConfigValue;
+  });
 });

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryEditor.tsx

@@ -1,5 +1,7 @@
 import { QueryEditorProps } from '@grafana/data';
 import { Alert } from '@grafana/ui';
+import { config } from '@grafana/runtime';
+
 import { debounce } from 'lodash';
 import React, { useCallback, useMemo } from 'react';
 
@@ -19,6 +21,7 @@ import InsightsAnalyticsEditor from '../deprecated/components/InsightsAnalyticsE
 import { gtGrafana9 } from '../deprecated/utils';
 import LogsQueryEditor from '../LogsQueryEditor';
 import MetricsQueryEditor from '../MetricsQueryEditor';
+import NewMetricsQueryEditor from '../NewMetricsQueryEditor/MetricsQueryEditor';
 import { Space } from '../Space';
 import QueryTypeField from './QueryTypeField';
 import usePreparedQuery from './usePreparedQuery';
@@ -95,6 +98,9 @@ const EditorForQueryType: React.FC<EditorForQueryTypeProps> = ({
 }) => {
   switch (query.queryType) {
     case AzureQueryType.AzureMonitor:
+      if (config.featureToggles.azureMonitorResourcePickerForMetrics) {
+        return <NewMetricsQueryEditor />;
+      }
       return (
         <MetricsQueryEditor
           subscriptionId={subscriptionId}