Fix a bug where the first node wouldn't be added correctly (#1213)

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,

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));