upgrade mui to v7

package.json

@@ -11,16 +11,15 @@
 		"@emotion/react": "^11.14.0",
 		"@emotion/styled": "^11.14.0",
 		"@minoru/react-dnd-treeview": "^3.5.0",
-		"@mui/icons-material": "^6.3.1",
-		"@mui/lab": "^6.0.0-beta.22",
-		"@mui/material": "^6.4.8",
-		"@mui/system": "^6.1.8",
-		"@mui/x-data-grid": "^7.28.1",
+		"@mui/icons-material": "^7.0.2",
+		"@mui/lab": "^7.0.0-beta.11",
+		"@mui/material": "^7.0.2",
+		"@mui/system": "^7.0.2",
+		"@mui/x-data-grid": "^8.0.0",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/react": "^16.2.0",
 		"@testing-library/user-event": "^14.6.1",
 		"@types/jest": "^29.5.14",
-		"@types/node": "^22.10.5",
 		"@types/react-dom": "^18.3.1",
 		"@types/signals": "^1.0.4",
 		"@types/throttle-debounce": "^5.0.2",
@@ -33,7 +32,7 @@
 		"jsroot": "^7.8.2",
 		"keycloak-js": "^26.1.4",
 		"ky": "^1.7.3",
-		"material-ui-popup-state": "^5.3.3",
+		"material-ui-popup-state": "^5.3.5",
 		"notistack": "^3.0.2",
 		"object-hash": "^3.0.0",
 		"pyodide": "^0.27.4",
@@ -207,6 +206,7 @@
 	},
 	"devDependencies": {
 		"@total-typescript/ts-reset": "^0.6.1",
+		"@types/node": "^22.14.1",
 		"@types/react": "^18.3.13",
 		"@types/react-async-script": "^1.2.5",
 		"@types/react-copy-to-clipboard": "^5.0.7",

src/JsRoot/GraphData.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Card, CardContent, Grid, Typography } from '@mui/material';
+import { Box, Button, Card, CardContent, GridLegacy as Grid, Typography } from '@mui/material';
 
 import { isCustomFilterJSON } from '../ThreeEditor/Simulation/Scoring/CustomFilter';
 import { isParticleFilterJSON } from '../ThreeEditor/Simulation/Scoring/ParticleFilter';

src/ThreeEditor/components/Sidebar/properties/category/ObjectDimensions.tsx

@@ -1,4 +1,4 @@
-import { Button, Divider, Grid } from '@mui/material';
+import { Button, Divider, GridLegacy as Grid } from '@mui/material';
 import { useCallback } from 'react';
 import { BoxGeometry, SphereGeometry, Vector3 } from 'three';
 

src/ThreeEditor/components/Sidebar/properties/category/ObjectInfo.tsx

@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material';
+import { GridLegacy as Grid } from '@mui/material';
 import { Object3D } from 'three';
 
 import { useSmartWatchEditorState } from '../../../../../util/hooks/signals';

src/ThreeEditor/components/Sidebar/properties/category/ObjectMaterial.tsx

@@ -1,5 +1,5 @@
 import { Stack } from '@mui/material';
-import Typography from '@mui/material/Typography/Typography';
+import Typography from '@mui/material/Typography';
 import { Object3D } from 'three';
 
 import { SimulatorType } from '../../../../../types/RequestTypes';

src/ThreeEditor/components/Sidebar/properties/category/OutputConfiguration.tsx

@@ -1,4 +1,4 @@
-import { Button, Grid, ToggleButton, ToggleButtonGroup } from '@mui/material';
+import { Button, GridLegacy as Grid, ToggleButton, ToggleButtonGroup } from '@mui/material';
 import { useCallback, useEffect, useState } from 'react';
 import { Object3D } from 'three';
 

src/ThreeEditor/components/Sidebar/properties/category/ZoneOperations.tsx

@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material';
+import { GridLegacy as Grid } from '@mui/material';
 import { useCallback } from 'react';
 import { Object3D } from 'three';
 

src/ThreeEditor/components/Sidebar/properties/fields/PropertyField.tsx

@@ -1,4 +1,4 @@
-import { Box, Checkbox, Grid, Stack, TextField, Typography } from '@mui/material';
+import { Box, Checkbox, GridLegacy as Grid, Stack, TextField, Typography } from '@mui/material';
 import { ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Vector2 } from 'three';
 import { Vector3 } from 'three/src/math/Vector3.js';

src/ThreeEditor/components/ZoneManagerPanel/GeometryIdSelect.tsx

@@ -1,5 +1,5 @@
 import { MenuItem, Select } from '@mui/material';
-import { SelectProps } from '@mui/material/Select/Select';
+import { SelectProps } from '@mui/material/Select';
 import { useRef } from 'react';
 import { Object3D } from 'three';
 

src/WrapperApp/components/InputEditor/InputEditorPanel.tsx

@@ -105,6 +105,7 @@ export default function InputEditorPanel({
 					marginBottom: '2rem'
 				}}>
 				<LoadingButton
+					id='generate-from-editor'
 					sx={{
 						marginRight: '1rem'
 					}}

src/WrapperApp/components/Panels/ExamplePanel.tsx

@@ -1,4 +1,4 @@
-import { Box, Grid2, Paper, Typography } from '@mui/material';
+import { Box, Grid, Paper, Typography } from '@mui/material';
 
 import EXAMPLES, { useFetchExampleData } from '../../../examples/examples';
 import { SimulatorType } from '../../../types/RequestTypes';
@@ -24,11 +24,11 @@ export function ExamplePanel({ setTabsValue }: ExamplePanelProps) {
 					</Typography>
 
 					{/* Grid2 of Examples */}
-					<Grid2
+					<Grid
 						container
 						spacing={2}>
 						{Object.entries(EXAMPLES[simulator]).map(([exampleName, fileName]) => (
-							<Grid2
+							<Grid
 								key={fileName}
 								sx={{ width: 200 }}>
 								{' '}
@@ -43,9 +43,9 @@ export function ExamplePanel({ setTabsValue }: ExamplePanelProps) {
 									}}>
 									<Typography variant='body1'>{exampleName}</Typography>
 								</Paper>
-							</Grid2>
+							</Grid>
 						))}
-					</Grid2>
+					</Grid>
 				</Box>
 			))}
 		</Box>

src/WrapperApp/components/Simulation/SimulationCardGrid.tsx

@@ -7,8 +7,8 @@ import {
 	Box,
 	Button,
 	CircularProgress,
-	Grid,
-	GridProps,
+	GridLegacy as Grid,
+	GridLegacyProps as GridProps,
 	Theme,
 	Typography
 } from '@mui/material';

src/__tests__/FlukaConverter.test.ts

@@ -139,9 +139,9 @@ describe('Fluka Converter', () => {
 
 		//wait until the "generate from editor" button and click it (it takes some time for the button to change from "initializing")
 		//xpath is used as again the id changes every time
-		const generateButton = await driver.findElement(
-			By.xpath("//span[contains(text(),'Generate from Editor')]")
-		);
+
+		const generateButton = await driver.findElement(By.id('generate-from-editor'));
+
 		await driver.wait(until.elementIsEnabled(generateButton), 15_000);
 		await generateButton.click();
 

src/__tests__/ShieldhitConverter.test.ts

@@ -144,9 +144,8 @@ describe('ShieldhitConverter', () => {
 
 		//wait until the "generate from editor" button and click it (it takes some time for the button to change from "initializing")
 		//xpath is used as again the id changes every time
-		const generateButton = await driver.findElement(
-			By.xpath("//span[contains(text(),'Generate from Editor')]")
-		);
+		const generateButton = await driver.findElement(By.id('generate-from-editor'));
+
 		await driver.wait(until.elementIsEnabled(generateButton), 15_000);
 		await generateButton.click();