show all of the scripts via a button (#3294)

This commit is contained in:
Jonathan Dobson
2025-08-25 09:32:54 -04:00
committed by GitHub
parent 27b637cbd3
commit cb340893f4
7 changed files with 292 additions and 161 deletions

View File

@@ -16,15 +16,22 @@ function BlockCodeEditor({
blockLabel,
blockType,
script,
title,
onClick,
onExit,
}: {
blockLabel: string;
blockType: WorkflowBlockType;
blockType?: WorkflowBlockType;
script: string | undefined;
title?: string;
onClick?: (e: React.MouseEvent) => void;
/**
* Return `false` to cancel the exit.
*/
onExit?: () => boolean;
}) {
const [searchParams] = useSearchParams();
const blockTitle = workflowBlockTitle[blockType];
const blockTitle = blockType ? workflowBlockTitle[blockType] : title;
const toggleScriptForNodeCallback = useToggleScriptForNodeCallback();
const cacheKeyValue = searchParams.get("cache-key-value");
@@ -53,38 +60,51 @@ function BlockCodeEditor({
}}
>
<header className="relative !mt-0 flex h-[2.75rem] justify-between gap-2">
<div className="flex w-full gap-2">
<div className="relative flex h-[2.75rem] w-[2.75rem] items-center justify-center overflow-hidden rounded border border-slate-600">
<WorkflowBlockIcon
workflowBlockType={blockType}
className="size-6"
/>
<div className="absolute -left-3 top-8 flex h-4 w-16 origin-top-left -rotate-45 transform items-center justify-center bg-yellow-400">
<span className="text-xs font-bold text-black">code</span>
</div>
</div>
<div className="flex w-full flex-col gap-1">
{blockLabel}
<div className="flex w-full items-center justify-center gap-1">
<span className="text-xs text-slate-400">{blockTitle}</span>
<div className="ml-auto scale-[60%] opacity-50">
<KeyIcon />
{blockType ? (
<div className="flex w-full gap-2">
<div className="relative flex h-[2.75rem] w-[2.75rem] items-center justify-center overflow-hidden rounded border border-slate-600">
<WorkflowBlockIcon
workflowBlockType={blockType}
className="size-6"
/>
<div className="absolute -left-3 top-8 flex h-4 w-16 origin-top-left -rotate-45 transform items-center justify-center bg-yellow-400">
<span className="text-xs font-bold text-black">code</span>
</div>
</div>
<div className="flex w-full flex-col gap-1">
{blockLabel}
<div className="flex w-full items-center justify-center gap-1">
<span className="text-xs text-slate-400">{blockTitle}</span>
<div className="ml-auto scale-[60%] opacity-50">
<KeyIcon />
</div>
<span className="text-xs text-slate-400">
{cacheKeyValue === "" || !cacheKeyValue
? "(none)"
: cacheKeyValue}
</span>
</div>
<span className="text-xs text-slate-400">
{cacheKeyValue === "" || !cacheKeyValue
? "(none)"
: cacheKeyValue}
</span>
</div>
</div>
</div>
) : (
<header className="mt-0 flex h-[2.75rem] w-full items-center justify-center">
{title ?? blockLabel}
</header>
)}
<div className="absolute right-[-0.5rem] top-0 flex h-[2rem] w-[2rem] items-center justify-center rounded hover:bg-slate-800">
<ExitIcon
onClick={() => {
toggleScriptForNodeCallback({
label: blockLabel,
show: false,
});
if (onExit) {
const result = onExit();
if (result !== false) {
toggleScriptForNodeCallback({
label: blockLabel,
show: false,
});
}
}
}}
className="size-5 cursor-pointer"
/>