[Engage-118] Fix Tree View with new location in mui 6 (bcgov#148)

Author: tolkamps1

met-web/package.json

@@ -14,6 +14,7 @@
         "@mui/lab": "^5.0.0-alpha.91",
         "@mui/material": "^5.6.1",
         "@mui/x-date-pickers": "^5.0.5",
+        "@mui/x-tree-view": "^8.22.0",
         "@reduxjs/toolkit": "^1.8.1",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^13.5.0",

met-web/src/components/admin/engagement/form/EngagementWidgets/Documents/StyledTreeItem.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import TreeItem, { TreeItemProps } from '@mui/lab/TreeItem';
+import { TreeItem, TreeItemProps } from '@mui/x-tree-view/TreeItem';
 import { MetBody } from 'components/shared/common';
 import { If, Then, Else } from 'react-if';
 import { Link, Box } from '@mui/material';
@@ -10,7 +10,7 @@ import { SvgIconProps } from '@mui/material';
 type DocumentTreeItemProps = TreeItemProps & {
     labelIcon: React.ElementType<SvgIconProps>;
     labelUrl?: string;
-    nodeId: string;
+    itemId: string;
 };
 
 type StyledTreeItemProps = TreeItemProps & {

met-web/src/components/admin/engagement/form/EngagementWidgets/Documents/TreeView.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import TreeView from '@mui/lab/TreeView';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import { If, Then, Else } from 'react-if';
 import { DocumentItem, DOCUMENT_TYPE } from 'models/document';
 import { StyledTreeItem } from './StyledTreeItem';
-import { TreeItemProps } from '@mui/lab/TreeItem';
+import { TreeItemProps } from '@mui/x-tree-view/TreeItem';
 import FolderOutlinedIcon from '@mui/icons-material/FolderOutlined';
 import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
 
@@ -15,26 +15,29 @@ type DocumentTreeProps = TreeItemProps & {
 
 export default function DocumentTree({ documentItem }: DocumentTreeProps) {
     return (
-        <TreeView
+        <SimpleTreeView
             aria-label="documentTree"
-            defaultExpanded={['3']}
-            defaultCollapseIcon={<ArrowDropDownIcon sx={{ height: '35px', width: '35px' }} />}
-            defaultExpandIcon={<ArrowRightIcon sx={{ height: '35px', width: '35px' }} />}
-            defaultEndIcon={<div style={{ width: 24 }} />}
+            defaultExpandedItems={['3']}
+            slots={{
+                collapseIcon: () => <ArrowDropDownIcon sx={{ height: '35px', width: '35px' }} />,
+                expandIcon: () => <ArrowRightIcon sx={{ height: '35px', width: '35px' }} />,
+                endIcon: () => <div style={{ width: 24 }} />,
+            }}
             sx={{ flexGrow: 1, maxWidth: 1000, overflowY: 'auto' }}
         >
             <If condition={documentItem.type === 'folder'}>
                 <Then>
                     <StyledTreeItem
                         labelUrl={documentItem.url}
-                        nodeId={`${documentItem.id}`}
+                        itemId={`${documentItem.id}`}
                         labelText={documentItem.title}
                         labelIcon={FolderOutlinedIcon}
                     >
                         {documentItem.children?.map((document: DocumentItem) => {
                             return (
                                 <StyledTreeItem
-                                    nodeId={`${document.id}`}
+                                    key={document.id}
+                                    itemId={`${document.id}`}
                                     innerDocument
                                     labelText={document.title}
                                     labelIcon={
@@ -50,13 +53,13 @@ export default function DocumentTree({ documentItem }: DocumentTreeProps) {
                 </Then>
                 <Else>
                     <StyledTreeItem
-                        nodeId={`${documentItem.id}`}
+                        itemId={`${documentItem.id}`}
                         labelText={documentItem.title}
                         labelIcon={DescriptionOutlinedIcon}
                         labelUrl={documentItem.url}
                     />
                 </Else>
             </If>
-        </TreeView>
+        </SimpleTreeView>
     );
 }

met-web/src/components/public/engagement/view/widgets/DocumentWidget.tsx

@@ -56,7 +56,7 @@ const DocumentWidget = ({ widget }: DocumentWidgetProps) => {
                 {documents.map((document: DocumentItem) => {
                     return (
                         <Grid key={document.id} container item spacing={1} rowSpacing={1} xs={12} paddingTop={2}>
-                            <DocumentTree nodeId={`${document.id}`} documentItem={document} />
+                            <DocumentTree itemId={`${document.id}`} documentItem={document} />
                         </Grid>
                     );
                 })}