Bump react-flow-renderer from 9.7.4 to 10.0.3 (#685)

* Bump react-flow-renderer from 9.7.4 to 10.0.3

Bumps [react-flow-renderer](https://github.com/wbkd/react-flow) from 9.7.4 to 10.0.3.
- [Release notes](https://github.com/wbkd/react-flow/releases)
- [Changelog](https://github.com/wbkd/react-flow/blob/main/CHANGELOG.md)
- [Commits](xyflow/xyflow@9.7.4...10.0.3)

---
updated-dependencies:
- dependency-name: react-flow-renderer
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <[email protected]>

* Bump react-flow-renderer from 10.0.3 to 10.0.6

* Update JSDoc comments for useGitGraphHook fields

* Update usage patterns/imports for react-flow-renderer 10.x API changes

* Fix from react-dnd/react-dnd#3349 for Uncaught Invariant Violation: Expected drag drop context

* Add jest-esm-transformer per xyflow/xyflow#2020

* Config jest-esm-transformer to intercept and transpile ESM modules for Jest

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Nicholas Nelson <[email protected]>

jest.config.js

@@ -8,6 +8,10 @@ module.exports = {
         'jest-serializer-path',
     ],
     clearMocks: true,
+    transformIgnorePatterns: [],
+    transform: {
+        "\\.m?js?$": "jest-esm-transformer"
+    },
     moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
     moduleNameMapper: {
         "ace-builds": "<rootDir>/node_modules/ace-builds",

package.json

@@ -79,6 +79,7 @@
     "git-remote-protocol": "^0.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
+    "jest-esm-transformer": "^1.0.0",
     "jest-serializer-path": "^0.1.15",
     "node-loader": "^2.0.0",
     "pako": "^2.0.4",
@@ -117,12 +118,12 @@
     "react-dnd-html5-backend": "^15.1.2",
     "react-dnd-preview": "^6.0.2",
     "react-dom": "^17.0.2",
-    "react-flow-renderer": "^9.7.4",
+    "react-flow-renderer": "^10.0.6",
     "react-redux": "^7.2.6",
     "react-transition-group": "^4.4.2",
     "redux": "^4.1.2",
     "redux-persist": "^6.0.0",
     "sha1": "^1.1.1",
     "uuid": "^8.3.2"
   }
-}
+}

src/components/GitGraph/GitGraph.tsx

@@ -1,34 +1,38 @@
 import React, { useEffect, useState } from 'react';
-import ReactFlow, { addEdge, Connection, Edge, FlowElement, OnLoadFunc, OnLoadParams } from 'react-flow-renderer';
+import ReactFlow, { addEdge, Connection, Edge, isEdge, isNode, ReactFlowInstance, useEdgesState, useNodesState } from 'react-flow-renderer';
 import { nodeTypes } from './GitNode';
 import useGitGraph from '../../containers/hooks/useGitGraph';
 import layoutGraph from '../../containers/git-graph';
 import { UUID } from '../../store/types';
 
 const GitGraph = (props: { repo: UUID }) => {
-  const [elements, setElements] = useState<FlowElement[]>([]);
-  const [reactFlowState, setReactFlowState] = useState<OnLoadParams>();
-  const { graph, topological } = useGitGraph(props.repo);
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const onConnect = (params: Edge | Connection) => setEdges((eds) => addEdge(params, eds));
+  const onInit = (reactFlowInstance: ReactFlowInstance) => { setReactFlowState(reactFlowInstance) };
 
-  const onConnect = (params: Edge | Connection) => setElements((els) => addEdge(params, els));
-  const onLoad: OnLoadFunc = (rf) => { setReactFlowState(rf) };
+  const [reactFlowState, setReactFlowState] = useState<ReactFlowInstance>();
+  const { graph, topological } = useGitGraph(props.repo);
 
-  useEffect(() => { reactFlowState?.fitView() }, [elements]);
+  useEffect(() => { reactFlowState?.fitView() }, [nodes, edges]);
 
   useEffect(() => {
-    setElements(layoutGraph(graph, topological));
+    const rfElements = layoutGraph(graph, topological);
+    setNodes(rfElements.filter(isNode));
+    setEdges(rfElements.filter(isEdge));
   }, [graph]);
 
   return (
     <>
-      {/* <IconButton aria-label='print-graph' onClick={() => print()}>
-        <Info />
-      </IconButton> */}
       <ReactFlow
-        elements={elements}
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
         nodeTypes={nodeTypes}
         onConnect={onConnect}
-        onLoad={onLoad}
+        onInit={onInit}
+        fitView
         className='git-flow' />
     </>
   );

src/components/GitGraph/GitNode.tsx

@@ -62,6 +62,6 @@ const GitNode = (props: GitNodeProps) => {
 
 export const nodeTypes = {
   gitNode: GitNode
-}
+};
 
 export default GitNode;

src/components/Stack/StackPreview.tsx

@@ -1,4 +1,6 @@
 import React, { PropsWithChildren } from 'react';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import { usePreview } from 'react-dnd-preview';
 import { Card } from '../../store/slices/cards';
 import { Stack } from '../../store/slices/stacks';
@@ -22,14 +24,16 @@ const StackPreview = (props: PropsWithChildren<StackPreviewProps>) => {
     }
 
     return (itemType === DnDItemType.STACK) ?
-        <div className='stack' data-testid='stack-component' style={style}>
-            <StageButton cardIds={[]} />
-            <UnstageButton cardIds={[]} />
-            <CommitButton cardIds={[]} />
-            <SaveButton cardIds={[]} />
-            {props.cards.map(card => <CardComponent key={card.id} {...card} />)}
-            {props.children}
-        </div> : null;
+        <DndProvider backend={HTML5Backend}>
+            <div className='stack' data-testid='stack-component' style={style}>
+                <StageButton cardIds={[]} />
+                <UnstageButton cardIds={[]} />
+                <CommitButton cardIds={[]} />
+                <SaveButton cardIds={[]} />
+                {props.cards.map(card => <CardComponent key={card.id} {...card} />)}
+                {props.children}
+            </div>
+        </DndProvider> : null;
 };
 
 export default StackPreview;

src/containers/git-graph.ts

@@ -1,12 +1,12 @@
 import dagre from 'dagre';
-import { ArrowHeadType, Edge, FlowElement, isEdge, isNode, Node } from 'react-flow-renderer';
+import { Edge, isEdge, isNode, MarkerType, Node } from 'react-flow-renderer';
 import { colorSets } from './colors';
 import { CommitVertex, GitGraph } from './hooks/useGitGraph';
 
 const nodesep = 80;
 
-const layoutGraph = (graph: GitGraph, topological: string[]): FlowElement[] => {
-    const elements: FlowElement[] = [];
+const layoutGraph = (graph: GitGraph, topological: string[]): (Edge | Node)[] => {
+    const elements: (Edge | Node)[] = [];
     for (const oid of topological) {
         const commit = graph.get(oid);
         if (commit) {
@@ -19,7 +19,7 @@ const layoutGraph = (graph: GitGraph, topological: string[]): FlowElement[] => {
     return layoutOptimizer(elements);
 }
 
-const layoutOptimizer = (rfGraph: FlowElement[]): FlowElement[] => {
+const layoutOptimizer = (rfGraph: (Edge | Node)[]): (Edge | Node)[] => {
     const graph = new dagre.graphlib.Graph();
     graph.setGraph({ nodesep: nodesep });
     graph.setDefaultEdgeLabel(() => { return {}; });
@@ -59,7 +59,7 @@ const getEdges = (commit: CommitVertex): Edge[] => {
         source: parent,
         target: commit.oid,
         animated: commit.staged ? true : false,
-        arrowHeadType: ArrowHeadType.ArrowClosed
+        arrowHeadType: MarkerType.ArrowClosed
     }));
 }
 

src/containers/hooks/useGitGraph.ts

@@ -25,8 +25,11 @@ export type CommitVertex = ReadCommitResult & {
     conflicted: boolean
 }
 type useGitGraphHook = {
+    /** A map from commit oid to CommitVertex elements contained within a graph. */
     graph: GitGraph,
+    /** The ordered list of commit oids for the elements within the graph. */
     topological: Oid[],
+    /** A convenience function for printing both the graph and the topologically-sorted graph of elements. */
     print: () => void
 }
 

webpack.renderer.config.js

@@ -1,5 +1,6 @@
 const rules = require('./webpack.rules');
 const plugins = require('./webpack.plugins');
+const path = require('path');
 
 rules.push({
   test: /\.css$/,
@@ -12,32 +13,35 @@ module.exports = {
   },
   plugins: plugins,
   resolve: {
+    alias: {
+      'react-dnd': path.resolve('node_modules/react-dnd')
+    },
     extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
     fallback: {
       fs: false,
-    //   assert: require.resolve('assert'),
-    //   buffer: require.resolve('buffer'),
-    // console: require.resolve('console-browserify'),
-    // constants: require.resolve('constants-browserify'),
-    // crypto: require.resolve('crypto-browserify'),
-    // domain: require.resolve('domain-browser'),
-    // events: require.resolve('events'),
-    // http: require.resolve('stream-http'),
-    // https: require.resolve('https-browserify'),
-    // os: require.resolve('os-browserify/browser'),
-    // path: require.resolve('path-browserify'),
-    // punycode: require.resolve('punycode'),
-    // process: require.resolve('process/browser'),
-    // querystring: require.resolve('querystring-es3'),
-    // stream: require.resolve('stream-browserify'),
-    // string_decoder: require.resolve('string_decoder'),
-    // sys: require.resolve('util'),
-    // timers: require.resolve('timers-browserify'),
-    // tty: require.resolve('tty-browserify'),
-    // url: require.resolve('url'),
-    // util: require.resolve('util'),
-    // vm: require.resolve('vm-browserify'),
-    // zlib: require.resolve('browserify-zlib'),
+      //   assert: require.resolve('assert'),
+      //   buffer: require.resolve('buffer'),
+      // console: require.resolve('console-browserify'),
+      // constants: require.resolve('constants-browserify'),
+      // crypto: require.resolve('crypto-browserify'),
+      // domain: require.resolve('domain-browser'),
+      // events: require.resolve('events'),
+      // http: require.resolve('stream-http'),
+      // https: require.resolve('https-browserify'),
+      // os: require.resolve('os-browserify/browser'),
+      // path: require.resolve('path-browserify'),
+      // punycode: require.resolve('punycode'),
+      // process: require.resolve('process/browser'),
+      // querystring: require.resolve('querystring-es3'),
+      // stream: require.resolve('stream-browserify'),
+      // string_decoder: require.resolve('string_decoder'),
+      // sys: require.resolve('util'),
+      // timers: require.resolve('timers-browserify'),
+      // tty: require.resolve('tty-browserify'),
+      // url: require.resolve('url'),
+      // util: require.resolve('util'),
+      // vm: require.resolve('vm-browserify'),
+      // zlib: require.resolve('browserify-zlib'),
     },
   },
 };