Export workflow (#987)

Author: wintonzheng

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

@@ -1,4 +1,5 @@
 import { getClient } from "@/api/AxiosClient";
+import { GarbageIcon } from "@/components/icons/GarbageIcon";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -14,35 +15,67 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { toast } from "@/components/ui/use-toast";
 import { useCredentialGetter } from "@/hooks/useCredentialGetter";
 import {
   CopyIcon,
   DotsHorizontalIcon,
+  DownloadIcon,
   ReloadIcon,
 } from "@radix-ui/react-icons";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { AxiosError } from "axios";
-import { useWorkflowQuery } from "./hooks/useWorkflowQuery";
+import { useNavigate } from "react-router-dom";
 import { stringify as convertToYAML } from "yaml";
+import { convert } from "./editor/workflowEditorUtils";
+import { useWorkflowQuery } from "./hooks/useWorkflowQuery";
 import { WorkflowApiResponse } from "./types/workflowTypes";
-import { useNavigate } from "react-router-dom";
 import { WorkflowCreateYAMLRequest } from "./types/workflowYamlTypes";
-import { convert } from "./editor/workflowEditorUtils";
-import { GarbageIcon } from "@/components/icons/GarbageIcon";
 
 type Props = {
   id: string;
 };
 
+function downloadFile(fileName: string, contents: string) {
+  const element = document.createElement("a");
+  element.setAttribute(
+    "href",
+    "data:text/plain;charset=utf-8," + encodeURIComponent(contents),
+  );
+  element.setAttribute("download", fileName);
+
+  element.style.display = "none";
+  document.body.appendChild(element);
+
+  element.click();
+
+  document.body.removeChild(element);
+}
+
 function WorkflowActions({ id }: Props) {
   const credentialGetter = useCredentialGetter();
   const queryClient = useQueryClient();
   const { data: workflow } = useWorkflowQuery({ workflowPermanentId: id });
   const navigate = useNavigate();
 
+  function handleExport(type: "json" | "yaml") {
+    if (!workflow) {
+      return;
+    }
+    const fileName = `${workflow.title}.${type}`;
+    const contents =
+      type === "json"
+        ? JSON.stringify(convert(workflow), null, 2)
+        : convertToYAML(convert(workflow));
+    downloadFile(fileName, contents);
+  }
+
   const createWorkflowMutation = useMutation({
     mutationFn: async (workflow: WorkflowCreateYAMLRequest) => {
       const client = await getClient(credentialGetter);
@@ -98,14 +131,42 @@ function WorkflowActions({ id }: Props) {
               if (!workflow) {
                 return;
               }
-              const clonedWorkflow = convert(workflow);
+              const clonedWorkflow = convert({
+                ...workflow,
+                title: `Copy of ${workflow.title}`,
+              });
               createWorkflowMutation.mutate(clonedWorkflow);
             }}
             className="p-2"
           >
             <CopyIcon className="mr-2 h-4 w-4" />
             Clone Workflow
           </DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              <DownloadIcon className="mr-2 h-4 w-4" />
+              Export as...
+            </DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem
+                  onSelect={() => {
+                    handleExport("yaml");
+                  }}
+                >
+                  YAML
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onSelect={() => {
+                    handleExport("json");
+                  }}
+                >
+                  JSON
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+
           <DialogTrigger>
             <DropdownMenuItem className="p-2">
               <GarbageIcon className="mr-2 h-4 w-4 text-destructive" />

skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts

@@ -1065,12 +1065,11 @@ function convertBlocks(blocks: Array<WorkflowBlock>): Array<BlockYAML> {
 }
 
 function convert(workflow: WorkflowApiResponse): WorkflowCreateYAMLRequest {
-  const title = `Copy of ${workflow.title}`;
   const userParameters = workflow.workflow_definition.parameters.filter(
     (parameter) => parameter.parameter_type !== "output",
   );
   return {
-    title: title,
+    title: workflow.title,
     description: workflow.description,
     proxy_location: workflow.proxy_location,
     webhook_callback_url: workflow.webhook_callback_url,