feat(web): add copy workflow button

web/src/app/workflows/[workflow_id]/page.tsx

@@ -2,6 +2,7 @@ import { DeploymentsTable, RunsTable } from "../../../components/RunsTable";
 import { findFirstTableWithVersion } from "../../../server/findFirstTableWithVersion";
 import { MachinesWSMain } from "@/components/MachinesWS";
 import {
+  CopyWorkflowVersion,
   CreateDeploymentButton,
   MachineSelect,
   RunWorkflowButton,
@@ -45,6 +46,7 @@ export default async function Page({
               <MachineSelect machines={machines} />
               <RunWorkflowButton workflow={workflow} machines={machines} />
               <CreateDeploymentButton workflow={workflow} machines={machines} />
+              <CopyWorkflowVersion workflow={workflow} />
             </div>
 
             <VersionDetails workflow={workflow} />

web/src/components/CopyButton.tsx

@@ -21,4 +21,4 @@ export function CopyButton({
       <Copy size={14} />
     </Button>
   );
-}
+}

web/src/components/VersionSelect.tsx

@@ -30,9 +30,10 @@ import { createRun } from "@/server/createRun";
 import { createDeployments } from "@/server/curdDeploments";
 import type { getMachines } from "@/server/curdMachine";
 import type { findFirstTableWithVersion } from "@/server/findFirstTableWithVersion";
-import { MoreVertical, Play } from "lucide-react";
+import { Copy, MoreVertical, Play } from "lucide-react";
 import { parseAsInteger, useQueryState } from "next-usequerystate";
 import { useState } from "react";
+import { toast } from "sonner";
 
 export function VersionSelect({
   workflow,
@@ -208,6 +209,51 @@ export function CreateDeploymentButton({
   );
 }
 
+export function CopyWorkflowVersion({
+  workflow,
+}: {
+  workflow: Awaited<ReturnType<typeof findFirstTableWithVersion>>;
+}) {
+  const [version] = useQueryState("version", {
+    defaultValue: workflow?.versions[0].version ?? 1,
+    ...parseAsInteger,
+  });
+  const workflow_version = workflow?.versions.find(
+    (x) => x.version === version
+  );
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button className="gap-2" variant="outline">
+          Copy Workflow <Copy size={14} />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuItem
+          onClick={async () => {
+            navigator.clipboard.writeText(
+              JSON.stringify(workflow_version?.workflow)
+            );
+            toast("Copied to clipboard");
+          }}
+        >
+          Copy (JSON)
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={async () => {
+            navigator.clipboard.writeText(
+              JSON.stringify(workflow_version?.workflow_api)
+            );
+            toast("Copied to clipboard");
+          }}
+        >
+          Copy API (JSON)
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 export function getWorkflowVersionFromVersionIndex(
   workflow: Awaited<ReturnType<typeof findFirstTableWithVersion>>,
   version: number