Updated flow

src/components/button.tsx

@@ -0,0 +1,3 @@
+export const Button = ({ children, onClick }) => {
+  return <button onClick={onClick}>{children}</button>;
+};

src/components/flow/flow-nodes.tsx

@@ -11,3 +11,7 @@ export const Label = ({ data }: NodeProps<NodeData>) => (
 export function InputText({ data }: NodeProps<NodeData>) {
   return <div>TextUpdater {data.value}</div>;
 }
+
+export const AssetType1 = ({ data }: NodeProps<NodeData>) => (
+  <div>A big number: {data.value}</div>
+);

src/components/flow/flow.tsx

@@ -26,8 +26,12 @@ const nodeTypesDefault: NodeTypes = {
   editable: InputText,
 };
 
-type Props = {
+const proOptions = { hideAttribution: true };
+
+type FlowProps = {
+  background?: BackgroundVariant;
   defaultEdgeOptions?: DefaultEdgeOptions;
+  draggable?: boolean;
   fitView?: boolean;
   fitViewOptions?: FitViewOptions;
   height?: number;
@@ -37,10 +41,12 @@ type Props = {
   showControls?: boolean;
   showMiniMap?: boolean;
   width?: number;
+  zoom?: boolean;
 };
 
-export const Flow: React.FC<Props> = ({
-  height = 860,
+export const Flow: React.FC<FlowProps> = ({
+  background,
+  height = 300,
   initialEdges,
   initialNodes,
   nodeTypes = nodeTypesDefault,
@@ -49,7 +55,9 @@ export const Flow: React.FC<Props> = ({
   fitView,
   showControls,
   showMiniMap,
-  width = 860,
+  zoom = true,
+  draggable = true,
+  width = 800,
 }) => {
   const [nodes, setNodes] = useState<Node[]>(initialNodes);
   const [edges, setEdges] = useState<Edge[]>(initialEdges);
@@ -79,10 +87,18 @@ export const Flow: React.FC<Props> = ({
         fitViewOptions={fitViewOptions}
         defaultEdgeOptions={defaultEdgeOptions}
         nodeTypes={nodeTypes}
+        zoomOnScroll={zoom}
+        zoomOnDoubleClick={zoom}
+        zoomOnPinch={zoom}
+        proOptions={proOptions} // See pricing before using this option
+        panOnDrag={draggable}
+        draggable={draggable}
+        nodesDraggable={draggable}
+        style={{ border: "1px solid #ddd" }}
       >
         {showControls && <Controls />}
         {showMiniMap && <MiniMap />}
-        <Background variant={BackgroundVariant.Lines} gap={12} size={1} />
+        {background && <Background variant={background} gap={12} size={1} />}
       </ReactFlow>
     </div>
   );

src/data/data.ts

@@ -21,7 +21,21 @@ export const BriffOrganization: Organization = {
   teams: [BriffTeam],
 };
 
-export const team1Nodes: Node[] = [
+export const teamOrganization: Node[] = [
+  {
+    id: "asset-1-type-1",
+    type: "asset",
+    position: { x: 20, y: 77.6997 },
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
+    style: {
+      width: 150,
+      height: 130,
+    },
+    data: {
+      label: "Asset - Type 1 Details",
+    },
+  },
   {
     id: "team-id-org",
     position: { x: 250, y: 43.0167 },
@@ -34,16 +48,6 @@ export const team1Nodes: Node[] = [
       backgroundColor: "transparent",
     },
   },
-  {
-    id: "asset-1-type-1",
-    position: { x: 20, y: 77.6997 },
-    sourcePosition: Position.Right,
-    targetPosition: Position.Left,
-    data: {
-      label:
-        "Asset - Type 1 - Detail Asset - Type 1 - Detail Asset - Type 1 - Detail Asset - Type 1 - Detail Asset - Type 1 - Detail Asset - Type 1 - Detail ",
-    },
-  },
   {
     id: "agent",
     position: { x: 280, y: 180 },

src/index.css

@@ -29,11 +29,9 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-
   cursor: pointer;
   transition: border-color 0.25s;
-  margin: 20px;
-
+  margin-bottom: 20px;
 }
 button:hover {
   border-color: #646cff;
@@ -42,6 +40,3 @@ button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
-
-
-

src/pages/teams/team-flow.tsx

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+import { Flow } from "../../components/flow";
+import { team1Edges, teamOrganization } from "../../data/data";
+import { Button } from "../../components/button";
+
+const FlowWrapper = styled.div`
+  margin-top: 16px;
+  height: 316px;
+  width: 800px;
+`;
+
+const defaultFlowProps = {
+  fitView: true,
+  zoom: false,
+  draggable: false,
+};
+
+export const TeamFlow = () => {
+
+  const onEditClick = () => {
+    console.info("Redirect to the edit team page");
+  };
+
+  return (
+    <FlowWrapper>
+      <div style={{ display: "flex", justifyContent: "end" }}>
+        <Button onClick={onEditClick}>Edit</Button>
+      </div>
+      <Flow
+        initialNodes={teamOrganization}
+        initialEdges={team1Edges}
+        {...defaultFlowProps}
+      />
+    </FlowWrapper>
+  );
+};

src/pages/teams/teams-page.tsx

@@ -3,30 +3,23 @@ import { TabsComponent } from "../../components/tabs";
 import { Link } from "@mui/material";
 import styled from "styled-components";
 import { Routes } from "../../Routes";
-import { team1Edges, teamOrganization } from "../../data/data";
-import { Flow } from "../../components/flow";
+import { TeamFlow } from "./team-flow";
 
 const LinksWrapper = styled.section`
   display: flex;
   gap: 16px;
 `;
 
-const StyledText = styled.span`
+const Separator = styled.span`
   color: #1976d2;
 `;
 
-const FlowWrapper = styled.div`
-  margin-top: 16px;
-`;
 export const TeamsPage = () => {
   const onNewTeamClick = () =>
     console.info("🚧 Add modal to fill with basic data for a new team");
 
   return (
     <>
-      <div style={{ display: "flex", justifyContent: "end" }}>
-        <button>Save Changes</button>
-      </div>
       <TabsComponent
         tabs={[
           {
@@ -38,25 +31,17 @@ export const TeamsPage = () => {
               <>
                 <LinksWrapper>
                   <Link href={Routes.teamOrg}>Org</Link>
-                  <StyledText> / </StyledText>
+                  <Separator> / </Separator>
                   <Link href={Routes.teamMembers}>Members</Link>
                 </LinksWrapper>
                 {/* ADD React Router, several tabs */}
-                <FlowWrapper>
-                  <Flow
-                    initialNodes={teamOrganization}
-                    initialEdges={team1Edges}
-                    type="team"
-                    fitView
-                    zoom={false}
-                  />
-                </FlowWrapper>
+                <TeamFlow />
               </>
             ),
           },
           { label: "➕", onClick: onNewTeamClick },
         ]}
-      ></TabsComponent>
+      />
     </>
   );
 };