@evenicanpm/admin-integrate 1.1.0 → 1.2.2

package/src/components/integration-view/elk-layout-options.ts

@@ -1,39 +1,39 @@
 import { LayoutOptions } from "elkjs";
 
 export const layoutOptions: LayoutOptions = {
-  "elk.algorithm": "layered",
-  "elk.direction": "DOWN",
+	"elk.algorithm": "layered",
+	"elk.direction": "DOWN",
 
-  // Arrange parent and child nodes in clear layers
-  "org.eclipse.elk.hierarchyHandling": "INCLUDE_CHILDREN",
+	// Arrange parent and child nodes in clear layers
+	"org.eclipse.elk.hierarchyHandling": "INCLUDE_CHILDREN",
 
-  // Center parent nodes among their children, children immediately below
-  "org.eclipse.elk.layered.contentAlignment": "H_CENTER,V_TOP",
+	// Center parent nodes among their children, children immediately below
+	"org.eclipse.elk.layered.contentAlignment": "H_CENTER,V_TOP",
 
-  // Reduce edge crossings
-  "org.eclipse.elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
+	// Reduce edge crossings
+	"org.eclipse.elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
 
-  // Minimize bends and keep edges as short as possible
-  "org.eclipse.elk.layered.nodePlacement.edgeRouting": "ORTHOGONAL",
-  "org.eclipse.elk.layered.nodePlacement.edgeAvoidance": "true",
-  "org.eclipse.elk.layered.nodePlacement.edgeNodeOverlapAvoided": "true",
-  "org.eclipse.elk.layered.nodePlacement.edgeStraightening": "true",
+	// Minimize bends and keep edges as short as possible
+	"org.eclipse.elk.layered.nodePlacement.edgeRouting": "ORTHOGONAL",
+	"org.eclipse.elk.layered.nodePlacement.edgeAvoidance": "true",
+	"org.eclipse.elk.layered.nodePlacement.edgeNodeOverlapAvoided": "true",
+	"org.eclipse.elk.layered.nodePlacement.edgeStraightening": "true",
 
-  // Layout spacing options
-  "org.eclipse.elk.layered.spacing.nodeNodeBetweenLayers": "75",
-  "org.eclipse.elk.spacing.nodeNode": "80",
-  "org.eclipse.elk.spacing.portPort": "10",
+	// Layout spacing options
+	"org.eclipse.elk.layered.spacing.nodeNodeBetweenLayers": "75",
+	"org.eclipse.elk.spacing.nodeNode": "80",
+	"org.eclipse.elk.spacing.portPort": "10",
 
-  // Add spacing between edges that do not share a connection point
-  "org.eclipse.elk.spacing.edgeEdge": "30",
+	// Add spacing between edges that do not share a connection point
+	"org.eclipse.elk.spacing.edgeEdge": "30",
 
-  // Node placement strategy for centered alignment
-  "org.eclipse.elk.layered.nodePlacement.strategy": "SIMPLE",
+	// Node placement strategy for centered alignment
+	"org.eclipse.elk.layered.nodePlacement.strategy": "SIMPLE",
 
-  // Layering strategy to optimize horizontal alignment
-  "org.eclipse.elk.layered.layering.strategy": "NETWORK_SIMPLEX",
+	// Layering strategy to optimize horizontal alignment
+	"org.eclipse.elk.layered.layering.strategy": "NETWORK_SIMPLEX",
 
-  // Merge edges to have them originate from the same point
-  "org.eclipse.elk.layered.mergeEdges": "true",
-  "org.eclipse.elk.layered.considerModelOrder.strategy": "PREFER_NODES",
+	// Merge edges to have them originate from the same point
+	"org.eclipse.elk.layered.mergeEdges": "true",
+	"org.eclipse.elk.layered.considerModelOrder.strategy": "PREFER_NODES",
 };

package/src/components/integration-view/elk-types.ts

@@ -1,19 +1,23 @@
 import { ElkExtendedEdge, ElkNode } from "elkjs";
-import { extend } from "lodash";
 
 export interface ElkNodeWithFlow extends ElkNode {
-  type?: string;
-  data?: {
-    label: string;
-  };
-  position?: {
-    x: number;
-    y: number;
-  };
-  children?: ElkNodeWithFlow[];
-  extent?: string;
+	type?: string;
+	data?: {
+		label: string;
+		icon?: any;
+		isLast?: boolean;
+	};
+	position?: {
+		x: number;
+		y: number;
+	};
+	children?: ElkNodeWithFlow[];
+	extent?: string;
 }
 
 export interface ElkExtendedEdgeWithFlow extends ElkExtendedEdge {
-  type?: string;
+	type?: string;
+	target?: string;
+	source?: string;
+	markerEnd?: { type: string };
 }

package/src/components/integration-view/flow-types.tsx

@@ -5,12 +5,12 @@ import { GroupNode } from "./nodes/group-node";
 import { TaskNode } from "./nodes/task-node";
 
 export const edgeTypes = {
-  "default-edge": DefaultEdge,
+	"default-edge": DefaultEdge,
 };
 
 export const nodeTypes = {
-  "connection-node": ConnectionNode,
-  "entry-node": EntryNode,
-  "group-node": GroupNode,
-  "task-node": TaskNode, // Assuming you have a custom connection node
+	"connection-node": ConnectionNode,
+	"entry-node": EntryNode,
+	"group-node": GroupNode,
+	"task-node": TaskNode, // Assuming you have a custom connection node
 };

package/src/components/integration-view/integration-view.tsx

@@ -1,20 +1,20 @@
 "use client";
 
 import React, { useCallback, useLayoutEffect } from "react";
-import { Box, Typography, AppBar, Toolbar, Stack } from "@mui/material";
-import { Theme, useTheme } from "@mui/material";
+import { Box } from "@mui/material";
 
 import ELK from "elkjs/lib/elk.bundled.js";
 
 import "@xyflow/react/dist/style.css";
 
 import {
-  Background,
-  ReactFlow,
-  ReactFlowProvider,
-  useEdgesState,
-  useNodesState,
-  useReactFlow,
+	Background,
+	Controls,
+	ReactFlow,
+	ReactFlowProvider,
+	useEdgesState,
+	useNodesState,
+	useReactFlow,
 } from "@xyflow/react";
 
 import { nodeTypes, edgeTypes } from "./flow-types";
@@ -22,138 +22,140 @@ import { nodeTypes, edgeTypes } from "./flow-types";
 import { layoutOptions as elkOptions } from "./elk-layout-options";
 
 import { initialNodes, initialEdges } from "./temp-data/initialElements";
-import { ElkNodeWithFlow } from "./elk-types";
+import { ElkExtendedEdgeWithFlow, ElkNodeWithFlow } from "./elk-types";
 
 const elk = new ELK();
 
 const getLayoutedElements = (nodes: any, edges: any, options: any = {}) => {
-  const graph: ElkNodeWithFlow = {
-    id: "root",
-    children: nodes.map((node: any) => ({
-      ...node,
-      targetPosition: "top",
-      sourcePosition: "bottom",
-      // Hardcoded until width and height calculation is implemented
-      width: 150,
-      height: 50,
-    })),
-    edges: edges,
-  };
-
-  return elk
-    .layout(graph, { layoutOptions: options })
-    .then((layoutedGraph: any) => {
-      let nodeItems: any = [];
-
-      layoutedGraph.children.forEach((node: any) => {
-        nodeItems.push({
-          ...node,
-          // React Flow expects a position property on the node instead of `x`
-          // and `y` fields.
-          height: node.height,
-          position: { x: node.x, y: node.y },
-        });
-
-        if (node.children) {
-          node.children.forEach((node2: any) => {
-            nodeItems.push({
-              ...node2,
-              // React Flow expects a position property on the node instead of `x`
-              // and `y` fields.
-              targetPosition: "top",
-              sourcePosition: "bottom",
-              position: { x: node2.x, y: node2.y },
-              parentId: node.id,
-            });
-          });
-        }
-      });
-
-      layoutedGraph.edges.forEach((edge: any) => {
-        edge.source = edge.sources[0];
-        edge.target = edge.targets[0];
-      });
-
-      return {
-        nodes: nodeItems,
-        edges: layoutedGraph.edges,
-      };
-    })
-    .catch(console.error);
+	const graph: ElkNodeWithFlow = {
+		id: "root",
+		children: nodes.map((node: any) => ({
+			...node,
+			targetPosition: "top",
+			sourcePosition: "bottom",
+			// Hardcoded until width and height calculation is implemented
+		})),
+		edges: edges,
+	};
+
+	return elk
+		.layout(graph, { layoutOptions: options })
+		.then((layoutedGraph: any) => {
+			let nodeItems: any = [];
+
+			layoutedGraph.children.forEach((node: any) => {
+				nodeItems.push({
+					...node,
+					// React Flow expects a position property on the node instead of `x`
+					// and `y` fields.
+					height: node.height,
+					width: node.width,
+					position: { x: node.x, y: node.y + calcYOffset() },
+				});
+
+				if (node.children) {
+					node.children.forEach((node2: any) => {
+						nodeItems.push({
+							...node2,
+							// React Flow expects a position property on the node instead of `x`
+							// and `y` fields.
+							targetPosition: "top",
+							sourcePosition: "bottom",
+							position: { x: node2.x, y: node2.y + calcYOffset() },
+							parentId: node.id,
+						});
+					});
+				}
+			});
+
+			layoutedGraph.edges.forEach((edge: ElkExtendedEdgeWithFlow) => {
+				edge.source = edge.sources[0];
+				edge.target = edge.targets[0];
+			});
+
+			return {
+				nodes: nodeItems,
+				edges: layoutedGraph.edges.map((edge: ElkExtendedEdgeWithFlow) => ({
+					...edge,
+				})),
+			};
+		})
+		.catch(console.error);
+};
+
+const calcYOffset = () => {
+	return 60;
 };
 
 interface Props {
-  title?: string; // e.g. Executions
-  section?: string; // e.g. e4Integrate
+	title?: string; // e.g. Executions
+	section?: string; // e.g. e4Integrate
 }
 
-const IntegrationView: React.FC<Props> = (props: Props) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
-
-  const [nodes, setNodes, onNodesChange] = useNodesState<any>([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState<any>([]);
-  const { fitView } = useReactFlow();
-
-  const onConnect = useCallback((params: any) => {}, []);
-  const onLayout = useCallback(
-    ({ useInitialNodes = false }: any) => {
-      const opts = { ...elkOptions };
-      const ns = useInitialNodes ? initialNodes : nodes;
-      const es = useInitialNodes ? initialEdges : edges;
-
-      getLayoutedElements(ns, es, opts).then(
-        ({ nodes: layoutedNodes, edges: layoutedEdges }: any) => {
-          setNodes(layoutedNodes);
-          setEdges(layoutedEdges);
-          fitView();
-        }
-      );
-    },
-    [nodes, edges]
-  );
-
-  // Calculate the initial layout on mount.
-  useLayoutEffect(() => {
-    onLayout({ useInitialNodes: true });
-  }, []);
-
-  return (
-    <Box sx={{ flexGrow: 1 }}>
-      <ReactFlowProvider>
-        <Box sx={{ width: "750px", height: "750px" }}>
-          <ReactFlow
-            nodes={nodes}
-            edges={edges}
-            nodeTypes={nodeTypes}
-            edgeTypes={edgeTypes}
-            onConnect={onConnect}
-            onNodesChange={onNodesChange}
-            onEdgesChange={onEdgesChange}
-            fitView
-          >
-            <Background />
-          </ReactFlow>
-        </Box>
-      </ReactFlowProvider>
-    </Box>
-  );
-};
-
-const getStyles = (theme: Theme) => {
-  return {
-    appbar: {
-      color: "#000",
-    },
-    toolbar: {
-      backgroundColor: "#fff",
-      padding: theme.spacing(2, 0),
-    },
-  };
+const IntegrationView: React.FC<Props> = () => {
+	const [nodes, setNodes, onNodesChange] = useNodesState<any>([]);
+	const [edges, setEdges, onEdgesChange] = useEdgesState<any>([]);
+	const { fitView } = useReactFlow();
+
+	const onConnect = useCallback(() => {}, []);
+	const onLayout = useCallback(
+		({ useInitialNodes = false }: any) => {
+			const opts = { ...elkOptions };
+			const ns = useInitialNodes ? initialNodes : nodes;
+			const es = useInitialNodes ? initialEdges : edges;
+
+			getLayoutedElements(ns, es, opts).then(
+				({ nodes: layoutedNodes, edges: layoutedEdges }: any) => {
+					setNodes(layoutedNodes);
+					setEdges(layoutedEdges);
+					fitView();
+				},
+			);
+		},
+		[nodes, edges],
+	);
+
+	// Calculate the initial layout on mount.
+	useLayoutEffect(() => {
+		onLayout({ useInitialNodes: true });
+	}, []);
+
+	return (
+		<Box sx={{ flexGrow: 1 }}>
+			<ReactFlowProvider>
+				<Box sx={{ width: "750px", height: "600px" }}>
+					<ReactFlow
+						nodes={nodes}
+						edges={edges}
+						nodeTypes={nodeTypes}
+						edgeTypes={edgeTypes}
+						onConnect={onConnect}
+						onNodesChange={onNodesChange}
+						onEdgesChange={onEdgesChange}
+						fitView={true} // Fits the view on initial load
+						fitViewOptions={{
+							padding: 0.1,
+							includeHiddenNodes: false,
+							minZoom: 0.1,
+							maxZoom: 2,
+							duration: 200,
+							nodes: [{ id: "1" }, { id: "2" }], // nodes to fit
+						}} // Optional options for initial fit
+						nodesDraggable={false}
+						minZoom={0.1} // Lock zoom to 1
+						maxZoom={2} // Lock zoom to 1
+					>
+						<Background />
+						<Controls />
+					</ReactFlow>
+				</Box>
+			</ReactFlowProvider>
+		</Box>
+	);
 };
 
 export default () => (
-  <ReactFlowProvider>
-    <IntegrationView />
-  </ReactFlowProvider>
+	<ReactFlowProvider>
+		<IntegrationView />
+	</ReactFlowProvider>
 );

package/src/components/integration-view/nodes/base-node.tsx

@@ -0,0 +1,50 @@
+import { Card, CardContent, CardHeader } from "@mui/material";
+import { forwardRef, type HTMLAttributes } from "react";
+
+export const BaseNode = forwardRef<
+	HTMLDivElement,
+	HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<Card tabIndex={0}>
+		<CardContent ref={ref} {...props} />
+	</Card>
+));
+BaseNode.displayName = "BaseNode";
+
+/**
+ * A container for a consistent header layout intended to be used inside the
+ * `<BaseNode />` component.
+ */
+export const BaseNodeHeader = forwardRef<
+	HTMLElement,
+	HTMLAttributes<HTMLElement>
+>(({ className, ...props }, ref) => <CardHeader ref={ref} {...props} />);
+BaseNodeHeader.displayName = "BaseNodeHeader";
+
+/**
+ * The title text for the node. To maintain a native application feel, the title
+ * text is not selectable.
+ */
+export const BaseNodeHeaderTitle = forwardRef<
+	HTMLHeadingElement,
+	HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+	<h3 ref={ref} data-slot="base-node-title" {...props} />
+));
+BaseNodeHeaderTitle.displayName = "BaseNodeHeaderTitle";
+
+export const BaseNodeContent = forwardRef<
+	HTMLDivElement,
+	HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<CardContent ref={ref} data-slot="base-node-content" {...props} />
+));
+BaseNodeContent.displayName = "BaseNodeContent";
+
+export const BaseNodeFooter = forwardRef<
+	HTMLDivElement,
+	HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div ref={ref} data-slot="base-node-footer" {...props} />
+));
+BaseNodeFooter.displayName = "BaseNodeFooter";

package/src/components/integration-view/nodes/connection-node.tsx

@@ -1,10 +1,10 @@
-import { Handle, NodeProps, Position } from "@xyflow/react";
+import { Handle, Position } from "@xyflow/react";
 
-export function ConnectionNode(props: NodeProps): JSX.Element {
-  return (
-    <div>
-      <Handle type="source" position={Position.Bottom} />
-      <Handle type="target" position={Position.Top} />
-    </div>
-  );
+export function ConnectionNode(): JSX.Element {
+	return (
+		<div>
+			<Handle type="source" position={Position.Bottom} style={{ opacity: 1 }} />
+			<Handle type="target" position={Position.Top} style={{ opacity: 0 }} />
+		</div>
+	);
 }

package/src/components/integration-view/nodes/entry-node.tsx

@@ -1,10 +1,10 @@
-import { Handle, NodeProps, Position } from "@xyflow/react";
+import { Handle, Position } from "@xyflow/react";
 
-export function EntryNode(props: NodeProps): JSX.Element {
-  return (
-    <div>
-      <Handle type="source" position={Position.Bottom} />
-      <Handle type="target" position={Position.Top} />
-    </div>
-  );
+export function EntryNode(): JSX.Element {
+	return (
+		<div>
+			<Handle type="source" position={Position.Bottom} />
+			<Handle type="target" position={Position.Top} />
+		</div>
+	);
 }

package/src/components/integration-view/nodes/group-node.tsx

@@ -1,10 +1,51 @@
+import { Box, Card, CardContent, CardHeader, Typography } from "@mui/material";
 import { Handle, NodeProps, Position } from "@xyflow/react";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
 
 export function GroupNode(props: NodeProps): JSX.Element {
-  return (
-    <div>
-      <Handle type="source" position={Position.Bottom} />
-      <Handle type="target" position={Position.Top} />
-    </div>
-  );
+	return (
+		<Box>
+			<Card
+				sx={{
+					borderWidth: 1,
+					borderStyle: "solid",
+					borderColor: "grey.700",
+					width: props.width,
+				}}
+			>
+				<CardHeader
+					title={
+						<Typography variant="h5" sx={{ textAlign: "center" }}>
+							{props?.data?.label as string}
+						</Typography>
+					}
+					sx={{
+						height: 62,
+						paddingRight: "48px",
+					}}
+				/>
+				<CardContent
+					sx={{
+						height: props.height,
+						width: (props.width || 0) + 48,
+						display: "flex",
+						justifyContent: "center",
+						alignItems: "flex-end",
+						paddingRight: "48px",
+					}}
+				>
+					<AddCircleOutlineIcon
+						sx={{
+							color: "grey.600",
+							"&:hover": {
+								color: "#4E97FD", //Blue not implemented in the theme
+							},
+							marginLeft: "-16px",
+						}}
+					/>
+				</CardContent>
+				<Handle type="target" position={Position.Top} />
+			</Card>
+		</Box>
+	);
 }

package/src/components/integration-view/nodes/task-node.tsx

@@ -1,17 +1,62 @@
+import { Box, Card, CardContent, Typography, useTheme } from "@mui/material";
 import { Handle, NodeProps, Position } from "@xyflow/react";
 
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+
 export function TaskNode(props: NodeProps): JSX.Element {
-  return (
-    <div
-      className="task-node"
-      style={{
-        padding: "10px",
-        border: "1px solid #ddd",
-        borderRadius: "30px",
-      }}
-    >
-      <Handle type="source" position={Position.Bottom} />
-      <Handle type="target" position={Position.Top} />
-    </div>
-  );
+	const theme = useTheme();
+
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center",
+				//width: props.width + 24 + theme.spacing(1),
+			}}
+		>
+			<Card
+				sx={{
+					borderWidth: 1,
+					borderStyle: "solid",
+					borderColor: "grey.700",
+					"&:hover": {
+						borderColor: "#4E97FD", //Blue not implemented in the theme
+						backgroundColor: "#DBF0FE",
+					},
+				}}
+			>
+				<CardContent
+					sx={{
+						height: props.height,
+						width: props.width,
+						display: "flex",
+						justifyContent: "center",
+						alignItems: "center",
+					}}
+				>
+					{props?.data?.icon as any}
+					<Typography
+						variant="h6"
+						sx={{ textAlign: "center", paddingLeft: theme.spacing(1) }}
+					>
+						{props?.data?.label as string}
+					</Typography>
+				</CardContent>
+				<Handle type="target" position={Position.Top} />
+				<Handle type="source" position={Position.Bottom} />
+			</Card>
+			{props?.data?.isLast ? (
+				<AddCircleOutlineIcon
+					sx={{
+						color: "grey.600",
+						marginLeft: theme.spacing(1),
+						"&:hover": {
+							color: "#4E97FD", //Blue not implemented in the theme
+						},
+					}}
+				/>
+			) : null}
+		</Box>
+	);
 }