From 68a5bf3c18e4f53ddbebe32b5e27db558527b666 Mon Sep 17 00:00:00 2001
From: Bogdan Matei <bogdan.matei@grafana.com>
Date: Wed, 26 Jun 2024 14:41:38 +0300
Subject: [PATCH] Scopes: Allow node title to expand the container (#89682)

---
 .../scene/Scopes/ScopesTreeLevel.tsx          | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/public/app/features/dashboard-scene/scene/Scopes/ScopesTreeLevel.tsx b/public/app/features/dashboard-scene/scene/Scopes/ScopesTreeLevel.tsx
index 4c9963f1f53..8d57b74d825 100644
--- a/public/app/features/dashboard-scene/scene/Scopes/ScopesTreeLevel.tsx
+++ b/public/app/features/dashboard-scene/scene/Scopes/ScopesTreeLevel.tsx
@@ -4,7 +4,7 @@ import { useEffect, useMemo, useState } from 'react';
 import Skeleton from 'react-loading-skeleton';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Checkbox, FilterInput, IconButton, RadioButtonDot, useStyles2 } from '@grafana/ui';
+import { Checkbox, FilterInput, Icon, RadioButtonDot, useStyles2 } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 
 import { NodesMap, TreeScope } from './types';
@@ -105,20 +105,24 @@ export function ScopesTreeLevel({
                     )
                   ) : null}
 
-                  {childNode.isExpandable && (
-                    <IconButton
-                      name={!childNode.isExpanded ? 'angle-right' : 'angle-down'}
+                  {childNode.isExpandable ? (
+                    <button
+                      className={styles.itemExpand}
+                      data-testid={`scopes-tree-${childNode.name}-expand`}
                       aria-label={
                         childNode.isExpanded ? t('scopes.tree.collapse', 'Collapse') : t('scopes.tree.expand', 'Expand')
                       }
-                      data-testid={`scopes-tree-${childNode.name}-expand`}
                       onClick={() => {
                         onNodeUpdate(childNodePath, !childNode.isExpanded, childNode.query);
                       }}
-                    />
-                  )}
+                    >
+                      <Icon name={!childNode.isExpanded ? 'angle-right' : 'angle-down'} />
 
-                  <span data-testid={`scopes-tree-${childNode.name}-title`}>{childNode.title}</span>
+                      {childNode.title}
+                    </button>
+                  ) : (
+                    <span data-testid={`scopes-tree-${childNode.name}-title`}>{childNode.title}</span>
+                  )}
                 </div>
 
                 <div className={styles.itemChildren}>
@@ -165,6 +169,15 @@ const getStyles = (theme: GrafanaTheme2) => {
         gap: 0,
       }),
     }),
+    itemExpand: css({
+      alignItems: 'center',
+      background: 'none',
+      border: 0,
+      display: 'flex',
+      gap: theme.spacing(1),
+      margin: 0,
+      padding: 0,
+    }),
     itemChildren: css({
       paddingLeft: theme.spacing(4),
     }),