update: Replace reactflow with @xyflow/react and Update Dependencies

package.json

@@ -60,6 +60,7 @@
     "@types/nodemailer": "^6.4.14",
     "@types/passport-microsoft": "^1.0.3",
     "@wyw-in-js/vite": "^0.5.3",
+    "@xyflow/react": "^12.3.5",
     "add": "^2.0.6",
     "addressparser": "^1.0.1",
     "afterframe": "^1.0.2",
@@ -168,7 +169,6 @@
     "react-router-dom": "^6.4.4",
     "react-textarea-autosize": "^8.4.1",
     "react-tooltip": "^5.13.1",
-    "reactflow": "^11.11.3",
     "recoil": "^0.7.7",
     "rehype-slug": "^6.0.0",
     "remark-behead": "^3.1.0",

packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverview.tsx

@@ -3,19 +3,23 @@ import { SettingsDataModelOverviewObject } from '@/settings/data-model/graph-ove
 import { SettingsDataModelOverviewRelationMarkers } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverviewRelationMarkers';
 import { calculateHandlePosition } from '@/settings/data-model/graph-overview/utils/calculateHandlePosition';
 import styled from '@emotion/styled';
-import { useCallback, useState } from 'react';
-import ReactFlow, {
+import {
   Background,
-  EdgeChange,
-  NodeChange,
+  Edge,
+  Node,
+  NodeTypes,
+  OnEdgesChange,
+  OnNodesChange,
+  ReactFlow,
   applyEdgeChanges,
   applyNodeChanges,
   getIncomers,
   getOutgoers,
   useEdgesState,
   useNodesState,
   useReactFlow,
-} from 'reactflow';
+} from '@xyflow/react';
+import { useCallback, useState } from 'react';
 import {
   Button,
   IconButtonGroup,
@@ -28,7 +32,7 @@ import {
 } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 
-const NodeTypes = {
+const nodeTypes: NodeTypes = {
   object: SettingsDataModelOverviewObject,
 };
 const StyledContainer = styled.div`
@@ -67,25 +71,25 @@ const StyledCloseButton = styled.div`
 export const SettingsDataModelOverview = () => {
   const { fitView, zoomIn, zoomOut } = useReactFlow();
 
-  const [nodes, setNodes] = useNodesState([]);
-  const [edges, setEdges] = useEdgesState([]);
+  const [nodes, setNodes] = useNodesState<Node>([]);
+  const [edges, setEdges] = useEdgesState<Edge>([]);
   const [isInteractive, setInteractive] = useState(true);
 
-  const onNodesChange = useCallback(
-    (changes: NodeChange[]) =>
-      setNodes((nds) => applyNodeChanges(changes, nds)),
+  const onNodesChange: OnNodesChange = useCallback(
+    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
     [setNodes],
   );
-  const onEdgesChange = useCallback(
-    (changes: EdgeChange[]) =>
-      setEdges((eds) => applyEdgeChanges(changes, eds)),
+  const onEdgesChange: OnEdgesChange = useCallback(
+    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
     [setEdges],
   );
 
-  const handleNodesChange = useCallback(
-    (nodeChanges: any[]) => {
+  const handleNodesChange: OnNodesChange = useCallback(
+    (nodeChanges) => {
       nodeChanges.forEach((nodeChange) => {
-        const node = nodes.find((node) => node.id === nodeChange.id);
+        const node = nodes.find(
+          (node) => node.id === (nodeChange as { id: string }).id,
+        );
         if (!node) {
           return;
         }
@@ -119,8 +123,8 @@ export const SettingsDataModelOverview = () => {
                     newXPos,
                     'target',
                   );
-                  const sourceHandle = `${edge.data.sourceField}-${sourcePosition}`;
-                  const targetHandle = `${edge.data.targetField}-${targetPosition}`;
+                  const sourceHandle = `${edge.data?.sourceField}-${sourcePosition}`;
+                  const targetHandle = `${edge.data?.targetField}-${targetPosition}`;
                   ed.sourceHandle = sourceHandle;
                   ed.targetHandle = targetHandle;
                   ed.markerEnd = 'marker';
@@ -157,8 +161,8 @@ export const SettingsDataModelOverview = () => {
                     'target',
                   );
 
-                  const sourceHandle = `${edge.data.sourceField}-${sourcePosition}`;
-                  const targetHandle = `${edge.data.targetField}-${targetPosition}`;
+                  const sourceHandle = `${edge.data?.sourceField}-${sourcePosition}`;
+                  const targetHandle = `${edge.data?.targetField}-${targetPosition}`;
 
                   ed.sourceHandle = sourceHandle;
                   ed.targetHandle = targetHandle;
@@ -193,7 +197,7 @@ export const SettingsDataModelOverview = () => {
         nodes={nodes}
         edges={edges}
         onEdgesChange={onEdgesChange}
-        nodeTypes={NodeTypes}
+        nodeTypes={nodeTypes}
         onNodesChange={handleNodesChange}
         nodesDraggable={isInteractive}
         elementsSelectable={isInteractive}

packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewEffect.tsx

@@ -1,7 +1,7 @@
 import dagre from '@dagrejs/dagre';
 import { useTheme } from '@emotion/react';
+import { Edge, Node } from '@xyflow/react';
 import { useEffect } from 'react';
-import { Edge, Node } from 'reactflow';
 import { useRecoilValue } from 'recoil';
 
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';

packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewField.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Handle, Position } from 'reactflow';
+import { Handle, Position } from '@xyflow/react';
 import { useRecoilValue } from 'recoil';
 import { useIcons } from 'twenty-ui';
 

packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { Node, NodeProps } from '@xyflow/react';
 import { Link } from 'react-router-dom';
-import { NodeProps } from 'reactflow';
 import { IconChevronDown, IconChevronUp, useIcons } from 'twenty-ui';
 
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
@@ -14,10 +14,12 @@ import { FieldMetadataType } from '~/generated/graphql';
 import { capitalize } from '~/utils/string/capitalize';
 
 import { ObjectFieldRowWithoutRelation } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverviewFieldWithoutRelation';
-import '@reactflow/node-resizer/dist/style.css';
+import '@xyflow/react/dist/style.css';
 import { useState } from 'react';
 
-type SettingsDataModelOverviewObjectProps = NodeProps<ObjectMetadataItem>;
+type SettingsDataModelOverviewObjectNode = Node<ObjectMetadataItem, 'object'>;
+type SettingsDataModelOverviewObjectProps =
+  NodeProps<SettingsDataModelOverviewObjectNode>;
 
 const StyledNode = styled.div`
   background-color: ${({ theme }) => theme.background.secondary};
@@ -135,7 +137,7 @@ export const SettingsDataModelOverviewObject = ({
         {fields
           .filter((x) => x.type === FieldMetadataType.Relation)
           .map((field) => (
-            <StyledCardRow>
+            <StyledCardRow key={field.id}>
               <ObjectFieldRow field={field} />
             </StyledCardRow>
           ))}

packages/twenty-front/src/pages/settings/data-model/SettingsObjectOverview.tsx

@@ -1,4 +1,4 @@
-import { ReactFlowProvider } from 'reactflow';
+import { ReactFlowProvider } from '@xyflow/react';
 
 import { SettingsDataModelOverview } from '@/settings/data-model/graph-overview/components/SettingsDataModelOverview';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';

packages/twenty-ui/src/input/button/components/IconButtonGroup.tsx

@@ -38,6 +38,7 @@ export const IconButtonGroup = ({
 
       return (
         <IconButton
+          key={index}
           accent={accent}
           Icon={Icon}
           onClick={onClick}