Merge pull request #314 from getmaxun/reset-browser

feat: reset remote browser recording state
2025-01-13 13:57:47 +05:30
parent 20dc98765e 3cdc331530
commit 30a9e4bde0
10 changed files with 203 additions and 26 deletions
--- a/public/locales/de.json
+++ b/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": {
--- a/public/locales/en.json
+++ b/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": {
--- a/public/locales/es.json
+++ b/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": {
--- a/public/locales/ja.json
+++ b/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": {
--- a/public/locales/zh.json
+++ b/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": {
--- a/src/components/browser/BrowserRecordingSave.tsx
+++ b/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 { recordingName, browserId, setBrowserId, notify } = useGlobalInfoStore();
+  const [openDiscardModal, setOpenDiscardModal] = useState<boolean>(false);
+  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;

--- a/src/components/recorder/RightSidePanel.tsx
+++ b/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 [showLimitOptions, setShowLimitOptions] = useState(false);
+  // const [showPaginationOptions, setShowPaginationOptions] = 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) {
--- a/src/components/robot/RecordingsTable.tsx
+++ b/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
--- a/src/context/browserActions.tsx
+++ b/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,
--- a/src/context/globalInfo.tsx
+++ b/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,