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

Add scrollable for nodes panel (#1245)

Browse Source
This commit is contained in:
Shuchang Zheng
2024-11-22 13:29:02 -08:00
committed by GitHub
parent cc4c7be225
commit ecba187381
1 changed files with 47 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
skyvern-frontend/src/routes/workflows/editor/panels/WorkflowNodeLibraryPanel.tsx
View File

@@ -13,6 +13,7 @@ import {
import { WorkflowBlockNode } from "../nodes"; import { WorkflowBlockNode } from "../nodes";
import { AddNodeProps } from "../FlowRenderer"; import { AddNodeProps } from "../FlowRenderer";
import { ClickIcon } from "@/components/icons/ClickIcon"; import { ClickIcon } from "@/components/icons/ClickIcon";
import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
const nodeLibraryItems: Array<{ const nodeLibraryItems: Array<{
nodeType: NonNullable<WorkflowBlockNode["type"]>; nodeType: NonNullable<WorkflowBlockNode["type"]>;
@@ -118,46 +119,53 @@ function WorkflowNodeLibraryPanel({ onNodeClick, first }: Props) {
: "Click on the node type you want to add"} : "Click on the node type you want to add"}
</span> </span>
</header> </header>
<div className="space-y-2"> <ScrollArea>
{nodeLibraryItems.map((item) => { <ScrollAreaViewport className="max-h-[28rem]">
if (workflowPanelData?.disableLoop && item.nodeType === "loop") { <div className="space-y-2">
return null; {nodeLibraryItems.map((item) => {
} if (
return ( workflowPanelData?.disableLoop &&
<div item.nodeType === "loop"
key={item.nodeType} ) {
className="flex cursor-pointer items-center justify-between rounded-sm bg-slate-elevation4 p-4 hover:bg-slate-elevation5" return null;
onClick={() => { }
onNodeClick({ return (
nodeType: item.nodeType, <div
next: workflowPanelData?.next ?? null, key={item.nodeType}
parent: workflowPanelData?.parent, className="flex cursor-pointer items-center justify-between rounded-sm bg-slate-elevation4 p-4 hover:bg-slate-elevation5"
previous: workflowPanelData?.previous ?? null, onClick={() => {
connectingEdgeType: onNodeClick({
workflowPanelData?.connectingEdgeType ?? nodeType: item.nodeType,
"edgeWithAddButton", next: workflowPanelData?.next ?? null,
}); parent: workflowPanelData?.parent,
closeWorkflowPanel(); previous: workflowPanelData?.previous ?? null,
}} connectingEdgeType:
> workflowPanelData?.connectingEdgeType ??
<div className="flex gap-2"> "edgeWithAddButton",
<div className="flex h-[2.75rem] w-[2.75rem] items-center justify-center rounded border border-slate-600"> });
{item.icon} closeWorkflowPanel();
}}
>
<div className="flex gap-2">
<div className="flex h-[2.75rem] w-[2.75rem] items-center justify-center rounded border border-slate-600">
{item.icon}
</div>
<div className="flex flex-col gap-1">
<span className="max-w-64 truncate text-base">
{item.title}
</span>
<span className="text-xs text-slate-400">
{item.description}
</span>
</div>
</div>
<PlusIcon className="size-6" />
</div> </div>
<div className="flex flex-col gap-1"> );
<span className="max-w-64 truncate text-base"> })}
{item.title} </div>
</span> </ScrollAreaViewport>
<span className="text-xs text-slate-400"> </ScrollArea>
{item.description}
</span>
</div>
</div>
<PlusIcon className="size-6" />
</div>
);
})}
</div>
</div> </div>
</div> </div>
); );