Merge pull request #810 from mcserep/webgui-new-upgrade

mcserep · web-flow · commit 7e69ea24d487 · 2025-09-30T09:22:36.000+02:00
Update new web GUI dependencies
diff --git a/webgui-new/package-lock.json b/webgui-new/package-lock.json
diff --git a/webgui-new/package.json b/webgui-new/package.json
@@ -11,48 +11,48 @@
   },
   "devDependencies": {
     "@creditkarma/thrift-typescript": "^3.7.6",
-    "@types/dagre": "^0.7.48",
-    "@types/express": "^4.17.17",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.0.10",
-    "@types/thrift": "^0.10.12",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
-    "dotenv": "^16.0.3",
-    "eslint": "^8.31.0",
-    "eslint-config-next": "^13.1.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "express": "^4.21.1",
-    "http-proxy-middleware": "^3.0.0-beta.1",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.3.3"
+    "@types/dagre": "^0.7.53",
+    "@types/express": "^4.17.23",
+    "@types/react": "^18.3.24",
+    "@types/react-dom": "^18.3.7",
+    "@types/thrift": "^0.10.17",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "dotenv": "^16.6.1",
+    "eslint": "^8.57.1",
+    "eslint-config-next": "^13.5.11",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "express": "^4.21.2",
+    "http-proxy-middleware": "^3.0.5",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.2"
   },
   "dependencies": {
-    "@codemirror/lang-cpp": "^6.0.2",
-    "@codemirror/lang-python": "^6.1.6",
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@mui/icons-material": "^5.11.0",
-    "@mui/lab": "5.0.0-alpha.116",
-    "@mui/material": "^5.15.6",
-    "@uiw/codemirror-theme-github": "^4.19.8",
-    "@uiw/react-codemirror": "^4.19.6",
+    "@codemirror/lang-cpp": "^6.0.3",
+    "@codemirror/lang-python": "^6.2.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^5.18.0",
+    "@mui/material": "^5.18.0",
+    "@mui/x-tree-view": "^6.17.0",
+    "@uiw/codemirror-theme-github": "^4.25.2",
+    "@uiw/react-codemirror": "^4.25.2",
     "dagre": "^0.8.5",
-    "devicons-react": "^1.2.5",
-    "i18next": "^23.2.8",
-    "next": "^14.2.32",
-    "react": "^18.2.0",
-    "react-diff-viewer-continued": "^3.2.6",
-    "react-dom": "^18.2.0",
+    "devicons-react": "^1.5.0",
+    "i18next": "^23.16.8",
+    "next": "^14.2.33",
+    "react": "^18.3.1",
+    "react-diff-viewer-continued": "^3.4.0",
+    "react-dom": "^18.3.1",
     "react-ga4": "^2.1.0",
-    "react-i18next": "^13.0.1",
-    "react-icons": "^4.8.0",
-    "react-toastify": "^9.1.2",
-    "react-zoom-pan-pinch": "^3.0.5",
-    "reactflow": "^11.10.3",
-    "recharts": "^2.5.0",
-    "sass": "^1.57.1",
+    "react-i18next": "^13.5.0",
+    "react-icons": "^4.12.0",
+    "react-toastify": "^9.1.3",
+    "react-zoom-pan-pinch": "^3.7.0",
+    "reactflow": "^11.11.4",
+    "recharts": "^2.15.4",
+    "sass": "^1.93.2",
     "sharp": "^0.32.6",
     "thrift": "0.16.0"
   },
diff --git a/webgui-new/src/components/file-manager/file-manager.tsx b/webgui-new/src/components/file-manager/file-manager.tsx
@@ -224,9 +224,13 @@ export const FileManager = (): JSX.Element => {
   };
 
   const handleTreeNodeSelect = () => {
-    return (_e: SyntheticEvent<Element, Event>, nodeId: string) => {
+    return (_e: SyntheticEvent<Element, Event>, nodeIds: string | string[]) => {
       if (!expandedFileTreeNodes) return;
 
+      // Handle both single string and array of strings
+      const nodeId = Array.isArray(nodeIds) ? nodeIds[0] : nodeIds;
+      if (!nodeId) return;
+
       const index = expandedFileTreeNodes.indexOf(nodeId);
       const copyExpanded = [...expandedFileTreeNodes];
       if (index === -1) {
diff --git a/webgui-new/src/components/file-manager/styled-components.tsx b/webgui-new/src/components/file-manager/styled-components.tsx
@@ -1,4 +1,4 @@
-import { TreeView, TreeItem, treeItemClasses } from '@mui/lab';
+import { TreeView, TreeItem, treeItemClasses } from '@mui/x-tree-view';
 import { FormControlLabel, alpha, styled } from '@mui/material';
 
 export const StyledDiv = styled('div')({});
diff --git a/webgui-new/src/components/file-name/styled-components.tsx b/webgui-new/src/components/file-name/styled-components.tsx
@@ -1,4 +1,4 @@
-import { TreeView, TreeItem, treeItemClasses } from '@mui/lab';
+import { TreeView, TreeItem, treeItemClasses } from '@mui/x-tree-view';
 import { Menu, TableRow, alpha, styled } from '@mui/material';
 
 export const StyledDiv = styled('div')({});
diff --git a/webgui-new/src/components/git-diff/git-diff.tsx b/webgui-new/src/components/git-diff/git-diff.tsx
@@ -158,7 +158,11 @@ export const GitDiff = (): JSX.Element => {
           defaultCollapseIcon={<TextSnippet />}
           defaultExpandIcon={<TextSnippet />}
           expanded={expandedFiles}
-          onNodeSelect={(_e: SyntheticEvent<Element, Event>, nodeId: string) => {
+          onNodeSelect={(_e: SyntheticEvent<Element, Event>, nodeIds: string | string[]) => {
+            // Handle both single string and array of strings
+            const nodeId = Array.isArray(nodeIds) ? nodeIds[0] : nodeIds;
+            if (!nodeId) return;
+
             const index = expandedFiles.indexOf(nodeId) as number;
             const copyExpanded = [...expandedFiles];
             if (index === -1) {
diff --git a/webgui-new/src/components/git-diff/styled-components.tsx b/webgui-new/src/components/git-diff/styled-components.tsx
@@ -1,4 +1,4 @@
-import { TreeView, TreeItem, treeItemClasses } from '@mui/lab';
+import { TreeView, TreeItem, treeItemClasses } from '@mui/x-tree-view';
 import { alpha, styled } from '@mui/material';
 
 export const StyledSpan = styled('span')({});
diff --git a/webgui-new/src/components/info-tree/info-tree.tsx b/webgui-new/src/components/info-tree/info-tree.tsx
@@ -126,7 +126,11 @@ export const InfoTree = (): JSX.Element => {
           defaultCollapseIcon={<ExpandMore />}
           sx={{ width: 'max-content', marginTop: '5px' }}
           expanded={expandedTreeNodes}
-          onNodeSelect={(_e: SyntheticEvent<Element, Event>, nodeId: string) => {
+          onNodeSelect={(_e: SyntheticEvent<Element, Event>, nodeIds: string | string[]) => {
+            // Handle both single string and array of strings
+            const nodeId = Array.isArray(nodeIds) ? nodeIds[0] : nodeIds;
+            if (!nodeId) return;
+
             const index = expandedTreeNodes.indexOf(nodeId) as number;
             const copyExpanded = [...expandedTreeNodes];
             if (index === -1) {
diff --git a/webgui-new/src/components/info-tree/styled-components.tsx b/webgui-new/src/components/info-tree/styled-components.tsx
@@ -1,4 +1,4 @@
-import { TreeView, TreeItem, treeItemClasses } from '@mui/lab';
+import { TreeView, TreeItem, treeItemClasses } from '@mui/x-tree-view';
 import { alpha, styled } from '@mui/material';
 
 export const StyledDiv = styled('div')({});
diff --git a/webgui-new/src/components/revision-control/revision-control.tsx b/webgui-new/src/components/revision-control/revision-control.tsx
@@ -255,7 +255,11 @@ export const RevisionControl = (): JSX.Element => {
         defaultCollapseIcon={<ExpandMore />}
         sx={{ width: 'max-content' }}
         expanded={expandedTreeNodes}
-        onNodeSelect={(_e: SyntheticEvent<Element, Event>, nodeId: string) => {
+        onNodeSelect={(_e: SyntheticEvent<Element, Event>, nodeIds: string | string[]) => {
+          // Handle both single string and array of strings
+          const nodeId = Array.isArray(nodeIds) ? nodeIds[0] : nodeIds;
+          if (!nodeId) return;
+
           const index = expandedTreeNodes.indexOf(nodeId) as number;
           const copyExpanded = [...expandedTreeNodes];
           if (index === -1) {
diff --git a/webgui-new/src/components/revision-control/styled-components.tsx b/webgui-new/src/components/revision-control/styled-components.tsx
@@ -1,4 +1,4 @@
-import { TreeView, TreeItem, treeItemClasses } from '@mui/lab';
+import { TreeView, TreeItem, treeItemClasses } from '@mui/x-tree-view';
 import { alpha, styled } from '@mui/material';
 
 export const StyledDiv = styled('div')({});
diff --git a/webgui-new/src/components/search-results/search-results.tsx b/webgui-new/src/components/search-results/search-results.tsx
@@ -114,7 +114,11 @@ export const SearchResults = (): JSX.Element => {
   }, [searchResult, fileSearch]);
 
   const handleDirNodeSelect = () => {
-    return (_e: SyntheticEvent<Element, Event>, nodeId: string) => {
+    return (_e: SyntheticEvent<Element, Event>, nodeIds: string | string[]) => {
+      // Handle both single string and array of strings
+      const nodeId = Array.isArray(nodeIds) ? nodeIds[0] : nodeIds;
+      if (!nodeId) return;
+
       if (!expandedPathNodes) return;
       const index = expandedPathNodes.indexOf(nodeId);
       const copyExpanded = [...expandedPathNodes];
@@ -131,8 +135,11 @@ export const SearchResults = (): JSX.Element => {
   };
 
   const handleFileNodeSelect = (pathIdx: string) => {
-    return (_e: SyntheticEvent<Element, Event>, nodeId: string) => {
-      if (!expandedFileNodes) return;
+    return (_e: SyntheticEvent<Element, Event>, nodeIds: string | string[]) => {
+      // Handle both single string and array of strings
+      const nodeId = Array.isArray(nodeIds) ? nodeIds[0] : nodeIds;
+      if (!nodeId || !expandedFileNodes) return;
+
       const expandedNodes = expandedFileNodes[pathIdx].expandedNodes;
       const index = expandedNodes.indexOf(nodeId);
       const copyExpanded = [...expandedNodes];
diff --git a/webgui-new/src/components/search-results/styled-components.tsx b/webgui-new/src/components/search-results/styled-components.tsx
@@ -1,4 +1,4 @@
-import { TreeView, TreeItem, treeItemClasses } from '@mui/lab';
+import { TreeView, TreeItem, treeItemClasses } from '@mui/x-tree-view';
 import { alpha, styled } from '@mui/material';
 
 export const StyledDiv = styled('div')({});

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { TreeView, TreeItem, treeItemClasses } from '@mui/lab';`
	`1`	`+import { TreeView, TreeItem, treeItemClasses } from '@mui/x-tree-view';`
`2`	`2`	`import { FormControlLabel, alpha, styled } from '@mui/material';`
`3`	`3`
`4`	`4`	`export const StyledDiv = styled('div')({});`