From 19f60ba17a6a265e25d966f5e16715014477e6ad Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Tue, 19 Mar 2024 16:45:57 -0300
Subject: [PATCH] Feat: Add shortcut to group node (ctrl G)

---
 .../components/PageComponent/index.tsx        | 54 ++++++++++++++++++-
 1 file changed, 53 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index a05803359..e283a01e3 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -97,6 +97,58 @@ export default function Page({
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
       const selectedNode = nodes.filter((obj) => obj.selected);
+      if (
+        selectionMenuVisible &&
+        (event.ctrlKey || event.metaKey) &&
+        event.key === "g"
+      ) {
+        event.preventDefault();
+        takeSnapshot();
+        if (
+          validateSelection(lastSelection!, edges).length === 0
+        ) {
+          const { newFlow, removedEdges } = generateFlow(
+            lastSelection!,
+            nodes,
+            edges,
+            getRandomName()
+          );
+          const newGroupNode = generateNodeFromFlow(
+            newFlow,
+            getNodeId
+          );
+          const newEdges = reconnectEdges(
+            newGroupNode,
+            removedEdges
+          );
+          setNodes((oldNodes) => [
+            ...oldNodes.filter(
+              (oldNodes) =>
+                !lastSelection?.nodes.some(
+                  (selectionNode) =>
+                    selectionNode.id === oldNodes.id
+                )
+            ),
+            newGroupNode,
+          ]);
+          setEdges((oldEdges) => [
+            ...oldEdges.filter(
+              (oldEdge) =>
+                !lastSelection!.nodes.some(
+                  (selectionNode) =>
+                    selectionNode.id === oldEdge.target ||
+                    selectionNode.id === oldEdge.source
+                )
+            ),
+            ...newEdges,
+          ]);
+        } else {
+          setErrorData({
+            title: INVALID_SELECTION_ERROR_ALERT,
+            list: validateSelection(lastSelection!, edges),
+          });
+        }
+      }
       if (
         (event.ctrlKey || event.metaKey) &&
         event.key === "p" &&
@@ -201,7 +253,7 @@ export default function Page({
       document.removeEventListener("keydown", onKeyDown);
       document.removeEventListener("mousemove", handleMouseMove);
     };
-  }, [lastCopiedSelection, lastSelection, takeSnapshot]);
+  }, [lastCopiedSelection, lastSelection, takeSnapshot, selectionMenuVisible]);
 
   useEffect(() => {
     if (reactFlowInstance && currentFlowId) {