Double click to expand or collapse in tree

Reviewed By: aigoncharov

Differential Revision: D47949838

fbshipit-source-id: be7208633cee13579eaa20d3b0bfaa4380a4e399

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={() => {
+        onClick={(event) => {
-          onSelectNode(treeNode.id, 'tree');
+          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={() => {
+          onClick={expandOrCollapse}
-            if (treeNode.isExpanded) {
-              onCollapseNode(treeNode.id);
-            } else {
-              onExpandNode(treeNode.id);
-            }
-          }}
         />
 
         {nodeIcon(treeNode)}