AzureMonitor: add feature toggle azureMonitorExperimentalUI for migrating to experimental UI (#48658)

* feat: add feature toggle azureMonitorExperimentalUI

Add QueryHeader which adds an experimental header to AzureMonitor. This work is documented in #44432.

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

@@ -59,4 +59,5 @@ export interface FeatureToggles {
   savedItems?: boolean;
   cloudWatchDynamicLabels?: boolean;
   datasourceQueryMultiStatus?: boolean;
+  azureMonitorExperimentalUI?: boolean;
 }

pkg/services/featuremgmt/registry.go

@@ -241,5 +241,12 @@ var (
 			Description: "Introduce HTTP 207 Multi Status for api/ds/query",
 			State:       FeatureStateAlpha,
 		},
+		{
+			Name:            "azureMonitorExperimentalUI",
+			Description:     "Use grafana-experimental UI in Azure Monitor",
+			State:           FeatureStateAlpha,
+			RequiresDevMode: true,
+			FrontendOnly:    true,
+		},
 	}
 )

pkg/services/featuremgmt/toggles_gen.go

@@ -178,4 +178,8 @@ const (
 	// FlagDatasourceQueryMultiStatus
 	// Introduce HTTP 207 Multi Status for api/ds/query
 	FlagDatasourceQueryMultiStatus = "datasourceQueryMultiStatus"
+
+	// FlagAzureMonitorExperimentalUI
+	// Use grafana-experimental UI in Azure Monitor
+	FlagAzureMonitorExperimentalUI = "azureMonitorExperimentalUI"
 )

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

@@ -90,4 +90,22 @@ describe('Azure Monitor QueryEditor', () => {
     // reset config to not impact future tests
     config.featureToggles.azureMonitorResourcePickerForMetrics = originalConfigValue;
   });
+
+  it('should render the experimental QueryHeader when feature toggle is enabled', async () => {
+    const originalConfigValue = config.featureToggles.azureMonitorExperimentalUI;
+
+    config.featureToggles.azureMonitorExperimentalUI = 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-experimental-header')).toBeInTheDocument());
+
+    config.featureToggles.azureMonitorExperimentalUI = originalConfigValue;
+  });
 });

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

@@ -18,6 +18,7 @@ import ArgQueryEditor from '../ArgQueryEditor';
 import LogsQueryEditor from '../LogsQueryEditor';
 import MetricsQueryEditor from '../MetricsQueryEditor';
 import NewMetricsQueryEditor from '../NewMetricsQueryEditor/MetricsQueryEditor';
+import { QueryHeader } from '../QueryHeader';
 import { Space } from '../Space';
 
 import QueryTypeField from './QueryTypeField';
@@ -57,7 +58,10 @@ const QueryEditor: React.FC<AzureMonitorQueryEditorProps> = ({
 
   return (
     <div data-testid="azure-monitor-query-editor">
-      <QueryTypeField query={query} onQueryChange={onQueryChange} />
+      {config.featureToggles.azureMonitorExperimentalUI && <QueryHeader query={query} onQueryChange={onQueryChange} />}
+      {!config.featureToggles.azureMonitorExperimentalUI && (
+        <QueryTypeField query={query} onQueryChange={onQueryChange} />
+      )}
 
       <EditorForQueryType
         data={data}

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

@@ -0,0 +1,45 @@
+import React, { useCallback } from 'react';
+
+import { SelectableValue } from '@grafana/data';
+import { EditorHeader, InlineSelect } from '@grafana/experimental';
+
+import { AzureMonitorQuery, AzureQueryType } from '../types';
+
+interface QueryTypeFieldProps {
+  query: AzureMonitorQuery;
+  onQueryChange: (newQuery: AzureMonitorQuery) => void;
+}
+
+export const QueryHeader: React.FC<QueryTypeFieldProps> = ({ query, onQueryChange }) => {
+  const queryTypes: Array<{ value: AzureQueryType; label: string }> = [
+    { value: AzureQueryType.AzureMonitor, label: 'Metrics' },
+    { value: AzureQueryType.LogAnalytics, label: 'Logs' },
+    { value: AzureQueryType.AzureResourceGraph, label: 'Azure Resource Graph' },
+  ];
+
+  const handleChange = useCallback(
+    (change: SelectableValue<AzureQueryType>) => {
+      change.value &&
+        onQueryChange({
+          ...query,
+          queryType: change.value,
+        });
+    },
+    [onQueryChange, query]
+  );
+
+  return (
+    <span data-testid="azure-monitor-experimental-header">
+      <EditorHeader>
+        <InlineSelect
+          label="Service"
+          value={query.queryType}
+          placeholder="Service..."
+          allowCustomValue
+          options={queryTypes}
+          onChange={handleChange}
+        />
+      </EditorHeader>
+    </span>
+  );
+};