feat: start of refactor

Author: Jaryt

.nvmrc

@@ -1 +1 @@
-v16.15.1
+v18.12.0

package.json

@@ -22,17 +22,14 @@
     "react-aria": "3.19.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^18.2.0",
-    "react-flow-renderer": "11.1.0",
     "react-instantsearch-hooks-web": "^6.29.0",
     "react-redux": "^7.2.6",
+    "reactflow": "11.0.0",
     "start-server-and-test": "^1.14.0",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@reduxjs/toolkit": "^1.6.2",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/user-event": "^13.5.0",
     "@types/algoliasearch": "^4.0.0",
     "@types/jest": "^27.0.2",
     "@types/node": "^16.11.35",
@@ -41,7 +38,6 @@
     "@types/react-dom": "^18.0.6",
     "@types/react-tabs": "^2.3.3",
     "@types/uuid": "^8.3.1",
-    "@vitejs/plugin-react": "^2.1.0",
     "autoprefixer": "^10.4.12",
     "cypress": "^10.11.0",
     "eslint-plugin-react-hooks": "^4.3.0",

src/App.tsx

@@ -5,6 +5,7 @@ import Toast from './components/atoms/Toast';
 import ToolTip from './components/atoms/Tooltip';
 import ConfirmationModal from './components/containers/ConfirmationModal';
 import KBarList from './components/containers/KBarList';
+import { FlowProvided } from './components/flow/Flow';
 import EditorPane from './components/panes/EditorPane';
 import NavigationPane from './components/panes/NavigationPane';
 import WorkflowsPane from './components/panes/WorkflowsPane';

src/components/atoms/Edge.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { EdgeProps } from 'react-flow-renderer';
+// import { EdgeProps } from 'react-flow-renderer';
 
 // export default function Edge({
 //   id,

src/components/containers/FlowTools.tsx

@@ -0,0 +1,12 @@
+import { Button } from "../atoms/Button"
+import PreviewToolbox from "./PreviewToolbox"
+
+const FlowTools = () => {
+    return (<div className="mr-2 px-4 flex flex-row border-r border-r-circle-gray-300">   
+        <Button variant="secondary" className="mr-0 rounded-r-none">Connect</Button>
+        <Button variant="secondary" className="ml-0 rounded-l-none">Move</Button>
+      <PreviewToolbox />
+    </div>)
+}
+
+export { FlowTools }

src/components/containers/HeaderMenu.tsx

@@ -1,10 +1,12 @@
+import { Button } from '../atoms/Button';
 import { ExternalLinks } from './ExternalLinks';
+import { FlowTools } from './FlowTools';
 import PreviewToolbox from './PreviewToolbox';
 
 export default function HeaderMenu() {
   return (
-    <div className="ml-auto flex my-auto flex-row p-4 space-x-2">
-      <PreviewToolbox />
+    <div className="ml-auto flex my-auto flex-row space-x-2">
+      <FlowTools />
       <ExternalLinks />
     </div>
   );

src/components/flow/Flow.tsx

@@ -1,35 +1,41 @@
-import ReactFlow, { Background, BackgroundVariant, Controls, MiniMap, ReactFlowProvider, useReactFlow } from "react-flow-renderer";
+import ReactFlow, { Background, BackgroundVariant, ControlButton, Controls, MiniMap, ReactFlowProvider, useReactFlow } from "reactflow";
 import { useStoreState } from "../../state/Hooks";
 
 export type FlowProps = { className?: string }
 
 const Flow = (props: FlowProps) => {
-    const reactFlowInstance = useReactFlow();
+    // const reactFlowInstance = useReactFlow();
     const dragging = useStoreState((state) => state.dragging);
 
-    return <ReactFlow   
+    return <ReactFlow
+        minZoom={-Infinity}
+        fitView
+        // nodes={nodes}
+        // edges={edges as Edge[]}
+        // onNodeClick={handleNodeClick}
         className={props.className} 
         onDragOver={(e) => {
             if (dragging?.dataType?.dragTarget === 'workflow') {
             e.preventDefault();
             }
-        }}>
+        }}
+        onInit={(reactFlowInstance) => console.log('flow loaded:', reactFlowInstance)}
+        >
         <Background
-          variant={BackgroundVariant.Dots}
           gap={15}
           color="#c7c7c7"
           className="bg-circle-gray-200"
-          size={1}
+          size={2}  
         />
-        <Controls />
-        <MiniMap className="w-32 h-24" />
+        <Controls>
+        </Controls>
     </ReactFlow>
 }
 
-const FlowProvided = (props: FlowProps) => {
+const GraphWrapper = (props: FlowProps) => {
     return <ReactFlowProvider>
         <Flow {...props} />
     </ReactFlowProvider>
 }
 
-export { FlowProvided, Flow };
+export { GraphWrapper, Flow };

src/components/panes/WorkflowsPane.tsx

@@ -1,7 +1,8 @@
 import Logo from '../../icons/ui/Logo';
 import HeaderMenu from '../containers/HeaderMenu';
 // import WorkflowContainer from '../containers/WorkflowContainer';
-import { FlowProvided } from '../flow/Flow';
+import { GraphWrapper } from '../flow/Flow';
+import ReactFlow, { Background, BackgroundVariant, ControlButton, Controls } from 'reactflow';
 
 const WorkflowsPane = () => {
   return (
@@ -10,20 +11,18 @@ const WorkflowsPane = () => {
       className="flex flex-col flex-nowrap flex-1"
       id="Workflows-Pane"
     >
-      <header className="flex w-full bg-white h-16">
-        <div className="p-2 flex flex-row my-auto w-full">
+      <header className="flex w-full bg-white p-4">
+        <div className="flex flex-row my-auto w-full">
           <div className="my-auto flex flex-row">
             <Logo className="mx-2" />
             <h1 className="text-xl font-bold">Visual Config Editor</h1>
           </div>
         </div>
         <HeaderMenu />
       </header>
-      {/* <WorkflowContainer
-        bgClassName="bg-circle-gray-200"
-        className="border border-r-0 h-full border-b-0 border-circle-gray-300"
-      /> */}
-      <FlowProvided className="border border-r-0 h-full border-b-0 border-circle-gray-300"></FlowProvided>
+      <GraphWrapper className="z-10 border border-r-0 h-full border-b-0 border-circle-gray-300"></GraphWrapper>
+ 
+      
     </div>
   );
 };

src/main.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
 import './index.css'
+import 'reactflow/dist/style.css';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>

src/mappings/InspectableMapping.tsx

@@ -1,6 +1,6 @@
 import { Generable } from '@circleci/circleci-config-sdk/dist/src/lib/Components';
 import { FormikValues } from 'formik';
-import { Edge, NodeProps } from 'react-flow-renderer';
+    import { Edge, NodeProps } from 'reactflow';
 import { IconProps } from '../icons/IconProps';
 import {
   DefinitionsModel,