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/tests/utils/zoom-out.ts

@@ -0,0 +1,7 @@
+import { Page } from "@playwright/test";
+
+export async function zoomOut(page: Page, times: number = 4) {
+  for (let i = 0; i < times; i++) {
+    await page.getByTestId("zoom_out").click();
+  }
+}