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

26
skyvern-frontend/src/routes/workflows/WorkflowActions.tsx
View File

@@ -31,11 +31,10 @@ import {
} from "@radix-ui/react-icons";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { AxiosError } from "axios";
import { useNavigate } from "react-router-dom";
import { stringify as convertToYAML } from "yaml";
import { convert } from "./editor/workflowEditorUtils";
import { useCreateWorkflowMutation } from "./hooks/useCreateWorkflowMutation";
import { WorkflowApiResponse } from "./types/workflowTypes";
import { WorkflowCreateYAMLRequest } from "./types/workflowYamlTypes";
type Props = {
workflow: WorkflowApiResponse;
@@ -61,7 +60,6 @@ function downloadFile(fileName: string, contents: string) {
function WorkflowActions({ workflow, onSuccessfullyDeleted }: Props) {
const credentialGetter = useCredentialGetter();
const queryClient = useQueryClient();
const navigate = useNavigate();
function handleExport(type: "json" | "yaml") {
if (!workflow) {
@@ -75,27 +73,7 @@ function WorkflowActions({ workflow, onSuccessfullyDeleted }: Props) {
downloadFile(fileName, contents);
}
const createWorkflowMutation = useMutation({
mutationFn: async (workflow: WorkflowCreateYAMLRequest) => {
const client = await getClient(credentialGetter);
const yaml = convertToYAML(workflow);
return client.post<string, { data: WorkflowApiResponse }>(
"/workflows",
yaml,
{
headers: {
"Content-Type": "text/plain",
},
},
);
},
onSuccess: (response) => {
queryClient.invalidateQueries({
queryKey: ["workflows"],
});
navigate(`/workflows/${response.data.workflow_permanent_id}/edit`);
},
});
const createWorkflowMutation = useCreateWorkflowMutation();
const deleteWorkflowMutation = useMutation({
mutationFn: async (id: string) => {

296
skyvern-frontend/src/routes/workflows/Workflows.tsx
View File

@@ -1,7 +1,6 @@
import { getClient } from "@/api/AxiosClient";
import { Status, WorkflowRunApiResponse } from "@/api/types";
import { StatusBadge } from "@/components/StatusBadge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
Pagination,
PaginationContent,
@@ -25,46 +24,51 @@ import {
TooltipTrigger,
} from "@/components/ui/tooltip";
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { downloadBlob } from "@/util/downloadBlob";
import { basicLocalTimeFormat, basicTimeFormat } from "@/util/timeFormat";
import { cn } from "@/util/utils";
import {
DownloadIcon,
LightningBoltIcon,
MagnifyingGlassIcon,
Pencil2Icon,
PlayIcon,
PlusIcon,
ReloadIcon,
} from "@radix-ui/react-icons";
import { useQuery } from "@tanstack/react-query";
import { useNavigate, useSearchParams } from "react-router-dom";
import { WorkflowApiResponse } from "./types/workflowTypes";
import { WorkflowActions } from "./WorkflowActions";
import { WorkflowsPageBanner } from "./WorkflowsPageBanner";
import { WorkflowTitle } from "./WorkflowTitle";
import { useState } from "react";
import { StatusFilterDropdown } from "@/components/StatusFilterDropdown";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useDebounce } from "use-debounce";
import { Input } from "@/components/ui/input";
import { NarrativeCard } from "./components/header/NarrativeCard";
import { useCreateWorkflowMutation } from "./hooks/useCreateWorkflowMutation";
import { ImportWorkflowButton } from "./ImportWorkflowButton";
import { WorkflowApiResponse } from "./types/workflowTypes";
import { WorkflowCreateYAMLRequest } from "./types/workflowYamlTypes";
import { WorkflowActions } from "./WorkflowActions";
const emptyWorkflowRequest: WorkflowCreateYAMLRequest = {
title: "New Workflow",
description: "",
workflow_definition: {
blocks: [],
parameters: [],
},
};
function Workflows() {
const credentialGetter = useCredentialGetter();
const navigate = useNavigate();
const createWorkflowMutation = useCreateWorkflowMutation();
const [searchParams, setSearchParams] = useSearchParams();
const [statusFilters, setStatusFilters] = useState<Array<Status>>([]);
const [search, setSearch] = useState("");
const [debouncedSearch] = useDebounce(search, 500);
const workflowsPage = searchParams.get("workflowsPage")
? Number(searchParams.get("workflowsPage"))
: 1;
const workflowRunsPage = searchParams.get("workflowRunsPage")
? Number(searchParams.get("workflowRunsPage"))
: 1;
const page = searchParams.get("page") ? Number(searchParams.get("page")) : 1;
const { data: workflows, isLoading } = useQuery<Array<WorkflowApiResponse>>({
queryKey: ["workflows", debouncedSearch, workflowsPage],
queryKey: ["workflows", debouncedSearch, page],
queryFn: async () => {
const client = await getClient(credentialGetter);
const params = new URLSearchParams();
params.append("page", String(workflowsPage));
params.append("page", String(page));
params.append("only_workflows", "true");
params.append("title", debouncedSearch);
return client
@@ -75,52 +79,6 @@ function Workflows() {
},
});
const { data: workflowRuns, isLoading: workflowRunsIsLoading } = useQuery<
Array<WorkflowRunApiResponse>
>({
queryKey: ["workflowRuns", { statusFilters }, workflowRunsPage],
queryFn: async () => {
const client = await getClient(credentialGetter);
const params = new URLSearchParams();
params.append("page", String(workflowRunsPage));
statusFilters.forEach((status) => {
params.append("status", status);
});
return client
.get("/workflows/runs", {
params,
})
.then((response) => response.data);
},
refetchOnMount: "always",
});
function handleExport() {
if (!workflowRuns) {
return; // should never happen
}
const data = ["workflow_run_id,workflow_id,status,created,failure_reason"];
workflowRuns.forEach((workflowRun) => {
const row = [
workflowRun.workflow_run_id,
workflowRun.workflow_permanent_id,
workflowRun.status,
workflowRun.created_at,
workflowRun.failure_reason ?? "",
];
data.push(
row
.map(String) // convert every value to String
.map((v) => v.replace(new RegExp('"', "g"), '""')) // escape double quotes
.map((v) => `"${v}"`) // quote it
.join(","), // comma-separated
);
});
const contents = data.join("\r\n");
downloadBlob(contents, "export.csv", "data:text/csv;charset=utf-8;");
}
function handleRowClick(
event: React.MouseEvent<HTMLTableCellElement>,
workflowPermanentId: string,
@@ -152,11 +110,38 @@ function Workflows() {
}
return (
<div className="space-y-8">
<WorkflowsPageBanner />
<div className="space-y-10">
<div className="flex h-32 justify-between gap-6">
<div className="space-y-5">
<div className="flex items-center gap-2">
<LightningBoltIcon className="size-6" />
<h1 className="text-2xl">Workflows</h1>
</div>
<p className="text-slate-300">
Create your own complex workflows by connecting web agents together.
Define a series of actions, set it, and forget it.
</p>
</div>
<div className="flex gap-5">
<NarrativeCard
index={1}
description="Save browser sessions and reuse them in subsequent runs"
/>
<NarrativeCard
index={2}
description="Connect multiple agents together to carry out complex objectives"
/>
<NarrativeCard
index={3}
description="Execute non-browser tasks such as sending emails"
/>
</div>
</div>
<div className="space-y-4">
<header className="flex justify-between">
<h1 className="text-2xl font-semibold">Workflows</h1>
<header>
<h1 className="text-xl">My Flows</h1>
</header>
<div className="flex justify-between">
<div className="relative">
<div className="absolute left-0 top-0 flex size-9 items-center justify-center">
<MagnifyingGlassIcon className="size-6" />
@@ -170,15 +155,35 @@ function Workflows() {
className="w-48 pl-9 lg:w-72"
/>
</div>
</header>
<div className="rounded-md border">
<div className="flex gap-4">
<ImportWorkflowButton />
<Button
disabled={createWorkflowMutation.isPending}
onClick={() => {
createWorkflowMutation.mutate(emptyWorkflowRequest);
}}
>
{createWorkflowMutation.isPending ? (
<ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
) : (
<PlusIcon className="mr-2 h-4 w-4" />
)}
Create
</Button>
</div>
</div>
<div className="rounded-lg border">
<Table>
<TableHeader>
<TableHeader className="rounded-t-lg bg-slate-elevation2">
<TableRow>
<TableHead className="w-1/3">ID</TableHead>
<TableHead className="w-1/3">Title</TableHead>
<TableHead className="w-1/3">Created At</TableHead>
<TableHead></TableHead>
<TableHead className="w-1/3 rounded-tl-lg text-slate-400">
ID
</TableHead>
<TableHead className="w-1/3 text-slate-400">Title</TableHead>
<TableHead className="w-1/3 text-slate-400">
Created At
</TableHead>
<TableHead className="rounded-tr-lg"></TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -272,152 +277,25 @@ function Workflows() {
<PaginationContent>
<PaginationItem>
<PaginationPrevious
className={cn({ "cursor-not-allowed": workflowsPage === 1 })}
className={cn({ "cursor-not-allowed": page === 1 })}
onClick={() => {
if (workflowsPage === 1) {
if (page === 1) {
return;
}
const params = new URLSearchParams();
params.set(
"workflowsPage",
String(Math.max(1, workflowsPage - 1)),
);
params.set("page", String(Math.max(1, page - 1)));
setSearchParams(params, { replace: true });
}}
/>
</PaginationItem>
<PaginationItem>
<PaginationLink>{workflowsPage}</PaginationLink>
<PaginationLink>{page}</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationNext
onClick={() => {
const params = new URLSearchParams();
params.set("workflowsPage", String(workflowsPage + 1));
setSearchParams(params, { replace: true });
}}
/>
</PaginationItem>
</PaginationContent>
</Pagination>
</div>
</div>
<div className="space-y-4">
<header>
<div className="flex justify-between">
<h1 className="text-2xl font-semibold">Workflow Runs</h1>
<div className="flex gap-2">
<StatusFilterDropdown
values={statusFilters}
onChange={setStatusFilters}
/>
<Button variant="secondary" onClick={handleExport}>
<DownloadIcon className="mr-2" />
Export CSV
</Button>
</div>
</div>
</header>
<div className="rounded-md border">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-1/5">Workflow Run ID</TableHead>
<TableHead className="w-1/5">Workflow ID</TableHead>
<TableHead className="w-1/5">Workflow Title</TableHead>
<TableHead className="w-1/5">Status</TableHead>
<TableHead className="w-1/5">Created At</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{workflowRunsIsLoading ? (
<TableRow>
<TableCell colSpan={5}>Loading...</TableCell>
</TableRow>
) : workflowRuns?.length === 0 ? (
<TableRow>
<TableCell colSpan={5}>No workflow runs found</TableCell>
</TableRow>
) : (
workflowRuns?.map((workflowRun) => {
return (
<TableRow
key={workflowRun.workflow_run_id}
onClick={(event) => {
if (event.ctrlKey || event.metaKey) {
window.open(
window.location.origin +
`/workflows/${workflowRun.workflow_permanent_id}/${workflowRun.workflow_run_id}/overview`,
"_blank",
"noopener,noreferrer",
);
return;
}
navigate(
`/workflows/${workflowRun.workflow_permanent_id}/${workflowRun.workflow_run_id}/overview`,
);
}}
className="cursor-pointer"
>
<TableCell className="w-1/5">
{workflowRun.workflow_run_id}
</TableCell>
<TableCell className="w-1/5">
{workflowRun.workflow_permanent_id}
</TableCell>
<TableCell className="w-1/5">
<WorkflowTitle
workflowPermanentId={
workflowRun.workflow_permanent_id
}
/>
</TableCell>
<TableCell className="w-1/5">
<StatusBadge status={workflowRun.status} />
</TableCell>
<TableCell
className="w-1/5"
title={basicTimeFormat(workflowRun.created_at)}
>
{basicLocalTimeFormat(workflowRun.created_at)}
</TableCell>
</TableRow>
);
})
)}
</TableBody>
</Table>
<Pagination className="pt-2">
<PaginationContent>
<PaginationItem>
<PaginationPrevious
className={cn({
"cursor-not-allowed": workflowRunsPage === 1,
})}
onClick={() => {
if (workflowRunsPage === 1) {
return;
}
const params = new URLSearchParams();
params.set(
"workflowRunsPage",
String(Math.max(1, workflowRunsPage - 1)),
);
setSearchParams(params, { replace: true });
}}
/>
</PaginationItem>
<PaginationItem>
<PaginationLink>{workflowRunsPage}</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationNext
onClick={() => {
const params = new URLSearchParams();
params.set(
"workflowRunsPage",
String(workflowRunsPage + 1),
);
params.set("page", String(page + 1));
setSearchParams(params, { replace: true });
}}
/>

38
skyvern-frontend/src/routes/workflows/WorkflowsPageBanner.tsx
View File

@@ -1,13 +1,8 @@
import { Button } from "@/components/ui/button";
import { ImportWorkflowButton } from "./ImportWorkflowButton";
import { useNavigate } from "react-router-dom";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { getClient } from "@/api/AxiosClient";
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { WorkflowCreateYAMLRequest } from "./types/workflowYamlTypes";
import { stringify as convertToYAML } from "yaml";
import { WorkflowApiResponse } from "./types/workflowTypes";
import { PlusIcon, ReloadIcon } from "@radix-ui/react-icons";
import { useCreateWorkflowMutation } from "./hooks/useCreateWorkflowMutation";
import { ImportWorkflowButton } from "./ImportWorkflowButton";
import { WorkflowCreateYAMLRequest } from "./types/workflowYamlTypes";
const emptyWorkflowRequest: WorkflowCreateYAMLRequest = {
title: "New Workflow",
@@ -19,30 +14,7 @@ const emptyWorkflowRequest: WorkflowCreateYAMLRequest = {
};
function WorkflowsPageBanner() {
const navigate = useNavigate();
const credentialGetter = useCredentialGetter();
const queryClient = useQueryClient();
const createNewWorkflowMutation = useMutation({
mutationFn: async () => {
const client = await getClient(credentialGetter);
const yaml = convertToYAML(emptyWorkflowRequest);
return client.post<
typeof emptyWorkflowRequest,
{ data: WorkflowApiResponse }
>("/workflows", yaml, {
headers: {
"Content-Type": "text/plain",
},
});
},
onSuccess: (response) => {
queryClient.invalidateQueries({
queryKey: ["workflows"],
});
navigate(`/workflows/${response.data.workflow_permanent_id}/edit`);
},
});
const createNewWorkflowMutation = useCreateWorkflowMutation();
return (
<div className="space-y-8 bg-slate-elevation1 p-12">
@@ -54,7 +26,7 @@ function WorkflowsPageBanner() {
<Button
disabled={createNewWorkflowMutation.isPending}
onClick={() => {
createNewWorkflowMutation.mutate();
createNewWorkflowMutation.mutate(emptyWorkflowRequest);
}}
>
{createNewWorkflowMutation.isPending ? (

17
skyvern-frontend/src/routes/workflows/components/header/NarrativeCard.tsx Normal file
View File

@@ -0,0 +1,17 @@
type Props = {
index: number;
description: string;
};
function NarrativeCard({ index, description }: Props) {
return (
<div className="flex h-32 w-52 flex-col gap-3 rounded-xl bg-slate-elevation1 p-4">
<div className="flex size-6 items-center justify-center rounded-full bg-slate-400 text-slate-950">
{index}
</div>
<div className="text-sm text-slate-300">{description}</div>
</div>
);
}
export { NarrativeCard };

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,
),

37
skyvern-frontend/src/routes/workflows/hooks/useCreateWorkflowMutation.ts Normal file
View File

@@ -0,0 +1,37 @@
import { useQueryClient } from "@tanstack/react-query";
import { useMutation } from "@tanstack/react-query";
import { WorkflowCreateYAMLRequest } from "../types/workflowYamlTypes";
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { getClient } from "@/api/AxiosClient";
import { useNavigate } from "react-router-dom";
import { stringify as convertToYAML } from "yaml";
import { WorkflowApiResponse } from "../types/workflowTypes";
function useCreateWorkflowMutation() {
const queryClient = useQueryClient();
const credentialGetter = useCredentialGetter();
const navigate = useNavigate();
return useMutation({
mutationFn: async (workflow: WorkflowCreateYAMLRequest) => {
const client = await getClient(credentialGetter);
const yaml = convertToYAML(workflow);
return client.post<string, { data: WorkflowApiResponse }>(
"/workflows",
yaml,
{
headers: {
"Content-Type": "text/plain",
},
},
);
},
onSuccess: (response) => {
queryClient.invalidateQueries({
queryKey: ["workflows"],
});
navigate(`/workflows/${response.data.workflow_permanent_id}/edit`);
},
});
}
export { useCreateWorkflowMutation };

1
skyvern-frontend/src/routes/workflows/hooks/useWorkflowQuery.ts
View File

@@ -3,6 +3,7 @@ import { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { useQuery } from "@tanstack/react-query";
import { WorkflowApiResponse } from "../types/workflowTypes";
import { useGlobalWorkflowsQuery } from "./useGlobalWorkflowsQuery";
type Props = {
workflowPermanentId?: string;
};