From d0223081d8830fd2fa98813810c80e31218f8900 Mon Sep 17 00:00:00 2001
From: "Jeff Y.C. Yang" <jeffycyang@gmail.com>
Date: Tue, 6 Aug 2024 01:21:24 -0700
Subject: [PATCH] fix(frontend): update mui Tree* dependency for FieldsView.tsx

---
 frontend/package.json                       |  1 +
 frontend/src/features/fields/FieldsView.tsx | 36 ++++++++++++---------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 45fe3ed..5b85c43 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
     "@mui/icons-material": "^5.10.9",
     "@mui/lab": "^5.0.0-alpha.104",
     "@mui/material": "^5.10.10",
+    "@mui/x-tree-view": "^7.12.0",
     "@reduxjs/toolkit": "^1.8.6",
     "@types/lodash": "^4.14.186",
     "@wojtekmaj/react-datetimerange-picker": "^5.2.0",
diff --git a/frontend/src/features/fields/FieldsView.tsx b/frontend/src/features/fields/FieldsView.tsx
index e308090..2fa2b3c 100644
--- a/frontend/src/features/fields/FieldsView.tsx
+++ b/frontend/src/features/fields/FieldsView.tsx
@@ -1,7 +1,7 @@
 import _ from 'lodash';
 
 import { List, ListItem, ListItemText, ListSubheader, Switch, Stack, Tooltip, Typography, IconButton} from '@mui/material';
-import {TreeView, TreeItem} from '@mui/lab';
+import { SimpleTreeView, TreeItem } from '@mui/x-tree-view';
 import {ExpandMore, ChevronRight} from '@mui/icons-material';
 
 import { useAppSelector, useAppDispatch } from '../../app/hooks';
@@ -37,7 +37,7 @@ export function FieldsView(){
     function renderTree(node: FieldNode, tree: any, noDiff: boolean) {
         return <TreeItem
           key={node.id}
-          nodeId={node.id}
+          itemId={node.id}
           label={label(selectedEndpoint, node, tree, noDiff)}
           onClick={() => dispatch(selectFieldPrefix(node.id))}
           disabled={ disabledNode === node.id }
@@ -89,19 +89,23 @@ export function FieldsView(){
         return `${metric.name}: ${metric.differences} diffs | ${metric.noise/(metric.differences)*100.00}% noise/diffs`
       }
     return       (<List subheader={<ListSubheader>Fields</ListSubheader>}>
-          <TreeView
-      defaultCollapseIcon={<ExpandMore />}
-      defaultExpanded={['request']}
-      defaultExpandIcon={<ChevronRight />}
-    >
-      {request && renderTree(request, tree, true)}
-    </TreeView>
-    <TreeView
-      defaultCollapseIcon={<ExpandMore />}
-      defaultExpanded={['response']}
-      defaultExpandIcon={<ChevronRight />}
-    >
+      <SimpleTreeView
+        slots={{
+          expandIcon: ExpandMore,
+          collapseIcon: ChevronRight,
+        }}
+        defaultExpandedItems={['request']}
+      >
+        {request && renderTree(request, tree, true)}
+      </SimpleTreeView>
+      <SimpleTreeView
+        slots={{
+          expandIcon: ExpandMore,
+          collapseIcon: ChevronRight,
+        }}
+        defaultExpandedItems={['request']}
+      >
       {response && renderTree(response, tree, false)}
-    </TreeView>
+    </SimpleTreeView>
   </List>);
-}
\ No newline at end of file
+}