Merge remote-tracking branch 'origin/main' into update-deps

src/components/customAGGrid/customAggrid.style.ts

@@ -4,7 +4,7 @@
  * 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 { type Theme } from '@mui/material';
+import type { Theme } from '@mui/material';
 import type { SystemStyleObject } from '@mui/system';
 
 export const CUSTOM_AGGRID_THEME = 'custom-aggrid-theme';

src/components/customAGGrid/customAggrid.tsx

@@ -6,12 +6,12 @@
  */
 
 import React, { useCallback } from 'react';
-import { Box, type SxProps, type Theme, useTheme } from '@mui/material';
 import { AgGridReact, AgGridReactProps } from 'ag-grid-react';
 import { useIntl } from 'react-intl';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 import { ColumnResizedEvent, GetLocaleTextParams } from 'ag-grid-community';
+import { Box, type SxProps, type Theme, useTheme } from '@mui/material';
 import { mergeSx } from '../../utils/styles';
 import { CUSTOM_AGGRID_THEME, styles } from './customAggrid.style';
 

src/components/topBar/MessageBanner.tsx

@@ -4,11 +4,11 @@
  * 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 { type ReactNode, useState } from 'react';
+import { ReactNode, useState } from 'react';
 import { Box, type Theme } from '@mui/material';
-import type { SystemStyleObject } from '@mui/system';
 import CloseIcon from '@mui/icons-material/Close';
 import WarningAmberIcon from '@mui/icons-material/WarningAmber';
+import type { SystemStyleObject } from '@mui/system';
 
 const styles = {
     banner: (theme: Theme): SystemStyleObject<Theme> => ({

src/components/topBar/TopBar.tsx

@@ -42,7 +42,6 @@ import {
     Person as PersonIcon,
     WbSunny as WbSunnyIcon,
 } from '@mui/icons-material';
-
 import type { User } from 'oidc-client';
 import { GridLogo, GridLogoProps } from './GridLogo';
 import { AboutDialog, AboutDialogProps } from './AboutDialog';
@@ -182,7 +181,7 @@ export type TopBarProps = Omit<GridLogoProps, 'onClick'> &
         equipmentLabelling?: boolean;
         onLanguageClick: (value: GsLang) => void;
         language: GsLang;
-        developerMode: boolean;
+        developerMode?: boolean;
         onDeveloperModeClick?: (value: boolean) => void;
     };
 

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>

src/components/treeViewFinder/TreeViewFinder.tsx

@@ -19,7 +19,7 @@ import {
     styled,
     Typography,
 } from '@mui/material';
-import { TreeItem, TreeView, type TreeViewClasses } from '@mui/x-tree-view';
+import { TreeItem, TreeView, TreeViewClasses } from '@mui/x-tree-view';
 import {
     Check as CheckIcon,
     ChevronRight as ChevronRightIcon,