From 5933c2cefcaa2994f1e4c32e085ecce882cc9cda Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Sun, 10 Sep 2023 23:37:13 -0300
Subject: [PATCH] fix(PageComponent/index.tsx): fix typo in import statement
 for scapeJSONParse function feat(PageComponent/index.tsx): add functionality
 to generate a new flow and node from a selection and update the nodes and
 edges accordingly feat(PageComponent/index.tsx): add validation for selection
 and display error message if selection is invalid

---
 .../components/PageComponent/index.tsx        | 27 ++++++++++++++++++-
 1 file changed, 26 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 26d07b77c..b4a777130 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -36,8 +36,11 @@ import { APIClassType } from "../../../../types/api";
 import { FlowType, NodeType, targetHandleType } from "../../../../types/flow";
 import { TabsState } from "../../../../types/tabs";
 import {
+  generateFlow,
+  generateNodeFromFlow,
   isValidConnection,
   scapeJSONParse,
+  validateSelection,
 } from "../../../../utils/reactflowUtils";
 import { isWrappedWithClass } from "../../../../utils/utils";
 import ConnectionLineComponent from "../ConnectionLineComponent";
@@ -442,7 +445,29 @@ export default function Page({
                     ></Controls>
                   )}
                   <SelectionMenu isVisible={selectionMenuVisible} nodes={lastSelection?.nodes}
-                  onClick={()=>{console.log('click')}}/>
+                  onClick={()=>{
+                    if(validateSelection(lastSelection!).length===0){
+                      const {newFlow} = generateFlow(lastSelection!,reactFlowInstance!,"new Component");
+                      const newGroupNode = generateNodeFromFlow(newFlow)
+                      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
+                          )
+                      )
+                    );
+                    }
+                    else{
+                      setErrorData({
+                        title: "Invalid selection",
+                        list: validateSelection(lastSelection!),
+                      });
+                    }
+                  }}/>
                 </ReactFlow>
                 {!view && (
                   <Chat flow={flow} reactFlowInstance={reactFlowInstance!} />