AzureMonitor: migrate Logs+Arg QueryEditor to @grafana/experimental (#48978)

* AzureMonitor: use @grafana/experimental for LogsQueryEditor

ref #48711

* AzureMonitor: migrate ArgQueryEditor to @grafana/experimental.

Change CodeEditor to 100% instead of 1000px to match LogsQueryEditor.

ref #48713

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

@@ -1,5 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 
+import { EditorRows, EditorRow, EditorFieldGroup } from '@grafana/experimental';
+import { config } from '@grafana/runtime';
 import { InlineFieldRow } from '@grafana/ui';
 
 import Datasource from '../../datasource';
@@ -8,7 +10,7 @@ import SubscriptionField from '../SubscriptionField';
 
 import QueryField from './QueryField';
 
-interface LogsQueryEditorProps {
+interface ArgQueryEditorProps {
   query: AzureMonitorQuery;
   datasource: Datasource;
   subscriptionId?: string;
@@ -18,7 +20,7 @@ interface LogsQueryEditorProps {
 }
 
 const ERROR_SOURCE = 'arg-subscriptions';
-const ArgQueryEditor: React.FC<LogsQueryEditorProps> = ({
+const ArgQueryEditor: React.FC<ArgQueryEditorProps> = ({
   query,
   datasource,
   subscriptionId,
@@ -52,12 +54,26 @@ const ArgQueryEditor: React.FC<LogsQueryEditorProps> = ({
       .catch((err) => setError(ERROR_SOURCE, err));
   }, [datasource, onChange, query, setError]);
 
-  return (
-    <div data-testid="azure-monitor-logs-query-editor">
-      <InlineFieldRow>
-        <SubscriptionField
-          multiSelect
-          subscriptions={subscriptions}
+  if (config.featureToggles.azureMonitorExperimentalUI) {
+    return (
+      <span data-testid="azure-monitor-arg-query-editor-with-experimental-ui">
+        <EditorRows>
+          <EditorRow>
+            <EditorFieldGroup>
+              <SubscriptionField
+                multiSelect
+                subscriptions={subscriptions}
+                query={query}
+                datasource={datasource}
+                subscriptionId={subscriptionId}
+                variableOptionGroup={variableOptionGroup}
+                onQueryChange={onChange}
+                setError={setError}
+              />
+            </EditorFieldGroup>
+          </EditorRow>
+        </EditorRows>
+        <QueryField
           query={query}
           datasource={datasource}
           subscriptionId={subscriptionId}
@@ -65,18 +81,35 @@ const ArgQueryEditor: React.FC<LogsQueryEditorProps> = ({
           onQueryChange={onChange}
           setError={setError}
         />
-      </InlineFieldRow>
+      </span>
+    );
+  } else {
+    return (
+      <div data-testid="azure-monitor-arg-query-editor">
+        <InlineFieldRow>
+          <SubscriptionField
+            multiSelect
+            subscriptions={subscriptions}
+            query={query}
+            datasource={datasource}
+            subscriptionId={subscriptionId}
+            variableOptionGroup={variableOptionGroup}
+            onQueryChange={onChange}
+            setError={setError}
+          />
+        </InlineFieldRow>
 
-      <QueryField
-        query={query}
-        datasource={datasource}
-        subscriptionId={subscriptionId}
-        variableOptionGroup={variableOptionGroup}
-        onQueryChange={onChange}
-        setError={setError}
-      />
-    </div>
-  );
+        <QueryField
+          query={query}
+          datasource={datasource}
+          subscriptionId={subscriptionId}
+          variableOptionGroup={variableOptionGroup}
+          onQueryChange={onChange}
+          setError={setError}
+        />
+      </div>
+    );
+  }
 };
 
 export default ArgQueryEditor;

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

@@ -23,7 +23,7 @@ const QueryField: React.FC<AzureQueryEditorFieldProps> = ({ query, onQueryChange
       value={query.azureResourceGraph?.query ?? ''}
       language="kusto"
       height={200}
-      width={1000}
+      width="100%"
       showMiniMap={false}
       onBlur={onChange}
       onSave={onChange}

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

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { EditorRows, EditorRow, EditorFieldGroup } from '@grafana/experimental';
+import { config } from '@grafana/runtime';
 import { Alert } from '@grafana/ui';
 
 import Datasource from '../../datasource';
@@ -33,36 +35,78 @@ const LogsQueryEditor: React.FC<LogsQueryEditorProps> = ({
 }) => {
   const migrationError = useMigrations(datasource, query, onChange);
 
-  return (
-    <div data-testid="azure-monitor-logs-query-editor">
-      <ResourceField
-        query={query}
-        datasource={datasource}
-        subscriptionId={subscriptionId}
-        variableOptionGroup={variableOptionGroup}
-        onQueryChange={onChange}
-        setError={setError}
-        selectableEntryTypes={[
-          ResourceRowType.Subscription,
-          ResourceRowType.ResourceGroup,
-          ResourceRowType.Resource,
-          ResourceRowType.Variable,
-        ]}
-        setResource={setResource}
-        resourceUri={query.azureLogAnalytics?.resource}
-      />
+  if (config.featureToggles.azureMonitorExperimentalUI) {
+    return (
+      <span data-testid="azure-monitor-logs-query-editor-with-experimental-ui">
+        <EditorRows>
+          <EditorRow>
+            <EditorFieldGroup>
+              <ResourceField
+                query={query}
+                datasource={datasource}
+                subscriptionId={subscriptionId}
+                variableOptionGroup={variableOptionGroup}
+                onQueryChange={onChange}
+                setError={setError}
+                selectableEntryTypes={[
+                  ResourceRowType.Subscription,
+                  ResourceRowType.ResourceGroup,
+                  ResourceRowType.Resource,
+                  ResourceRowType.Variable,
+                ]}
+                setResource={setResource}
+                resourceUri={query.azureLogAnalytics?.resource}
+              />
+            </EditorFieldGroup>
+          </EditorRow>
+          <QueryField
+            query={query}
+            datasource={datasource}
+            subscriptionId={subscriptionId}
+            variableOptionGroup={variableOptionGroup}
+            onQueryChange={onChange}
+            setError={setError}
+          />
+          <EditorRow>
+            <EditorFieldGroup>
+              {!hideFormatAs && (
+                <FormatAsField
+                  query={query}
+                  datasource={datasource}
+                  subscriptionId={subscriptionId}
+                  variableOptionGroup={variableOptionGroup}
+                  onQueryChange={onChange}
+                  setError={setError}
+                />
+              )}
 
-      <QueryField
-        query={query}
-        datasource={datasource}
-        subscriptionId={subscriptionId}
-        variableOptionGroup={variableOptionGroup}
-        onQueryChange={onChange}
-        setError={setError}
-      />
+              {migrationError && <Alert title={migrationError.title}>{migrationError.message}</Alert>}
+            </EditorFieldGroup>
+          </EditorRow>
+        </EditorRows>
+      </span>
+    );
+  } else {
+    return (
+      <div data-testid="azure-monitor-logs-query-editor">
+        <ResourceField
+          query={query}
+          datasource={datasource}
+          subscriptionId={subscriptionId}
+          variableOptionGroup={variableOptionGroup}
+          onQueryChange={onChange}
+          setError={setError}
+          selectableEntryTypes={[
+            ResourceRowType.Subscription,
+            ResourceRowType.ResourceGroup,
+            ResourceRowType.Resource,
+            ResourceRowType.Variable,
+          ]}
+          setResource={setResource}
+          resourceUri={query.azureLogAnalytics?.resource}
+        />
 
-      {!hideFormatAs && (
-        <FormatAsField
+        <QueryField
           query={query}
           datasource={datasource}
           subscriptionId={subscriptionId}
@@ -70,11 +114,22 @@ const LogsQueryEditor: React.FC<LogsQueryEditorProps> = ({
           onQueryChange={onChange}
           setError={setError}
         />
-      )}
 
-      {migrationError && <Alert title={migrationError.title}>{migrationError.message}</Alert>}
-    </div>
-  );
+        {!hideFormatAs && (
+          <FormatAsField
+            query={query}
+            datasource={datasource}
+            subscriptionId={subscriptionId}
+            variableOptionGroup={variableOptionGroup}
+            onQueryChange={onChange}
+            setError={setError}
+          />
+        )}
+
+        {migrationError && <Alert title={migrationError.title}>{migrationError.message}</Alert>}
+      </div>
+    );
+  }
 };
 
 export default LogsQueryEditor;