Add clipboard copy functionality that works over HTTP (#4446)

skyvern-frontend/src/routes/workflows/editor/Workspace.tsx

@@ -73,6 +73,7 @@ import {
 import { useWorkflowParametersStore } from "@/store/WorkflowParametersStore";
 import { getCode, getOrderedBlockLabels } from "@/routes/workflows/utils";
 import { DebuggerBlockRuns } from "@/routes/workflows/debugger/DebuggerBlockRuns";
+import { copyText } from "@/util/copyText";
 import { cn } from "@/util/utils";
 
 import { FlowRenderer, type FlowRendererProps } from "./FlowRenderer";
@@ -196,8 +197,8 @@ function CopyAndExplainCode({ code }: { code: string }) {
 function CopyText({ className, text }: { className?: string; text: string }) {
   const [wasCopied, setWasCopied] = useState(false);
 
-  function handleCopy(code: string) {
-    navigator.clipboard.writeText(code);
+  async function handleCopy(code: string) {
+    await copyText(code);
     setWasCopied(true);
     setTimeout(() => setWasCopied(false), 2000);
   }

skyvern-frontend/src/routes/workflows/editor/nodes/HttpRequestNode/CurlImportDialog.tsx

@@ -21,6 +21,7 @@ import {
 } from "@radix-ui/react-icons";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
+import { copyText } from "@/util/copyText";
 
 type Props = {
   onImport: (data: {
@@ -156,12 +157,20 @@ export function CurlImportDialog({ onImport, children }: Props) {
     }
   };
 
-  const copyExample = (example: string) => {
-    navigator.clipboard.writeText(example);
-    toast({
-      title: "Copied",
-      description: "Example copied to clipboard",
-    });
+  const copyExample = async (example: string) => {
+    const success = await copyText(example);
+    if (success) {
+      toast({
+        title: "Copied",
+        description: "Example copied to clipboard",
+      });
+    } else {
+      toast({
+        title: "Error",
+        description: "Failed to copy example",
+        variant: "destructive",
+      });
+    }
   };
 
   return (

skyvern-frontend/src/routes/workflows/editor/nodes/HttpRequestNode/HttpUtils.tsx

@@ -8,6 +8,7 @@ import {
 } from "@radix-ui/react-icons";
 import { useState } from "react";
 import { toast } from "@/components/ui/use-toast";
+import { copyText } from "@/util/copyText";
 import { cn } from "@/util/utils";
 
 // HTTP Method Badge Component
@@ -140,16 +141,16 @@ export function CopyToCurlButton({
   };
 
   const handleCopy = async () => {
-    try {
-      const curlCommand = generateCurlCommand();
-      await navigator.clipboard.writeText(curlCommand);
+    const curlCommand = generateCurlCommand();
+    const success = await copyText(curlCommand);
+    if (success) {
       setCopied(true);
       toast({
         title: "Copied!",
         description: "cURL command copied to clipboard",
       });
       setTimeout(() => setCopied(false), 2000);
-    } catch (error) {
+    } else {
       toast({
         title: "Error",
         description: "Failed to copy cURL command",