diff --git a/skyvern-frontend/src/components/CopyApiCommandDropdown.tsx b/skyvern-frontend/src/components/CopyApiCommandDropdown.tsx new file mode 100644 index 00000000..57dd40db --- /dev/null +++ b/skyvern-frontend/src/components/CopyApiCommandDropdown.tsx @@ -0,0 +1,59 @@ +import { CopyIcon } from "@radix-ui/react-icons"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { Button } from "@/components/ui/button"; +import { useToast } from "@/components/ui/use-toast"; +import { copyText } from "@/util/copyText"; +import { + type ApiRequest, + getCurlCommand, + getPowerShellCommand, +} from "@/util/apiCommands"; + +interface Props { + getRequest: () => ApiRequest; +} + +function CopyApiCommandDropdown({ getRequest }: Props) { + const { toast } = useToast(); + + const handleCopy = async (type: "curl" | "powershell") => { + const request = getRequest(); + const text = + type === "curl" ? getCurlCommand(request) : getPowerShellCommand(request); + await copyText(text); + toast({ + variant: "success", + title: "Copied to Clipboard", + description: + type === "curl" + ? "The cURL command has been copied to your clipboard." + : "The PowerShell command has been copied to your clipboard.", + }); + }; + + return ( + + + + + + handleCopy("curl")}> + Copy cURL (Unix/Linux/macOS) + + handleCopy("powershell")}> + Copy PowerShell (Windows) + + + + ); +} + +export { CopyApiCommandDropdown }; diff --git a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx index 8631daa3..cf697f22 100644 --- a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx +++ b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx @@ -20,14 +20,12 @@ 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 { 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"; @@ -39,6 +37,7 @@ import { } from "./taskFormTypes"; import { ProxySelector } from "@/components/ProxySelector"; import { Switch } from "@/components/ui/switch"; +import { CopyApiCommandDropdown } from "@/components/CopyApiCommandDropdown"; type Props = { initialValues: CreateNewTaskFormValues; }; @@ -622,30 +621,17 @@ function CreateNewTaskForm({ initialValues }: Props) {
- + ({ + method: "POST", + url: `${apiBaseUrl}/tasks`, + body: createTaskRequestObject(form.getValues()), + headers: { + "Content-Type": "application/json", + "x-api-key": apiCredential ?? "", + }, + })} + /> + ({ + method: "POST", + url: `${apiBaseUrl}/tasks`, + body: createTaskRequestObject(form.getValues()), + headers: { + "Content-Type": "application/json", + "x-api-key": apiCredential ?? "", + }, + })} + /> + ({ + method: "POST", + url: `${apiBaseUrl}/tasks`, + body: task ? createTaskRequestObject(task) : undefined, + headers: { + "Content-Type": "application/json", + "x-api-key": apiCredential ?? "", + }, + })} + /> {taskIsRunningOrQueued && ( diff --git a/skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx b/skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx index b7974a7b..540c702f 100644 --- a/skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx +++ b/skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx @@ -14,11 +14,10 @@ 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 { 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,39 +332,20 @@ function RunWorkflowForm({
- + ), + headers: { + "Content-Type": "application/json", + "x-api-key": apiCredential ?? "", + }, + })} + />
- + ({ + method: "POST", + url: `${apiBaseUrl}/workflows/${workflowPermanentId}/run`, + body: { + data: workflowRun?.parameters, + proxy_location: "RESIDENTIAL", + }, + headers: { + "Content-Type": "application/json", + "x-api-key": apiCredential ?? "", + }, + })} + />