diff --git a/skyvern-frontend/src/components/CopyApiCommandDropdown.tsx b/skyvern-frontend/src/components/CopyApiCommandDropdown.tsx new file mode 100644 index 00000000..6ba00c2b --- /dev/null +++ b/skyvern-frontend/src/components/CopyApiCommandDropdown.tsx @@ -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 ( + + + + + Copy API Command + + + + { + 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) + + { + 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) + + + + ); +} + +export { CopyApiCommandDropdown }; diff --git a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx index 8631daa3..aa079dba 100644 --- a/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx +++ b/skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx @@ -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) {