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

@@ -185,19 +185,12 @@ export function generateGraphs(
 			return (
 				<Grid
 					key={`graph_${name}${jobId ? '_' + jobId : ''}_${page.name ?? idx}`}
-					item
-					xs={12}>
+					size={12}>
 					<Card>
 						<CardContent>
 							<Grid container>
-								<Grid
-									item
-									xs={8}>
-									{graph}
-								</Grid>
-								<Grid
-									item
-									xs={4}>
+								<Grid size={8}>{graph}</Grid>
+								<Grid size={4}>
 									<Box sx={{ marginTop: '1rem' }}>
 										<Typography variant='h5'>Filter:</Typography>
 										<Typography>{filter?.name ?? 'None'}</Typography>

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

@@ -107,9 +107,7 @@ const WorldZoneCalculateField = (props: { editor: YaptideEditor; object: WorldZo
 
 	return (
 		<>
-			<Grid
-				item
-				xs={12}>
+			<Grid size={12}>
 				<Divider />
 			</Grid>
 			<BooleanPropertyField
@@ -127,9 +125,7 @@ const WorldZoneCalculateField = (props: { editor: YaptideEditor; object: WorldZo
 					);
 				}}
 			/>
-			<Grid
-				item
-				xs={12}>
+			<Grid size={12}>
 				<Button
 					sx={{ width: '100%' }}
 					variant='contained'

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

@@ -46,16 +46,11 @@ export function ObjectInfo(props: { editor: YaptideEditor; object: Object3D }) {
 					{isScoringQuantity(watchedObject) && (
 						<>
 							<Grid
-								item
-								xs={4}
+								size={4}
 								sx={{ textAlign: 'right' }}>
 								{'Scoring Type'}
 							</Grid>
-							<Grid
-								item
-								xs={8}>
-								{scoringType}
-							</Grid>
+							<Grid size={8}>{scoringType}</Grid>
 						</>
 					)}
 				</>

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

@@ -142,9 +142,7 @@ export function OutputConfiguration(props: { editor: YaptideEditor; object: Obje
 							onChange={handleChangedZone}
 						/>
 					)}
-					<Grid
-						item
-						xs={12}>
+					<Grid size={12}>
 						<Button
 							sx={{ width: '100%' }}
 							variant='contained'

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

@@ -76,9 +76,7 @@ export function ZoneOperations(props: { editor: YaptideEditor; object: Object3D
 			category='Zone Operations'
 			visible={visibleFlag}>
 			{watchedObject && (
-				<Grid
-					item
-					xs={12}>
+				<Grid size={12}>
 					<ZoneManagerPanel
 						editor={editor}
 						zone={watchedObject.object}

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

@@ -34,15 +34,13 @@ export function PropertyField(props: { label?: string; disabled?: boolean; child
 		<>
 			{props.label !== undefined && (
 				<Grid
-					item
-					xs={4}
+					size={4}
 					sx={{ textAlign: 'right', opacity: props.disabled ? 0.5 : 'inherit' }}>
 					{props.label}
 				</Grid>
 			)}
 			<Grid
-				item
-				xs={props.label !== undefined ? 8 : 12}
+				size={props.label !== undefined ? 8 : 12}
 				sx={{ opacity: props.disabled ? 0.5 : 'inherit' }}>
 				{props.children}
 			</Grid>

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

@@ -50,13 +50,13 @@ const stylesByLayout: Record<GridLayout, { gridContainerProps: {}; gridItemProps
 			columns: { sm: 1, md: 2, lg: 3, xl: 4 },
 			justifyContent: 'space-evenly'
 		},
-		gridItemProps: { xs: 1 }
+		gridItemProps: { size: 1 }
 	},
 	'inline-list': {
 		gridContainerProps: {
 			spacing: 2
 		},
-		gridItemProps: { xs: 12 }
+		gridItemProps: { size: 12 }
 	},
 	'block-list': {
 		gridContainerProps: {
@@ -84,14 +84,14 @@ export function SimulationCardGrid({
 	...other
 }: SimulationCardGridProps) {
 	let gridContainerProps: GridProps = { container: true };
-	let gridItemProps: GridProps = { item: true };
+	let gridItemProps: GridProps = {}; // default grid item props
 
 	if (validGriLayout(layout)) {
 		gridContainerProps = {
 			...gridContainerProps,
 			...stylesByLayout[layout].gridContainerProps
 		};
-		gridItemProps = { ...gridItemProps, ...stylesByLayout[layout].gridItemProps };
+		gridItemProps = { ...stylesByLayout[layout].gridItemProps };
 	} else {
 		console.warn(`Unknown layout: ${layout}`);
 	}
@@ -103,6 +103,7 @@ export function SimulationCardGrid({
 				...sx
 			}}>
 			<Grid
+				id='simulation-card-grid'
 				{...gridContainerProps}
 				{...other}>
 				{simulations ? (

src/__tests__/FlukaConverter.test.ts

@@ -138,10 +138,9 @@ describe('Fluka Converter', () => {
 		).toBeTruthy();
 
 		//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')]")
-		);
+		//the ID is now defined in component and is used for element selection
+		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

@@ -143,10 +143,9 @@ describe('ShieldhitConverter', () => {
 		).toBeTruthy();
 
 		//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')]")
-		);
+		//the ID is now defined in component and is used for element selection
+		const generateButton = await driver.findElement(By.id('generate-from-editor'));
+
 		await driver.wait(until.elementIsEnabled(generateButton), 15_000);
 		await generateButton.click();