From a2a1fa51f29968073f78d8519b6ebe0ed8c2abd1 Mon Sep 17 00:00:00 2001
From: Josh Hunt <joshhunt@users.noreply.github.com>
Date: Thu, 8 Jul 2021 15:37:41 +0100
Subject: [PATCH] AzureMonitor: Resource Picker alignment/spacing tweaks
 (#35125)

---
 .../components/ResourcePicker/NestedRows.tsx  | 42 +++++++++----------
 .../components/ResourcePicker/styles.ts       |  1 +
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/NestedRows.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/NestedRows.tsx
index 78407c3ba5b..5542bdfe3bd 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/NestedRows.tsx
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/NestedRows.tsx
@@ -187,29 +187,29 @@ const NestedEntry: React.FC<NestedEntryProps> = ({
       {/* When groups are selectable, I *think* we will want to show a 2-wide space instead
             of the collapse button for leaf rows that have no children to get them to align */}
 
-      <span className={styles.entryContentItem}>
-        {hasChildren ? (
-          <IconButton
-            className={styles.collapseButton}
-            name={isOpen ? 'angle-down' : 'angle-right'}
-            aria-label={isOpen ? 'Collapse' : 'Expand'}
-            onClick={handleToggleCollapse}
-            id={entry.id}
-          />
-        ) : (
-          <Space layout="inline" h={2} />
-        )}
-      </span>
-
-      {isSelectable && (
-        <span className={styles.entryContentItem}>
-          <Checkbox id={checkboxId} onChange={handleSelectedChanged} disabled={isDisabled} value={isSelected} />
-        </span>
+      {hasChildren ? (
+        <IconButton
+          className={styles.collapseButton}
+          name={isOpen ? 'angle-down' : 'angle-right'}
+          aria-label={isOpen ? 'Collapse' : 'Expand'}
+          onClick={handleToggleCollapse}
+          id={entry.id}
+        />
+      ) : (
+        <Space layout="inline" h={2} />
       )}
 
-      <span className={styles.entryContentItem}>
-        <EntryIcon entry={entry} isOpen={isOpen} />
-      </span>
+      <Space layout="inline" h={2} />
+
+      {isSelectable && (
+        <>
+          <Checkbox id={checkboxId} onChange={handleSelectedChanged} disabled={isDisabled} value={isSelected} />
+          <Space layout="inline" h={2} />
+        </>
+      )}
+
+      <EntryIcon entry={entry} isOpen={isOpen} />
+      <Space layout="inline" h={1} />
 
       <label htmlFor={checkboxId} className={cx(styles.entryContentItem, styles.truncated)}>
         {entry.name}
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/styles.ts b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/styles.ts
index dc039a859c8..9f72e94a365 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/styles.ts
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ResourcePicker/styles.ts
@@ -51,6 +51,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
 
   nestedEntry: css({
     display: 'flex',
+    alignItems: 'center',
   }),
 
   entryContentItem: css({