update: Replace reactflow with @xyflow/react and Update Dependencies (#8940)
## Description:
This pull request includes the following changes:
1. **Dependency Update**:
- Added `@xyflow/react` as a dependency.
- Replaced imports from `reactflow` with `@xyflow/react` in multiple
components.
2. **Dependency Removal**:
- Removed `reactflow` dependency and its related code from the project.
3. **Type Definitions Update**:
- Updated type definitions for nodes and edges to align with the new
library.
4. **Code Refactoring**:
- Minor refactoring for improved code clarity and consistency in the
following components:
- `SettingsDataModelOverview`
- `SettingsDataModelOverviewEffect`
- `SettingsDataModelOverviewField`
- `SettingsDataModelOverviewObject`
5. **Dependency Files Update**:
- Updated `package.json` and `yarn.lock` to reflect the changes in
dependencies.
## Additional Notes:
- These changes ensure that the project is now using the `@xyflow/react`
library instead of `reactflow`.
- The refactoring improves code readability and maintains consistency
across the components.
- Please review the changes and provide any feedback or suggestions.
## Testing:
- The changes have been tested locally and verified to work as expected.
## Checklist:
- [x] Added `@xyflow/react` as a dependency.
- [x] Replaced `reactflow` imports with `@xyflow/react`.
- [x] Removed `reactflow` dependency.
- [x] Updated type definitions for nodes and edges.
- [x] Refactored components for improved clarity and consistency.
- [x] Updated `package.json` and `yarn.lock`.
- [x] Tested the changes locally.
## Related Issue
Fixes #6662
This commit is contained in:
Pradeep Kaswan
@ -3,11 +3,14 @@ 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,
|
||||
@ -15,7 +18,8 @@ import ReactFlow, {
|
||||
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}
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
|
||||
@ -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>
|
||||
))}
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -38,6 +38,7 @@ export const IconButtonGroup = ({
|
||||
|
||||
return (
|
||||
<IconButton
|
||||
key={index}
|
||||
accent={accent}
|
||||
Icon={Icon}
|
||||
onClick={onClick}
|
||||
|
||||
Reference in New Issue
Block a user