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

Move Run Workflow button to top of page (#4626)

Browse Source 
Co-authored-by: Celal Zamanoglu <celal@skyvern.com>
This commit is contained in:
Suchintan
2026-02-05 11:56:35 -05:00
committed by GitHub
parent a664ef50d5
commit 1e29d3119a
2 changed files with 76 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx
View File

@@ -504,6 +504,60 @@ function RunWorkflowForm({
onSubmit={form.handleSubmit(onSubmit, handleInvalid)}
className="space-y-8"
>
<header className="flex items-end justify-between gap-4">
<div className="space-y-5">
<h1 className="text-3xl">
Parameters{workflow?.title ? ` - ${workflow.title}` : ""}
</h1>
<h2 className="text-lg text-slate-400">
Fill the placeholder values that you have linked throughout your
workflow.
</h2>
</div>
<div className="flex shrink-0 gap-2">
<CopyApiCommandDropdown
getOptions={() => {
const values = form.getValues();
const body = getRunWorkflowRequestBody(
values,
workflowParameters,
);
const transformedBody = transformToWorkflowRunRequest(
body,
workflowPermanentId,
);
// Build headers - x-max-steps-override is optional and can be added manually if needed
const headers: Record<string, string> = {
"Content-Type": "application/json",
"x-api-key": apiCredential ?? "<your-api-key>",
};
return {
method: "POST",
url: `${runsApiBaseUrl}/run/workflows`,
body: transformedBody,
headers,
} satisfies ApiCommandOptions;
}}
/>
<Button
type="submit"
disabled={
runWorkflowMutation.isPending || hasLoginBlockValidationError
}
>
{runWorkflowMutation.isPending && (
<ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
)}
{!runWorkflowMutation.isPending && (
<PlayIcon className="mr-2 h-4 w-4" />
)}
Run workflow
</Button>
</div>
</header>
{hasLoginBlockValidationError && (
<Alert variant="destructive">
<ExclamationTriangleIcon className="h-4 w-4" />
@@ -1051,49 +1105,6 @@ function RunWorkflowForm({
</AccordionItem>
</Accordion>
</div>
<div className="flex justify-end gap-2">
<CopyApiCommandDropdown
getOptions={() => {
const values = form.getValues();
const body = getRunWorkflowRequestBody(
values,
workflowParameters,
);
const transformedBody = transformToWorkflowRunRequest(
body,
workflowPermanentId,
);
// Build headers - x-max-steps-override is optional and can be added manually if needed
const headers: Record<string, string> = {
"Content-Type": "application/json",
"x-api-key": apiCredential ?? "<your-api-key>",
};
return {
method: "POST",
url: `${runsApiBaseUrl}/run/workflows`,
body: transformedBody,
headers,
} satisfies ApiCommandOptions;
}}
/>
<Button
type="submit"
disabled={
runWorkflowMutation.isPending || hasLoginBlockValidationError
}
>
{runWorkflowMutation.isPending && (
<ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
)}
{!runWorkflowMutation.isPending && (
<PlayIcon className="mr-2 h-4 w-4" />
)}
Run workflow
</Button>
</div>
</form>
</Form>
);

55
skyvern-frontend/src/routes/workflows/WorkflowRunParameters.tsx
View File

@@ -44,22 +44,16 @@ function WorkflowRunParameters() {
const initialValues = getInitialValues(location, workflowParameters ?? []);
const header = (
<header className="space-y-5">
<h1 className="text-3xl">
Parameters{workflow?.title ? ` - ${workflow.title}` : ""}
</h1>
<h2 className="text-lg text-slate-400">
Fill the placeholder values that you have linked throughout your
workflow.
</h2>
</header>
);
if (isFetching) {
return (
<div className="space-y-8">
{header}
<header className="space-y-5">
<h1 className="text-3xl">Parameters</h1>
<h2 className="text-lg text-slate-400">
Fill the placeholder values that you have linked throughout your
workflow.
</h2>
</header>
<Skeleton className="h-96 w-full" />
</div>
);
@@ -70,26 +64,21 @@ function WorkflowRunParameters() {
}
return (
<div className="space-y-8">
{header}
<RunWorkflowForm
initialValues={initialValues}
workflowParameters={workflowParameters}
initialSettings={{
proxyLocation:
proxyLocation ??
workflow.proxy_location ??
ProxyLocation.Residential,
webhookCallbackUrl:
webhookCallbackUrl ?? workflow.webhook_callback_url ?? "",
maxScreenshotScrolls:
maxScreenshotScrolls ?? workflow.max_screenshot_scrolls ?? null,
extraHttpHeaders:
extraHttpHeaders ?? workflow.extra_http_headers ?? null,
cdpAddress: null,
}}
/>
</div>
<RunWorkflowForm
initialValues={initialValues}
workflowParameters={workflowParameters}
initialSettings={{
proxyLocation:
proxyLocation ?? workflow.proxy_location ?? ProxyLocation.Residential,
webhookCallbackUrl:
webhookCallbackUrl ?? workflow.webhook_callback_url ?? "",
maxScreenshotScrolls:
maxScreenshotScrolls ?? workflow.max_screenshot_scrolls ?? null,
extraHttpHeaders:
extraHttpHeaders ?? workflow.extra_http_headers ?? null,
cdpAddress: null,
}}
/>
);
}