From 4872f9fa4ea6d576039fc6cfe8609d306214bf1e Mon Sep 17 00:00:00 2001
From: Prakash Maheshwaran
 <73785492+Prakashmaheshwaran@users.noreply.github.com>
Date: Mon, 9 Jun 2025 21:01:45 -0400
Subject: [PATCH] add PowerShell command option to API command copy dropdown
 (#2633)

---
 .../src/components/CopyApiCommandDropdown.tsx | 65 +++++++++++++++++++
 .../routes/tasks/create/CreateNewTaskForm.tsx | 29 +++------
 .../src/routes/tasks/create/SavedTaskForm.tsx | 30 +++------
 .../src/routes/tasks/detail/TaskDetails.tsx   | 37 +++++------
 .../src/routes/workflows/RunWorkflowForm.tsx  | 31 +++------
 .../src/routes/workflows/WorkflowRun.tsx      | 32 +++------
 skyvern-frontend/src/util/apiCommands.ts      | 63 ++++++++++++++++++
 7 files changed, 178 insertions(+), 109 deletions(-)
 create mode 100644 skyvern-frontend/src/components/CopyApiCommandDropdown.tsx
 create mode 100644 skyvern-frontend/src/util/apiCommands.ts

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 (
+    <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 };
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) {
         </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" />
diff --git a/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx b/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
index 8b6e7ac9..18515a35 100644
--- a/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
+++ b/skyvern-frontend/src/routes/tasks/create/SavedTaskForm.tsx
@@ -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"
diff --git a/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx b/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
index 12955277..a81f0e35 100644
--- a/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
+++ b/skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx
@@ -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>
diff --git a/skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx b/skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx
index b7974a7b..5d1a6748 100644
--- a/skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx
+++ b/skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx
@@ -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" />
diff --git a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
index d8b2df08..5d2f59cc 100644
--- a/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
+++ b/skyvern-frontend/src/routes/workflows/WorkflowRun.tsx
@@ -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" />
diff --git a/skyvern-frontend/src/util/apiCommands.ts b/skyvern-frontend/src/util/apiCommands.ts
new file mode 100644
index 00000000..9dd9e46c
--- /dev/null
+++ b/skyvern-frontend/src/util/apiCommands.ts
@@ -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 };