feat(ui): Add commit workflow button

TracecatHQ · Jun 2, 2024 · 93359a4 · 93359a4
1 parent 6924156
commit 93359a4
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 39 deletions.
diff --git a/frontend/src/components/workspace/panel/workflow/form.tsx b/frontend/src/components/workspace/panel/workflow/form.tsx
@@ -5,13 +5,16 @@ import { zodResolver } from "@hookform/resolvers/zod"
 
 import "@radix-ui/react-dialog"
 
-import { useMutation, useQueryClient } from "@tanstack/react-query"
-import { SaveIcon, Settings2Icon } from "lucide-react"
+import {
+  GitPullRequestCreateArrowIcon,
+  SaveIcon,
+  Settings2Icon,
+} from "lucide-react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 
 import { Workflow } from "@/types/schemas"
-import { updateWorkflow } from "@/lib/workflow"
+import { useCommitWorkflow, useSaveWorkflow } from "@/lib/hooks"
 import {
   Accordion,
   AccordionContent,
@@ -35,7 +38,6 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
-import { toast } from "@/components/ui/use-toast"
 import { WorkflowSettings } from "@/components/workspace/panel/workflow/settings"
 
 const workflowFormSchema = z.object({
@@ -57,55 +59,48 @@ export function WorkflowForm({
     title: workflowTitle,
     description: workflowDescription,
   } = workflow
-  const queryClient = useQueryClient()
   const form = useForm<TWorkflowForm>({
     resolver: zodResolver(workflowFormSchema),
     defaultValues: {
       title: workflowTitle || "",
       description: workflowDescription || "",
     },
   })
+  const { mutateAsync: saveAsync } = useSaveWorkflow(workflowId)
+  const { mutateAsync: commitAsync } = useCommitWorkflow(workflowId)
 
-  function useUpdateWorkflow(workflowId: string) {
-    const mutation = useMutation({
-      mutationFn: (values: TWorkflowForm) => updateWorkflow(workflowId, values),
-      onSuccess: (data) => {
-        console.log("Workflow update successful", data)
-        queryClient.invalidateQueries({ queryKey: ["workflow", workflowId] })
-        toast({
-          title: "Saved workflow",
-          description: "Workflow updated successfully.",
-        })
-      },
-      onError: (error) => {
-        console.error("Failed to update workflow:", error)
-        toast({
-          title: "Error updating workflow",
-          description: "Could not update workflow. Please try again.",
-        })
-      },
-    })
-
-    return mutation
+  const onSubmit = async (values: TWorkflowForm) => {
+    console.log("Saving changes...")
+    await saveAsync(values)
   }
 
-  const { mutate } = useUpdateWorkflow(workflowId)
-  function onSubmit(values: TWorkflowForm) {
-    mutate(values)
+  const handleCommit = async () => {
+    console.log("Committing changes...")
+    await commitAsync()
   }
 
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
-        <div className="flex flex-1 justify-end space-x-2 p-4">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button type="submit" size="icon">
-                <SaveIcon className="size-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Save</TooltipContent>
-          </Tooltip>
+        <div className="flex flex-1 justify-between p-4">
+          <div className="space-x-2 ">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button type="button" size="icon" onClick={handleCommit}>
+                  <GitPullRequestCreateArrowIcon className="size-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Commit Changes</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button type="submit" size="icon">
+                  <SaveIcon className="size-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Save Changes</TooltipContent>
+            </Tooltip>
+          </div>
           <WorkflowSettings workflow={workflow} />
         </div>
         <Separator />

diff --git a/frontend/src/lib/hooks.ts b/frontend/src/lib/hooks.ts
@@ -10,7 +10,12 @@ import {
   fetchCaseEvents,
   updateCase,
 } from "@/lib/cases"
-import { getActionById, updateAction } from "@/lib/workflow"
+import {
+  commitWorkflow,
+  getActionById,
+  updateAction,
+  updateWorkflow,
+} from "@/lib/workflow"
 import { toast } from "@/components/ui/use-toast"
 import { UDFNodeType } from "@/components/workspace/canvas/udf-node"
 
@@ -201,3 +206,49 @@ export function useActionInputs(action?: Action) {
 
   return { actionInputs, setActionInputs }
 }
+
+export function useSaveWorkflow<T extends Object>(workflowId: string) {
+  const queryClient = useQueryClient()
+  const mutation = useMutation({
+    mutationFn: async (values: T) => await updateWorkflow(workflowId, values),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["workflow", workflowId] })
+      toast({
+        title: "Saved workflow changes",
+        description: "Workflow changes saved successfully.",
+      })
+    },
+    onError: (error) => {
+      console.error("Failed to save workflow:", error)
+      toast({
+        title: "Error saving workflow",
+        description: "Could not save workflow. Please try again.",
+      })
+    },
+  })
+
+  return mutation
+}
+
+export function useCommitWorkflow(workflowId: string) {
+  const queryClient = useQueryClient()
+  const mutation = useMutation({
+    mutationFn: async () => await commitWorkflow(workflowId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["workflow", workflowId] })
+      toast({
+        title: "Commited changes to workflow",
+        description: "New workflow deployment created successfully.",
+      })
+    },
+    onError: (error) => {
+      console.error("Failed to commit workflow:", error)
+      toast({
+        title: "Error commiting workflow",
+        description: "Could not commit workflow. Please try again.",
+      })
+    },
+  })
+
+  return mutation
+}
diff --git a/frontend/src/lib/workflow.ts b/frontend/src/lib/workflow.ts
@@ -262,3 +262,18 @@ export async function fetchAllPlaybooks(): Promise<WorkflowMetadata[]> {
     throw error
   }
 }
+
+/**
+ * Commit workflow changes and add a new `WorkflowDefinition` to the database.
+ */
+export async function commitWorkflow(
+  workflowId: string
+): Promise<WorkflowMetadata[]> {
+  try {
+    const response = await client.post(`/workflows/${workflowId}/commit`)
+    return response.data
+  } catch (error) {
+    console.error("Error commiting workflow:", error)
+    throw error
+  }
+}