Implement copy as curl (#198)

skyvern-frontend/package-lock.json

@@ -28,6 +28,7 @@
         "cors": "^2.8.5",
         "embla-carousel-react": "^8.0.0",
         "express": "^4.19.2",
+        "fetch-to-curl": "^0.6.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.51.1",
@@ -3448,6 +3449,11 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fetch-to-curl": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/fetch-to-curl/-/fetch-to-curl-0.6.0.tgz",
+      "integrity": "sha512-Gsn0baHnENueQrtvKGikEkaAJhfQYDbSFnyZvI/qnwiZtdIwiuK6iJ0BAKzS3bEzpWyUr6SV9uB4H3HUwl/yZA=="
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",

skyvern-frontend/package.json

@@ -34,6 +34,7 @@
     "cors": "^2.8.5",
     "embla-carousel-react": "^8.0.0",
     "express": "^4.19.2",
+    "fetch-to-curl": "^0.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.1",

skyvern-frontend/src/routes/tasks/create/CreateNewTaskForm.tsx

@@ -32,6 +32,8 @@ import {
 } from "@/components/ui/tooltip";
 import { ToastAction } from "@radix-ui/react-toast";
 import { Link } from "react-router-dom";
+import fetchToCurl from "fetch-to-curl";
+import { apiBaseUrl, envCredential } from "@/util/env";
 
 const createNewTaskFormSchema = z.object({
   url: z.string().url({
@@ -57,6 +59,7 @@ function createTaskRequestObject(formValues: CreateNewTaskFormValues) {
     navigation_goal: formValues.navigationGoal ?? "",
     data_extraction_goal: formValues.dataExtractionGoal ?? "",
     proxy_location: "NONE",
+    error_code_mapping: null,
     navigation_payload: formValues.navigationPayload ?? "",
     extracted_information_schema: formValues.extractedInformationSchema ?? "",
   };
@@ -286,7 +289,28 @@ function CreateNewTaskForm({ initialValues }: Props) {
           )}
         />
         <div className="flex justify-end gap-3">
-          <Button variant="outline">Copy cURL</Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={async () => {
+              const curl = fetchToCurl({
+                method: "POST",
+                url: `${apiBaseUrl}/tasks`,
+                body: createTaskRequestObject(form.getValues()),
+                headers: {
+                  "Content-Type": "application/json",
+                  "x-api-key": envCredential ?? "",
+                },
+              });
+              await navigator.clipboard.writeText(curl);
+              toast({
+                title: "Copied cURL",
+                description: "cURL copied to clipboard",
+              });
+            }}
+          >
+            Copy cURL
+          </Button>
           <Button type="submit">Create</Button>
         </div>
       </form>