Merge branch 'develop' into integration_airtable

src/components/robot/RecordingsTable.tsx

@@ -148,7 +148,6 @@ export const RecordingsTable = ({
   const [rows, setRows] = React.useState<Data[]>([]);
   const [isModalOpen, setModalOpen] = React.useState(false);
   const [searchTerm, setSearchTerm] = React.useState('');
-  const [isLoading, setIsLoading] = React.useState(true);
 
   const columns = useMemo(() => [
     { id: 'interpret', label: t('recordingtable.run'), minWidth: 80 },
@@ -169,6 +168,8 @@ export const RecordingsTable = ({
     setRecordingUrl,
     isLogin,
     setIsLogin,
+    rerenderRobots,
+    setRerenderRobots,
     recordingName,
     setRecordingName,
     recordingId,
@@ -189,32 +190,45 @@ export const RecordingsTable = ({
     setPage(0);
   }, []);
 
+  const parseDateString = (dateStr: string): Date => {
+    try {
+      if (dateStr.includes('PM') || dateStr.includes('AM')) {
+        return new Date(dateStr);
+      }
+      
+      return new Date(dateStr.replace(/(\d+)\/(\d+)\//, '$2/$1/'))
+    } catch {
+      return new Date(0);
+    }
+  };
+
   const fetchRecordings = useCallback(async () => {
-    setIsLoading(true);
     try {
       const recordings = await getStoredRecordings();
       if (recordings) {
         const parsedRows = recordings
-          .map((recording: any, index: number) => {
-            if (recording?.recording_meta) {
-              return {
-                id: index,
-                ...recording.recording_meta,
-                content: recording.recording
-              };
-            }
-            return null;
-          })
-          .filter(Boolean);
-
+        .map((recording: any, index: number) => {
+          if (recording?.recording_meta) {
+            const parsedDate = parseDateString(recording.recording_meta.createdAt);
+            
+            return {
+              id: index,
+              ...recording.recording_meta,
+              content: recording.recording,
+              parsedDate
+            };
+          }
+          return null;
+        })
+        .filter(Boolean) 
+        .sort((a, b) => b.parsedDate.getTime() - a.parsedDate.getTime());
+  
         setRecordings(parsedRows.map((recording) => recording.name));
         setRows(parsedRows);
       }
     } catch (error) {
       console.error('Error fetching recordings:', error);
       notify('error', t('recordingtable.notifications.fetch_error'));
-    } finally {
-      setIsLoading(false);
     }
   }, [setRecordings, notify, t]);
 
@@ -249,6 +263,14 @@ export const RecordingsTable = ({
     }
   }, [fetchRecordings]);
 
+  useEffect(() => {
+    if (rerenderRobots) {
+      fetchRecordings().then(() => {
+        setRerenderRobots(false);
+      });
+    }
+  }, [rerenderRobots, fetchRecordings, setRerenderRobots]);
+
   function useDebounce<T>(value: T, delay: number): T {
     const [debouncedValue, setDebouncedValue] = React.useState<T>(value);
   
@@ -343,39 +365,32 @@ export const RecordingsTable = ({
           </IconButton>
         </Box>
       </Box>
-      {isLoading ? (
-        <Box display="flex" justifyContent="center" alignItems="center" height="50%">
-          <CircularProgress />
-        </Box>
-      ) : (
-        <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden', marginTop: '15px' }}>
-          <Table stickyHeader aria-label="sticky table">
-            <TableHead>
-              <TableRow>
-                {columns.map((column) => (
-                  <MemoizedTableCell
-                    key={column.id}
-                    // align={column.align}
-                    style={{ minWidth: column.minWidth }}
-                  >
-                    {column.label}
-                  </MemoizedTableCell>
-                ))}
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {visibleRows.map((row) => (
-                <TableRowMemoized
-                  key={row.id}
-                  row={row}
-                  columns={columns}
-                  handlers={handlers}
-                />
+      <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden', marginTop: '15px' }}>
+        <Table stickyHeader aria-label="sticky table">
+          <TableHead>
+            <TableRow>
+              {columns.map((column) => (
+                <MemoizedTableCell
+                  key={column.id}
+                  style={{ minWidth: column.minWidth }}
+                >
+                  {column.label}
+                </MemoizedTableCell>
               ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      )}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {visibleRows.map((row) => (
+              <TableRowMemoized
+                key={row.id}
+                row={row}
+                columns={columns}
+                handlers={handlers}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
 
       <TablePagination
         rowsPerPageOptions={[10, 25, 50, 100]}

src/components/robot/RobotDuplicate.tsx

@@ -55,9 +55,9 @@ interface RobotSettingsProps {
 
 export const RobotDuplicationModal = ({ isOpen, handleStart, handleClose, initialSettings }: RobotSettingsProps) => {
     const { t } = useTranslation();
-    const [robot, setRobot] = useState<RobotSettings | null>(null);
     const [targetUrl, setTargetUrl] = useState<string | undefined>('');
-    const { recordingId, notify } = useGlobalInfoStore();
+    const [robot, setRobot] = useState<RobotSettings | null>(null);
+    const { recordingId, notify, setRerenderRobots } = useGlobalInfoStore();
 
     useEffect(() => {
         if (isOpen) {
@@ -96,13 +96,11 @@ export const RobotDuplicationModal = ({ isOpen, handleStart, handleClose, initia
             const success = await duplicateRecording(robot.recording_meta.id, targetUrl);
 
             if (success) {
+                setRerenderRobots(true);
+
                 notify('success', t('robot_duplication.notifications.duplicate_success'));
                 handleStart(robot);
                 handleClose();
-
-                setTimeout(() => {
-                    window.location.reload();
-                }, 1000);
             } else {
                 notify('error', t('robot_duplication.notifications.duplicate_error'));
             }

src/components/robot/RobotEdit.tsx

@@ -7,6 +7,7 @@ import { modalStyle } from "../recorder/AddWhereCondModal";
 import { useGlobalInfoStore } from '../../context/globalInfo';
 import { getStoredRecording, updateRecording } from '../../api/storage';
 import { WhereWhatPair } from 'maxun-core';
+import { useNavigate } from 'react-router-dom';
 
 interface RobotMeta {
     name: string;
@@ -75,9 +76,9 @@ interface GroupedCredentials {
 
 export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettings }: RobotSettingsProps) => {
     const { t } = useTranslation();
-    const [robot, setRobot] = useState<RobotSettings | null>(null);
     const [credentials, setCredentials] = useState<Credentials>({});
-    const { recordingId, notify } = useGlobalInfoStore();
+    const { recordingId, notify, setRerenderRobots } = useGlobalInfoStore();
+    const [robot, setRobot] = useState<RobotSettings | null>(null);
     const [credentialGroups, setCredentialGroups] = useState<GroupedCredentials>({
         passwords: [],
         emails: [],
@@ -123,81 +124,113 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
         }
     }, [robot]);
 
-    const extractInitialCredentials = (workflow: any[]): Credentials => {
+    function extractInitialCredentials(workflow: any[]): Credentials {
         const credentials: Credentials = {};
-
-        // Helper function to check if a character is printable
+    
         const isPrintableCharacter = (char: string): boolean => {
             return char.length === 1 && !!char.match(/^[\x20-\x7E]$/);
         };
-
-        // Process each step in the workflow
+    
         workflow.forEach(step => {
             if (!step.what) return;
-
-            // Keep track of the current input field being processed
+    
             let currentSelector = '';
             let currentValue = '';
             let currentType = '';
-
-            // Process actions in sequence to maintain correct text state
-            step.what.forEach((action: any) => {
-                if (
-                    (action.action === 'type' || action.action === 'press') &&
-                    action.args?.length >= 2 &&
-                    typeof action.args[1] === 'string'
-                ) {
-                    const selector: string = action.args[0];
-                    const character: string = action.args[1];
-                    const inputType: string = action.args[2] || '';
-
-                    // Detect `input[type="password"]`
-                    if (!currentType && inputType.toLowerCase() === 'password') {
-                        currentType = 'password';
+            let i = 0;
+    
+            while (i < step.what.length) {
+                const action = step.what[i];
+    
+                if (!action.action || !action.args?.[0]) {
+                    i++;
+                    continue;
+                }
+    
+                const selector = action.args[0];
+    
+                // Handle full word type actions first
+                if (action.action === 'type' && 
+                    action.args?.length >= 2 && 
+                    typeof action.args[1] === 'string' &&
+                    action.args[1].length > 1) {  
+                    
+                    if (!credentials[selector]) {
+                        credentials[selector] = {
+                            value: action.args[1],
+                            type: action.args[2] || 'text'
+                        };
                     }
-
-                    // If we're dealing with a new selector, store the previous one
-                    if (currentSelector && selector !== currentSelector) {
-                        if (!credentials[currentSelector]) {
+                    i++;
+                    continue;
+                }
+    
+                // Handle character-by-character sequences (both type and press)
+                if ((action.action === 'type' || action.action === 'press') &&
+                    action.args?.length >= 2 &&
+                    typeof action.args[1] === 'string') {
+    
+                    if (selector !== currentSelector) {
+                        if (currentSelector && currentValue) {
                             credentials[currentSelector] = {
                                 value: currentValue,
-                                type: currentType
+                                type: currentType || 'text'
                             };
-                        } else {
-                            credentials[currentSelector].value = currentValue;
                         }
-                    }
-
-                    // Update current tracking variables
-                    if (selector !== currentSelector) {
                         currentSelector = selector;
                         currentValue = credentials[selector]?.value || '';
-                        currentType = inputType || credentials[selector]?.type || '';
+                        currentType = action.args[2] || credentials[selector]?.type || 'text';
                     }
-
-                    // Handle different types of key actions
-                    if (character === 'Backspace') {
-                        // Remove the last character when backspace is pressed
-                        currentValue = currentValue.slice(0, -1);
-                    } else if (isPrintableCharacter(character)) {
-                        // Add the character to the current value
+    
+                    const character = action.args[1];
+    
+                    if (isPrintableCharacter(character)) {
                         currentValue += character;
+                    } else if (character === 'Backspace') {
+                        currentValue = currentValue.slice(0, -1);
                     }
-                    // Note: We ignore other special keys like 'Shift', 'Enter', etc.
+    
+                    if (!currentType && action.args[2]?.toLowerCase() === 'password') {
+                        currentType = 'password';
+                    }
+    
+                    let j = i + 1;
+                    while (j < step.what.length) {
+                        const nextAction = step.what[j];
+                        if (!nextAction.action || !nextAction.args?.[0] || 
+                            nextAction.args[0] !== selector ||
+                            (nextAction.action !== 'type' && nextAction.action !== 'press')) {
+                            break;
+                        }
+                        if (nextAction.args[1] === 'Backspace') {
+                            currentValue = currentValue.slice(0, -1);
+                        } else if (isPrintableCharacter(nextAction.args[1])) {
+                            currentValue += nextAction.args[1];
+                        }
+                        j++;
+                    }
+    
+                    credentials[currentSelector] = {
+                        value: currentValue,
+                        type: currentType
+                    };
+    
+                    i = j; 
+                } else {
+                    i++;
                 }
-            });
-
-            // Store the final state of the last processed selector
-            if (currentSelector) {
+            }
+    
+            if (currentSelector && currentValue) {
                 credentials[currentSelector] = {
                     value: currentValue,
-                    type: currentType
+                    type: currentType || 'text'
                 };
             }
         });
-
+    
         return credentials;
-    };
+    }
 
     const groupCredentialsByType = (credentials: Credentials): GroupedCredentials => {
         return Object.entries(credentials).reduce((acc: GroupedCredentials, [selector, info]) => {
@@ -366,13 +399,11 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
             const success = await updateRecording(robot.recording_meta.id, payload);
 
             if (success) {
+                setRerenderRobots(true);
+
                 notify('success', t('robot_edit.notifications.update_success'));
                 handleStart(robot);
                 handleClose();
-
-                setTimeout(() => {
-                    window.location.reload();
-                }, 1000);
             } else {
                 notify('error', t('robot_edit.notifications.update_failed'));
             }

src/components/robot/RobotSettings.tsx

@@ -54,8 +54,8 @@ interface RobotSettingsProps {
 
 export const RobotSettingsModal = ({ isOpen, handleStart, handleClose, initialSettings }: RobotSettingsProps) => {
     const { t } = useTranslation();
-    const [robot, setRobot] = useState<RobotSettings | null>(null);
     const [userEmail, setUserEmail] = useState<string | null>(null);
+    const [robot, setRobot] = useState<RobotSettings | null>(null);
     const { recordingId, notify } = useGlobalInfoStore();
 
     useEffect(() => {