mui upgrade

interface/src/components/MessageBox.tsx

@@ -53,12 +53,16 @@ const MessageBox: FC<PropsWithChildren<MessageBoxProps>> = ({
 
   return (
     <Box
-      p={2}
-      display="flex"
-      alignItems="center"
-      borderRadius={1}
-      sx={{ backgroundColor, color: 'white', ...sx }}
       {...rest}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        borderRadius: 1,
+        backgroundColor,
+        color: 'white',
+        p: 2,
+        ...sx
+      }}
     >
       <Icon />
       {(message || children) && (

interface/src/components/layout/LayoutDrawer.tsx

@@ -29,7 +29,7 @@ const LayoutDrawerComponent = ({ mobileOpen, onClose }: LayoutDrawerProps) => {
     () => (
       <>
         <Toolbar disableGutters>
-          <Box display="flex" alignItems="center" px={2}>
+          <Box sx={{ display: 'flex', alignItems: 'center', p: 2 }}>
             <LayoutDrawerLogo src="/app/icon.png" alt={PROJECT_NAME} />
             <Typography variant="h6">{PROJECT_NAME}</Typography>
           </Box>

interface/src/components/layout/LayoutMenu.tsx

@@ -51,9 +51,7 @@ const LayoutMenuComponent = () => {
               sx={{ my: 0 }}
               slotProps={{
                 primary: {
-                  fontWeight: '600',
-                  mb: '2px',
-                  color: 'lightblue'
+                  sx: { fontWeight: 600, mb: '2px', color: 'lightblue' }
                 }
               }}
             />

interface/src/components/loading/FormLoader.tsx

@@ -32,8 +32,16 @@ const FormLoaderComponent = ({ errorMessage, onRetry }: FormLoaderProps) => {
     );
   }
   return (
-    <Box m={2} py={2} display="flex" alignItems="center" flexDirection="column">
-      <Box py={2}>
+    <Box
+      sx={{
+        m: 2,
+        py: 2,
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column'
+      }}
+    >
+      <Box sx={{ p: 2 }}>
         <CircularProgress size={100} />
       </Box>
     </Box>

interface/src/components/loading/LoadingSpinner.tsx

@@ -15,12 +15,14 @@ const circularProgressStyles: SxProps<Theme> = (theme: Theme) => ({
 const LoadingSpinner = ({ height = '100%' }: LoadingSpinnerProps) => {
   return (
     <Box
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-      flexDirection="column"
-      padding={2}
-      height={height}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'column',
+        padding: 2,
+        height
+      }}
     >
       <CircularProgress sx={circularProgressStyles} size={100} />
     </Box>

interface/src/components/upload/DragNdrop.tsx

@@ -1,4 +1,4 @@
-// Code inspired by Prince Azubuike from https://medium.com/@dprincecoder/creating-a-drag-and-drop-file-upload-component-in-react-a-step-by-step-guide-4d93b6cc21e0
+// drag/drop code inspired by Prince Azubuike from https://medium.com/@dprincecoder/creating-a-drag-and-drop-file-upload-component-in-react-a-step-by-step-guide-4d93b6cc21e0
 import {
   type ChangeEvent,
   type DragEvent,
@@ -6,12 +6,27 @@ import {
   useRef,
   useState
 } from 'react';
+import { toast } from 'react-toastify';
 
 import CancelIcon from '@mui/icons-material/Cancel';
 import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 import UploadIcon from '@mui/icons-material/Upload';
-import { Box, Button, Typography, styled } from '@mui/material';
+import WarningIcon from '@mui/icons-material/Warning';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Typography,
+  styled
+} from '@mui/material';
 
+import { callAction } from 'api/app';
+
+import { dialogStyle } from '@/CustomTheme';
+import { useRequest } from 'alova/client';
 import { useI18nContext } from 'i18n/i18n-react';
 
 const DocumentUploader = styled(Box)<{ active?: boolean }>(({ theme, active }) => ({
@@ -58,6 +73,23 @@ const DragNdrop = ({ text, onFileSelected }: DragNdropProps) => {
   const [dragged, setDragged] = useState(false);
   const inputRef = useRef<HTMLInputElement | null>(null);
   const { LL } = useI18nContext();
+  const [showUpgradeDialog, setShowUpgradeDialog] = useState(false);
+  const [upgradeImportantMessageType, setUpgradeImportantMessageType] =
+    useState<number>(0);
+
+  const { send: checkUpgradeImportantMessages } = useRequest(
+    (type: string) =>
+      callAction({ action: 'upgradeImportantMessages', param: type }),
+    {
+      immediate: false
+    }
+  )
+    .onSuccess((event: { data: number }) => {
+      setUpgradeImportantMessageType(event.data);
+    })
+    .onError((error: { error?: { message?: string } }) => {
+      toast.error(String(error.error?.message || 'An error occurred'));
+    });
 
   const checkFileExtension = (file: File) => {
     const validExtensions = ['.json', '.bin', '.md5'];
@@ -97,9 +129,8 @@ const DragNdrop = ({ text, onFileSelected }: DragNdropProps) => {
 
   const handleUploadClick = (event: MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
-    if (file) {
-      onFileSelected(file);
-    }
+    void checkUpgradeImportantMessages(file?.name || '');
+    setShowUpgradeDialog(true);
   };
 
   const handleBrowseClick = () => {
@@ -158,6 +189,46 @@ const DragNdrop = ({ text, onFileSelected }: DragNdropProps) => {
               {LL.UPLOAD()}
             </Button>
           </Box>
+          {showUpgradeDialog && (
+            <Dialog
+              sx={dialogStyle}
+              open={showUpgradeDialog}
+              onClose={() => setShowUpgradeDialog(false)}
+            >
+              <DialogTitle>
+                <WarningIcon
+                  color="warning"
+                  sx={{ fontSize: 18, verticalAlign: 'middle' }}
+                />
+                &nbsp;&nbsp;
+                {LL.UPGRADE_IMPORTANT_MESSAGES()}
+              </DialogTitle>
+              <DialogContent dividers>
+                {upgradeImportantMessageType === 1 &&
+                  LL.UPGRADE_IMPORTANT_MESSAGES_1()}
+                {upgradeImportantMessageType === 2 &&
+                  LL.UPGRADE_IMPORTANT_MESSAGES_2()}
+              </DialogContent>
+              <DialogActions>
+                <Button
+                  startIcon={<CancelIcon />}
+                  variant="outlined"
+                  onClick={() => setShowUpgradeDialog(false)}
+                  color="secondary"
+                >
+                  {LL.CANCEL()}
+                </Button>
+                <Button
+                  startIcon={<UploadIcon />}
+                  variant="outlined"
+                  onClick={() => onFileSelected(file)}
+                  color="primary"
+                >
+                  {LL.UPLOAD()}
+                </Button>
+              </DialogActions>
+            </Dialog>
+          )}
         </>
       )}
     </DocumentUploader>

interface/src/components/upload/SingleUpload.tsx

@@ -13,11 +13,10 @@ import DragNdrop from './DragNdrop';
 import { LinearProgressWithLabel } from './LinearProgressWithLabel';
 
 interface SingleUploadProps {
-  text: string;
   doRestart: () => void;
 }
 
-const SingleUpload = ({ text, doRestart }: SingleUploadProps) => {
+const SingleUpload = ({ doRestart }: SingleUploadProps) => {
   const [md5, setMd5] = useState<string>();
   const [file, setFile] = useState<File>();
   const { LL } = useI18nContext();
@@ -58,7 +57,7 @@ const SingleUpload = ({ text, doRestart }: SingleUploadProps) => {
     <>
       {isUploading ? (
         <>
-          <Box width="100%" pl={2} pr={2}>
+          <Box sx={{ width: '100%', pl: 2, pr: 2 }}>
             <LinearProgressWithLabel
               value={
                 progress.total === 0 || progress.loaded === 0
@@ -81,11 +80,11 @@ const SingleUpload = ({ text, doRestart }: SingleUploadProps) => {
           </Button>
         </>
       ) : (
-        <DragNdrop text={text} onFileSelected={setFile} />
+        <DragNdrop text={LL.UPLOAD_DROP_TEXT()} onFileSelected={setFile} />
       )}
 
       {md5 && (
-        <Box mt={2}>
+        <Box sx={{ mt: 2 }}>
           <Typography variant="body2">{'MD5: ' + md5}</Typography>
         </Box>
       )}