From 580f9749c2b55ce7971cda95395fddbebcd54206 Mon Sep 17 00:00:00 2001
From: Samir Kamal <1954121+skamril@users.noreply.github.com>
Date: Fri, 20 Sep 2024 11:42:51 +0200
Subject: [PATCH] feat(ui-commons): create TreeItemEnhanced component

---
 .../explore/Debug/Tree/FileTreeItem.tsx       | 36 ++---------
 .../components/common/TreeItemEnhanced.tsx    | 62 +++++++++++++++++++
 2 files changed, 66 insertions(+), 32 deletions(-)
 create mode 100644 webapp/src/components/common/TreeItemEnhanced.tsx

diff --git a/webapp/src/components/App/Singlestudy/explore/Debug/Tree/FileTreeItem.tsx b/webapp/src/components/App/Singlestudy/explore/Debug/Tree/FileTreeItem.tsx
index aaabe7d212..a59cf6a640 100644
--- a/webapp/src/components/App/Singlestudy/explore/Debug/Tree/FileTreeItem.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Debug/Tree/FileTreeItem.tsx
@@ -1,8 +1,8 @@
 import { Box } from "@mui/material";
-import { TreeItem, type TreeItemProps } from "@mui/x-tree-view/TreeItem";
 import { TreeData, getFileType, getFileIcon, isFolder } from "../utils";
 import DebugContext from "../DebugContext";
 import { useContext } from "react";
+import TreeItemEnhanced from "../../../../../common/TreeItemEnhanced";
 
 interface Props {
   name: string;
@@ -15,22 +15,12 @@ function FileTreeItem({ name, treeData, path }: Props) {
   const filePath = path ? `${path}/${name}` : name;
   const fileType = getFileType(treeData);
   const FileIcon = getFileIcon(fileType);
-  const canExpand = isFolder(treeData) && Object.keys(treeData).length > 0;
 
   ////////////////////////////////////////////////////////////////
   // Event handlers
   ////////////////////////////////////////////////////////////////
 
-  const handleClick: TreeItemProps["onClick"] = ({ target }) => {
-    // The item is not selected if the click is on the expand/collapse icon
-    if (
-      canExpand &&
-      target instanceof Element &&
-      target.closest(".MuiTreeItem-iconContainer")
-    ) {
-      return;
-    }
-
+  const handleClick = () => {
     setSelectedFile({ fileType, filename: name, filePath, treeData });
   };
 
@@ -39,7 +29,7 @@ function FileTreeItem({ name, treeData, path }: Props) {
   ////////////////////////////////////////////////////////////////
 
   return (
-    <TreeItem
+    <TreeItemEnhanced
       itemId={filePath}
       label={
         <Box sx={{ display: "flex" }}>
@@ -48,24 +38,6 @@ function FileTreeItem({ name, treeData, path }: Props) {
         </Box>
       }
       onClick={handleClick}
-      sx={{
-        ".MuiTreeItem-content": {
-          p: 0,
-          alignItems: "normal",
-          // Expand/collapse icon
-          ".MuiTreeItem-iconContainer": {
-            alignItems: "center",
-            borderTopLeftRadius: "inherit",
-            borderBottomLeftRadius: "inherit",
-            "&:hover": {
-              background: canExpand ? "inherit" : "none",
-            },
-          },
-          ".MuiTreeItem-label": {
-            py: 0.5,
-          },
-        },
-      }}
     >
       {isFolder(treeData) &&
         Object.keys(treeData).map((childName) => (
@@ -76,7 +48,7 @@ function FileTreeItem({ name, treeData, path }: Props) {
             treeData={treeData[childName]}
           />
         ))}
-    </TreeItem>
+    </TreeItemEnhanced>
   );
 }
 
diff --git a/webapp/src/components/common/TreeItemEnhanced.tsx b/webapp/src/components/common/TreeItemEnhanced.tsx
new file mode 100644
index 0000000000..5cee092e3b
--- /dev/null
+++ b/webapp/src/components/common/TreeItemEnhanced.tsx
@@ -0,0 +1,62 @@
+import { TreeItem, type TreeItemProps } from "@mui/x-tree-view/TreeItem";
+import { mergeSxProp } from "../../utils/muiUtils";
+import * as RA from "ramda-adjunct";
+
+export type TreeItemEnhancedProps = TreeItemProps;
+
+function TreeItemEnhanced({ onClick, sx, ...rest }: TreeItemEnhancedProps) {
+  const canExpand = rest.children && RA.isNotEmpty(rest.children);
+
+  ////////////////////////////////////////////////////////////////
+  // Event Handlers
+  ////////////////////////////////////////////////////////////////
+
+  const handleClick: TreeItemEnhancedProps["onClick"] = (event) => {
+    const { target } = event;
+
+    // The item is not selected if the click is on the expand/collapse icon
+    if (
+      canExpand &&
+      target instanceof Element &&
+      target.closest(".MuiTreeItem-iconContainer")
+    ) {
+      return;
+    }
+
+    onClick?.(event);
+  };
+
+  ////////////////////////////////////////////////////////////////
+  // JSX
+  ////////////////////////////////////////////////////////////////
+
+  return (
+    <TreeItem
+      {...rest}
+      onClick={handleClick}
+      sx={mergeSxProp(
+        {
+          "& > .MuiTreeItem-content": {
+            p: 0,
+            alignItems: "normal",
+            // Expand/collapse icon
+            "& > .MuiTreeItem-iconContainer": {
+              alignItems: "center",
+              borderTopLeftRadius: "inherit",
+              borderBottomLeftRadius: "inherit",
+              "&:hover": {
+                background: canExpand ? "inherit" : "none",
+              },
+            },
+            "& > .MuiTreeItem-label": {
+              py: 0.5,
+            },
+          },
+        },
+        sx,
+      )}
+    />
+  );
+}
+
+export default TreeItemEnhanced;