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

UI for workflow templates (#1715)

Browse Source 
Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>
This commit is contained in:
Shuchang Zheng
2025-02-04 21:40:55 +08:00
committed by GitHub
parent e2d3d7fec5
commit d34a403c8f
27 changed files with 673 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
View File

@@ -393,7 +393,14 @@ function FlowRenderer({
const startNodeId = nanoid();
const adderNodeId = nanoid();
newNodes.push(
startNode(startNodeId, { withWorkflowSettings: false }, id),
startNode(
startNodeId,
{
withWorkflowSettings: false,
editable: true,
},
id,
),
);
newNodes.push(nodeAdderNode(adderNodeId, id));
newEdges.push(defaultEdge(startNodeId, adderNodeId));

17
skyvern-frontend/src/routes/workflows/editor/WorkflowEditor.tsx
View File

@@ -13,6 +13,7 @@ import {
WorkflowParameterTypes,
WorkflowSettings,
} from "../types/workflowTypes";
import { useGlobalWorkflowsQuery } from "../hooks/useGlobalWorkflowsQuery";
function WorkflowEditor() {
const { workflowPermanentId } = useParams();
@@ -27,12 +28,15 @@ function WorkflowEditor() {
workflowPermanentId,
});
const { data: globalWorkflows, isLoading: isGlobalWorkflowsLoading } =
useGlobalWorkflowsQuery();
useMountEffect(() => {
setCollapsed(true);
setHasChanges(false);
});
if (isLoading) {
if (isLoading || isGlobalWorkflowsLoading) {
return (
<div className="flex h-screen w-full items-center justify-center">
<LogoMinimized />
@@ -44,13 +48,22 @@ function WorkflowEditor() {
return null;
}
const isGlobalWorkflow = globalWorkflows?.some(
(globalWorkflow) =>
globalWorkflow.workflow_permanent_id === workflowPermanentId,
);
const settings: WorkflowSettings = {
persistBrowserSession: workflow.persist_browser_session,
proxyLocation: workflow.proxy_location,
webhookCallbackUrl: workflow.webhook_callback_url,
};
const elements = getElements(workflow.workflow_definition.blocks, settings);
const elements = getElements(
workflow.workflow_definition.blocks,
settings,
!isGlobalWorkflow,
);
return (
<div className="h-screen w-full">

101
skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx
View File

@@ -9,11 +9,15 @@ import {
import {
ChevronDownIcon,
ChevronUpIcon,
CopyIcon,
PlayIcon,
ReloadIcon,
} from "@radix-ui/react-icons";
import { useNavigate, useParams } from "react-router-dom";
import { useGlobalWorkflowsQuery } from "../hooks/useGlobalWorkflowsQuery";
import { EditableNodeTitle } from "./nodes/components/EditableNodeTitle";
import { useCreateWorkflowMutation } from "../hooks/useCreateWorkflowMutation";
import { convert } from "./workflowEditorUtils";
type Props = {
title: string;
@@ -33,6 +37,7 @@ function WorkflowHeader({
const { workflowPermanentId } = useParams();
const { data: globalWorkflows } = useGlobalWorkflowsQuery();
const navigate = useNavigate();
const createWorkflowMutation = useCreateWorkflowMutation();
if (!globalWorkflows) {
return null; // this should be loaded already by some other components
@@ -54,41 +59,67 @@ function WorkflowHeader({
/>
</div>
<div className="flex h-full items-center justify-end gap-4">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
size="icon"
variant="tertiary"
className="size-10"
disabled={isGlobalWorkflow}
onClick={() => {
onSave();
}}
>
<SaveIcon />
</Button>
</TooltipTrigger>
<TooltipContent>Save</TooltipContent>
</Tooltip>
</TooltipProvider>
<Button variant="tertiary" size="lg" onClick={onParametersClick}>
<span className="mr-2">Parameters</span>
{parametersPanelOpen ? (
<ChevronUpIcon className="h-6 w-6" />
) : (
<ChevronDownIcon className="h-6 w-6" />
)}
</Button>
<Button
size="lg"
onClick={() => {
navigate(`/workflows/${workflowPermanentId}/run`);
}}
>
<PlayIcon className="mr-2 h-6 w-6" />
Run
</Button>
{isGlobalWorkflow ? (
<Button
size="lg"
onClick={() => {
const workflow = globalWorkflows.find(
(workflow) =>
workflow.workflow_permanent_id === workflowPermanentId,
);
if (!workflow) {
return; // makes no sense
}
const clone = convert(workflow);
createWorkflowMutation.mutate(clone);
}}
>
{createWorkflowMutation.isPending ? (
<ReloadIcon className="mr-3 h-6 w-6 animate-spin" />
) : (
<CopyIcon className="mr-3 h-6 w-6" />
)}
Make a Copy to Edit
</Button>
) : (
<>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button
size="icon"
variant="tertiary"
className="size-10"
disabled={isGlobalWorkflow}
onClick={() => {
onSave();
}}
>
<SaveIcon />
</Button>
</TooltipTrigger>
<TooltipContent>Save</TooltipContent>
</Tooltip>
</TooltipProvider>
<Button variant="tertiary" size="lg" onClick={onParametersClick}>
<span className="mr-2">Parameters</span>
{parametersPanelOpen ? (
<ChevronUpIcon className="h-6 w-6" />
) : (
<ChevronDownIcon className="h-6 w-6" />
)}
</Button>
<Button
size="lg"
onClick={() => {
navigate(`/workflows/${workflowPermanentId}/run`);
}}
>
<PlayIcon className="mr-2 h-6 w-6" />
Run
</Button>
</>
)}
</div>
</div>
);

18
skyvern-frontend/src/routes/workflows/editor/nodes/LoopNode/LoopNode.tsx
View File

@@ -55,6 +55,14 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
(furthestDownChild?.position.y ?? 0) +
24;
function handleChange(key: string, value: unknown) {
if (!data.editable) {
return;
}
setInputs({ ...inputs, [key]: value });
updateNodeData(id, { [key]: value });
}
return (
<div>
<Handle
@@ -118,11 +126,7 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
nodeId={id}
value={inputs.loopVariableReference}
onChange={(value) => {
setInputs({
...inputs,
loopVariableReference: value,
});
updateNodeData(id, { loopVariableReference: value });
handleChange("loopVariableReference", value);
}}
/>
</div>
@@ -139,9 +143,7 @@ function LoopNode({ id, data }: NodeProps<LoopNode>) {
checked={data.completeIfEmpty}
disabled={!data.editable}
onCheckedChange={(checked) => {
updateNodeData(id, {
completeIfEmpty: checked,
});
handleChange("completeIfEmpty", checked);
}}
/>
</div>

3
skyvern-frontend/src/routes/workflows/editor/nodes/StartNode/StartNode.tsx
View File

@@ -30,6 +30,9 @@ function StartNode({ id, data }: NodeProps<StartNode>) {
});
function handleChange(key: string, value: unknown) {
if (!data.editable) {
return;
}
setInputs({ ...inputs, [key]: value });
updateNodeData(id, { [key]: value });
}

2
skyvern-frontend/src/routes/workflows/editor/nodes/StartNode/types.ts
View File

@@ -7,10 +7,12 @@ export type WorkflowStartNodeData = {
webhookCallbackUrl: string;
proxyLocation: ProxyLocation;
persistBrowserSession: boolean;
editable: boolean;
};
export type OtherStartNodeData = {
withWorkflowSettings: false;
editable: boolean;
};
export type StartNodeData = WorkflowStartNodeData | OtherStartNodeData;

7
skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts
View File

@@ -172,6 +172,7 @@ function layout(
function convertToNode(
identifiers: { id: string; parentId?: string },
block: WorkflowBlock,
editable: boolean,
): AppNode {
const common = {
draggable: false,
@@ -181,7 +182,7 @@ function convertToNode(
const commonData: NodeBaseData = {
label: block.label,
continueOnFailure: block.continue_on_failure,
editable: true,
editable,
};
switch (block.block_type) {
case "task": {
@@ -590,6 +591,7 @@ export function nodeAdderNode(id: string, parentId?: string): NodeAdderNode {
function getElements(
blocks: Array<WorkflowBlock>,
settings: WorkflowSettings,
editable: boolean,
): {
nodes: Array<AppNode>;
edges: Array<Edge>;
@@ -605,6 +607,7 @@ function getElements(
persistBrowserSession: settings.persistBrowserSession,
proxyLocation: settings.proxyLocation ?? ProxyLocation.Residential,
webhookCallbackUrl: settings.webhookCallbackUrl ?? "",
editable,
}),
);
@@ -615,6 +618,7 @@ function getElements(
parentId: d.parentId ?? undefined,
},
d.block,
editable,
);
nodes.push(node);
if (d.previous) {
@@ -633,6 +637,7 @@ function getElements(
startNodeId,
{
withWorkflowSettings: false,
editable,
},
block.id,
),