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)} onSubmit={form.handleSubmit(onSubmit, handleInvalid)}
className="space-y-8" 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 && ( {hasLoginBlockValidationError && (
<Alert variant="destructive"> <Alert variant="destructive">
<ExclamationTriangleIcon className="h-4 w-4" /> <ExclamationTriangleIcon className="h-4 w-4" />
@@ -1051,49 +1105,6 @@ function RunWorkflowForm({
</AccordionItem> </AccordionItem>
</Accordion> </Accordion>
</div> </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>
</Form> </Form>
); );

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

@@ -44,22 +44,16 @@ function WorkflowRunParameters() {
const initialValues = getInitialValues(location, workflowParameters ?? []); 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) { if (isFetching) {
return ( return (
<div className="space-y-8"> <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" /> <Skeleton className="h-96 w-full" />
</div> </div>
); );
@@ -70,26 +64,21 @@ function WorkflowRunParameters() {
} }
return ( return (
<div className="space-y-8"> <RunWorkflowForm
{header} initialValues={initialValues}
<RunWorkflowForm workflowParameters={workflowParameters}
initialValues={initialValues} initialSettings={{
workflowParameters={workflowParameters} proxyLocation:
initialSettings={{ proxyLocation ?? workflow.proxy_location ?? ProxyLocation.Residential,
proxyLocation: webhookCallbackUrl:
proxyLocation ?? webhookCallbackUrl ?? workflow.webhook_callback_url ?? "",
workflow.proxy_location ?? maxScreenshotScrolls:
ProxyLocation.Residential, maxScreenshotScrolls ?? workflow.max_screenshot_scrolls ?? null,
webhookCallbackUrl: extraHttpHeaders:
webhookCallbackUrl ?? workflow.webhook_callback_url ?? "", extraHttpHeaders ?? workflow.extra_http_headers ?? null,
maxScreenshotScrolls: cdpAddress: null,
maxScreenshotScrolls ?? workflow.max_screenshot_scrolls ?? null, }}
extraHttpHeaders: />
extraHttpHeaders ?? workflow.extra_http_headers ?? null,
cdpAddress: null,
}}
/>
</div>
); );
} }