refactor: update ReactFlow to v12 (#5317)

* Added xyflow and updated imports

* Fix changing node.width to node.measured.width

* Updated NodeType to follow new API

* Fixed note node data type

* Created AllNodeType to contain note node type

* Changed flow types to follow new type from reactflow 12

* Updated flowStore to work with new types

* Updated flowStore and reactFlowUtils to work with custom edge type

* Updated updateAllNodes to use new type

* Updated PageComponent to follow new names for node dragging and edge reconnect

* Made selected prop be optional

* Changed reactFlowInstance to have nodes and edges type

* Updated updateAllComponent to follow new types

* Updated ReactFlowUtils with new types

* Updated reactFlowUtils type

* Updated all reactFlowUtils to be generic

* Updated handleRenderComponent with Connection type

* Updated node description and name with null checks for names

* Added check if node is genericNode on nodeOutputField

* Updated note node type

* Updated nodestatus with selected null check

* Updated notenode with new node type

* Update NodeType imports to be AllNodeType

* Fix more lint issues

* Fixed react flow button css

* ✨ (freeze.spec.ts): add zoomOut utility function to handle zooming out in tests for better code reusability and readability
📝 (decisionFlow.spec.ts): import zoomOut utility function to handle zooming out in tests for better code reusability and readability
📝 (zoom-out.ts): create zoomOut utility function to handle zooming out in tests for better code reusability and readability

* 🐛 (generalBugs-shard-10.spec.ts): fix test to wait for the element with class "border-ring-frozen" to be visible before asserting its count

* 📝 (generalBugs-shard-10.spec.ts): remove unnecessary locator click on element with id 'react-flow-id' to improve test reliability and maintainability

* 📝 (SelectionMenuComponent): add data-testid attribute to differentiate error-group-node and group-node components
📝 (similarity.spec.ts): refactor dragTo calls to use targetPosition for better accuracy, replace zoom_out clicks with zoomOut function, updateOldComponents function to handle outdated components
📝 (generalBugs-shard-5.spec.ts): replace zoom_out clicks with zoomOut function, add waitForSelector for group-node before clicking, remove unnecessary mouse interactions
📝 (intComponent.spec.ts): replace zoom_out clicks with zoomOut function, click on div-generic-node component
📝 (keyPairListComponent.spec.ts): click on div-generic-node component, adjustScreenView function call
📝 (nestedComponent.spec.ts): remove unnecessary click on react-flow-id element
📝 (generalBugs-shard-7.spec.ts): replace zoom_out clicks with zoomOut function

* ✨ (stop-building.spec.ts): Add new utility functions to improve code modularity and readability
🔧 (stop-building.spec.ts): Refactor drag and drop operations to use utility functions for better maintainability
🔧 (stop-building.spec.ts): Refactor zoom out operations to use utility function for consistency
🔧 (stop-building.spec.ts): Refactor component positioning operations to use utility functions for clarity
🔧 (stop-building.spec.ts): Refactor outdated components and filled API keys handling to use utility functions for reusability
🔧 (stop-building.spec.ts): Refactor fit view operation to use utility function for consistency

* ✨ (generalBugs-shard-9.spec.ts): refactor test to use initialGPTsetup function for GPT setup instead of manual steps to improve code readability and maintainability

* ✨ (store-shard-2.spec.ts): Increase timeout for clicking "api-key-button-store" to 200000ms for better test stability
✨ (deleteComponents.spec.ts, deleteFlows.spec.ts, store-shard-1.spec.ts, store-shard-3.spec.ts): Increase timeout for clicking "api-key-button-store" to 200000ms for better test stability
✨ (store-shard-1.spec.ts, store-shard-3.spec.ts): Remove unnecessary waitForSelector and add timeout of 200000ms for clicking "api-key-button-store" for better test stability

* ✨ (fileUploadComponent.spec.ts): update dragTo method calls with targetPosition option to specify the position of the drag action

* ✨ (decisionFlow.spec.ts): add explicit wait for an element to be attached before interacting with it to improve test reliability
🐛 (sticky-notes.spec.ts): fix test by adding keyboard press to simulate pressing the Escape key to close a modal before checking text length

* ✅ (sticky-notes.spec.ts): update assertion to use 'toHaveCount' matcher for improved test readability and reliability

* Added function to make controls horizontal

* ✨ (sticky-notes.spec.ts): update selector for textMarkdown to improve test reliability and readability

---------

Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>

src/frontend/package-lock.json

@@ -36,6 +36,7 @@
         "@tailwindcss/line-clamp": "^0.4.4",
         "@tanstack/react-query": "^5.49.2",
         "@types/axios": "^0.14.0",
+        "@xyflow/react": "^12.3.6",
         "ace-builds": "^1.35.0",
         "ag-grid-community": "^32.0.2",
         "ag-grid-react": "^32.0.2",
@@ -6238,6 +6239,36 @@
       "integrity": "sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw==",
       "license": "MIT"
     },
+    "node_modules/@xyflow/react": {
+      "version": "12.3.6",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.3.6.tgz",
+      "integrity": "sha512-9GS+cz8hDZahpvTrVCmySAEgKUL8oN4b2q1DluHrKtkqhAMWfH2s7kblhbM4Y4Y4SUnH2lt4drXKZ/4/Lot/2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@xyflow/system": "0.0.47",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@xyflow/system": {
+      "version": "0.0.47",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.47.tgz",
+      "integrity": "sha512-aUXJPIvsCFxGX70ccRG8LPsR+A8ExYXfh/noYNpqn8udKerrLdSHxMG2VsvUrQ1PGex10fOpbJwFU4A+I/Xv8w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-drag": "^3.0.7",
+        "@types/d3-selection": "^3.0.10",
+        "@types/d3-transition": "^3.0.8",
+        "@types/d3-zoom": "^3.0.8",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      }
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",