Merge pull request #773 from getmaxun/accord-fix

fix: accordion collapses on run completion

public/locales/de.json

@@ -90,6 +90,7 @@
         "runs": "Alle Ausführungen",
         "runStatus": "Status",
         "runName": "Name",
+        "name": "Name",
         "startedAt": "Gestartet am",
         "finishedAt": "Beendet am",
         "delete": "Löschen",

public/locales/en.json

@@ -90,6 +90,7 @@
       "runs":"All Runs",
       "runStatus":"Status",
       "runName":"Name",
+      "name":"Name",
       "startedAt":"Started At",
       "finishedAt":"Finished At",
       "delete":"Delete",

public/locales/es.json

@@ -90,6 +90,7 @@
     "runs": "Todas las ejecuciones",
     "runStatus": "Estado",
     "runName": "Nombre",
+    "name": "Nombre",
     "startedAt": "Iniciado el",
     "finishedAt": "Finalizado el",
     "delete": "Eliminar",

public/locales/ja.json

@@ -90,6 +90,7 @@
         "runs": "すべての実行",
         "runStatus": "ステータス",
         "runName": "名前",
+        "name": "名前",
         "startedAt": "開始日時",
         "finishedAt": "終了日時",
         "delete": "削除",

public/locales/tr.json

@@ -90,6 +90,7 @@
     "runs": "Tüm Çalıştırmalar",
     "runStatus": "Durum",
     "runName": "Ad",
+    "name": "Ad",
     "startedAt": "Başlama",
     "finishedAt": "Bitiş",
     "delete": "Sil",

public/locales/zh.json

@@ -90,6 +90,7 @@
     "runs": "所有运行记录",
     "runStatus": "状态",
     "runName": "名称",
+    "name": "名称",
     "startedAt": "开始时间",
     "finishedAt": "结束时间",
     "delete": "删除",

src/components/robot/RecordingsTable.tsx

@@ -21,6 +21,7 @@ import {
   Menu,
   ListItemIcon,
   ListItemText,
+  CircularProgress,
   FormControlLabel,
   Checkbox,
   CircularProgress,
@@ -155,7 +156,7 @@ export const RecordingsTable = ({
   const [searchTerm, setSearchTerm] = React.useState('');
   const [isWarningModalOpen, setWarningModalOpen] = React.useState(false);
   const [activeBrowserId, setActiveBrowserId] = React.useState('');
-  const [isLoading, setIsLoading] = React.useState(true);
+  const [isFetching, setIsFetching] = React.useState(true);
 
   const columns = useMemo(() => [
     { id: 'interpret', label: t('recordingtable.run'), minWidth: 80 },
@@ -273,7 +274,7 @@ export const RecordingsTable = ({
       console.error('Error fetching recordings:', error);
       notify('error', t('recordingtable.notifications.fetch_error'));
     } finally {
-      setIsLoading(false);
+      setIsFetching(false);
     }
   }, [setRecordings, notify, t]);
 
@@ -515,8 +516,8 @@ export const RecordingsTable = ({
           </IconButton>
         </Box>
       </Box>
-
+      
-      {isLoading ? (
+      {isFetching ? (
         <Box
           display="flex"
           justifyContent="center"

src/components/run/ColapsibleRow.tsx

@@ -11,7 +11,6 @@ import { GenericModal } from "../ui/GenericModal";
 import { modalStyle } from "../recorder/AddWhereCondModal";
 import { getUserById } from "../../api/auth";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
 
 interface RunTypeChipProps {
   runByUserId?: string;
@@ -22,9 +21,9 @@ interface RunTypeChipProps {
 const RunTypeChip: React.FC<RunTypeChipProps> = ({ runByUserId, runByScheduledId, runByAPI }) => {
   const { t } = useTranslation();
 
-  if (runByUserId) return <Chip label={t('runs_table.run_type_chips.manual_run')} color="primary" variant="outlined" />;
   if (runByScheduledId) return <Chip label={t('runs_table.run_type_chips.scheduled_run')} color="primary" variant="outlined" />;
   if (runByAPI) return <Chip label={t('runs_table.run_type_chips.api')} color="primary" variant="outlined" />;
+  if (runByUserId) return <Chip label={t('runs_table.run_type_chips.manual_run')} color="primary" variant="outlined" />;
   return <Chip label={t('runs_table.run_type_chips.unknown_run_type')} color="primary" variant="outlined" />;
 };
 
@@ -32,21 +31,20 @@ interface CollapsibleRowProps {
   row: Data;
   handleDelete: () => void;
   isOpen: boolean;
+  onToggleExpanded: (shouldExpand: boolean) => void;
   currentLog: string;
   abortRunHandler: (runId: string, robotName: string, browserId: string) => void;
   runningRecordingName: string;
   urlRunId: string | null;
 }
-export const CollapsibleRow = ({ row, handleDelete, isOpen, currentLog, abortRunHandler, runningRecordingName, urlRunId }: CollapsibleRowProps) => {
+export const CollapsibleRow = ({ row, handleDelete, isOpen, onToggleExpanded, currentLog, abortRunHandler, runningRecordingName, urlRunId }: CollapsibleRowProps) => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
-  const [open, setOpen] = useState(isOpen);
   const [openSettingsModal, setOpenSettingsModal] = useState(false);
   const [userEmail, setUserEmail] = useState<string | null>(null);
-  const runByLabel = row.runByUserId
+  const runByLabel = row.runByScheduleId
-    ? `${userEmail}`
+    ?  `${row.runByScheduleId}` 
-    : row.runByScheduleId
+    : row.runByUserId
-      ? `${row.runByScheduleId}`
+      ? `${userEmail}`
       : row.runByAPI
         ? 'API'
         : 'Unknown';
@@ -63,18 +61,9 @@ export const CollapsibleRow = ({ row, handleDelete, isOpen, currentLog, abortRun
     abortRunHandler(row.runId, row.name, row.browserId);
   }
 
-  useEffect(() => {
-    setOpen(urlRunId === row.runId || isOpen);
-  }, [urlRunId, row.runId, isOpen]);
-
   const handleRowExpand = () => {
-    const newOpen = !open;
+    const newOpen = !isOpen;
-    setOpen(newOpen);
+    onToggleExpanded(newOpen);
-    navigate(
-      newOpen 
-        ? `/runs/${row.robotMetaId}/run/${row.runId}`
-        : `/runs/${row.robotMetaId}`
-    );
     //scrollToLogBottom();
   };
   
@@ -103,7 +92,7 @@ export const CollapsibleRow = ({ row, handleDelete, isOpen, currentLog, abortRun
             size="small"
             onClick={handleRowExpand}
           >
-            {open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
+            {isOpen ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
           </IconButton>
         </TableCell>
         {columns.map((column) => {
@@ -165,10 +154,10 @@ export const CollapsibleRow = ({ row, handleDelete, isOpen, currentLog, abortRun
                           />
                           <TextField
                             label={
-                              row.runByUserId
+                              row.runByScheduleId
-                                ? t('runs_table.run_settings_modal.labels.run_by_user')
+                                ? t('runs_table.run_settings_modal.labels.run_by_schedule') 
-                                : row.runByScheduleId
+                                : row.runByUserId
-                                  ? t('runs_table.run_settings_modal.labels.run_by_schedule')
+                                  ? t('runs_table.run_settings_modal.labels.run_by_user')
                                   : t('runs_table.run_settings_modal.labels.run_by_api')
                             }
                             value={runByLabel}
@@ -197,7 +186,7 @@ export const CollapsibleRow = ({ row, handleDelete, isOpen, currentLog, abortRun
       </TableRow>
       <TableRow>
         <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
-          <Collapse in={open} timeout="auto" unmountOnExit>
+          <Collapse in={isOpen} timeout="auto" unmountOnExit>
             <RunContent row={row} abortRunHandler={handleAbort} currentLog={currentLog}
               logEndRef={logEndRef} interpretationInProgress={runningRecordingName === row.name} />
           </Collapse>

src/components/run/RunsTable.tsx

@@ -134,16 +134,83 @@ export const RunsTable: React.FC<RunsTableProps> = ({
 
   const [rows, setRows] = useState<Data[]>([]);
   const [searchTerm, setSearchTerm] = useState('');
-  const [isLoading, setIsLoading] = useState(true);
+  const [isFetching, setIsFetching] = useState(true);
 
   const [paginationStates, setPaginationStates] = useState<PaginationState>({});
+  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
+  const [expandedAccordions, setExpandedAccordions] = useState<Set<string>>(new Set());
 
   const { notify, rerenderRuns, setRerenderRuns } = useGlobalInfoStore();
 
   const handleAccordionChange = useCallback((robotMetaId: string, isExpanded: boolean) => {
+    setExpandedAccordions(prev => {
+      const newSet = new Set(prev);
+      if (isExpanded) {
+        newSet.add(robotMetaId);
+      } else {
+        newSet.delete(robotMetaId);
+      }
+      return newSet;
+    });
+    
     navigate(isExpanded ? `/runs/${robotMetaId}` : '/runs');
   }, [navigate]);
 
+  const handleRowExpand = useCallback((runId: string, robotMetaId: string, shouldExpand: boolean) => {
+    setExpandedRows(prev => {
+      const newSet = new Set(prev);
+      if (shouldExpand) {
+        newSet.add(runId);
+      } else {
+        newSet.delete(runId);
+      }
+      return newSet;
+    });
+    
+    // Update URL navigation
+    navigate(
+      shouldExpand 
+        ? `/runs/${robotMetaId}/run/${runId}`
+        : `/runs/${robotMetaId}`
+    );
+  }, [navigate]);
+
+  // Sync expandedRows and expandedAccordions with URL params
+  useEffect(() => {
+    if (urlRunId) {
+      setExpandedRows(prev => {
+        const newSet = new Set(prev);
+        newSet.add(urlRunId);
+        return newSet;
+      });
+    }
+    
+    if (urlRobotMetaId) {
+      setExpandedAccordions(prev => {
+        const newSet = new Set(prev);
+        newSet.add(urlRobotMetaId);
+        return newSet;
+      });
+    }
+  }, [urlRunId, urlRobotMetaId]);
+
+  // Auto-expand currently running robot (but allow manual collapse)
+  useEffect(() => {
+    if (runId && runningRecordingName) {
+      const currentRunningRow = rows.find(row => 
+        row.runId === runId && row.name === runningRecordingName
+      );
+      
+      if (currentRunningRow) {
+        setExpandedRows(prev => {
+          const newSet = new Set(prev);
+          newSet.add(currentRunningRow.runId);
+          return newSet;
+        });
+      }
+    }
+  }, [runId, runningRecordingName, rows]);
+
   const handleAccordionPageChange = useCallback((event: unknown, newPage: number) => {
     setAccordionPage(newPage);
   }, []);
@@ -226,7 +293,7 @@ export const RunsTable: React.FC<RunsTableProps> = ({
     } catch (error) {
       notify('error', t('runstable.notifications.fetch_error'));
     } finally {
-      setIsLoading(false);
+      setIsFetching(false);
     }
   }, [notify, t]);
 
@@ -234,7 +301,7 @@ export const RunsTable: React.FC<RunsTableProps> = ({
     let mounted = true;
 
     if (rows.length === 0 || rerenderRuns) {
-      setIsLoading(true);
+      setIsFetching(true);
       fetchRuns().then(() => {
         if (mounted) {
           setRerenderRuns(false);
@@ -330,14 +397,15 @@ export const RunsTable: React.FC<RunsTableProps> = ({
           key={`row-${row.id}`}
           row={row}
           handleDelete={handleDelete}
-          isOpen={urlRunId === row.runId || (runId === row.runId && runningRecordingName === row.name)}
+          isOpen={expandedRows.has(row.runId)}
+          onToggleExpanded={(shouldExpand) => handleRowExpand(row.runId, row.robotMetaId, shouldExpand)}
           currentLog={currentInterpretationLog}
           abortRunHandler={abortRunHandler}
           runningRecordingName={runningRecordingName}
           urlRunId={urlRunId}
         />
       ));
-  }, [paginationStates, runId, runningRecordingName, currentInterpretationLog, abortRunHandler, handleDelete, accordionSortConfigs]);
+  }, [getPaginationState, accordionSortConfigs, expandedRows, handleRowExpand, handleDelete, currentInterpretationLog, abortRunHandler, runningRecordingName, urlRunId]);
 
   const renderSortIcon = useCallback((column: Column, robotMetaId: string) => {
     const sortConfig = accordionSortConfigs[robotMetaId];
@@ -382,7 +450,7 @@ export const RunsTable: React.FC<RunsTableProps> = ({
         />
       </Box>
 
-      {isLoading? (
+      {isFetching ? (
         <Box
           display="flex"
           justifyContent="center"
@@ -426,12 +494,13 @@ export const RunsTable: React.FC<RunsTableProps> = ({
               )
               .map(([robotMetaId, data]) => (
                 <Accordion 
-                  key={robotMetaId} 
+                  key={robotMetaId}
+                  expanded={expandedAccordions.has(robotMetaId)}
                   onChange={(event, isExpanded) => handleAccordionChange(robotMetaId, isExpanded)}
                   TransitionProps={{ unmountOnExit: true }} // Optimize accordion rendering
                 >
                   <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-                    <Typography variant="h6">{data[0].name}</Typography>
+                    <Typography variant="h6">{data[data.length - 1].name}</Typography>
                   </AccordionSummary>
                   <AccordionDetails>
                     <Table stickyHeader aria-label="sticky table">