Use API order instead of reordering timeline (#1503)

Skyvern-AI · Jan 6, 2025 · 2e9bcc3 · 2e9bcc3
1 parent 45cfa58
commit 2e9bcc3
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 9 deletions.
diff --git a/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunTimeline.tsx b/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunTimeline.tsx
@@ -56,8 +56,6 @@ function WorkflowRunTimeline({
 
   const workflowRunIsNotFinalized = statusIsNotFinalized(workflowRun);
 
-  const timeline = workflowRunTimeline.slice().reverse();
-
   const numberOfActions = workflowRunTimeline.reduce((total, current) => {
     if (isTaskVariantBlockItem(current)) {
       return total + current.block!.actions!.length;
@@ -98,8 +96,10 @@ function WorkflowRunTimeline({
                 </div>
               </div>
             )}
-            {timeline.length === 0 && <div>Workflow timeline is empty</div>}
-            {timeline?.map((timelineItem) => {
+            {workflowRunTimeline.length === 0 && (
+              <div>Workflow timeline is empty</div>
+            )}
+            {workflowRunTimeline?.map((timelineItem) => {
               if (isBlockItem(timelineItem)) {
                 return (
                   <WorkflowRunTimelineBlockItem

diff --git a/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunTimelineBlockItem.tsx b/skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunTimelineBlockItem.tsx
@@ -31,7 +31,7 @@ function WorkflowRunTimelineBlockItem({
   onBlockItemClick,
   onActionClick,
 }: Props) {
-  const actions = block.actions ? [...block.actions].reverse() : [];
+  const actions = block.actions ?? [];
 
   const hasActiveAction =
     isAction(activeItem) &&

diff --git a/skyvern-frontend/src/routes/workflows/workflowRun/workflowTimelineUtils.ts b/skyvern-frontend/src/routes/workflows/workflowRun/workflowTimelineUtils.ts
@@ -37,15 +37,13 @@ function findActiveItem(
       return "stream";
     }
     if (timeline?.length > 0) {
-      const last = timeline.length - 1;
-      const timelineItem = timeline![last];
+      const timelineItem = timeline![0];
       if (isBlockItem(timelineItem)) {
         if (
           timelineItem.block.actions &&
           timelineItem.block.actions.length > 0
         ) {
-          const last = timelineItem.block.actions.length - 1;
-          return timelineItem.block.actions[last]!;
+          return timelineItem.block.actions[0]!;
         }
         return timelineItem.block;
       }