chore(deps): upgrade react-flow to v11.x

package.json

@@ -39,10 +39,10 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "3.1.4",
-    "react-flow-renderer": "10.3.17",
     "react-monaco-editor": "^0.48.0",
     "react-router-dom": "5.3.3",
     "react-router-last-location": "2.0.1",
+    "reactflow": "^11.0.0-next.13",
     "tar-webpack-plugin": "^0.1.1",
     "uniforms": "^3.10.0",
     "uniforms-bridge-json-schema": "^3.10.0",

src/components/PlusButtonEdge.tsx

@@ -5,14 +5,7 @@ import { useIntegrationJsonStore, useSettingsStore } from '@kaoto/store';
 import { IStepProps } from '@kaoto/types';
 import { Popover } from '@patternfly/react-core';
 import { PlusIcon } from '@patternfly/react-icons';
-import {
-  getBezierPath,
-  getEdgeCenter,
-  Node,
-  Position,
-  useNodes,
-  useReactFlow,
-} from 'react-flow-renderer';
+import { getBezierPath, Node, Position, useNodes, useReactFlow } from 'reactflow';
 
 const foreignObjectSize = 40;
 
@@ -49,7 +42,7 @@ const PlusButtonEdge = ({
   const targetNode = useReactFlow().getNode(nodeIds[1]);
   const currentIdx = findStepIdxWithUUID(targetNode?.data.UUID!);
 
-  const edgePath = getBezierPath({
+  const [edgePath, edgeCenterX, edgeCenterY] = getBezierPath({
     sourceX,
     sourceY,
     sourcePosition,
@@ -58,13 +51,6 @@ const PlusButtonEdge = ({
     targetPosition,
   });
 
-  const [edgeCenterX, edgeCenterY] = getEdgeCenter({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-  });
-
   const onMiniCatalogClickInsert = (selectedStep: IStepProps) =>
     insertStep(selectedStep, currentIdx);
 

src/components/Visualization.css

@@ -87,11 +87,6 @@
     border-radius: 50%;
 }
 
-.react-flow__controls.visualization__controls {
-    right: 15px;
-    left: unset;
-}
-
 .react-flow__minimap.visualization__minimap {
     right: 50px;
 }

src/components/Visualization.tsx

@@ -9,11 +9,16 @@ import {
 } from '@kaoto/components';
 import { buildEdges, buildNodesFromSteps, findStepIdxWithUUID } from '@kaoto/services';
 import { useIntegrationJsonStore, useVisualizationStore } from '@kaoto/store';
-import { IStepProps, IViewData, IVizStepPropsEdge, IVizStepPropsNode } from '@kaoto/types';
+import {
+  IStepProps,
+  IStepPropsBranch,
+  IViewData,
+  IVizStepPropsEdge,
+  IVizStepPropsNode,
+} from '@kaoto/types';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import ReactFlow, { Background, Controls, ReactFlowProvider } from 'react-flow-renderer';
-import 'react-flow-renderer/dist/style.css';
-import 'react-flow-renderer/dist/theme-default.css';
+import ReactFlow, { Background, Controls, ReactFlowProvider, Viewport } from 'reactflow';
+import 'reactflow/dist/style.css';
 
 interface IVisualization {
   initialState?: IViewData;
@@ -23,6 +28,7 @@ interface IVisualization {
 const Visualization = ({ toggleCatalog }: IVisualization) => {
   // `nodes` is an array of UI-specific objects that represent
   // the Integration.Steps model visually, while `edges` connect them
+  const defaultViewport: Viewport = { x: 10, y: 15, zoom: 1.2 };
   const [isPanelExpanded, setIsPanelExpanded] = useState(false);
   const [, setReactFlowInstance] = useState(null);
   const reactFlowWrapper = useRef(null);
@@ -83,7 +89,7 @@ const Visualization = ({ toggleCatalog }: IVisualization) => {
     // and build nodes separately for them
     stepsAsNodes.forEach((s) => {
       if (!s.data.step?.branches) return;
-      const stepBranches = s.data.step.branches;
+      const stepBranches: IStepPropsBranch[] = s.data.step.branches;
       const parentNode = s;
 
       stepBranches.forEach((branch) => {
@@ -217,7 +223,7 @@ const Visualization = ({ toggleCatalog }: IVisualization) => {
             <ReactFlow
               nodes={nodes}
               edges={edges}
-              defaultZoom={1.2}
+              defaultViewport={defaultViewport}
               edgeTypes={edgeTypes}
               nodeTypes={nodeTypes}
               onDragOver={onDragOver}

src/components/VisualizationStep.tsx

@@ -14,7 +14,7 @@ import { IStepProps, IVizStepNodeData } from '@kaoto/types';
 import { AlertVariant, Popover } from '@patternfly/react-core';
 import { CubesIcon, PlusIcon } from '@patternfly/react-icons';
 import { useAlert } from '@rhoas/app-services-ui-shared';
-import { Handle, Node, NodeProps, Position, useNodes } from 'react-flow-renderer';
+import { Handle, Node, NodeProps, Position, useNodes } from 'reactflow';
 
 const currentDSL = useSettingsStore.getState().settings.dsl;
 const appendStep = useIntegrationJsonStore.getState().appendStep;

src/services/visualizationService.test.ts

@@ -22,7 +22,7 @@ import {
 } from './visualizationService';
 import { IVizStepPropsNode } from '@kaoto/types';
 import { truncateString } from '@kaoto/utils';
-import { MarkerType } from 'react-flow-renderer';
+import { MarkerType } from 'reactflow';
 
 describe('visualizationService', () => {
   /**

src/services/visualizationService.ts

@@ -1,7 +1,7 @@
 import { useIntegrationJsonStore, useVisualizationStore } from '@kaoto/store';
 import { IStepProps, IVizStepPropsEdge, IVizStepPropsNode } from '@kaoto/types';
 import { truncateString } from '@kaoto/utils';
-import { MarkerType } from 'react-flow-renderer';
+import { MarkerType } from 'reactflow';
 
 export function buildEdgeDefaultParams(
   currentStep: IVizStepPropsNode,

src/store/visualizationStore.tsx

@@ -9,7 +9,7 @@ import {
   OnConnect,
   applyNodeChanges,
   applyEdgeChanges,
-} from 'react-flow-renderer';
+} from 'reactflow';
 import create from 'zustand';
 
 export type RFState = {

src/types/index.ts

@@ -1,4 +1,4 @@
-import { Edge, Node } from 'react-flow-renderer';
+import { Edge, Node } from 'reactflow';
 
 declare global {
   interface Window {
@@ -160,15 +160,15 @@ export interface IVizStepNodeData {
 /**
  * Used to extend React Flow's `Node` type
  */
-export interface IVizStepPropsNode extends Node {
+export type IVizStepPropsNode = Node & {
   data: IVizStepNodeData;
-}
+};
 
 /**
  * Used to extend React Flow's `Edge` type
  */
-export interface IVizStepPropsEdge extends Edge {
+export type IVizStepPropsEdge = Edge & {
   arrowHeadType?: string;
   // source?: string;
   // target?: string;
-}
+};

yarn.lock

@@ -955,6 +955,50 @@
   resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-4.93.5.tgz#ab777dac32a568908680eb8b6a6e76473625f766"
   integrity sha512-4DZf//F4TeiYmb0bQfBehW937NM3lQjUv/82wV80oyOIzWC7z9X8pY9U4heFrxc4HN8NLiToYGOk96ikYyfzJQ==
 
+"@reactflow/[email protected]":
+  version "11.0.0-next.7"
+  resolved "https://registry.yarnpkg.com/@reactflow/background/-/background-11.0.0-next.7.tgz#172bf27352bafbf703e5530a016005258457249e"
+  integrity sha512-o6A/ChbejOWCpf5DIYrdqh6covxoW1vbzTxDnckfpaepHFVra5m3cfxEuBGYf231PkB8qVtcaS9OXw/E7QTx3Q==
+  dependencies:
+    "@babel/runtime" "^7.18.9"
+    "@reactflow/core" "11.0.0-next.7"
+    classcat "^5.0.3"
+    zustand "^4.1.1"
+
+"@reactflow/[email protected]":
+  version "11.0.0-next.7"
+  resolved "https://registry.yarnpkg.com/@reactflow/controls/-/controls-11.0.0-next.7.tgz#37e29322da637ad0be09c590b44b16498ff4023c"
+  integrity sha512-qVcloaWsH9g1jCkwx8GHaKn+E0hPWCqKzW+0ckH3hGpGqT0rk1Gwzdz8/syM3sIkZk5WYD7KwIUaErMF08V0gg==
+  dependencies:
+    "@babel/runtime" "^7.18.9"
+    "@reactflow/core" "11.0.0-next.7"
+    classcat "^5.0.3"
+
+"@reactflow/[email protected]":
+  version "11.0.0-next.7"
+  resolved "https://registry.yarnpkg.com/@reactflow/core/-/core-11.0.0-next.7.tgz#fe4d5bded36267a536aa05ac14ae92822b69f873"
+  integrity sha512-M9SZicgizGzo5Ud7r1eby5qNkvxDGu2IrM6agtFpN91rUYQEFZzfk6X9LhczgBF5RmvY+m7bmK9dBOzHZGQhQg==
+  dependencies:
+    "@types/d3" "^7.4.0"
+    "@types/d3-drag" "^3.0.1"
+    "@types/d3-selection" "^3.0.3"
+    "@types/d3-zoom" "^3.0.1"
+    classcat "^5.0.3"
+    d3-drag "^3.0.0"
+    d3-selection "^3.0.0"
+    d3-zoom "^3.0.0"
+    zustand "^4.1.1"
+
+"@reactflow/[email protected]":
+  version "11.0.0-next.7"
+  resolved "https://registry.yarnpkg.com/@reactflow/minimap/-/minimap-11.0.0-next.7.tgz#22af4667c39698bde2dff219dcde3a4917de1946"
+  integrity sha512-7dmbTnD0BXyy3JOSsYa4sYrrfX6wZ8LpEeA899Z8vLsFbnJr6tvRg/TqdhmJJ3qizxqSys8DnYlkXr7e4b73XA==
+  dependencies:
+    "@babel/runtime" "^7.18.9"
+    "@reactflow/core" "11.0.0-next.7"
+    classcat "^5.0.3"
+    zustand "^4.1.1"
+
 "@rhoas/app-services-ui-shared@^0.16.4":
   version "0.16.4"
   resolved "https://registry.yarnpkg.com/@rhoas/app-services-ui-shared/-/app-services-ui-shared-0.16.4.tgz#6db859462c8ab4f4021c27df893a3087ee7e0ea2"
@@ -1167,7 +1211,7 @@
   resolved "https://registry.yarnpkg.com/@types/d3-dispatch/-/d3-dispatch-3.0.1.tgz#a1b18ae5fa055a6734cb3bd3cbc6260ef19676e3"
   integrity sha512-NhxMn3bAkqhjoxabVJWKryhnZXXYYVQxaBnbANu0O94+O/nX9qSjrA1P1jbAQJxJf+VC72TxDX/YJcKue5bRqw==
 
-"@types/d3-drag@*":
+"@types/d3-drag@*", "@types/d3-drag@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/d3-drag/-/d3-drag-3.0.1.tgz#fb1e3d5cceeee4d913caa59dedf55c94cb66e80f"
   integrity sha512-o1Va7bLwwk6h03+nSM8dpaGEYnoIG19P0lKqlic8Un36ymh9NSkNFX1yiXMKNMx8rJ0Kfnn2eovuFaL6Jvj0zA==
@@ -1252,7 +1296,7 @@
   dependencies:
     "@types/d3-time" "*"
 
-"@types/d3-selection@*":
+"@types/d3-selection@*", "@types/d3-selection@^3.0.3":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.3.tgz#57be7da68e7d9c9b29efefd8ea5a9ef1171e42ba"
   integrity sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA==
@@ -1286,7 +1330,7 @@
   dependencies:
     "@types/d3-selection" "*"
 
-"@types/d3-zoom@*":
+"@types/d3-zoom@*", "@types/d3-zoom@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/d3-zoom/-/d3-zoom-3.0.1.tgz#4bfc7e29625c4f79df38e2c36de52ec3e9faf826"
   integrity sha512-7s5L9TjfqIYQmQQEUcpMAcBOahem7TRoSO/+Gkz02GbMVuULiZzjF2BOdw291dbO2aNon4m2OdFsRGaCq2caLQ==
@@ -1512,11 +1556,6 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/resize-observer-browser@^0.1.7":
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.7.tgz#294aaadf24ac6580b8fbd1fe3ab7b59fe85f9ef3"
-  integrity sha512-G9eN0Sn0ii9PWQ3Vl72jDPgeJwRWhv2Qk/nQkJuWmRmOB4HX3/BhD5SE1dZs/hzPZL/WKnvF0RHdTSG54QJFyg==
-
 "@types/[email protected]":
   version "0.12.0"
   resolved "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz"
@@ -6953,20 +6992,6 @@ [email protected]:
   dependencies:
     "@babel/runtime" "^7.12.5"
 
-[email protected]:
-  version "10.3.17"
-  resolved "https://registry.yarnpkg.com/react-flow-renderer/-/react-flow-renderer-10.3.17.tgz#06d6ecef5559ba5d3e64d2c8dcb74c43071d62b1"
-  integrity sha512-bywiqVErlh5kCDqw3x0an5Ur3mT9j9CwJsDwmhmz4i1IgYM1a0SPqqEhClvjX+s5pU4nHjmVaGXWK96pwsiGcQ==
-  dependencies:
-    "@babel/runtime" "^7.18.9"
-    "@types/d3" "^7.4.0"
-    "@types/resize-observer-browser" "^0.1.7"
-    classcat "^5.0.3"
-    d3-drag "^3.0.0"
-    d3-selection "^3.0.0"
-    d3-zoom "^3.0.0"
-    zustand "^3.7.2"
-
 react-is@^16.13.1, react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -7035,6 +7060,16 @@ [email protected]:
   dependencies:
     loose-envify "^1.1.0"
 
+reactflow@^11.0.0-next.13:
+  version "11.0.0-next.13"
+  resolved "https://registry.yarnpkg.com/reactflow/-/reactflow-11.0.0-next.13.tgz#ab04b32e446a2d692d3b7261b103208a8a4164f1"
+  integrity sha512-OSHG1Du3DjCvD5crgnI2HSab1VE1/ayYRf3GJHGAZqn3TncuHqLbCKMZ1U2P2IZ5djCcyMawcR/p49Z49DHL+g==
+  dependencies:
+    "@reactflow/background" "11.0.0-next.7"
+    "@reactflow/controls" "11.0.0-next.7"
+    "@reactflow/core" "11.0.0-next.7"
+    "@reactflow/minimap" "11.0.0-next.7"
+
 readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.3.0, readable-stream@^2.3.5:
   version "2.3.7"
   resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz"
@@ -8638,11 +8673,6 @@ yauzl@^2.10.0, yauzl@^2.4.2:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
-zustand@^3.7.2:
-  version "3.7.2"
-  resolved "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz"
-  integrity sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA==
-
 zustand@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.1.1.tgz#5a61cc755a002df5f041840a414ae6e9a99ee22b"