From 8784691e6296680b9f48e6acbcc74e9513785fcc Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Mon, 12 Dec 2022 07:28:37 -0800
Subject: [PATCH] If no children dont show chevron

Reviewed By: lawrencelomax

Differential Revision: D41809088

fbshipit-source-id: 7f4bef5390561671cc53a12be8aa99ea5efe228c
---
 .../public/ui-debugger/components/Tree2.tsx        | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/Tree2.tsx b/desktop/plugins/public/ui-debugger/components/Tree2.tsx
index fcb9c8bc4..8d80f49ad 100644
--- a/desktop/plugins/public/ui-debugger/components/Tree2.tsx
+++ b/desktop/plugins/public/ui-debugger/components/Tree2.tsx
@@ -133,8 +133,9 @@ function TreeItemContainer({
         onSelectNode(treeNode.id);
       }}
       item={treeNode}>
-      <Arrow
+      <ExpandedIconOrSpace
         expanded={treeNode.isExpanded}
+        children={treeNode.children}
         onClick={() => {
           instance.uiState.expandedNodes.update((draft) => {
             if (draft.has(treeNode.id)) {
@@ -145,7 +146,6 @@ function TreeItemContainer({
           });
         }}
       />
-
       {nodeIcon(treeNode)}
       <HighlightedText text={treeNode.name} />
     </TreeItem>
@@ -189,8 +189,12 @@ const TreeItem = styled.li<{
   backgroundColor: isSelected ? theme.selectionBackgroundColor : theme.white,
 }));
 
-function Arrow(props: {onClick: () => void; expanded: boolean}) {
-  return (
+function ExpandedIconOrSpace(props: {
+  onClick: () => void;
+  expanded: boolean;
+  children: Id[];
+}) {
+  return props.children.length > 0 ? (
     <div style={{display: 'flex'}} onClick={props.onClick}>
       <Glyph
         style={{
@@ -203,6 +207,8 @@ function Arrow(props: {onClick: () => void; expanded: boolean}) {
         color="grey"
       />
     </div>
+  ) : (
+    <div style={{width: '12px'}}></div>
   );
 }