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

add PowerShell command option to API command copy dropdown (#2633)

Browse Source
This commit is contained in:
Prakash Maheshwaran
2025-06-09 21:01:45 -04:00
committed by GitHub
parent 0503f403bd
commit 4872f9fa4e
7 changed files with 178 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
skyvern-frontend/src/components/CopyApiCommandDropdown.tsx Normal file
View File

@@ -0,0 +1,65 @@
import { CopyIcon } from "@radix-ui/react-icons";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { toast } from "@/components/ui/use-toast";
import { copyText } from "@/util/copyText";
import {
generateApiCommands,
type ApiCommandOptions,
} from "@/util/apiCommands";
interface Props {
getOptions: () => ApiCommandOptions;
}
function CopyApiCommandDropdown({ getOptions }: Props) {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button type="button" variant="secondary">
<CopyIcon className="mr-2 h-4 w-4" />
Copy API Command
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem
onSelect={() => {
const { curl } = generateApiCommands(getOptions());
copyText(curl).then(() => {
toast({
variant: "success",
title: "Copied to Clipboard",
description:
"The cURL command has been copied to your clipboard.",
});
});
}}
>
Copy cURL (Unix/Linux/macOS)
</DropdownMenuItem>
<DropdownMenuItem
onSelect={() => {
const { powershell } = generateApiCommands(getOptions());
copyText(powershell).then(() => {
toast({
variant: "success",
title: "Copied to Clipboard",
description:
"The PowerShell command has been copied to your clipboard.",
});
});
}}
>
Copy PowerShell (Windows)
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}
export { CopyApiCommandDropdown };

29
skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx
View File

@@ -20,14 +20,14 @@ import { toast } from "@/components/ui/use-toast";
import { useApiCredential } from "@/hooks/useApiCredential";
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
import { copyText } from "@/util/copyText";
import { apiBaseUrl } from "@/util/env";
import { CopyApiCommandDropdown } from "@/components/CopyApiCommandDropdown";
import { type ApiCommandOptions } from "@/util/apiCommands";
import { zodResolver } from "@hookform/resolvers/zod";
import { CopyIcon, PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
import { PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
import { ToastAction } from "@radix-ui/react-toast";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { AxiosError } from "axios";
import fetchToCurl from "fetch-to-curl";
import { useState } from "react";
import { useForm, useFormState } from "react-hook-form";
import { Link } from "react-router-dom";
@@ -622,11 +622,9 @@ function CreateNewTaskForm({ initialValues }: Props) {
</TaskFormSection>
<div className="flex justify-end gap-3">
<Button
type="button"
variant="secondary"
onClick={async () => {
const curl = fetchToCurl({
<CopyApiCommandDropdown
getOptions={() =>
({
method: "POST",
url: `${apiBaseUrl}/tasks`,
body: createTaskRequestObject(form.getValues()),
@@ -634,18 +632,9 @@ function CreateNewTaskForm({ initialValues }: Props) {
"Content-Type": "application/json",
"x-api-key": apiCredential ?? "<your-api-key>",
},
});
copyText(curl).then(() => {
toast({
title: "Copied cURL",
description: "cURL copied to clipboard",
});
});
}}
>
<CopyIcon className="mr-2 h-4 w-4" />
cURL
</Button>
}) satisfies ApiCommandOptions
}
/>
<Button type="submit" disabled={mutation.isPending}>
{mutation.isPending && (
<ReloadIcon className="mr-2 h-4 w-4 animate-spin" />

30
skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
View File

@@ -16,14 +16,14 @@ import { useApiCredential } from "@/hooks/useApiCredential";
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
import { SubmitEvent } from "@/types";
import { copyText } from "@/util/copyText";
import { apiBaseUrl } from "@/util/env";
import { CopyApiCommandDropdown } from "@/components/CopyApiCommandDropdown";
import { type ApiCommandOptions } from "@/util/apiCommands";
import { zodResolver } from "@hookform/resolvers/zod";
import { CopyIcon, PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
import { PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
import { ToastAction } from "@radix-ui/react-toast";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { AxiosError } from "axios";
import fetchToCurl from "fetch-to-curl";
import { useState } from "react";
import { useForm, useFormState } from "react-hook-form";
import { Link, useParams } from "react-router-dom";
@@ -737,11 +737,9 @@ function SavedTaskForm({ initialValues }: Props) {
</TaskFormSection>
<div className="flex justify-end gap-3">
<Button
type="button"
variant="secondary"
onClick={async () => {
const curl = fetchToCurl({
<CopyApiCommandDropdown
getOptions={() =>
({
method: "POST",
url: `${apiBaseUrl}/tasks`,
body: createTaskRequestObject(form.getValues()),
@@ -749,19 +747,9 @@ function SavedTaskForm({ initialValues }: Props) {
"Content-Type": "application/json",
"x-api-key": apiCredential ?? "<your-api-key>",
},
});
copyText(curl).then(() => {
toast({
variant: "success",
title: "Copied successfully",
description: "cURL copied to clipboard",
});
});
}}
>
<CopyIcon className="mr-2 h-4 w-4" />
cURL
</Button>
}) satisfies ApiCommandOptions
}
/>
<Button
type="submit"
name="save"

37
skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
View File

@@ -24,11 +24,11 @@ import { useApiCredential } from "@/hooks/useApiCredential";
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { CodeEditor } from "@/routes/workflows/components/CodeEditor";
import { WorkflowApiResponse } from "@/routes/workflows/types/workflowTypes";
import { copyText } from "@/util/copyText";
import { apiBaseUrl } from "@/util/env";
import { CopyIcon, PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
import { CopyApiCommandDropdown } from "@/components/CopyApiCommandDropdown";
import { type ApiCommandOptions } from "@/util/apiCommands";
import { PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import fetchToCurl from "fetch-to-curl";
import { Link, Outlet, useParams } from "react-router-dom";
import { statusIsFinalized } from "../types";
import { useTaskQuery } from "./hooks/useTaskQuery";
@@ -180,13 +180,19 @@ function TaskDetails() {
)}
</div>
<div className="flex items-center gap-2">
<Button
variant="secondary"
onClick={() => {
<CopyApiCommandDropdown
getOptions={() => {
if (!task) {
return;
return {
method: "GET",
url: "",
headers: {
"Content-Type": "application/json",
"x-api-key": "",
},
} satisfies ApiCommandOptions;
}
const curl = fetchToCurl({
return {
method: "POST",
url: `${apiBaseUrl}/tasks`,
body: createTaskRequestObject(task),
@@ -194,20 +200,9 @@ function TaskDetails() {
"Content-Type": "application/json",
"x-api-key": apiCredential ?? "<your-api-key>",
},
});
copyText(curl).then(() => {
toast({
variant: "success",
title: "Copied to Clipboard",
description:
"The cURL command has been copied to your clipboard.",
});
});
} satisfies ApiCommandOptions;
}}
>
<CopyIcon className="mr-2 h-4 w-4" />
cURL
</Button>
/>
{taskIsRunningOrQueued && (
<Dialog>
<DialogTrigger asChild>

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

@@ -14,11 +14,11 @@ import { Input } from "@/components/ui/input";
import { toast } from "@/components/ui/use-toast";
import { useApiCredential } from "@/hooks/useApiCredential";
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { copyText } from "@/util/copyText";
import { apiBaseUrl } from "@/util/env";
import { CopyIcon, PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
import { type ApiCommandOptions } from "@/util/apiCommands";
import { PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import fetchToCurl from "fetch-to-curl";
import { CopyApiCommandDropdown } from "@/components/CopyApiCommandDropdown";
import { useForm } from "react-hook-form";
import { useNavigate, useParams } from "react-router-dom";
import { z } from "zod";
@@ -333,17 +333,14 @@ function RunWorkflowForm({
</div>
<div className="flex justify-end gap-2">
<Button
type="button"
variant="secondary"
onClick={() => {
<CopyApiCommandDropdown
getOptions={() => {
const values = form.getValues();
const body = getRunWorkflowRequestBody(
values,
workflowParameters,
);
const curl = fetchToCurl({
return {
method: "POST",
url: `${apiBaseUrl}/workflows/${workflowPermanentId}/run`,
body,
@@ -351,21 +348,9 @@ function RunWorkflowForm({
"Content-Type": "application/json",
"x-api-key": apiCredential ?? "<your-api-key>",
},
});
copyText(curl).then(() => {
toast({
variant: "success",
title: "Copied to Clipboard",
description:
"The cURL command has been copied to your clipboard.",
});
});
} satisfies ApiCommandOptions;
}}
>
<CopyIcon className="mr-2 h-4 w-4" />
cURL
</Button>
/>
<Button type="submit" disabled={runWorkflowMutation.isPending}>
{runWorkflowMutation.isPending && (
<ReloadIcon className="mr-2 h-4 w-4 animate-spin" />

32
skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
View File

@@ -17,17 +17,14 @@ import { Skeleton } from "@/components/ui/skeleton";
import { toast } from "@/components/ui/use-toast";
import { useApiCredential } from "@/hooks/useApiCredential";
import { useCredentialGetter } from "@/hooks/useCredentialGetter";
import { copyText } from "@/util/copyText";
import { apiBaseUrl } from "@/util/env";
import {
CopyIcon,
FileIcon,
Pencil2Icon,
PlayIcon,
ReloadIcon,
} from "@radix-ui/react-icons";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import fetchToCurl from "fetch-to-curl";
import { Link, Outlet, useParams, useSearchParams } from "react-router-dom";
import { statusIsFinalized, statusIsRunningOrQueued } from "../tasks/types";
import { useWorkflowQuery } from "./hooks/useWorkflowQuery";
@@ -39,6 +36,8 @@ import { Label } from "@/components/ui/label";
import { CodeEditor } from "./components/CodeEditor";
import { cn } from "@/util/utils";
import { ScrollArea, ScrollAreaViewport } from "@/components/ui/scroll-area";
import { CopyApiCommandDropdown } from "@/components/CopyApiCommandDropdown";
import { type ApiCommandOptions } from "@/util/apiCommands";
function WorkflowRun() {
const [searchParams, setSearchParams] = useSearchParams();
@@ -183,13 +182,9 @@ function WorkflowRun() {
</div>
<div className="flex gap-2">
<Button
variant="secondary"
onClick={() => {
if (!workflowRun) {
return;
}
const curl = fetchToCurl({
<CopyApiCommandDropdown
getOptions={() =>
({
method: "POST",
url: `${apiBaseUrl}/workflows/${workflowPermanentId}/run`,
body: {
@@ -200,20 +195,9 @@ function WorkflowRun() {
"Content-Type": "application/json",
"x-api-key": apiCredential ?? "<your-api-key>",
},
});
copyText(curl).then(() => {
toast({
variant: "success",
title: "Copied to Clipboard",
description:
"The cURL command has been copied to your clipboard.",
});
});
}}
>
<CopyIcon className="mr-2 h-4 w-4" />
cURL
</Button>
}) satisfies ApiCommandOptions
}
/>
<Button asChild variant="secondary">
<Link to={`/workflows/${workflowPermanentId}/edit`}>
<Pencil2Icon className="mr-2 h-4 w-4" />

63
skyvern-frontend/src/util/apiCommands.ts Normal file
View File

@@ -0,0 +1,63 @@
import fetchToCurl from "fetch-to-curl";
export interface ApiCommandOptions {
method: string;
url: string;
headers?: Record<string, string>;
body?: unknown;
}
function toPowershellHashtable(value: unknown, indent = 0): string {
const indentation = " ".repeat(indent);
if (value === null) {
return `${indentation}$null`;
}
if (typeof value === "string") {
return `${indentation}"${value}"`;
}
if (typeof value === "number" || typeof value === "boolean") {
return `${indentation}${value}`;
}
if (Array.isArray(value)) {
const items = value
.map((item) => toPowershellHashtable(item, indent + 1))
.join("\n");
return `${indentation}@(\n${items}\n${indentation})`;
}
if (typeof value === "object") {
const entries = Object.entries(value as Record<string, unknown>)
.map(([k, v]) => {
const formatted =
typeof v === "object" && v !== null
? `@{\n${toPowershellHashtable(v, indent + 1)}\n${indentation}}`
: toPowershellHashtable(v, 0).trim();
return `${indentation}"${k}" = ${formatted}`;
})
.join("\n");
return entries;
}
return `${indentation}"${String(value)}"`;
}
function generateApiCommands(options: ApiCommandOptions): {
curl: string;
powershell: string;
} {
const curl = fetchToCurl(options);
const headerLines = Object.entries(options.headers ?? {})
.map(([k, v]) => ` "${k}" = "${v}"`)
.join("\n");
let bodySection = "";
if (typeof options.body !== "undefined") {
const bodyLines = toPowershellHashtable(options.body, 2);
bodySection = `\n Body = (ConvertTo-Json @{\n${bodyLines}\n })`;
}
const powershell = `$Params = @{\n Uri = "${options.url}"\n Method = "${options.method.toUpperCase()}"\n Headers = @{\n${headerLines}\n }${bodySection}\n}\nInvoke-RestMethod @Params`;
return { curl, powershell };
}
export { generateApiCommands };