feat: use dialog instead of custom generic modal

src/components/browser/BrowserRecordingSave.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Grid, Button, Box, Typography, IconButton, Menu, MenuItem, ListItemText } from '@mui/material';
+import { Grid, Button, Box, Typography, IconButton, Menu, MenuItem, ListItemText, Dialog, DialogTitle, DialogActions, } from '@mui/material';
 import { SaveRecording } from "../recorder/SaveRecording";
 import { useGlobalInfoStore } from '../../context/globalInfo';
 import { useActionContext } from '../../context/browserActions';
@@ -20,9 +20,9 @@ const BrowserRecordingSave = () => {
 
   const { socket } = useSocketStore();
 
-  const { 
-    stopGetText, 
-    stopGetList, 
+  const {
+    stopGetText,
+    stopGetList,
     stopGetScreenshot,
     stopPaginationMode,
     stopLimitMode,
@@ -45,7 +45,7 @@ const BrowserRecordingSave = () => {
         timestamp: Date.now()
       };
       window.sessionStorage.setItem('pendingNotification', JSON.stringify(notificationData));
-      
+
       if (window.opener) {
         window.opener.postMessage({
           type: 'recording-notification',
@@ -57,9 +57,9 @@ const BrowserRecordingSave = () => {
           timestamp: Date.now()
         }, '*');
       }
-      
+
       setBrowserId(null);
-      
+
       window.close();
 
       stopRecording(browserId).catch((error) => {
@@ -74,7 +74,7 @@ const BrowserRecordingSave = () => {
     stopGetScreenshot();
     stopPaginationMode();
     stopLimitMode();
-    
+
     setShowLimitOptions(false);
     setShowPaginationOptions(false);
     setCaptureStage('initial');
@@ -97,7 +97,7 @@ const BrowserRecordingSave = () => {
     browserSteps.forEach(step => {
       deleteBrowserStep(step.id);
     });
-    
+
     if (socket) {
       socket?.emit('new-recording');
       socket.emit('input:url', initialUrl);
@@ -119,7 +119,7 @@ const BrowserRecordingSave = () => {
   };
 
   const handleClick = (event: any) => {
-      setAnchorEl(event.currentTarget);
+    setAnchorEl(event.currentTarget);
   };
 
   const handleClose = () => {
@@ -183,19 +183,39 @@ const BrowserRecordingSave = () => {
 
           <SaveRecording fileName={recordingName} />
 
-          <GenericModal isOpen={openDiscardModal} onClose={() => setOpenDiscardModal(false)} modalStyle={modalStyle}>
-            <Box p={2}>
-              <Typography variant="h6">{t('browser_recording.modal.confirm_discard')}</Typography>
-              <Box display="flex" justifyContent="space-between" mt={2}>
-                <Button onClick={goToMainMenu} variant="contained" color="error">
-                  {t('right_panel.buttons.discard')}
-                </Button>
-                <Button onClick={() => setOpenDiscardModal(false)} variant="outlined">
-                  {t('right_panel.buttons.cancel')}
-                </Button>
-              </Box>
-            </Box>
-          </GenericModal>
+          <Dialog
+            open={openDiscardModal}
+            onClose={() => setOpenDiscardModal(false)}
+            maxWidth="xs"
+            fullWidth
+            PaperProps={{
+              sx: {
+                p: 0,
+                borderRadius: 2,
+                border: "none"
+              }
+            }}
+          >
+            <DialogTitle>
+              {t('browser_recording.modal.confirm_discard')}
+            </DialogTitle>
+
+            <DialogActions sx={{ px: 3, pb: 2 }}>
+              <Button
+                onClick={() => setOpenDiscardModal(false)}
+                color="inherit"
+              >
+                {t('right_panel.buttons.cancel')}
+              </Button>
+              <Button
+                onClick={goToMainMenu}
+                variant="contained"
+                color="error"
+              >
+                {t('right_panel.buttons.discard')}
+              </Button>
+            </DialogActions>
+          </Dialog>
 
           <GenericModal isOpen={openResetModal} onClose={() => setOpenResetModal(false)} modalStyle={modalStyle}>
             <Box p={2}>
@@ -204,9 +224,9 @@ const BrowserRecordingSave = () => {
                 {t('browser_recording.modal.reset_warning')}
               </Typography>
               <Box display="flex" justifyContent="space-between" mt={2}>
-                <Button 
-                  onClick={performReset} 
-                  variant="contained" 
+                <Button
+                  onClick={performReset}
+                  variant="contained"
                   color="primary"
                 >
                   {t('right_panel.buttons.confirm_reset')}

src/components/recorder/SaveRecording.tsx

@@ -1,11 +1,10 @@
 import React, { useCallback, useEffect, useState, useContext } from 'react';
-import { Button, Box, LinearProgress, Tooltip } from "@mui/material";
-import { GenericModal } from "../ui/GenericModal";
+import { Button, Box, LinearProgress, Tooltip, Dialog, DialogTitle, DialogContent } from "@mui/material";
 import { stopRecording } from "../../api/recording";
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { AuthContext } from '../../context/auth';
 import { useSocketStore } from "../../context/socket";
-import { TextField, Typography } from "@mui/material";
+import { TextField } from "@mui/material";
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
@@ -48,7 +47,7 @@ export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
   const handleFinishClick = () => {
     const { hasScrapeListAction, hasScreenshotAction, hasScrapeSchemaAction } = currentWorkflowActionsState;
     const hasAnyAction = hasScrapeListAction || hasScreenshotAction || hasScrapeSchemaAction;
-    
+
     if (!hasAnyAction) {
       notify('warning', t('save_recording.errors.no_actions_performed'));
       return;
@@ -63,7 +62,7 @@ export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
 
   const exitRecording = useCallback(async (data?: { actionType: string }) => {
     let successMessage = t('save_recording.notifications.save_success');
-    
+
     if (data && data.actionType) {
       if (data.actionType === 'retrained') {
         successMessage = t('save_recording.notifications.retrain_success');
@@ -73,31 +72,31 @@ export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
         successMessage = t('save_recording.notifications.save_error');
       }
     }
-    
+
     const notificationData = {
       type: data?.actionType === 'error' ? 'error' : 'success',
       message: successMessage,
       timestamp: Date.now()
     };
     window.sessionStorage.setItem('pendingNotification', JSON.stringify(notificationData));
-    
+
     if (window.opener) {
       window.opener.postMessage({
         type: 'recording-notification',
         notification: notificationData
       }, '*');
-      
+
       window.opener.postMessage({
         type: 'session-data-clear',
         timestamp: Date.now()
       }, '*');
     }
-    
+
     if (browserId) {
       await stopRecording(browserId);
     }
     setBrowserId(null);
-    
+
     window.close();
   }, [setBrowserId, browserId, t]);
 
@@ -107,7 +106,7 @@ export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
     if (user) {
       const { hasScrapeListAction, hasScreenshotAction, hasScrapeSchemaAction } = currentWorkflowActionsState;
       const hasAnyAction = hasScrapeListAction || hasScreenshotAction || hasScrapeSchemaAction;
-      
+
       if (!hasAnyAction) {
         notify('warning', t('save_recording.errors.no_actions_performed'));
         return;
@@ -160,30 +159,54 @@ export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
         {t('right_panel.buttons.finish')}
       </Button>
 
-      <GenericModal isOpen={openModal} onClose={() => setOpenModal(false)} modalStyle={modalStyle}>
-        <form onSubmit={handleSaveRecording} style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
-          <Typography variant="h6">{t('save_recording.title')}</Typography>
-          <TextField
-            required
-            sx={{ width: '300px', margin: '15px 0px' }}
-            onChange={handleChangeOfTitle}
-            id="title"
-            label={t('save_recording.robot_name')}
-            variant="outlined"
-            value={saveRecordingName}
-          />
-          <Button type="submit" variant="contained" sx={{ marginTop: '10px' }}>
-            {t('save_recording.buttons.save')}
-          </Button>
-          {waitingForSave &&
-            <Tooltip title={t('save_recording.tooltips.optimizing')} placement={"bottom"}>
-              <Box sx={{ width: '100%', marginTop: '10px' }}>
-                <LinearProgress />
-              </Box>
-            </Tooltip>
+      <Dialog
+        open={openModal}
+        onClose={() => setOpenModal(false)}
+        maxWidth="xs"
+        fullWidth
+        PaperProps={{
+          sx: {
+            p: 0,
+            borderRadius: 2
           }
-        </form>
-      </GenericModal>
+        }}
+      >
+        <DialogTitle>
+          {t('save_recording.title')}
+        </DialogTitle>
+
+        <DialogContent>
+          <form
+            onSubmit={handleSaveRecording}
+            style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}
+          >
+            <TextField
+              required
+              sx={{ width: '300px', margin: '15px 0px' }}
+              onChange={handleChangeOfTitle}
+              id="title"
+              label={t('save_recording.robot_name')}
+              variant="outlined"
+              value={saveRecordingName}
+            />
+
+            <Button type="submit" variant="contained" sx={{ marginTop: '10px' }}>
+              {t('save_recording.buttons.save')}
+            </Button>
+
+            {waitingForSave && (
+              <Tooltip
+                title={t('save_recording.tooltips.optimizing')}
+                placement="bottom"
+              >
+                <Box sx={{ width: '100%', marginTop: '10px' }}>
+                  <LinearProgress />
+                </Box>
+              </Tooltip>
+            )}
+          </form>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }