fix(ui): initializing a new main workflow before sync

ui/src/features/Canvas/hooks.ts

@@ -4,6 +4,7 @@ import {
   NodeChange,
   XYPosition,
 } from "@xyflow/react";
+import { MouseEvent } from "react";
 
 import { useEdges, useNodes } from "@flow/lib/reactFlow";
 import type { ActionNodeType, Edge, Node } from "@flow/types";
@@ -14,6 +15,11 @@ type Props = {
   onWorkflowAdd?: (position?: XYPosition) => void;
   onNodesAdd?: (newNode: Node[]) => void;
   onNodesChange?: (changes: NodeChange<Node>[]) => void;
+  onNodeDoubleClick?: (
+    e: MouseEvent | undefined,
+    nodeId: string,
+    subworkflowId?: string,
+  ) => void;
   onEdgesAdd?: (newEdges: Edge[]) => void;
   onEdgesChange?: (changes: EdgeChange[]) => void;
   onNodePickerOpen?: (position: XYPosition, nodeType?: ActionNodeType) => void;
@@ -42,6 +48,7 @@ export default ({
   onWorkflowAdd,
   onNodesAdd,
   onNodesChange,
+  onNodeDoubleClick,
   onEdgesAdd,
   onEdgesChange,
   onNodePickerOpen,
@@ -52,12 +59,14 @@ export default ({
     handleNodeDragOver,
     handleNodeDragStop,
     handleNodeDrop,
+    handleNodeDoubleClick,
   } = useNodes({
     nodes,
     edges,
     onWorkflowAdd,
     onNodesAdd,
     onNodesChange,
+    onNodeDoubleClick,
     onEdgesChange,
     onNodePickerOpen,
   });
@@ -74,6 +83,7 @@ export default ({
     handleNodeDragStop,
     handleNodeDragOver,
     handleNodeDrop,
+    handleNodeDoubleClick,
     handleEdgesChange,
     handleConnect,
     handleReconnect,

ui/src/features/Canvas/index.tsx

@@ -37,7 +37,11 @@ type Props = {
   onWorkflowAdd?: (position?: XYPosition) => void;
   onNodesAdd?: (newNode: Node[]) => void;
   onNodesChange?: (changes: NodeChange<Node>[]) => void;
-  onNodeDoubleClick?: (e: MouseEvent, node: Node) => void;
+  onNodeDoubleClick?: (
+    e: MouseEvent | undefined,
+    nodeId: string,
+    subworkflowId?: string,
+  ) => void;
   onNodeHover?: (e: MouseEvent, node?: Node) => void;
   onNodePickerOpen?: (position: XYPosition, nodeType?: ActionNodeType) => void;
   onEdgesAdd?: (newEdges: Edge[]) => void;
@@ -65,6 +69,7 @@ const Canvas: React.FC<Props> = ({
     handleNodeDragStop,
     handleNodeDragOver,
     handleNodeDrop,
+    handleNodeDoubleClick,
     handleEdgesChange,
     handleConnect,
     handleReconnect,
@@ -74,6 +79,7 @@ const Canvas: React.FC<Props> = ({
     onWorkflowAdd,
     onNodesAdd,
     onNodesChange,
+    onNodeDoubleClick,
     onEdgesAdd,
     onEdgesChange,
     onNodePickerOpen,
@@ -123,7 +129,7 @@ const Canvas: React.FC<Props> = ({
       isValidConnection={isValidConnection}
       onNodesChange={handleNodesChange}
       onEdgesChange={handleEdgesChange}
-      onNodeDoubleClick={onNodeDoubleClick}
+      onNodeDoubleClick={handleNodeDoubleClick}
       onNodeDragStop={handleNodeDragStop}
       onNodesDelete={handleNodesDelete}
       onNodeMouseEnter={onNodeHover}

ui/src/features/Editor/components/LeftPanel/index.tsx

@@ -25,25 +25,26 @@ type Tab = "navigator" | "actions-list" | "resources";
 type Props = {
   nodes: Node[];
   isOpen: boolean;
-  onOpen: (panel?: "left" | "right" | "bottom") => void;
-  onNodesAdd: (node: Node[]) => void;
   isMainWorkflow: boolean;
   hasReader?: boolean;
+  onOpen: (panel?: "left" | "right" | "bottom") => void;
+  onNodesAdd: (node: Node[]) => void;
   onNodesChange: (changes: NodeChange[]) => void;
   onNodeDoubleClick: (
     e: React.MouseEvent<Element> | undefined,
-    node: Node,
+    nodeId: string,
+    subworkflowId?: string,
   ) => void;
   selected?: Node;
 };
 
 const LeftPanel: React.FC<Props> = ({
   nodes,
   isOpen,
-  onOpen,
-  onNodesAdd,
   isMainWorkflow,
   hasReader,
+  onOpen,
+  onNodesAdd,
   onNodesChange,
   onNodeDoubleClick,
 }) => {
@@ -70,7 +71,7 @@ const LeftPanel: React.FC<Props> = ({
       }));
 
       onNodesChange(nodeChanges);
-      onNodeDoubleClick(undefined, node);
+      onNodeDoubleClick(undefined, node.id, node.data.subworkflowId);
     },
     [nodes, onNodesChange, onNodeDoubleClick],
   );

ui/src/features/Editor/editorContext.tsx

@@ -6,11 +6,15 @@ import {
   useContext,
 } from "react";
 
-import { Node, NodeChange } from "@flow/types";
+import { NodeChange } from "@flow/types";
 
 export type EditorContextType = {
   onNodesChange?: (changes: NodeChange[]) => void;
-  onSecondaryNodeAction?: (_e: MouseEvent | undefined, node: Node) => void;
+  onSecondaryNodeAction?: (
+    _e: MouseEvent | undefined,
+    nodeId: string,
+    subworkflowId?: string,
+  ) => void;
 };
 
 const EditorContext = createContext<EditorContextType | undefined>(undefined);

ui/src/features/Editor/hooks.ts

@@ -8,13 +8,14 @@ import {
   useState,
 } from "react";
 import { useY } from "react-yjs";
-import { Array as YArray, UndoManager as YUndoManager } from "yjs";
+import { Doc, Array as YArray, UndoManager as YUndoManager } from "yjs";
 
 import { DEFAULT_ENTRY_GRAPH_ID } from "@flow/global-constants";
 import { useShortcuts } from "@flow/hooks";
 import { useSharedProject } from "@flow/lib/gql";
 import { checkForReader } from "@flow/lib/reactFlow";
 import { useYjsStore } from "@flow/lib/yjs";
+import { yWorkflowConstructor } from "@flow/lib/yjs/conversions";
 import type { YWorkflow } from "@flow/lib/yjs/types";
 import useWorkflowTabs from "@flow/lib/yjs/useWorkflowTabs";
 import { useCurrentProject } from "@flow/stores";
@@ -27,14 +28,28 @@ import useNodeLocker from "./useNodeLocker";
 import useUIState from "./useUIState";
 
 export default ({
-  yWorkflows,
+  yDoc,
   undoManager,
   undoTrackerActionWrapper,
 }: {
-  yWorkflows: YArray<YWorkflow>;
+  yDoc: Doc;
   undoManager: YUndoManager | null;
   undoTrackerActionWrapper: (callback: () => void) => void;
 }) => {
+  const yWorkflows = yDoc.getArray<YWorkflow>("workflows");
+
+  useEffect(() => {
+    if (yWorkflows.length === 0) {
+      yDoc.transact(() => {
+        const yWorkflow = yWorkflowConstructor(
+          DEFAULT_ENTRY_GRAPH_ID,
+          "Main Workflow",
+        );
+        yWorkflows.insert(0, [yWorkflow]);
+      });
+    }
+  }, [yWorkflows, yDoc]);
+
   const { fitView } = useReactFlow();
 
   const [currentWorkflowId, setCurrentWorkflowId] = useState<string>(
@@ -129,25 +144,32 @@ export default ({
 
   // Passed to editor context so needs to be a ref
   const handleNodeDoubleClickRef =
-    useRef<(e: MouseEvent | undefined, node: Node) => void>(undefined);
+    useRef<
+      (
+        e: MouseEvent | undefined,
+        nodeId: string,
+        subworkflowId?: string,
+      ) => void
+    >(undefined);
   handleNodeDoubleClickRef.current = (
     _e: MouseEvent | undefined,
-    node: Node,
+    nodeId: string,
+    subworkflowId?: string,
   ) => {
-    if (node.type === "subworkflow" && node.data.subworkflowId) {
-      handleWorkflowOpen(node.data.subworkflowId);
+    if (subworkflowId) {
+      handleWorkflowOpen(subworkflowId);
     } else {
       fitView({
-        nodes: [{ id: node.id }],
+        nodes: [{ id: nodeId }],
         duration: 500,
         padding: 2,
       });
-      handleNodeLocking(node.id);
+      handleNodeLocking(nodeId);
     }
   };
   const handleNodeDoubleClick = useCallback(
-    (e: MouseEvent | undefined, node: Node) =>
-      handleNodeDoubleClickRef.current?.(e, node),
+    (e: MouseEvent | undefined, nodeId: string, subworkflowId?: string) =>
+      handleNodeDoubleClickRef.current?.(e, nodeId, subworkflowId),
     [],
   );
 

ui/src/features/Editor/index.tsx

@@ -1,8 +1,7 @@
 import { useMemo } from "react";
-import { Array as YArray, UndoManager as YUndoManager } from "yjs";
+import { Doc, UndoManager as YUndoManager } from "yjs";
 
 import Canvas from "@flow/features/Canvas";
-import type { YWorkflow } from "@flow/lib/yjs/types";
 
 import {
   BottomBar,
@@ -15,13 +14,13 @@ import { EditorContextType, EditorProvider } from "./editorContext";
 import useHooks from "./hooks";
 
 type Props = {
-  yWorkflows: YArray<YWorkflow>;
+  yDoc: Doc;
   undoManager: YUndoManager | null;
   undoTrackerActionWrapper: (callback: () => void) => void;
 };
 
 export default function Editor({
-  yWorkflows,
+  yDoc,
   undoManager,
   undoTrackerActionWrapper,
 }: Props) {
@@ -64,7 +63,7 @@ export default function Editor({
     handleDebugRunStart,
     handleDebugRunStop,
     handleLayoutChange,
-  } = useHooks({ yWorkflows, undoManager, undoTrackerActionWrapper });
+  } = useHooks({ yDoc, undoManager, undoTrackerActionWrapper });
 
   const editorContext = useMemo(
     (): EditorContextType => ({

ui/src/features/SharedCanvas/hooks.ts

@@ -1,7 +1,7 @@
 import { useReactFlow } from "@xyflow/react";
 import { MouseEvent, useCallback, useEffect, useMemo, useState } from "react";
 import { useY } from "react-yjs";
-import { Array as YArray } from "yjs";
+import { Doc, Array as YArray } from "yjs";
 
 import { DEFAULT_ENTRY_GRAPH_ID } from "@flow/global-constants";
 import { useProjectExport } from "@flow/hooks";
@@ -15,14 +15,16 @@ import useNodeLocker from "../Editor/useNodeLocker";
 import useUIState from "../Editor/useUIState";
 
 export default ({
-  yWorkflows,
+  yDoc,
   project,
   undoTrackerActionWrapper,
 }: {
-  yWorkflows: YArray<YWorkflow>;
+  yDoc: Doc;
   project?: Project;
   undoTrackerActionWrapper: (callback: () => void) => void;
 }) => {
+  const yWorkflows = yDoc.getArray<YWorkflow>("workflows");
+
   const { fitView } = useReactFlow();
 
   const [selectedNodeIds, setSelectedNodeIds] = useState<string[]>([]);
@@ -89,16 +91,16 @@ export default ({
   });
 
   const handleNodeDoubleClick = useCallback(
-    (_e: MouseEvent | undefined, node: Node) => {
-      if (node.type === "subworkflow" && node.data.subworkflowId) {
-        handleWorkflowOpen(node.data.subworkflowId);
+    (_e: MouseEvent | undefined, nodeId: string, subworkflowId?: string) => {
+      if (subworkflowId) {
+        handleWorkflowOpen(subworkflowId);
       } else {
         fitView({
-          nodes: [{ id: node.id }],
+          nodes: [{ id: nodeId }],
           duration: 500,
           padding: 2,
         });
-        handleNodeLocking(node.id);
+        handleNodeLocking(nodeId);
       }
     },
     [handleWorkflowOpen, fitView, handleNodeLocking],

ui/src/features/SharedCanvas/index.tsx

@@ -1,23 +1,22 @@
-import { Array as YArray } from "yjs";
+import { Doc } from "yjs";
 
 import { Button } from "@flow/components";
 import Canvas from "@flow/features/Canvas";
 import { useT } from "@flow/lib/i18n";
-import { YWorkflow } from "@flow/lib/yjs/types";
 import { Project } from "@flow/types";
 
 import { ParamsPanel, WorkflowTabs } from "../Editor/components";
 
 import useHooks from "./hooks";
 
 type Props = {
-  yWorkflows: YArray<YWorkflow>;
+  yDoc: Doc;
   project?: Project;
   undoTrackerActionWrapper: (callback: () => void) => void;
 };
 
 const SharedCanvas: React.FC<Props> = ({
-  yWorkflows,
+  yDoc,
   project,
   undoTrackerActionWrapper,
 }) => {
@@ -38,7 +37,7 @@ const SharedCanvas: React.FC<Props> = ({
     handleNodesChange,
     handleWorkflowClose,
     handleCurrentWorkflowIdChange,
-  } = useHooks({ yWorkflows, project, undoTrackerActionWrapper });
+  } = useHooks({ yDoc, project, undoTrackerActionWrapper });
   return (
     <div className="relative flex size-full flex-col">
       <Canvas