From 1cf0527a51a5e1d1a015cb04e710555bd42ed04a Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Tue, 1 Aug 2023 10:32:29 -0700
Subject: [PATCH] Double click to expand or collapse in tree

Reviewed By: aigoncharov

Differential Revision: D47949838

fbshipit-source-id: be7208633cee13579eaa20d3b0bfaa4380a4e399
---
 .../ui-debugger/components/tree/Tree.tsx      | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx b/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx
index 1fce9dad7..4be0eddd8 100644
--- a/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx
+++ b/desktop/plugins/public/ui-debugger/components/tree/Tree.tsx
@@ -376,6 +376,13 @@ function TreeNodeRow({
 }) {
   const showExpandChildrenIcon = treeNode.children.length > 0;
   const isSelected = treeNode.id === selectedNode;
+  const expandOrCollapse = () => {
+    if (treeNode.isExpanded) {
+      onCollapseNode(treeNode.id);
+    } else {
+      onExpandNode(treeNode.id);
+    }
+  };
   return (
     <div
       ref={innerRef}
@@ -405,21 +412,21 @@ function TreeNodeRow({
             onHoverNode(treeNode.id);
           }
         }}
-        onClick={() => {
-          onSelectNode(treeNode.id, 'tree');
+        onClick={(event) => {
+          if (event.detail === 1) {
+            //single click
+            onSelectNode(treeNode.id, 'tree');
+          } else if (event.detail === 2) {
+            //double click
+            expandOrCollapse();
+          }
         }}
         item={treeNode}
         style={{overflow: 'visible'}}>
         <ExpandedIconOrSpace
           expanded={treeNode.isExpanded}
           showIcon={showExpandChildrenIcon}
-          onClick={() => {
-            if (treeNode.isExpanded) {
-              onCollapseNode(treeNode.id);
-            } else {
-              onExpandNode(treeNode.id);
-            }
-          }}
+          onClick={expandOrCollapse}
         />
 
         {nodeIcon(treeNode)}