From b2644de6c8a08181cbe0a9f545393bd42753477c Mon Sep 17 00:00:00 2001
From: Adam Simpson <adam@adamsimpson.net>
Date: Wed, 4 May 2022 09:54:09 -0400
Subject: [PATCH] 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.
---
 .../src/types/featureToggles.gen.ts           |  1 +
 pkg/services/featuremgmt/registry.go          |  7 +++
 pkg/services/featuremgmt/toggles_gen.go       |  4 ++
 .../QueryEditor/QueryEditor.test.tsx          | 18 ++++++++
 .../components/QueryEditor/QueryEditor.tsx    |  6 ++-
 .../components/QueryHeader.tsx                | 45 +++++++++++++++++++
 6 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryHeader.tsx

diff --git a/packages/grafana-data/src/types/featureToggles.gen.ts b/packages/grafana-data/src/types/featureToggles.gen.ts
index c00c802c03c..53216524eb1 100644
--- a/packages/grafana-data/src/types/featureToggles.gen.ts
+++ b/packages/grafana-data/src/types/featureToggles.gen.ts
@@ -59,4 +59,5 @@ export interface FeatureToggles {
   savedItems?: boolean;
   cloudWatchDynamicLabels?: boolean;
   datasourceQueryMultiStatus?: boolean;
+  azureMonitorExperimentalUI?: boolean;
 }
diff --git a/pkg/services/featuremgmt/registry.go b/pkg/services/featuremgmt/registry.go
index 04386a7940b..5080805e73a 100644
--- a/pkg/services/featuremgmt/registry.go
+++ b/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,
+		},
 	}
 )
diff --git a/pkg/services/featuremgmt/toggles_gen.go b/pkg/services/featuremgmt/toggles_gen.go
index 7309dce29ef..ded1ce2e065 100644
--- a/pkg/services/featuremgmt/toggles_gen.go
+++ b/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"
 )
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryEditor.test.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryEditor.test.tsx
index d23ec33fcd3..9b602d04215 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryEditor.test.tsx
+++ b/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;
+  });
 });
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryEditor.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryEditor.tsx
index 5efe979923b..bd797cd6334 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryEditor.tsx
+++ b/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}
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryHeader.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryHeader.tsx
new file mode 100644
index 00000000000..843095e2103
--- /dev/null
+++ b/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>
+  );
+};