998 update login panel (#1023)

* Split drawer tabs to list

* Add new conditional button

* format package.json

* Remove duplicate button

* Update drawer tests

* Finally fix tests

* Remove login from demo version

* Update config-overrides.js

* Fix height issues

* Update grid rows fromula

config-overrides.js

@@ -0,0 +1,10 @@
+module.exports = function override(webpackConfig) {
+	// allows create-react-app to load modules with `.cjs` and `.mjs` extension types
+	webpackConfig.module.rules.push({
+		test: /\.(c|m)js$/,
+		include: /node_modules/,
+		type: 'javascript/auto'
+	});
+
+	return webpackConfig;
+};

package.json

@@ -39,6 +39,7 @@
 		"react-hooks-visible": "^1.1.1",
 		"react-merge-refs": "^2.0.1",
 		"react-scripts": "5.0.1",
+		"set-interval-async": "^3.0.3",
 		"signals": "^1.0.0",
 		"split-grid": "^1.0.11",
 		"three": "^0.150.1",
@@ -53,14 +54,17 @@
 		"build-python": "node buildPython.js",
 		"setup": "npm run identify && npm run build-python",
 		"prestart": "npm run setup skip",
-		"start": "react-scripts start",
 		"prebuild": "npm run setup",
-		"build": "react-scripts build",
-		"test": "react-scripts test",
+		"start": "react-app-rewired start",
+		"build": "react-app-rewired build",
+		"test": "react-app-rewired test",
 		"eject": "react-scripts eject",
 		"start-demo": "cross-env REACT_APP_TARGET=demo npm run start",
 		"test-demo": "cross-env REACT_APP_TARGET=demo npm run test",
 		"build-demo": "cross-env REACT_APP_TARGET=demo npm run build",
+		"start-plg": "cross-env REACT_APP_ALT_AUTH=plg npm run start",
+		"test-plg": "cross-env REACT_APP_ALT_AUTH=plg npm run test",
+		"build-plg": "cross-env REACT_APP_ALT_AUTH=plg npm run build",
 		"fix-web-dev": "node fixDeploy.mjs",
 		"predeploy": "npm run setup && npm run build-demo && cross-env PUBLIC_PATH=/web_dev/ npm run fix-web-dev",
 		"deploy": "gh-pages -d build",

src/App.tsx

@@ -4,17 +4,24 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import { SnackbarProvider } from 'notistack';
 import * as React from 'react';
 import { PythonConverterService } from './PythonConverter/PythonConverterService';
+import WrapperApp from './WrapperApp/WrapperApp';
 import { Auth } from './services/AuthService';
 import { Loader } from './services/DataLoaderService';
 import { ShSimulation } from './services/ShSimulatorService';
 import { Store } from './services/StoreService';
-import WrapperApp from './WrapperApp/WrapperApp';
 
 declare module '@mui/material/styles' {
 	// add new variables to the theme type
 	interface TypeBackground {
 		secondary: string;
 	}
+
+	interface ThemeOptions {
+		dimensions: {
+			navDrawerWidth: number;
+		};
+	}
+	interface Theme extends ThemeOptions {}
 }
 
 function App() {
@@ -37,6 +44,9 @@ function App() {
 				},
 				typography: {
 					fontSize: 11
+				},
+				dimensions: {
+					navDrawerWidth: 160
 				}
 			}),
 		[prefersDarkMode]

src/ThreeEditor/components/Dialog/SaveFileDialog.tsx

@@ -30,7 +30,7 @@ export function SaveFileDialog(props: SaveFileProps) {
 	const [keepResults, setKeepResults] = useState<boolean>(false);
 	useEffect(() => {
 		setKeepResults(results?.inputJson?.hash === editor?.toJSON().hash);
-	}, [props, props.editor, editor]);
+	}, [props, props.editor, editor, results?.inputJson?.hash]);
 
 	const [name, setName] = useState<string>('editor');
 	const changeName = (event: React.ChangeEvent<HTMLInputElement>) => {

src/ThreeEditor/components/Editor/EditorAppBar/EditorAppBar.tsx

@@ -164,7 +164,14 @@ function EditorAppBar({ editor }: AppBarProps) {
 					variant='subtitle1'
 					component='div'
 					align='center'
-					sx={{ flexGrow: 1, marginRight: 6 }}>
+					sx={{
+						width: 'auto',
+						flexGrow: 1,
+						flexShrink: 1,
+						textOverflow: 'ellipsis',
+						overflow: 'hidden',
+						whiteSpace: 'nowrap'
+					}}>
 					{title}
 					{saving && (
 						<CircularProgress

src/ThreeEditor/js/sidebar/Sidebar.OutlinerManager.js

@@ -3,6 +3,9 @@ import { escapeHTML } from '../../../util/escapeHTML';
 import { UICheckbox } from '../libs/ui.js';
 import { SetValueCommand } from '../commands/SetValueCommand.js';
 
+/**
+ * @deprecated
+ */
 const getObjectType = object => {
 	switch (object.type) {
 		case 'Scene':
@@ -27,7 +30,6 @@ const getObjectType = object => {
 		case 'Beam':
 			return 'Beam';
 		default:
-			console.warn(`could not parse object of type ${object.type}`, typeof object, object);
 			return 'Unknown';
 	}
 };
@@ -36,12 +38,11 @@ const getAdditionalInfo = object => {
 		case 'BoxFigure':
 		case 'CylinderFigure':
 		case 'SphereFigure':
-			return ` [${
-				object.id
-			}] <span class="type Geometry"></span> <span class="type-value">${object.type.slice(
-				0,
-				-4
-			)}</span>`;
+			return ` [${object.id
+				}] <span class="type Geometry"></span> <span class="type-value">${object.type.slice(
+					0,
+					-4
+				)}</span>`;
 		case 'Beam':
 			let particle = object.particle;
 			return ` [${object.id}] <span class="type Particle Beam"></span> ${particle.name} [${particle.id}]`;
@@ -55,31 +56,26 @@ const getAdditionalInfo = object => {
 				<span class="type-value">${material.name} [${material.icru}]</span>`;
 		case 'Points':
 			let { zone, detectType } = object;
-			return ` [${object.id}] <span class="type Geometry ${
-				detectType === 'Zone' ? 'Zone' : ''
-			}"></span> <span class="type-value">${
-				zone ? `${escapeHTML(zone.name)} [${zone.id}]` : detectType
-			}</span>`;
+			return ` [${object.id}] <span class="type Geometry ${detectType === 'Zone' ? 'Zone' : ''
+				}"></span> <span class="type-value">${zone ? `${escapeHTML(zone.name)} [${zone.id}]` : detectType
+				}</span>`;
 		case 'Filter':
 			return ` [${object.id}]`;
 		case 'Output':
 			let { geometry } = object;
-			return ` [${object.id}] <span class="type-value">${
-				object.geometry
-					? `<span class="type Detect Geometry"></span>${escapeHTML(geometry.name)} [${
-							geometry.id
-					  }]`
-					: ''
-			}</span>`;
+			return ` [${object.id}] <span class="type-value">${object.geometry
+				? `<span class="type Detect Geometry"></span>${escapeHTML(geometry.name)} [${geometry.id
+				}]`
+				: ''
+				}</span>`;
 		case 'Quantity':
 			let filter = object.filter;
-			return ` [${object.id}] ${
-				filter
-					? `<span class="type Filter Modifier"></span> <span class="type-value">${escapeHTML(
-							filter.name
-					  )} [${filter.id}]`
-					: ''
-			}</span>`;
+			return ` [${object.id}] ${filter
+				? `<span class="type Filter Modifier"></span> <span class="type-value">${escapeHTML(
+					filter.name
+				)} [${filter.id}]`
+				: ''
+				}</span>`;
 		default:
 			return '';
 	}

src/WrapperApp/components/InputEditor/InputEditorPanel.tsx

@@ -4,38 +4,26 @@ import { useSnackbar } from 'notistack';
 import { useCallback, useState } from 'react';
 import { throttle } from 'throttle-debounce';
 import { usePythonConverter } from '../../../PythonConverter/PythonConverterService';
-import { useShSimulation } from '../../../services/ShSimulatorService';
-import { useStore } from '../../../services/StoreService';
 import { EditorJson } from '../../../ThreeEditor/js/EditorJson';
 import { DEMO_MODE } from '../../../config/Config';
-import { InputFilesEditor } from './InputFilesEditor';
 import { readFile } from '../../../services/DataLoaderService';
-import { DragDropFiles } from './DragDropFiles';
+import { useShSimulation } from '../../../services/ShSimulatorService';
+import { useStore } from '../../../services/StoreService';
+import { SimulatorType } from '../../../types/RequestTypes';
 import {
-	ResponsePostJob,
-	ResponseShConvert,
-	ResponseTopasConvert,
 	SimulationInputFiles,
 	_defaultFlukaInputFiles,
 	_defaultShInputFiles,
 	_defaultTopasInputFiles
 } from '../../../types/ResponseTypes';
-import {
-	RequestPostJob,
-	RequestShConvert,
-	RequestTopasConvert,
-	SimulatorType
-} from '../../../types/RequestTypes';
+import { DragDropFiles } from './DragDropFiles';
+import { InputFilesEditor } from './InputFilesEditor';
 interface InputEditorPanelProps {
 	goToRun?: (simulator: SimulatorType, InputFiles?: SimulationInputFiles) => void;
 }
 
 type GeneratorLocation = 'local' | 'remote';
 
-type ConvertToInputFiles =
-	| ((...args: RequestShConvert) => Promise<ResponseShConvert>)
-	| ((...args: RequestTopasConvert) => Promise<ResponseTopasConvert>);
-
 export default function InputEditorPanel({ goToRun }: InputEditorPanelProps) {
 	const { enqueueSnackbar } = useSnackbar();
 	const { editorRef } = useStore();

src/WrapperApp/components/NavDrawer/NavDrawer.test.ts

@@ -36,15 +36,12 @@ describe('NavDrawer component', () => {
 		await menuButton.click();
 
 		//check if the drawer has closed (by looking if the "closed drawer" component is rendered)
-		await driver.wait(
-			until.elementLocated(
-				By.className('MuiDrawer-root MuiDrawer-docked css-2dum1v-MuiDrawer-docked')
-			),
-			1000
-		);
-		const closedDrawer = await driver.findElement(
-			By.className('MuiDrawer-root MuiDrawer-docked css-2dum1v-MuiDrawer-docked')
-		);
+		function getDrawerPath(open: boolean) {
+			return `//div[@aria-label = 'Navigation drawer for the YAPTIDE application' and @aria-expanded = '${open}']`;
+		}
+		await driver.wait(until.elementLocated(By.xpath(getDrawerPath(false))), 1000);
+
+		const closedDrawer = await driver.findElement(By.xpath(getDrawerPath(false)));
 		expect(await closedDrawer.isDisplayed()).toBeTruthy();
 
 		//find the menu button again and click it
@@ -54,15 +51,8 @@ describe('NavDrawer component', () => {
 		await menuButton2.click();
 
 		//check if the drawer is open again
-		await driver.wait(
-			until.elementLocated(
-				By.className('MuiDrawer-root MuiDrawer-docked css-14if1t4-MuiDrawer-docked')
-			),
-			1000
-		);
-		const openDrawer = await driver.findElement(
-			By.className('MuiDrawer-root MuiDrawer-docked css-14if1t4-MuiDrawer-docked')
-		);
+		await driver.wait(until.elementLocated(By.xpath(getDrawerPath(true))), 1000);
+		const openDrawer = await driver.findElement(By.xpath(getDrawerPath(true)));
 		expect(await openDrawer.isDisplayed()).toBeTruthy();
 	}, 30000);
 });