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 { AddNodeProps } from "../FlowRenderer";
import { ClickIcon } from "@/components/icons/ClickIcon";
import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
const nodeLibraryItems: Array<{
nodeType: NonNullable<WorkflowBlockNode["type"]>;
@@ -118,46 +119,53 @@ function WorkflowNodeLibraryPanel({ onNodeClick, first }: Props) {
: "Click on the node type you want to add"}
</span>
</header>
<div className="space-y-2">
{nodeLibraryItems.map((item) => {
if (workflowPanelData?.disableLoop && item.nodeType === "loop") {
return null;
}
return (
<div
key={item.nodeType}
className="flex cursor-pointer items-center justify-between rounded-sm bg-slate-elevation4 p-4 hover:bg-slate-elevation5"
onClick={() => {
onNodeClick({
nodeType: item.nodeType,
next: workflowPanelData?.next ?? null,
parent: workflowPanelData?.parent,
previous: workflowPanelData?.previous ?? null,
connectingEdgeType:
workflowPanelData?.connectingEdgeType ??
"edgeWithAddButton",
});
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}
<ScrollArea>
<ScrollAreaViewport className="max-h-[28rem]">
<div className="space-y-2">
{nodeLibraryItems.map((item) => {
if (
workflowPanelData?.disableLoop &&
item.nodeType === "loop"
) {
return null;
}
return (
<div
key={item.nodeType}
className="flex cursor-pointer items-center justify-between rounded-sm bg-slate-elevation4 p-4 hover:bg-slate-elevation5"
onClick={() => {
onNodeClick({
nodeType: item.nodeType,
next: workflowPanelData?.next ?? null,
parent: workflowPanelData?.parent,
previous: workflowPanelData?.previous ?? null,
connectingEdgeType:
workflowPanelData?.connectingEdgeType ??
"edgeWithAddButton",
});
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 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>
</ScrollAreaViewport>
</ScrollArea>
</div>
</div>
);