Fix saving and deleting workflows

dashboard/app/(copilot)/copilot/[copilot_id]/flows/_parts/AddFlowModal.tsx

@@ -12,34 +12,46 @@ import { toast } from '@/components/ui/use-toast';
 export function AddFlowModal() {
     const [modalOpen, setModalOpen] = useState(false);
     const { id: copilotId } = useCopilot()
+    const [loading, setLoading] = useState(false)
     // this should create new flow on the server and then update the state
     async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
+        setLoading(true)
         e.preventDefault();
         const data = new FormData(e.currentTarget);
         const [name, description] = [
             data.get("name")?.toString(),
             data.get("description")?.toString(),
         ];
         if (name && description) {
-            const { data } = await createWorkflowByBotId(copilotId, {
-                info: {},
-                name,
-                description,
-                on_failure: [],
-                steps: [], on_success: [],
-                requires_confirmation: true, opencopilot: {
-                    version: "0.0.1",
-                },
-            })
-            if (data.workflow_id) {
+            try {
+                const { data } = await createWorkflowByBotId(copilotId, {
+                    info: {},
+                    name,
+                    description,
+                    on_failure: [],
+                    steps: [], on_success: [],
+                    requires_confirmation: true, opencopilot: {
+                        version: "0.0.1",
+                    },
+                })
+                if (data.workflow_id) {
+                    toast({
+                        title: 'Flow created',
+                        description: 'Your flow has been created',
+                        variant: 'success'
+                    })
+                }
+                mutateFlows(copilotId);
+                setLoading(false)
+                setModalOpen(false);
+            } catch (error) {
+                setLoading(false);
                 toast({
-                    title: 'Flow created',
-                    description: 'Your flow has been created',
-                    variant: 'success'
+                    title: 'Error',
+                    description: 'Something went wrong',
+                    variant: 'destructive'
                 })
             }
-            mutateFlows(copilotId);
-            setModalOpen(false);
         }
     }
     return (
@@ -70,9 +82,9 @@ export function AddFlowModal() {
                         className="my-2"
                     />
                     <AlertDialogFooter className='space-x-4'>
-                        <AlertDialogAction type='submit'>
+                        <Button type='submit' loading={loading}>
                             Create
-                        </AlertDialogAction>
+                        </Button>
                         <AlertDialogCancel>
                             Cancel
                         </AlertDialogCancel>

dashboard/app/(copilot)/copilot/[copilot_id]/flows/_parts/WorkflowsList.tsx

@@ -17,7 +17,7 @@ export function WorkflowsList({ copilot_id }: { copilot_id: string }) {
   return (
     <ul className="px-2 space-y-2">
       {
-        isLoading ? <Loader /> : _.isEmpty(flows?.workflows) ? <EmptyBlock>
+        isLoading ? <Loader className="grow-0 mx-auto w-fit" /> : _.isEmpty(flows?.workflows) ? <EmptyBlock>
           <p className="text-sm text-gray-500">No flows yet</p>
         </EmptyBlock> :
           flows?.workflows.map((flow, i) => (

dashboard/app/(copilot)/copilot/[copilot_id]/flows/page.tsx

@@ -16,20 +16,27 @@ function SaveBtn() {
   const { state } = useController();
   const [isEditing, workflowId] = useIsEditing();
   const [loading, setLoading] = useState(false)
+  const { id: copilotId } = useCopilot();
   async function handleSave() {
     if (!workflowId || !state.name || !state.description) return;
+    setLoading(true)
     try {
-      setLoading(true)
-      const { data } = await updateWorkflowById(workflowId, {
-        ...state,
+      const flow = {
         name: state.name,
         description: state.description,
         steps: state.steps,
         info: {
           version: "0.0.1"
         },
         requires_confirmation: true,
-      })
+        on_failure: [],
+        on_success: [],
+        opencopilot: {
+          version: "0.0.1",
+        },
+        bot_id: copilotId
+      }
+      const { data } = await updateWorkflowById(workflowId, flow)
       if (data) {
         mutate(data._id)
         toast({
@@ -40,6 +47,7 @@ function SaveBtn() {
     } catch (error) {
       setLoading(false)
     }
+    setLoading(false)
   }
   return isEditing ? <Button loading={loading} onClick={handleSave}>Save</Button> : null
 }
@@ -55,6 +63,10 @@ function DeleteBtn() {
       const resp = await deleteWorkflowById(workflowId);
       if (resp.status === 200) {
         mutateFlows(copilotId)
+        toast({
+          title: "Deleted successfully",
+          variant: "success"
+        })
         reset()
       }
     } catch (error) {

dashboard/components/domain/flows-editor/editor/PathButton.tsx

@@ -50,7 +50,7 @@ export function PathButton({ path }: { path: TransformedPath }) {
                         if (isPresentInNodes(method.method)) {
                           return;
                         }
-                        const node: NodeData = {
+                        const node: NodeData & { operation: string } = {
                           id: `${path.path}-${method.method}`,
                           path: path.path,
                           method: method.method,
@@ -59,6 +59,7 @@ export function PathButton({ path }: { path: TransformedPath }) {
                           tags: method.tags,
                           summary: method.summary,
                           operationId: method.operationId,
+                          operation: "REQUEST",
 
                         }
                         if (mode.type === "append-node") {