AzureMonitor: Style improvements to ResourcePicker (#48875)

Co-authored-by: Kevin Yu <kevinwcyu@users.noreply.github.com>
Co-authored-by: Isabella Siu <isabella.siu@grafana.com>
Co-authored-by: Sarah Zinger <sarah.zinger@grafana.com>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Alert, InlineFieldRow } from '@grafana/ui';
+import { Alert } from '@grafana/ui';
 
 import Datasource from '../../datasource';
 import { AzureMonitorErrorish, AzureMonitorOption, AzureMonitorQuery } from '../../types';
@@ -35,24 +35,22 @@ const LogsQueryEditor: React.FC<LogsQueryEditorProps> = ({
 
   return (
     <div data-testid="azure-monitor-logs-query-editor">
-      <InlineFieldRow>
-        <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}
-        />
-      </InlineFieldRow>
+      <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}
+      />
 
       <QueryField
         query={query}

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

@@ -144,7 +144,7 @@ for (const t of tests) {
         />
       );
 
-      const resourcePickerButton = await screen.findByRole('button', { name: /grafanastaging/ });
+      const resourcePickerButton = await screen.findByRole('button', { name: /grafana/ });
 
       expect(screen.getByText('Microsoft.Compute/virtualMachines')).toBeInTheDocument();
       expect(screen.getByText('Metric A')).toBeInTheDocument();

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

@@ -1,9 +1,10 @@
+import { css } from '@emotion/css';
 import React from 'react';
 
 import { PanelData } from '@grafana/data/src/types';
 import { EditorRows, EditorRow, EditorFieldGroup } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
-import { InlineFieldRow } from '@grafana/ui';
+import { InlineFieldRow, useStyles2 } from '@grafana/ui';
 
 import type Datasource from '../../datasource';
 import type { AzureMonitorQuery, AzureMonitorOption, AzureMonitorErrorish } from '../../types';
@@ -37,6 +38,8 @@ const MetricsQueryEditor: React.FC<MetricsQueryEditorProps> = ({
   onChange,
   setError,
 }) => {
+  const styles = useStyles2(getStyles);
+
   const metricsMetadata = useMetricMetadata(query, datasource, onChange);
   const metricNamespaces = useMetricNamespaces(query, datasource, onChange, setError);
   const metricNames = useMetricNames(query, datasource, onChange, setError);
@@ -141,7 +144,7 @@ const MetricsQueryEditor: React.FC<MetricsQueryEditorProps> = ({
   } else {
     return (
       <div data-testid="azure-monitor-metrics-query-editor-with-resource-picker">
-        <InlineFieldRow>
+        <InlineFieldRow className={styles.row}>
           <ResourceField
             query={query}
             datasource={datasource}
@@ -154,7 +157,7 @@ const MetricsQueryEditor: React.FC<MetricsQueryEditorProps> = ({
           />
         </InlineFieldRow>
 
-        <InlineFieldRow>
+        <InlineFieldRow className={styles.row}>
           <MetricNamespaceField
             metricNamespaces={metricNamespaces}
             query={query}
@@ -172,7 +175,7 @@ const MetricsQueryEditor: React.FC<MetricsQueryEditorProps> = ({
             setError={setError}
           />
         </InlineFieldRow>
-        <InlineFieldRow>
+        <InlineFieldRow className={styles.row}>
           <AggregationField
             query={query}
             datasource={datasource}
@@ -219,4 +222,10 @@ const MetricsQueryEditor: React.FC<MetricsQueryEditorProps> = ({
   }
 };
 
+const getStyles = () => ({
+  row: css({
+    rowGap: 0,
+  }),
+});
+
 export default MetricsQueryEditor;

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

@@ -1,16 +1,15 @@
-import { css } from '@emotion/css';
+import { cx } from '@emotion/css';
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { GrafanaTheme2 } from '@grafana/data';
 import { Button, Icon, Modal, useStyles2 } from '@grafana/ui';
 
 import Datasource from '../../datasource';
 import { AzureQueryEditorFieldProps, AzureMonitorQuery, AzureResourceSummaryItem } from '../../types';
 import { Field } from '../Field';
 import ResourcePicker from '../ResourcePicker';
+import getStyles from '../ResourcePicker/styles';
 import { ResourceRowType } from '../ResourcePicker/types';
 import { parseResourceURI } from '../ResourcePicker/utils';
-import { Space } from '../Space';
 
 function parseResourceDetails(resourceURI: string) {
   const parsed = parseResourceURI(resourceURI);
@@ -80,7 +79,7 @@ const ResourceField: React.FC<ResourceFieldProps> = ({
       </Modal>
 
       <Field label="Resource">
-        <Button variant="secondary" onClick={handleOpenPicker} type="button">
+        <Button className={styles.resourceFieldButton} variant="secondary" onClick={handleOpenPicker} type="button">
           <ResourceLabel resource={resourceUri} datasource={datasource} />
         </Button>
       </Field>
@@ -128,37 +127,27 @@ interface FormattedResourceProps {
 }
 
 const FormattedResource = ({ resource }: FormattedResourceProps) => {
+  const styles = useStyles2(getStyles);
+
+  if (resource.resourceName) {
+    return (
+      <span className={cx(styles.truncated, styles.resourceField)}>
+        <Icon name="cube" /> {resource.resourceName}
+      </span>
+    );
+  }
+  if (resource.resourceGroupName) {
+    return (
+      <span>
+        <Icon name="folder" /> {resource.resourceGroupName}
+      </span>
+    );
+  }
   return (
     <span>
       <Icon name="layer-group" /> {resource.subscriptionName}
-      {resource.resourceGroupName && (
-        <>
-          <Separator />
-          <Icon name="folder" /> {resource.resourceGroupName}
-        </>
-      )}
-      {resource.resourceName && (
-        <>
-          <Separator />
-          <Icon name="cube" /> {resource.resourceName}
-        </>
-      )}
     </span>
   );
 };
 
-const Separator = () => (
-  <>
-    <Space layout="inline" h={2} />
-    {'/'}
-    <Space layout="inline" h={2} />
-  </>
-);
-
 export default ResourceField;
-
-const getStyles = (theme: GrafanaTheme2) => ({
-  modal: css({
-    width: theme.breakpoints.values.lg,
-  }),
-});

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/styles.ts

@@ -66,6 +66,16 @@ const getStyles = (theme: GrafanaTheme2) => ({
     whiteSpace: 'nowrap',
   }),
 
+  resourceField: css({
+    maxWidth: theme.spacing(36),
+    overflow: 'hidden',
+  }),
+
+  resourceFieldButton: css({
+    padding: '7px',
+    textAlign: 'left',
+  }),
+
   nestedRowCheckbox: css({
     zIndex: 0,
   }),
@@ -88,6 +98,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
     margin: '4px 0',
     fontStyle: 'italic',
   }),
+
+  modal: css({
+    width: theme.breakpoints.values.lg,
+  }),
 });
 
 export default getStyles;