fix(socket): keep remote workflow operation side effects in sync

apps/sim/hooks/use-collaborative-workflow.ts

@@ -10,6 +10,7 @@ import { useUndoRedo } from '@/hooks/use-undo-redo'
 import {
   BLOCK_OPERATIONS,
   BLOCKS_OPERATIONS,
+  EDGE_OPERATIONS,
   EDGES_OPERATIONS,
   OPERATION_TARGETS,
   SUBBLOCK_OPERATIONS,
@@ -31,6 +32,19 @@ import { findAllDescendantNodes, isBlockProtected } from '@/stores/workflows/wor
 
 const logger = createLogger('CollaborativeWorkflow')
 
+function parseUndoRedoStackKey(key: string): { workflowId: string; userId: string } | null {
+  const separatorIndex = key.indexOf(':')
+
+  if (separatorIndex <= 0 || separatorIndex === key.length - 1) {
+    return null
+  }
+
+  return {
+    workflowId: key.slice(0, separatorIndex),
+    userId: key.slice(separatorIndex + 1),
+  }
+}
+
 export function useCollaborativeWorkflow() {
   const undoRedo = useUndoRedo()
   const isUndoRedoInProgress = useRef(false)
@@ -191,6 +205,25 @@ export function useCollaborativeWorkflow() {
                 .getState()
                 .setBlockCanonicalMode(payload.id, payload.canonicalId, payload.canonicalMode)
               break
+            case BLOCK_OPERATIONS.UPDATE_POSITION: {
+              if (payload.id && payload.position) {
+                useWorkflowStore
+                  .getState()
+                  .batchUpdatePositions([{ id: payload.id, position: payload.position }])
+              }
+              break
+            }
+            case BLOCK_OPERATIONS.UPDATE_PARENT: {
+              const block = useWorkflowStore.getState().blocks[payload.id]
+              if (block) {
+                useWorkflowStore
+                  .getState()
+                  .batchUpdateBlocksWithParent([
+                    { id: payload.id, position: block.position, parentId: payload.parentId },
+                  ])
+              }
+              break
+            }
           }
         } else if (target === OPERATION_TARGETS.BLOCKS) {
           switch (operation) {
@@ -219,9 +252,9 @@ export function useCollaborativeWorkflow() {
                 const undoRedoStore = useUndoRedoStore.getState()
                 const stackKeys = Object.keys(undoRedoStore.stacks)
                 stackKeys.forEach((key) => {
-                  const [wfId, uId] = key.split(':')
-                  if (wfId === activeWorkflowId) {
-                    undoRedoStore.pruneInvalidEntries(wfId, uId, graph)
+                  const parsedKey = parseUndoRedoStackKey(key)
+                  if (parsedKey?.workflowId === activeWorkflowId) {
+                    undoRedoStore.pruneInvalidEntries(parsedKey.workflowId, parsedKey.userId, graph)
                   }
                 })
               }
@@ -241,6 +274,37 @@ export function useCollaborativeWorkflow() {
               break
             }
           }
+        } else if (target === OPERATION_TARGETS.EDGE) {
+          switch (operation) {
+            case EDGE_OPERATIONS.REMOVE: {
+              if (payload.id) {
+                logger.info('Received remove-edge from remote user', {
+                  userId,
+                  edgeId: payload.id,
+                })
+                useWorkflowStore.getState().batchRemoveEdges([payload.id])
+
+                const updatedBlocks = useWorkflowStore.getState().blocks
+                const updatedEdges = useWorkflowStore.getState().edges
+                const graph = {
+                  blocksById: updatedBlocks,
+                  edgesById: Object.fromEntries(updatedEdges.map((e) => [e.id, e])),
+                }
+
+                const undoRedoStore = useUndoRedoStore.getState()
+                const stackKeys = Object.keys(undoRedoStore.stacks)
+                stackKeys.forEach((key) => {
+                  const parsedKey = parseUndoRedoStackKey(key)
+                  if (parsedKey?.workflowId === activeWorkflowId) {
+                    undoRedoStore.pruneInvalidEntries(parsedKey.workflowId, parsedKey.userId, graph)
+                  }
+                })
+
+                logger.info('Successfully applied remove-edge from remote user')
+              }
+              break
+            }
+          }
         } else if (target === OPERATION_TARGETS.SUBFLOW) {
           switch (operation) {
             case SUBFLOW_OPERATIONS.UPDATE:
@@ -595,10 +659,12 @@ export function useCollaborativeWorkflow() {
                 const undoRedoStore = useUndoRedoStore.getState()
                 const stackKeys = Object.keys(undoRedoStore.stacks)
                 stackKeys.forEach((key) => {
-                  const [wfId, userId] = key.split(':')
-                  if (wfId === workflowId) {
-                    undoRedoStore.pruneInvalidEntries(wfId, userId, graph)
+                  const parsedKey = parseUndoRedoStackKey(key)
+                  if (!parsedKey || parsedKey.workflowId !== workflowId) {
+                    return
                   }
+
+                  undoRedoStore.pruneInvalidEntries(parsedKey.workflowId, parsedKey.userId, graph)
                 })
               } finally {
                 isApplyingRemoteChange.current = false