AzureMonitor: changes to azureMonitorExperimentalUI after feedback (#50455)

* AzureMonitor: tweak experimental-ui after UX discussions.
- move metrics up to resource row
- allow resources field to take an inlineField prop and a labelWidth prop. Eventually once the feature toggle is removed
the inlineField prop will be the only code branch in Field.tsx.

* AzureMonitor: remove devmode req for azureMonitorExperimentalUI flag

* refactor: consolidate logic branch for inline Field

pkg/services/featuremgmt/registry.go

@@ -198,11 +198,10 @@ var (
 			State:       FeatureStateAlpha,
 		},
 		{
-			Name:            "azureMonitorExperimentalUI",
+			Name:         "azureMonitorExperimentalUI",
-			Description:     "Use grafana-experimental UI in Azure Monitor",
+			Description:  "Use grafana-experimental UI in Azure Monitor",
-			State:           FeatureStateAlpha,
+			State:        FeatureStateAlpha,
-			RequiresDevMode: true,
+			FrontendOnly: true,
-			FrontendOnly:    true,
 		},
 		{
 			Name:         "traceToMetrics",

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

@@ -7,13 +7,18 @@ import { Props as InlineFieldProps } from '@grafana/ui/src/components/Forms/Inli
 
 interface Props extends InlineFieldProps {
   label: string;
+  inlineField?: boolean;
+  labelWidth?: number;
 }
 
 const DEFAULT_LABEL_WIDTH = 18;
 
 export const Field = (props: Props) => {
-  if (config.featureToggles.azureMonitorExperimentalUI) {
+  const { labelWidth, inlineField, ...remainingProps } = props;
-    return <EditorField width={DEFAULT_LABEL_WIDTH} {...props} />;
+
+  if (config.featureToggles.azureMonitorExperimentalUI && !inlineField) {
+    return <EditorField width={labelWidth || DEFAULT_LABEL_WIDTH} {...remainingProps} />;
+  } else {
+    return <InlineField labelWidth={labelWidth || DEFAULT_LABEL_WIDTH} {...remainingProps} />;
   }
-  return <InlineField labelWidth={DEFAULT_LABEL_WIDTH} {...props} />;
 };

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

@@ -44,6 +44,8 @@ const LogsQueryEditor: React.FC<LogsQueryEditorProps> = ({
               <ResourceField
                 query={query}
                 datasource={datasource}
+                inlineField={true}
+                labelWidth={10}
                 subscriptionId={subscriptionId}
                 variableOptionGroup={variableOptionGroup}
                 onQueryChange={onChange}

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

@@ -60,11 +60,6 @@ const MetricsQueryEditor: React.FC<MetricsQueryEditorProps> = ({
                 setResource={setResource}
                 resourceUri={query.azureMonitor?.resourceUri}
               />
-            </EditorFieldGroup>
-          </EditorRow>
-
-          <EditorRow>
-            <EditorFieldGroup>
               <MetricNamespaceField
                 metricNamespaces={metricNamespaces}
                 query={query}

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

@@ -29,6 +29,8 @@ interface ResourceFieldProps extends AzureQueryEditorFieldProps {
   setResource: (query: AzureMonitorQuery, resourceURI?: string) => AzureMonitorQuery;
   selectableEntryTypes: ResourceRowType[];
   resourceUri?: string;
+  inlineField?: boolean;
+  labelWidth?: number;
 }
 
 const ResourceField: React.FC<ResourceFieldProps> = ({
@@ -38,6 +40,8 @@ const ResourceField: React.FC<ResourceFieldProps> = ({
   setResource,
   selectableEntryTypes,
   resourceUri,
+  inlineField,
+  labelWidth,
 }) => {
   const styles = useStyles2(getStyles);
   const [pickerIsOpen, setPickerIsOpen] = useState(false);
@@ -77,8 +81,7 @@ const ResourceField: React.FC<ResourceFieldProps> = ({
           selectableEntryTypes={selectableEntryTypes}
         />
       </Modal>
-
+      <Field label="Resource" inlineField={inlineField} labelWidth={labelWidth}>
-      <Field label="Resource">
         <Button className={styles.resourceFieldButton} variant="secondary" onClick={handleOpenPicker} type="button">
           <ResourceLabel resource={resourceUri} datasource={datasource} />
         </Button>