From 37fd1ffa9934bb02cbd8ed5d1a389b218d9d98f7 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Mon, 18 Nov 2024 08:28:08 -0800
Subject: [PATCH] Fix a bug where the first node wouldn't be added correctly
 (#1213)

---
 .../src/routes/workflows/editor/FlowRenderer.tsx    |  4 ++--
 .../routes/workflows/editor/workflowEditorUtils.ts  | 13 ++++++++-----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx b/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
index 205ed7b1..84c31996 100644
--- a/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/FlowRenderer.tsx
@@ -317,7 +317,7 @@ function FlowRenderer({
     newNodes.push(node);
     if (previous) {
       const newEdge = {
-        id: `edge-${previous}-${id}`,
+        id: nanoid(),
         type: "edgeWithAddButton",
         source: previous,
         target: id,
@@ -329,7 +329,7 @@ function FlowRenderer({
     }
     if (next) {
       const newEdge = {
-        id: `edge-${id}-${next}`,
+        id: nanoid(),
         type: connectingEdgeType,
         source: id,
         target: next,
diff --git a/skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts b/skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts
index d8384bba..79be6e0b 100644
--- a/skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts
+++ b/skyvern-frontend/src/routes/workflows/editor/workflowEditorUtils.ts
@@ -376,7 +376,10 @@ function getElements(blocks: Array<WorkflowBlock>): {
   const nodes: Array<AppNode> = [];
   const edges: Array<Edge> = [];
 
-  data.forEach((d) => {
+  const startNodeId = nanoid();
+  nodes.push(startNode(startNodeId));
+
+  data.forEach((d, index) => {
     const node = convertToNode(
       {
         id: d.id,
@@ -388,6 +391,9 @@ function getElements(blocks: Array<WorkflowBlock>): {
     if (d.previous) {
       edges.push(edgeWithAddButton(d.previous, d.id));
     }
+    if (index === 0) {
+      edges.push(edgeWithAddButton(startNodeId, d.id));
+    }
   });
 
   const loopBlocks = data.filter((d) => d.block.block_type === "for_loop");
@@ -411,18 +417,15 @@ function getElements(blocks: Array<WorkflowBlock>): {
     }
   });
 
-  const startNodeId = nanoid();
   const adderNodeId = nanoid();
 
-  if (nodes.length === 0) {
-    nodes.push(startNode(startNodeId));
+  if (data.length === 0) {
     nodes.push(nodeAdderNode(adderNodeId));
     edges.push(defaultEdge(startNodeId, adderNodeId));
   } else {
     const firstNode = data.find(
       (d) => d.previous === null && d.parentId === null,
     );
-    nodes.push(startNode(startNodeId));
     edges.push(edgeWithAddButton(startNodeId, firstNode!.id));
     const lastNode = data.find((d) => d.next === null && d.parentId === null)!;
     edges.push(defaultEdge(lastNode.id, adderNodeId));