Ungrouping nodes by selecting group node itself (#427)

Author: Daan0709

src/main/frontend/app/routes/studio/canvas/flow.tsx

@@ -689,11 +689,29 @@ function FlowCanvas() {
   }, [copySelection])
 
   const handleUngroup = useCallback(() => {
-    const selectedNodes = nodes.filter((n) => n.selected)
+    const flowStore = useFlowStore.getState()
+    const selectedNodes = flowStore.nodes.filter((n) => n.selected)
+
     if (selectedNodes.length === 0) return
+    const selectedGroupNodes = selectedNodes.filter((n) => n.type === 'groupNode')
+
+    if (selectedGroupNodes.length > 0) {
+      let updatedNodes = [...flowStore.nodes]
+      for (const groupNode of selectedGroupNodes) {
+        const groupId = groupNode.id
+
+        const children = updatedNodes.filter((n) => n.parentId === groupId)
+
+        updatedNodes = degroupNodes(children, groupId, updatedNodes)
+      }
+      flowStore.setNodes(updatedNodes)
+      return
+    }
+
     if (!allSelectedInSameGroup(selectedNodes)) return
+
     handleDegroupSingleGroup(selectedNodes)
-  }, [nodes, allSelectedInSameGroup, handleDegroupSingleGroup])
+  }, [allSelectedInSameGroup, handleDegroupSingleGroup, degroupNodes])
 
   const handleRightMouseButtonClick = useCallback(
     (event: React.MouseEvent) => {

src/main/frontend/app/routes/studio/canvas/nodetypes/group-node.tsx

@@ -62,6 +62,7 @@ export default function GroupNodeComponent({ id, data, selected }: NodeProps<Gro
           <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
             <HamburgerMenu />
           </div>
+
           <div className="flex max-w-1/2 gap-1 px-2 py-1 text-sm font-bold">
             {isEditing ? (
               <input