Merge pull request #314 from getmaxun/reset-browser

feat: reset remote browser recording state

public/locales/de.json

@@ -162,6 +162,7 @@
             "confirm_limit": "Bestätigen",
             "finish_capture": "Erfassung abschließen",
             "back": "Zurück",
+            "reset": "Starten Sie die Aufnahme neu",
             "finish": "Fertig",
             "cancel": "Abbrechen",
             "delete": "Löschen"
@@ -226,10 +227,14 @@
     },
     "browser_recording": {
         "modal": {
-            "confirm_discard": "Sind Sie sicher, dass Sie die Aufnahme verwerfen möchten?"
+            "confirm_discard": "Sind Sie sicher, dass Sie die Aufnahme verwerfen möchten?",
-        },
+            "confirm_reset": "Sind Sie sicher, dass Sie zurücksetzen möchten?",
+            "reset_warning": "Dadurch werden alle vorherigen Aufnahmen in der aktuellen Sitzung gelöscht. Die Aufnahmesitzung wird für dieselbe Website neu gestartet."
+            },
         "notifications": {
-            "terminated": "Aktuelle Aufnahme wurde beendet"
+            "terminated": "Aktuelle Aufnahme wurde beendet",
+            "environment_reset": "Browser-Umgebung wurde zurückgesetzt",
+            "reset_successful": "Alle Aufnahmen erfolgreich zurückgesetzt und zum Ausgangszustand zurückgekehrt"
         }
     },
     "interpretation_log": {

public/locales/en.json

@@ -161,8 +161,10 @@
         "confirm_capture": "Confirm Capture",
         "confirm_pagination": "Confirm",
         "confirm_limit": "Confirm",
+        "confirm_reset": "Confirm",
         "finish_capture": "Finish Capture",
         "back": "Back",
+        "reset": "Restart Recording",
         "finish": "Finish",
         "cancel": "Cancel",
         "delete": "Delete"
@@ -227,10 +229,14 @@
     },
     "browser_recording": {
       "modal": {
-          "confirm_discard": "Are you sure you want to discard the recording?"
+          "confirm_discard": "Are you sure you want to discard the recording?",
+          "confirm_reset": "Are you sure you want to restart the recording?",
+          "reset_warning": "This will clear all previous captures in the current session. The recording session will restart for the same website."
       },
       "notifications": {
-          "terminated": "Current Recording was terminated"
+          "terminated": "Current Recording was terminated",
+          "environment_reset": "Browser environment has been reset",
+          "reset_successful": "Successfully reset all captures and returned to initial state"
       }
     },
     "interpretation_log": {

public/locales/es.json

@@ -163,6 +163,7 @@
       "confirm_limit": "Confirmar",
       "finish_capture": "Finalizar Captura",
       "back": "Atrás",
+      "reset": "Reiniciar",
       "finish": "Finalizar",
       "cancel": "Cancelar",
       "delete": "Eliminar"
@@ -227,10 +228,14 @@
   },
   "browser_recording": {
     "modal": {
-      "confirm_discard": "¿Está seguro de que desea descartar la grabación?"
+      "confirm_discard": "¿Está seguro de que desea descartar la grabación?",
+      "confirm_reset": "¿Está seguro de que desea reiniciar?",
+      "reset_warning": "Esto borrará todas las capturas anteriores de la sesión actual. La sesión de grabación se reiniciará para el mismo sitio web."
     },
     "notifications": {
-      "terminated": "La grabación actual fue terminada"
+      "terminated": "La grabación actual fue terminada",
+      "environment_reset": "El entorno del navegador ha sido reiniciado",
+      "reset_successful": "Se reiniciaron correctamente todas las capturas y se volvió al estado inicial"
     }
   },
   "interpretation_log": {

public/locales/ja.json

@@ -163,6 +163,7 @@
             "confirm_limit": "確認",
             "finish_capture": "取得を完了",
             "back": "戻る",
+            "reset": "リセット",
             "finish": "完了",
             "cancel": "キャンセル",
             "delete": "削除"
@@ -227,10 +228,14 @@
     },
     "browser_recording": {
         "modal": {
-            "confirm_discard": "録画を破棄してもよろしいですか？"
+            "confirm_discard": "録画を破棄してもよろしいですか？",
+            "confirm_reset": "リセットしてもよろしいですか？",
+            "reset_warning": "これにより、現在のセッションの以前のキャプチャがすべてクリアされます。同じ Web サイトの記録セッションが再開されます。"
         },
         "notifications": {
-            "terminated": "現在の録画は終了しました"
+            "terminated": "現在の録画は終了しました",
+            "environment_reset": "ブラウザー環境がリセットされました",
+            "reset_successful": "すべてのキャプチャーを正常にリセットし、初期状態に戻りました"
         }
     },
     "interpretation_log": {

public/locales/zh.json

@@ -163,6 +163,7 @@
       "confirm_limit": "确认",
       "finish_capture": "完成捕获",
       "back": "返回",
+      "reset": "重置",
       "finish": "完成",
       "cancel": "取消",
       "delete": "删除"
@@ -227,10 +228,14 @@
   },
   "browser_recording": {
     "modal": {
-      "confirm_discard": "您确定要放弃录制吗？"
+      "confirm_discard": "您确定要放弃此录制吗？",
+      "confirm_reset": "您确定要重置吗？",
+      "reset_warning": "这将清除当前会话中的所有先前捕获。录制会话将针对同一网站重新启动。"
     },
     "notifications": {
-      "terminated": "当前录制已终止"
+      "terminated": "当前录制已终止",
+      "environment_reset": "浏览器环境已重置",
+      "reset_successful": "已成功重置所有捕获并返回初始状态"
     }
   },
   "interpretation_log": {

src/components/browser/BrowserRecordingSave.tsx

@@ -1,18 +1,44 @@
 import React, { useState } from 'react'
-import { Grid, Button, Box, Typography } from '@mui/material';
+import { Grid, Button, Box, Typography, IconButton, Menu, MenuItem, ListItemText } from '@mui/material';
 import { SaveRecording } from "../recorder/SaveRecording";
 import { useGlobalInfoStore } from '../../context/globalInfo';
+import { useActionContext } from '../../context/browserActions';
+import { useBrowserSteps } from '../../context/browserSteps';
 import { stopRecording } from "../../api/recording";
 import { useNavigate } from 'react-router-dom';
 import { GenericModal } from "../ui/GenericModal";
 import { useTranslation } from 'react-i18next';
+import { emptyWorkflow } from '../../shared/constants';
+import { useSocketStore } from '../../context/socket';
+import { MoreHoriz } from '@mui/icons-material';
 
 const BrowserRecordingSave = () => {
   const { t } = useTranslation();
-  const [openModal, setOpenModal] = useState<boolean>(false);
+  const [openDiscardModal, setOpenDiscardModal] = useState<boolean>(false);
-  const { recordingName, browserId, setBrowserId, notify } = useGlobalInfoStore();
+  const [openResetModal, setOpenResetModal] = useState<boolean>(false);
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const { recordingName, browserId, initialUrl, setRecordingUrl, setBrowserId, notify, setCurrentWorkflowActionsState, resetInterpretationLog } = useGlobalInfoStore();
   const navigate = useNavigate();
 
+  const { socket } = useSocketStore();
+
+  const { 
+    stopGetText, 
+    stopGetList, 
+    stopGetScreenshot,
+    stopPaginationMode,
+    stopLimitMode,
+    setCaptureStage,
+    updatePaginationType,
+    updateLimitType,
+    updateCustomLimit,
+    setShowLimitOptions,
+    setShowPaginationOptions,
+    setWorkflow,
+  } = useActionContext();
+
+  const { browserSteps, deleteBrowserStep } = useBrowserSteps();
+
   const goToMainMenu = async () => {
     if (browserId) {
       await stopRecording(browserId);
@@ -22,6 +48,58 @@ const BrowserRecordingSave = () => {
     navigate('/');
   };
 
+  const performReset = () => {
+    stopGetText();
+    stopGetList();
+    stopGetScreenshot();
+    stopPaginationMode();
+    stopLimitMode();
+    
+    setShowLimitOptions(false);
+    setShowPaginationOptions(false);
+    setCaptureStage('initial');
+
+    updatePaginationType('');
+    updateLimitType('');
+    updateCustomLimit('');
+
+    setCurrentWorkflowActionsState({
+      hasScrapeListAction: false,
+      hasScreenshotAction: false,
+      hasScrapeSchemaAction: false
+    });
+
+    setWorkflow(emptyWorkflow);
+
+    resetInterpretationLog();
+
+    // Clear all browser steps
+    browserSteps.forEach(step => {
+      deleteBrowserStep(step.id);
+    });
+    
+    if (socket) {
+      socket?.emit('new-recording');
+      socket.emit('input:url', initialUrl);
+      // Update the URL in the navbar to match
+      setRecordingUrl(initialUrl);
+    }
+
+    // Close the reset confirmation modal
+    setOpenResetModal(false);
+
+    // Notify user
+    notify('info', t('browser_recording.notifications.environment_reset'));
+  };
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+      setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
   return (
     <Grid container>
       <Grid item xs={12} md={3} lg={3}>
@@ -40,7 +118,7 @@ const BrowserRecordingSave = () => {
           height: "48px"
         }}>
           <Button
-            onClick={() => setOpenModal(true)}
+            onClick={() => setOpenDiscardModal(true)}
             variant="outlined"
             color="error"
             sx={{
@@ -53,15 +131,62 @@ const BrowserRecordingSave = () => {
           >
             {t('right_panel.buttons.discard')}
           </Button>
-          <GenericModal isOpen={openModal} onClose={() => setOpenModal(false)} modalStyle={modalStyle}>
+
+          {/* Reset Button */}
+          <IconButton
+            aria-label="options"
+            size="small"
+            onClick={handleClick}
+            style={{
+              color: 'whitesmoke',
+            }}
+          >
+            <MoreHoriz />
+          </IconButton>
+          <Menu
+            anchorEl={anchorEl}
+            open={Boolean(anchorEl)}
+            onClose={handleClose}
+          >
+            <MenuItem onClick={() => { setOpenResetModal(true); handleClose(); }}>
+              <ListItemText>{t('right_panel.buttons.reset')}</ListItemText>
+            </MenuItem>
+          </Menu>
+
+          <SaveRecording fileName={recordingName} />
+
+          {/* Discard Confirmation Modal */}
+          <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>
+
+          {/* Reset Confirmation Modal */}
+          <GenericModal isOpen={openResetModal} onClose={() => setOpenResetModal(false)} modalStyle={modalStyle}>
+            <Box p={2}>
+              <Typography variant="h6">{t('browser_recording.modal.confirm_reset')}</Typography>
+              <Typography variant="body2" sx={{ mt: 1, mb: 2 }}>
+                {t('browser_recording.modal.reset_warning')}
+              </Typography>
+              <Box display="flex" justifyContent="space-between" mt={2}>
+                <Button 
+                  onClick={performReset} 
+                  variant="contained" 
+                  color="primary"
+                >
+                  {t('right_panel.buttons.confirm_reset')}
+                </Button>
                 <Button
-                  onClick={() => setOpenModal(false)}
+                  onClick={() => setOpenResetModal(false)}
                   variant="outlined"
                   sx={{
                     color: '#ff00c3 !important',
@@ -73,12 +198,11 @@ const BrowserRecordingSave = () => {
               </Box>
             </Box>
           </GenericModal>
-          <SaveRecording fileName={recordingName} />
         </div>
       </Grid>
     </Grid>
   );
-}
+};
 
 export default BrowserRecordingSave;
 

src/components/recorder/RightSidePanel.tsx

@@ -45,13 +45,12 @@ interface RightSidePanelProps {
 }
 
 export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture }) => {
-  const [workflow, setWorkflow] = useState<WorkflowFile>(emptyWorkflow);
   const [textLabels, setTextLabels] = useState<{ [id: string]: string }>({});
   const [errors, setErrors] = useState<{ [id: string]: string }>({});
   const [confirmedTextSteps, setConfirmedTextSteps] = useState<{ [id: string]: boolean }>({});
   const [confirmedListTextFields, setConfirmedListTextFields] = useState<{ [listId: string]: { [fieldKey: string]: boolean } }>({});
-  const [showPaginationOptions, setShowPaginationOptions] = useState(false);
+  // const [showPaginationOptions, setShowPaginationOptions] = useState(false);
-  const [showLimitOptions, setShowLimitOptions] = useState(false);
+  // const [showLimitOptions, setShowLimitOptions] = useState(false);
   const [showCaptureList, setShowCaptureList] = useState(true);
   const [showCaptureScreenshot, setShowCaptureScreenshot] = useState(true);
   const [showCaptureText, setShowCaptureText] = useState(true);
@@ -61,7 +60,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
   const [isCaptureListConfirmed, setIsCaptureListConfirmed] = useState(false);
 
   const { lastAction, notify, currentWorkflowActionsState, setCurrentWorkflowActionsState, resetInterpretationLog } = useGlobalInfoStore();
-  const { getText, startGetText, stopGetText, getScreenshot, startGetScreenshot, stopGetScreenshot, getList, startGetList, stopGetList, startPaginationMode, stopPaginationMode, paginationType, updatePaginationType, limitType, customLimit, updateLimitType, updateCustomLimit, stopLimitMode, startLimitMode, captureStage, setCaptureStage } = useActionContext();
+  const { getText, startGetText, stopGetText, getScreenshot, startGetScreenshot, stopGetScreenshot, getList, startGetList, stopGetList, startPaginationMode, stopPaginationMode, paginationType, updatePaginationType, limitType, customLimit, updateLimitType, updateCustomLimit, stopLimitMode, startLimitMode, captureStage, setCaptureStage, showPaginationOptions, setShowPaginationOptions, showLimitOptions, setShowLimitOptions, workflow, setWorkflow } = useActionContext();
   const { browserSteps, updateBrowserTextStepLabel, deleteBrowserStep, addScreenshotStep, updateListTextFieldLabel, removeListTextField } = useBrowserSteps();
   const { id, socket } = useSocketStore();
   const { t } = useTranslation();
@@ -69,7 +68,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
   const workflowHandler = useCallback((data: WorkflowFile) => {
     setWorkflow(data);
     //setRecordingLength(data.workflow.length);
-  }, [workflow])
+  }, [])
 
   useEffect(() => {
     if (socket) {

src/components/robot/RecordingsTable.tsx

@@ -85,7 +85,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
     },
   ];
 
-  const { notify, setRecordings, browserId, setBrowserId, recordingUrl, setRecordingUrl, recordingName, setRecordingName, recordingId, setRecordingId } = useGlobalInfoStore();
+  const { notify, setRecordings, browserId, setBrowserId, setInitialUrl, recordingUrl, setRecordingUrl, recordingName, setRecordingName, recordingId, setRecordingId } = useGlobalInfoStore();
   const navigate = useNavigate();
 
   const handleChangePage = (event: unknown, newPage: number) => {
@@ -142,6 +142,11 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
     handleStartRecording();
   };
 
+  const setBrowserRecordingUrl = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInitialUrl(event.target.value);
+    setRecordingUrl(event.target.value);
+  }
+
   useEffect(() => {
     if (rows.length === 0) {
       fetchRecordings();
@@ -307,7 +312,7 @@ export const RecordingsTable = ({ handleEditRecording, handleRunRecording, handl
             variant="outlined"
             fullWidth
             value={recordingUrl}
-            onChange={(e: any) => setRecordingUrl(e.target.value)}
+            onChange={setBrowserRecordingUrl}
             style={{ marginBottom: '20px', marginTop: '20px' }}
           />
           <Button

src/context/browserActions.tsx

@@ -1,5 +1,7 @@
 import React, { createContext, useContext, useState, ReactNode } from 'react';
 import { useSocketStore } from './socket';
+import { WorkflowFile } from 'maxun-core';
+import { emptyWorkflow } from '../shared/constants';
 
 export type PaginationType = 'scrollDown' | 'scrollUp' | 'clickNext' | 'clickLoadMore' | 'none' | '';
 export type LimitType = '10' | '100' | 'custom' | '';
@@ -13,8 +15,14 @@ interface ActionContextProps {
     limitMode: boolean;
     paginationType: PaginationType;
     limitType: LimitType;
+    workflow: WorkflowFile;
     customLimit: string;
     captureStage: CaptureStage;
+    showPaginationOptions: boolean;
+    showLimitOptions: boolean;
+    setWorkflow: (workflow: WorkflowFile) => void;
+    setShowPaginationOptions: (show: boolean) => void;
+    setShowLimitOptions: (show: boolean) => void;
     setCaptureStage: (stage: CaptureStage) => void;
     startPaginationMode: () => void;
     startGetText: () => void;
@@ -34,6 +42,7 @@ interface ActionContextProps {
 const ActionContext = createContext<ActionContextProps | undefined>(undefined);
 
 export const ActionProvider = ({ children }: { children: ReactNode }) => {
+    const [workflow, setWorkflow] = useState<WorkflowFile>(emptyWorkflow);
     const [getText, setGetText] = useState<boolean>(false);
     const [getList, setGetList] = useState<boolean>(false);
     const [getScreenshot, setGetScreenshot] = useState<boolean>(false);
@@ -43,6 +52,8 @@ export const ActionProvider = ({ children }: { children: ReactNode }) => {
     const [limitType, setLimitType] = useState<LimitType>('');
     const [customLimit, setCustomLimit] = useState<string>('');
     const [captureStage, setCaptureStage] = useState<CaptureStage>('initial');
+    const [showPaginationOptions, setShowPaginationOptions] = useState(false);
+    const [showLimitOptions, setShowLimitOptions] = useState(false);
 
     const { socket } = useSocketStore();
 
@@ -94,8 +105,14 @@ export const ActionProvider = ({ children }: { children: ReactNode }) => {
             limitMode,
             paginationType,
             limitType,
+            workflow,
             customLimit,
             captureStage,
+            showPaginationOptions,
+            showLimitOptions,
+            setWorkflow,
+            setShowPaginationOptions,   
+            setShowLimitOptions,
             setCaptureStage,
             startGetText,
             stopGetText,

src/context/globalInfo.tsx

@@ -20,6 +20,8 @@ interface GlobalInfo {
   setRecordingId: (newId: string | null) => void;
   recordingName: string;
   setRecordingName: (recordingName: string) => void;
+  initialUrl: string;
+  setInitialUrl: (initialUrl: string) => void;
   recordingUrl: string;
   setRecordingUrl: (recordingUrl: string) => void;
   currentWorkflowActionsState: {
@@ -49,6 +51,7 @@ class GlobalInfoStore implements Partial<GlobalInfo> {
   recordings: string[] = [];
   rerenderRuns = false;
   recordingName = '';
+  initialUrl = 'https://';
   recordingUrl = 'https://';
   currentWorkflowActionsState = {
     hasScrapeListAction: false,
@@ -72,6 +75,7 @@ export const GlobalInfoProvider = ({ children }: { children: JSX.Element }) => {
   const [recordingLength, setRecordingLength] = useState<number>(globalInfoStore.recordingLength);
   const [recordingId, setRecordingId] = useState<string | null>(globalInfoStore.recordingId);
   const [recordingName, setRecordingName] = useState<string>(globalInfoStore.recordingName);
+  const [initialUrl, setInitialUrl] = useState<string>(globalInfoStore.initialUrl);
   const [recordingUrl, setRecordingUrl] = useState<string>(globalInfoStore.recordingUrl);
   const [currentWorkflowActionsState, setCurrentWorkflowActionsState] = useState(globalInfoStore.currentWorkflowActionsState);
   const [shouldResetInterpretationLog, setShouldResetInterpretationLog] = useState<boolean>(globalInfoStore.shouldResetInterpretationLog);
@@ -119,6 +123,8 @@ export const GlobalInfoProvider = ({ children }: { children: JSX.Element }) => {
         setRecordingId,
         recordingName,
         setRecordingName,
+        initialUrl,
+        setInitialUrl,
         recordingUrl,
         setRecordingUrl,
         currentWorkflowActionsState,