Fix group node naming compatibility (#969)

* Convery legacy group node names in workflow

* Add Playwright test

* Remove hardcoded strings

src/extensions/core/groupNode.ts

@@ -5,9 +5,15 @@ import { ManageGroupDialog } from './groupNodeManage'
 import type { LGraphNode } from '@comfyorg/litegraph'
 import { LGraphCanvas, LiteGraph } from '@comfyorg/litegraph'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { ComfyNode, ComfyWorkflowJSON } from '@/types/comfyWorkflow'
 
 const GROUP = Symbol()
 
+// v1 Prefix + Separator: workflow/
+// v2 Prefix + Separator: workflow> (ComfyUI_frontend v1.2.63)
+const PREFIX = 'workflow'
+const SEPARATOR = '>'
+
 const Workflow = {
   InUse: {
     Free: 0,
@@ -15,7 +21,7 @@ const Workflow = {
     InWorkflow: 2
   },
   isInUseGroupNode(name) {
-    const id = `workflow>${name}`
+    const id = `${PREFIX}${SEPARATOR}${name}`
     // Check if lready registered/in use in this workflow
     if (app.graph.extra?.groupNodes?.[name]) {
       if (app.graph.nodes.find((n) => n.type === id)) {
@@ -185,15 +191,15 @@ export class GroupNodeConfig {
     this.outputVisibility = []
   }
 
-  async registerType(source = 'workflow') {
+  async registerType(source = PREFIX) {
     this.nodeDef = {
       output: [],
       output_name: [],
       output_is_list: [],
       output_is_hidden: [],
-      name: source + '>' + this.name,
+      name: source + SEPARATOR + this.name,
       display_name: this.name,
-      category: 'group nodes' + ('>' + source),
+      category: 'group nodes' + (SEPARATOR + source),
       input: { required: {} },
       description: `Group node combining ${this.nodeData.nodes
         .map((n) => n.type)
@@ -216,7 +222,7 @@ export class GroupNodeConfig {
       p()
     }
     this.#convertedToProcess = null
-    await app.registerNodeDef('workflow>' + this.name, this.nodeDef)
+    await app.registerNodeDef(`${PREFIX}${SEPARATOR}` + this.name, this.nodeDef)
     useNodeDefStore().addNodeDef(this.nodeDef)
   }
 
@@ -647,7 +653,7 @@ export class GroupNodeConfig {
     app.clean = function () {
       for (const g in groupNodes) {
         try {
-          LiteGraph.unregisterNodeType('workflow/' + g)
+          LiteGraph.unregisterNodeType(`${PREFIX}${SEPARATOR}` + g)
         } catch (error) {}
       }
       app.clean = clean
@@ -662,11 +668,11 @@ export class GroupNodeConfig {
         if (!(n.type in LiteGraph.registered_node_types)) {
           missingNodeTypes.push({
             type: n.type,
-            hint: ` (In group node 'workflow/${g}')`
+            hint: ` (In group node '${PREFIX}${SEPARATOR}${g}')`
           })
 
           missingNodeTypes.push({
-            type: 'workflow/' + g,
+            type: `${PREFIX}${SEPARATOR}` + g,
             action: {
               text: 'Remove from workflow',
               callback: (e) => {
@@ -1380,7 +1386,7 @@ export class GroupNodeHandler {
     const config = new GroupNodeConfig(name, nodeData)
     await config.registerType()
 
-    const groupNode = LiteGraph.createNode(`workflow>${name}`)
+    const groupNode = LiteGraph.createNode(`${PREFIX}${SEPARATOR}${name}`)
     // Reuse the existing nodes for this instance
     groupNode.setInnerNodes(builder.nodes)
     groupNode[GROUP].populateWidgets()
@@ -1444,6 +1450,14 @@ function addConvertToGroupOptions() {
   }
 }
 
+const replaceLegacySeparators = (nodes: ComfyNode[]): void => {
+  for (const node of nodes) {
+    if (typeof node.type === 'string' && node.type.startsWith('workflow/')) {
+      node.type = node.type.replace(/^workflow\//, `${PREFIX}${SEPARATOR}`)
+    }
+  }
+}
+
 const id = 'Comfy.GroupNode'
 let globalDefs
 const ext = {
@@ -1451,9 +1465,13 @@ const ext = {
   setup() {
     addConvertToGroupOptions()
   },
-  async beforeConfigureGraph(graphData, missingNodeTypes) {
+  async beforeConfigureGraph(
+    graphData: ComfyWorkflowJSON,
+    missingNodeTypes: string[]
+  ) {
     const nodes = graphData?.extra?.groupNodes
     if (nodes) {
+      replaceLegacySeparators(graphData.nodes)
       await GroupNodeConfig.registerFromWorkflow(nodes, missingNodeTypes)
     }
   },