vodorod/Dorod-Sky
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix workflow history panel scroll in debug mode (#4532)

Browse Source
This commit is contained in:
Celal Zamanoglu
2026-01-23 19:29:06 +03:00
committed by GitHub
parent 92b3693174
commit ab58527684
2 changed files with 67 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
skyvern-frontend/src/routes/workflows/editor/Workspace.tsx
View File

@@ -1412,10 +1412,12 @@ function Workspace({
<WorkflowParametersPanel /> <WorkflowParametersPanel />
)} )}
{workflowPanelState.content === "history" && ( {workflowPanelState.content === "history" && (
<WorkflowHistoryPanel <div className="h-[calc(100vh-14rem)]">
workflowPermanentId={workflowPermanentId!} <WorkflowHistoryPanel
onCompare={handleCompareVersions} workflowPermanentId={workflowPermanentId!}
/> onCompare={handleCompareVersions}
/>
</div>
)} )}
</div> </div>
)} )}

120
skyvern-frontend/src/routes/workflows/editor/panels/WorkflowHistoryPanel.tsx
View File

@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { ScrollArea } from "@/components/ui/scroll-area"; import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import { basicLocalTimeFormat } from "@/util/timeFormat"; import { basicLocalTimeFormat } from "@/util/timeFormat";
import { import {
@@ -90,7 +90,7 @@ function WorkflowHistoryPanel({ workflowPermanentId, onCompare }: Props) {
const canCompare = selectedVersions.size === 2; const canCompare = selectedVersions.size === 2;
return ( return (
<div className="flex h-full w-[25rem] flex-col rounded-lg bg-slate-elevation2"> <div className="flex h-full w-[25rem] flex-col overflow-hidden rounded-lg bg-slate-elevation2">
{/* Header */} {/* Header */}
<div className="flex-shrink-0 p-4 pb-3"> <div className="flex-shrink-0 p-4 pb-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@@ -129,67 +129,69 @@ function WorkflowHistoryPanel({ workflowPermanentId, onCompare }: Props) {
<Separator /> <Separator />
{/* Version List */} {/* Version List */}
<ScrollArea className="flex-1"> <ScrollArea className="min-h-0 flex-1">
<div className="p-4"> <ScrollAreaViewport className="h-full">
{isLoading ? ( <div className="p-4">
<div className="space-y-3"> {isLoading ? (
{Array.from({ length: 5 }).map((_, i) => ( <div className="space-y-3">
<div {Array.from({ length: 5 }).map((_, i) => (
key={i}
className="flex items-center space-x-3 rounded-lg border p-3"
>
<Skeleton className="h-4 w-4" />
<div className="flex-1 space-y-2">
<Skeleton className="h-4 w-20" />
<Skeleton className="h-3 w-32" />
</div>
</div>
))}
</div>
) : sortedVersions.length === 0 ? (
<div className="py-8 text-center text-muted-foreground">
No version history found
</div>
) : (
<div className="space-y-2">
{sortedVersions.map((workflow, index) => {
const isSelected = selectedVersions.has(workflow.version);
const isCurrent = index === 0;
return (
<div <div
key={workflow.version} key={i}
className={`flex cursor-pointer items-center space-x-3 rounded-lg border p-3 transition-colors ${ className="flex items-center space-x-3 rounded-lg border p-3"
isSelected
? "border-primary/20 bg-primary/5"
: "hover:bg-muted/50"
}`}
onClick={() => handleVersionToggle(workflow.version)}
> >
<Checkbox <Skeleton className="h-4 w-4" />
checked={isSelected} <div className="flex-1 space-y-2">
onChange={() => {}} // Handled by parent click <Skeleton className="h-4 w-20" />
/> <Skeleton className="h-3 w-32" />
<div className="flex-1">
<div className="flex items-center gap-2">
<span className="font-medium">
Version {workflow.version}
</span>
{isCurrent && (
<Badge variant="secondary">Current</Badge>
)}
</div>
<div className="text-sm text-muted-foreground">
Modified: {basicLocalTimeFormat(workflow.modified_at)}
</div>
</div> </div>
</div> </div>
); ))}
})} </div>
</div> ) : sortedVersions.length === 0 ? (
)} <div className="py-8 text-center text-muted-foreground">
</div> No version history found
</div>
) : (
<div className="space-y-2">
{sortedVersions.map((workflow, index) => {
const isSelected = selectedVersions.has(workflow.version);
const isCurrent = index === 0;
return (
<div
key={workflow.version}
className={`flex cursor-pointer items-center space-x-3 rounded-lg border p-3 transition-colors ${
isSelected
? "border-primary/20 bg-primary/5"
: "hover:bg-muted/50"
}`}
onClick={() => handleVersionToggle(workflow.version)}
>
<Checkbox
checked={isSelected}
onChange={() => {}} // Handled by parent click
/>
<div className="flex-1">
<div className="flex items-center gap-2">
<span className="font-medium">
Version {workflow.version}
</span>
{isCurrent && (
<Badge variant="secondary">Current</Badge>
)}
</div>
<div className="text-sm text-muted-foreground">
Modified: {basicLocalTimeFormat(workflow.modified_at)}
</div>
</div>
</div>
);
})}
</div>
)}
</div>
</ScrollAreaViewport>
</ScrollArea> </ScrollArea>
</div> </div>
); );