From 34e07120e8090558928b8d84c1e4e61ac2a4c742 Mon Sep 17 00:00:00 2001
From: Pierre-Charles David <pierre-charles.david@obeo.fr>
Date: Wed, 9 Oct 2024 17:49:04 +0200
Subject: [PATCH] [1062] Make the whole tree item hoverable/clickable but do
 not select when expanding/collapsing from the arrow/chevron

Bug: https://github.com/eclipse-sirius/sirius-web/issues/1062
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
---
 .../src/treeitems/TreeItem.tsx                    | 15 ++++++++-------
 .../src/treeitems/TreeItemArrow.tsx               |  5 ++++-
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/trees/frontend/sirius-components-trees/src/treeitems/TreeItem.tsx b/packages/trees/frontend/sirius-components-trees/src/treeitems/TreeItem.tsx
index f933416c9a5..fb22d83eeab 100644
--- a/packages/trees/frontend/sirius-components-trees/src/treeitems/TreeItem.tsx
+++ b/packages/trees/frontend/sirius-components-trees/src/treeitems/TreeItem.tsx
@@ -29,7 +29,11 @@ import { TreeItemDirectEditInput } from './TreeItemDirectEditInput';
 import { isFilterCandidate } from './filterTreeItem';
 import { useDropTreeItem } from './useDropTreeItem';
 
-const useTreeItemStyle = makeStyles()((theme) => ({
+interface TreeItemStyleProps {
+  depth: number;
+}
+
+const useTreeItemStyle = makeStyles<TreeItemStyleProps>()((theme, { depth }) => ({
   treeItemBefore: {
     height: '2px',
   },
@@ -45,6 +49,7 @@ const useTreeItemStyle = makeStyles()((theme) => ({
       borderColor: 'black',
       borderStyle: 'dotted',
     },
+    paddingLeft: `${24 * (depth - 1)}px`,
   },
   treeItemHover: {
     backgroundColor: theme.palette.action.hover,
@@ -92,10 +97,7 @@ const useTreeItemStyle = makeStyles()((theme) => ({
     fontWeight: 'bold',
   },
   ul: {
-    marginLeft: theme.spacing(3),
-  },
-  highlight: {
-    backgroundColor: theme.palette.navigation.leftBackground,
+    marginLeft: 0,
   },
 }));
 
@@ -121,7 +123,7 @@ export const TreeItem = ({
   markedItemIds,
   treeItemActionRender,
 }: TreeItemProps) => {
-  const { classes } = useTreeItemStyle();
+  const { classes } = useTreeItemStyle({ depth });
 
   const initialState: TreeItemState = {
     editingMode: false,
@@ -361,7 +363,6 @@ export const TreeItem = ({
             tabIndex={0}
             onKeyDown={onBeginEditing}
             draggable={true}
-            onClick={onClick}
             onDragStart={dragStart}
             onDragOver={dragOver}
             data-treeitemid={item.id}
diff --git a/packages/trees/frontend/sirius-components-trees/src/treeitems/TreeItemArrow.tsx b/packages/trees/frontend/sirius-components-trees/src/treeitems/TreeItemArrow.tsx
index ff439e9b1c0..10c4c43ad1d 100644
--- a/packages/trees/frontend/sirius-components-trees/src/treeitems/TreeItemArrow.tsx
+++ b/packages/trees/frontend/sirius-components-trees/src/treeitems/TreeItemArrow.tsx
@@ -28,7 +28,10 @@ const useTreeItemArrowStyle = makeStyles()(() => ({
 export const TreeItemArrow = ({ item, depth, onExpand, 'data-testid': dataTestid }: TreeItemArrowProps) => {
   const { classes } = useTreeItemArrowStyle();
   if (item.hasChildren) {
-    const onClick = () => onExpand(item.id, depth);
+    const onClick: React.MouseEventHandler = (event) => {
+      event.stopPropagation();
+      onExpand(item.id, depth);
+    };
     if (item.expanded) {
       return (
         <ExpandMoreIcon className={classes.arrow} style={{ fontSize: 20 }} onClick={onClick} data-testid={dataTestid} />