Dev Mode isn't mandatory for the Top-Bar (#690)

Signed-off-by: Tristan <[email protected]> Signed-off-by: BOUTIER Charly <[email protected]> Co-authored-by: BOUTIER Charly <[email protected]>
gridsuite · Feb 11, 2025 · 8f84e13 · 8f84e13
1 parent 9266b59
commit 8f84e13
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 18 deletions.
diff --git a/src/components/topBar/TopBar.tsx b/src/components/topBar/TopBar.tsx
@@ -182,7 +182,7 @@ export type TopBarProps = Omit<GridLogoProps, 'onClick'> &
         equipmentLabelling?: boolean;
         onLanguageClick: (value: GsLang) => void;
         language: GsLang;
-        developerMode: boolean;
+        developerMode?: boolean;
         onDeveloperModeClick?: (value: boolean) => void;
     };
 

diff --git a/src/components/topBar/UserSettingsDialog.tsx b/src/components/topBar/UserSettingsDialog.tsx
@@ -4,9 +4,19 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-import { SyntheticEvent } from 'react';
+import { type ChangeEvent, type SyntheticEvent, useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Alert, Dialog, Switch, Button, DialogActions, DialogContent, DialogTitle, Box, Theme } from '@mui/material';
+import {
+    Alert,
+    Box,
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    Switch,
+    type Theme,
+} from '@mui/material';
 
 const styles = {
     parameterName: (theme: Theme) => ({
@@ -22,23 +32,26 @@ const styles = {
 interface UserSettingsDialogProps {
     openDialog: boolean;
     onClose: () => void;
-    developerMode: boolean;
+    developerMode?: boolean;
     onDeveloperModeClick?: (value: boolean) => void;
 }
 
 function UserSettingsDialog({ openDialog, onClose, developerMode, onDeveloperModeClick }: UserSettingsDialogProps) {
-    const handleDeveloperModeClick = (value: boolean) => {
-        if (onDeveloperModeClick) {
-            onDeveloperModeClick(value);
-        }
-    };
+    const handleDeveloperModeClick = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => onDeveloperModeClick?.(event.target.checked),
+        [onDeveloperModeClick]
+    );
 
-    const handleClose = (_: SyntheticEvent, reason?: string) => {
-        if (reason === 'backdropClick') {
-            return;
-        }
-        onClose();
-    };
+    // TODO: there is no 2nd argument for button on-click
+    const handleClose = useCallback(
+        (_: SyntheticEvent, reason?: string) => {
+            if (reason === 'backdropClick') {
+                return;
+            }
+            onClose();
+        },
+        [onClose]
+    );
 
     return (
         <Dialog fullWidth open={openDialog} onClose={handleClose}>
@@ -52,9 +65,9 @@ function UserSettingsDialog({ openDialog, onClose, developerMode, onDeveloperMod
                     </Box>
                     <Box>
                         <Switch
-                            checked={developerMode}
-                            onChange={(_event, isChecked) => handleDeveloperModeClick(isChecked)}
-                            value={developerMode}
+                            checked={developerMode ?? false}
+                            disabled={handleDeveloperModeClick === undefined}
+                            onChange={handleDeveloperModeClick}
                             inputProps={{ 'aria-label': 'developer mode checkbox' }}
                         />
                     </Box>