Revert "Revert "Your commit message""

This reverts commit 27c8539e6f.

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 (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="secondary">
+          <CopyIcon className="mr-2 h-4 w-4" />
+          Copy API Command
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onSelect={() => handleCopy("curl")}>
+          Copy cURL (Unix/Linux/macOS)
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={() => handleCopy("powershell")}>
+          Copy PowerShell (Windows)
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export { CopyApiCommandDropdown };

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) {
         </TaskFormSection>
 
         <div className="flex justify-end gap-3">
-          <Button
+          <CopyApiCommandDropdown
-            type="button"
+            getRequest={() => ({
-            variant="secondary"
+              method: "POST",
-            onClick={async () => {
+              url: `${apiBaseUrl}/tasks`,
-              const curl = fetchToCurl({
+              body: createTaskRequestObject(form.getValues()),
-                method: "POST",
+              headers: {
-                url: `${apiBaseUrl}/tasks`,
+                "Content-Type": "application/json",
-                body: createTaskRequestObject(form.getValues()),
+                "x-api-key": apiCredential ?? "<your-api-key>",
-                headers: {
+              },
-                  "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>
           <Button type="submit" disabled={mutation.isPending}>
             {mutation.isPending && (
               <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />

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

@@ -16,14 +16,12 @@ 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 { 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";
@@ -33,6 +31,7 @@ import { TaskFormSection } from "./TaskFormSection";
 import { savedTaskFormSchema, SavedTaskFormValues } from "./taskFormTypes";
 import { OrganizationApiResponse, ProxyLocation } from "@/api/types";
 import { ProxySelector } from "@/components/ProxySelector";
+import { CopyApiCommandDropdown } from "@/components/CopyApiCommandDropdown";
 
 type Props = {
   initialValues: SavedTaskFormValues;
@@ -737,31 +736,17 @@ function SavedTaskForm({ initialValues }: Props) {
         </TaskFormSection>
 
         <div className="flex justify-end gap-3">
-          <Button
+          <CopyApiCommandDropdown
-            type="button"
+            getRequest={() => ({
-            variant="secondary"
+              method: "POST",
-            onClick={async () => {
+              url: `${apiBaseUrl}/tasks`,
-              const curl = fetchToCurl({
+              body: createTaskRequestObject(form.getValues()),
-                method: "POST",
+              headers: {
-                url: `${apiBaseUrl}/tasks`,
+                "Content-Type": "application/json",
-                body: createTaskRequestObject(form.getValues()),
+                "x-api-key": apiCredential ?? "<your-api-key>",
-                headers: {
+              },
-                  "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>
           <Button
             type="submit"
             name="save"

skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx

@@ -24,11 +24,10 @@ 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 { PlayIcon, ReloadIcon } from "@radix-ui/react-icons";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import fetchToCurl from "fetch-to-curl";
+import { CopyApiCommandDropdown } from "@/components/CopyApiCommandDropdown";
 import { Link, Outlet, useParams } from "react-router-dom";
 import { statusIsFinalized } from "../types";
 import { useTaskQuery } from "./hooks/useTaskQuery";
@@ -180,34 +179,17 @@ function TaskDetails() {
             )}
           </div>
           <div className="flex items-center gap-2">
-            <Button
+            <CopyApiCommandDropdown
-              variant="secondary"
+              getRequest={() => ({
-              onClick={() => {
+                method: "POST",
-                if (!task) {
+                url: `${apiBaseUrl}/tasks`,
-                  return;
+                body: task ? createTaskRequestObject(task) : undefined,
-                }
+                headers: {
-                const curl = fetchToCurl({
+                  "Content-Type": "application/json",
-                  method: "POST",
+                  "x-api-key": apiCredential ?? "<your-api-key>",
-                  url: `${apiBaseUrl}/tasks`,
+                },
-                  body: createTaskRequestObject(task),
+              })}
-                  headers: {
+            />
-                    "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>
             {taskIsRunningOrQueued && (
               <Dialog>
                 <DialogTrigger asChild>

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({
         </div>
 
         <div className="flex justify-end gap-2">
-          <Button
+          <CopyApiCommandDropdown
-            type="button"
+            getRequest={() => ({
-            variant="secondary"
+              method: "POST",
-            onClick={() => {
+              url: `${apiBaseUrl}/workflows/${workflowPermanentId}/run`,
-              const values = form.getValues();
+              body: getRunWorkflowRequestBody(
-              const body = getRunWorkflowRequestBody(
+                form.getValues(),
-                values,
                 workflowParameters,
-              );
+              ),
-
+              headers: {
-              const curl = fetchToCurl({
+                "Content-Type": "application/json",
-                method: "POST",
+                "x-api-key": apiCredential ?? "<your-api-key>",
-                url: `${apiBaseUrl}/workflows/${workflowPermanentId}/run`,
+              },
-                body,
+            })}
-                headers: {
+          />
-                  "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>
           <Button type="submit" disabled={runWorkflowMutation.isPending}>
             {runWorkflowMutation.isPending && (
               <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />

skyvern-frontend/src/routes/workflows/WorkflowRun.tsx

@@ -17,17 +17,15 @@ 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 { CopyApiCommandDropdown } from "@/components/CopyApiCommandDropdown";
 import { Link, Outlet, useParams, useSearchParams } from "react-router-dom";
 import { statusIsFinalized, statusIsRunningOrQueued } from "../tasks/types";
 import { useWorkflowQuery } from "./hooks/useWorkflowQuery";
@@ -183,37 +181,20 @@ function WorkflowRun() {
         </div>
 
         <div className="flex gap-2">
-          <Button
+          <CopyApiCommandDropdown
-            variant="secondary"
+            getRequest={() => ({
-            onClick={() => {
+              method: "POST",
-              if (!workflowRun) {
+              url: `${apiBaseUrl}/workflows/${workflowPermanentId}/run`,
-                return;
+              body: {
-              }
+                data: workflowRun?.parameters,
-              const curl = fetchToCurl({
+                proxy_location: "RESIDENTIAL",
-                method: "POST",
+              },
-                url: `${apiBaseUrl}/workflows/${workflowPermanentId}/run`,
+              headers: {
-                body: {
+                "Content-Type": "application/json",
-                  data: workflowRun?.parameters,
+                "x-api-key": apiCredential ?? "<your-api-key>",
-                  proxy_location: "RESIDENTIAL",
+              },
-                },
+            })}
-                headers: {
+          />
-                  "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>
           <Button asChild variant="secondary">
             <Link to={`/workflows/${workflowPermanentId}/edit`}>
               <Pencil2Icon className="mr-2 h-4 w-4" />

skyvern-frontend/src/util/apiCommands.ts

@@ -0,0 +1,32 @@
+import fetchToCurl from "fetch-to-curl";
+
+export type ApiRequest = {
+  method: string;
+  url: string;
+  body?: unknown;
+  headers: Record<string, string>;
+};
+
+export function getCurlCommand(request: ApiRequest): string {
+  return fetchToCurl(request);
+}
+
+export function getPowerShellCommand(request: ApiRequest): string {
+  const { method, url, headers, body } = request;
+  const headerLines = Object.entries(headers)
+    .map(([key, value]) => `    '${key}' = '${value}'`)
+    .join("\n");
+  const bodyJson = body ? JSON.stringify(body, null, 2) : undefined;
+  const bodyLine = bodyJson
+    ? `  Body = '${bodyJson.replace(/'/g, "''")}'\n`
+    : "";
+  return (
+    `$Params = @{\n` +
+    `  Uri = '${url}'\n` +
+    `  Method = '${method}'\n` +
+    `  Headers = @{\n${headerLines}\n  }\n` +
+    bodyLine +
+    `}\n` +
+    `Invoke-RestMethod @Params`
+  );
+}