@evenicanpm/admin-integrate 1.2.2 → 1.3.0

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

@@ -0,0 +1,65 @@
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import { Box, Card, CardContent, CardHeader, Typography } from "@mui/material";
+import { Handle, type NodeProps, Position } from "@xyflow/react";
+import { useTranslations } from "next-intl";
+
+export function EmptyNode(props: NodeProps): JSX.Element {
+	const t = useTranslations("Integrate.IntegrationDetails.View.EmptyNode");
+	return (
+		<Box sx={{ opacity: props.data.disabled ? 0.5 : 1 }}>
+			<Card
+				sx={{
+					borderWidth: 1,
+					borderStyle: "dashed",
+					borderColor: "grey.700",
+					backgroundColor: "transparent",
+					width: props.width,
+					"&:hover": {
+						borderColor: props?.data?.disabled ? "grey.700" : "#4E97FD", //Blue not implemented in the theme
+						backgroundColor: props?.data?.disabled ? "#fff" : "#DBF0FE",
+					},
+				}}
+			>
+				<CardHeader
+					title={
+						<Typography
+							variant="h5"
+							sx={{ textAlign: "center", width: "100%" }}
+						>
+							{props?.data?.label as string}
+						</Typography>
+					}
+					sx={{
+						height: 62,
+						display: "flex",
+					}}
+				/>
+				<CardContent
+					sx={{
+						height: props.height,
+						// width: (props.width || 0) + 48,
+						display: "flex",
+						justifyContent: "center",
+						alignItems: "center",
+						width: "100%",
+						flexDirection: "column",
+					}}
+				>
+					<Typography variant="body2" color="grey.600" pb={3}>
+						{t("firstIntegration")}
+					</Typography>
+					<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/entry-node.tsx

@@ -1,10 +1,104 @@
-import { Handle, Position } from "@xyflow/react";
+import {
+	Box,
+	Card,
+	CardContent,
+	Divider,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { Handle, type NodeProps, Position } from "@xyflow/react";
+import { useTranslations } from "next-intl";
+import { inputIcon, timerIcon, triggerIcon } from "../task-icon";
+
+export function EntryNode(props: NodeProps): JSX.Element {
+	const t = useTranslations("Integrate.IntegrationDetails.View.EntryNode");
+
+	const theme = useTheme();
+	const styles = getStyles(theme, props);
 
-export function EntryNode(): JSX.Element {
 	return (
-		<div>
+		<Box
+			sx={{
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center",
+				//width: props.width + 24 + theme.spacing(1),
+			}}
+		>
+			<Card
+				sx={{
+					borderWidth: 1,
+					borderStyle:
+						props?.data?.isScheduled || props?.data?.isTriggered
+							? "solid"
+							: "dashed",
+					backgroundColor:
+						props?.data?.isScheduled || props?.data?.isTriggered
+							? theme.palette.background.paper
+							: "transparent",
+					"&:hover": {
+						borderColor: "#4E97FD", //Blue not implemented in the theme
+						backgroundColor: "#DBF0FE",
+					},
+					//height: props.height,
+					//width: props.width,
+				}}
+			>
+				{!(props?.data?.isScheduled as boolean) &&
+					!(props?.data?.isTriggered as boolean) && (
+						<CardContent sx={styles.cardContent}>
+							{inputIcon()}
+							<Typography variant="h6" sx={styles.label}>
+								{t("noEntryPoint")}
+							</Typography>
+						</CardContent>
+					)}
+				{(props?.data?.isScheduled as boolean) && (
+					<CardContent sx={styles.cardContent}>
+						{timerIcon()}
+						<Typography variant="h6" sx={styles.label}>
+							{t("scheduled")}
+						</Typography>
+					</CardContent>
+				)}
+				{(props?.data?.isScheduled as boolean) &&
+				(props?.data?.isTriggered as boolean) ? (
+					<Divider sx={styles.divider} />
+				) : null}
+				{(props?.data?.isTriggered as boolean) && (
+					<CardContent sx={styles.cardContent}>
+						{triggerIcon()}
+						<Typography variant="h6" sx={styles.label}>
+							{t("triggered")}
+						</Typography>
+					</CardContent>
+				)}
+			</Card>
 			<Handle type="source" position={Position.Bottom} />
 			<Handle type="target" position={Position.Top} />
-		</div>
+		</Box>
 	);
 }
+
+const getStyles = (theme: Theme, props: NodeProps) => {
+	return {
+		cardContent: {
+			height: props.height,
+			width: props.width,
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+		},
+		label: {
+			textAlign: "center",
+			paddingLeft: theme.spacing(1),
+			fontSize: "18px!important",
+		},
+		divider: {
+			width: "80%",
+			margin: `${theme.spacing(1)} auto`,
+			borderColor: "grey.800",
+		},
+	};
+};

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

@@ -0,0 +1,107 @@
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import {
+	Box,
+	Card,
+	CardContent,
+	Divider,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { Handle, type NodeProps, Position } from "@xyflow/react";
+
+export function ExecutionEntryNode(props: NodeProps): JSX.Element {
+	const theme = useTheme();
+	const styles = getStyles(theme, props);
+
+	const borderColor = () => {
+		switch (props?.data?.executionStatus) {
+			case "300":
+				return "info.600";
+			case "400":
+				return "success.600";
+			case "450":
+				return "warning.600";
+			case "500":
+				return "error.600";
+			default:
+				return "grey.600";
+		}
+	};
+
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center",
+				//width: props.width + 24 + theme.spacing(1),
+			}}
+		>
+			<Card
+				sx={{
+					borderWidth: 1,
+					borderStyle: "solid",
+					borderColor: borderColor(),
+					"&:hover": {
+						borderColor: "#4E97FD", //Blue not implemented in the theme
+						backgroundColor: "#DBF0FE",
+					},
+				}}
+			>
+				<CardContent sx={styles.cardContent}>
+					{props?.data?.icon as any}
+					<Typography variant="h6" sx={styles.label}>
+						{props?.data?.label as string}
+					</Typography>
+				</CardContent>
+				<Handle type="source" position={Position.Bottom} />
+				<Handle type="target" position={Position.Top} />
+				{props?.data?.icon2 ? (
+					<>
+						<Divider sx={styles.divider} />
+						<CardContent sx={styles.cardContent}>
+							{props?.data?.icon2 as any}
+							<Typography variant="h6" sx={styles.label}>
+								{props?.data?.label2 as string}
+							</Typography>
+						</CardContent>
+					</>
+				) : null}
+			</Card>
+			{props?.data?.isLast ? (
+				<AddCircleOutlineIcon
+					sx={{
+						color: "grey.600",
+						marginLeft: theme.spacing(1),
+						"&:hover": {
+							color: "#4E97FD", //Blue not implemented in the theme
+						},
+					}}
+				/>
+			) : null}
+		</Box>
+	);
+}
+
+const getStyles = (theme: Theme, props: NodeProps) => {
+	return {
+		cardContent: {
+			height: props.height,
+			width: props.width,
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+		},
+		label: {
+			textAlign: "center",
+			paddingLeft: theme.spacing(1),
+			fontSize: "18px!important",
+		},
+		divider: {
+			width: "80%",
+			margin: `${theme.spacing(1)} auto`,
+			borderColor: "grey.800",
+		},
+	};
+};

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

@@ -0,0 +1,88 @@
+import type { ProcessTaskExecution } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { ExecutionTag } from "@evenicanpm/admin-integrate/components/execution";
+import { Box, Card, CardContent, Typography, useTheme } from "@mui/material";
+import { Handle, type NodeProps, Position } from "@xyflow/react";
+import { mapIconByOrchestrationType } from "../task-icon";
+
+export function ExecutionTaskNode(props: NodeProps): JSX.Element {
+	const theme = useTheme();
+
+	const borderColor = () => {
+		switch (
+			(props?.data?.processTaskExecution as ProcessTaskExecution)
+				?.executionStatus?.id
+		) {
+			case "300":
+				return "info.600";
+			case "400":
+				return "success.600";
+			case "450":
+				return "warning.600";
+			case "500":
+				return "error.600";
+			default:
+				return "grey.600";
+		}
+	};
+
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center",
+				opacity: !props?.data?.disabled || props?.data?.selected ? 1 : 0.5,
+			}}
+		>
+			<Card
+				sx={{
+					borderWidth: 1,
+					borderStyle: "solid",
+					borderColor: borderColor(),
+					"&:hover": {
+						borderColor: props?.data?.disabled ? "grey.700" : "#4E97FD", //Blue not implemented in the theme
+						backgroundColor: props?.data?.disabled ? "#fff" : "#DBF0FE",
+					},
+				}}
+			>
+				<CardContent
+					sx={{
+						height: props.height,
+						width: props.width,
+						display: "flex",
+						justifyContent: "center",
+						alignItems: "center",
+					}}
+				>
+					{mapIconByOrchestrationType(
+						(props?.data?.processTask as ProcessTaskExecution)
+							?.orchestrationType?.code as string,
+					)}
+					<Typography
+						variant="h6"
+						sx={{
+							textAlign: "center",
+							fontSize: "18px!important",
+							paddingLeft: theme.spacing(0.7),
+							marginRight: theme.spacing(1),
+						}}
+					>
+						{
+							(props?.data?.processTaskExecution as ProcessTaskExecution)
+								?.name as string
+						}
+					</Typography>
+					<ExecutionTag
+						executionStatusId={
+							(props?.data?.processTaskExecution as ProcessTaskExecution)
+								?.executionStatus?.id as string
+						}
+						sx={{ marginRight: props?.data?.isLast ? theme.spacing(4) : 0 }}
+					/>
+				</CardContent>
+				<Handle type="target" position={Position.Top} />
+				<Handle type="source" position={Position.Bottom} />
+			</Card>
+		</Box>
+	);
+}

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

@@ -1,10 +1,10 @@
-import { Box, Card, CardContent, CardHeader, Typography } from "@mui/material";
-import { Handle, NodeProps, Position } from "@xyflow/react";
 import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import { Box, Card, CardContent, CardHeader, Typography } from "@mui/material";
+import { Handle, type NodeProps, Position } from "@xyflow/react";
 
 export function GroupNode(props: NodeProps): JSX.Element {
 	return (
-		<Box>
+		<Box sx={{ opacity: props.data.disabled ? 0.5 : 1 }}>
 			<Card
 				sx={{
 					borderWidth: 1,
@@ -15,13 +15,17 @@ export function GroupNode(props: NodeProps): JSX.Element {
 			>
 				<CardHeader
 					title={
-						<Typography variant="h5" sx={{ textAlign: "center" }}>
+						<Typography
+							variant="h5"
+							sx={{ textAlign: "center", width: "100%" }}
+						>
 							{props?.data?.label as string}
 						</Typography>
 					}
 					sx={{
 						height: 62,
 						paddingRight: "48px",
+						display: "flex",
 					}}
 				/>
 				<CardContent
@@ -34,15 +38,17 @@ export function GroupNode(props: NodeProps): JSX.Element {
 						paddingRight: "48px",
 					}}
 				>
-					<AddCircleOutlineIcon
-						sx={{
-							color: "grey.600",
-							"&:hover": {
-								color: "#4E97FD", //Blue not implemented in the theme
-							},
-							marginLeft: "-16px",
-						}}
-					/>
+					{props.data.variant === "process" ? (
+						<AddCircleOutlineIcon
+							sx={{
+								color: "grey.600",
+								"&:hover": {
+									color: "#4E97FD", //Blue not implemented in the theme
+								},
+								marginLeft: "-16px",
+							}}
+						/>
+					) : null}
 				</CardContent>
 				<Handle type="target" position={Position.Top} />
 			</Card>

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

@@ -0,0 +1,19 @@
+import { Box } from "@mui/material";
+import type { NodeProps } from "@xyflow/react";
+
+export function RowNode(props: NodeProps): JSX.Element {
+	return (
+		// <Box sx={{ opacity: props.data.disabled ? 0.5 : 1 }}>
+		<Box>
+			<Box
+				sx={{
+					borderWidth: 1,
+					borderStyle: "solid",
+					borderColor: "grey.700",
+					width: props.width,
+					height: props.height,
+				}}
+			></Box>
+		</Box>
+	);
+}

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

@@ -1,7 +1,8 @@
-import { Box, Card, CardContent, Typography, useTheme } from "@mui/material";
-import { Handle, NodeProps, Position } from "@xyflow/react";
-
 import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import { Box, Card, CardContent, Typography, useTheme } from "@mui/material";
+import { Handle, type NodeProps, Position } from "@xyflow/react";
+import type { ProcessTask } from "../../../../../admin-core/src/api/e4/graphqlRequestSdk";
+import { mapIconByOrchestrationType } from "../task-icon";
 
 export function TaskNode(props: NodeProps): JSX.Element {
 	const theme = useTheme();
@@ -12,6 +13,7 @@ export function TaskNode(props: NodeProps): JSX.Element {
 				display: "flex",
 				justifyContent: "center",
 				alignItems: "center",
+				opacity: !props?.data?.disabled || props?.data?.selected ? 1 : 0.5,
 				//width: props.width + 24 + theme.spacing(1),
 			}}
 		>
@@ -21,8 +23,8 @@ export function TaskNode(props: NodeProps): JSX.Element {
 					borderStyle: "solid",
 					borderColor: "grey.700",
 					"&:hover": {
-						borderColor: "#4E97FD", //Blue not implemented in the theme
-						backgroundColor: "#DBF0FE",
+						borderColor: props?.data?.disabled ? "grey.700" : "#4E97FD", //Blue not implemented in the theme
+						backgroundColor: props?.data?.disabled ? "#fff" : "#DBF0FE",
 					},
 				}}
 			>
@@ -35,18 +37,22 @@ export function TaskNode(props: NodeProps): JSX.Element {
 						alignItems: "center",
 					}}
 				>
-					{props?.data?.icon as any}
+					{/* {props?.data?.icon as any} */}
+					{mapIconByOrchestrationType(
+						(props?.data?.processTask as ProcessTask)?.orchestrationType
+							?.code as string,
+					)}
 					<Typography
 						variant="h6"
 						sx={{ textAlign: "center", paddingLeft: theme.spacing(1) }}
 					>
-						{props?.data?.label as string}
+						{(props?.data?.processTask as ProcessTask)?.name as string}
 					</Typography>
 				</CardContent>
 				<Handle type="target" position={Position.Top} />
 				<Handle type="source" position={Position.Bottom} />
 			</Card>
-			{props?.data?.isLast ? (
+			{props?.data.isLast ? (
 				<AddCircleOutlineIcon
 					sx={{
 						color: "grey.600",

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

@@ -0,0 +1,193 @@
+import DownloadIcon from "@mui/icons-material/Download";
+import ExitToAppIcon from "@mui/icons-material/ExitToApp";
+import FileUploadIcon from "@mui/icons-material/FileUpload";
+import IosShareIcon from "@mui/icons-material/IosShare";
+import StorageIcon from "@mui/icons-material/Storage";
+import SystemUpdateAltIcon from "@mui/icons-material/SystemUpdateAlt";
+import TableChartIcon from "@mui/icons-material/TableChart";
+import TimerIcon from "@mui/icons-material/Timer";
+
+import { Box } from "@mui/material";
+
+export const mapIconByOrchestrationType = (code: string | undefined) => {
+	let light: string;
+	let dark: string;
+
+	switch (code) {
+		case "PubSubPush":
+			light = "orange.100";
+			dark = "orange.600";
+			break;
+		case "PubSubPull":
+			light = "bluish.100";
+			dark = "bluish.600";
+			break;
+		case "SQLProcess":
+			light = "paste.100";
+			dark = "paste.600";
+			break;
+		case "ExportStaged":
+			light = "paste.100";
+			dark = "paste.600";
+			break;
+		default:
+			return inputIcon();
+	}
+
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				borderRadius: "5px",
+				bgcolor: light,
+				borderWidth: 1,
+				borderStyle: "solid",
+				borderColor: dark,
+				padding: "2px",
+			}}
+		>
+			{code === "PubSubPush" ? (
+				<FileUploadIcon sx={{ color: dark }} />
+			) : code === "PubSubPull" ? (
+				<DownloadIcon sx={{ color: dark }} />
+			) : code === "SQLProcess" ? (
+				<StorageIcon sx={{ color: dark }} />
+			) : code === "ExportStaged" ? (
+				<IosShareIcon sx={{ color: dark }} />
+			) : null}
+		</Box>
+	);
+};
+
+//Temporary icons until logic is added to determine icon based on integration
+export const pullIcon = () => {};
+
+export const pushIcon = () => {
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				borderRadius: "5px",
+				bgcolor: "orange.100",
+				borderWidth: 1,
+				borderStyle: "solid",
+				borderColor: "orange.600",
+				padding: "2px",
+			}}
+		>
+			<FileUploadIcon sx={{ color: "orange.600" }} />
+		</Box>
+	);
+};
+
+export const storageIcon = () => {
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				borderRadius: "5px",
+				bgcolor: "paste.100",
+				borderWidth: 1,
+				borderStyle: "solid",
+				borderColor: "paste.600",
+				padding: "2px",
+			}}
+		>
+			<StorageIcon sx={{ color: "paste.600" }} />
+		</Box>
+	);
+};
+
+export const exportIcon = () => {
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				borderRadius: "5px",
+				bgcolor: "paste.100",
+				borderWidth: 1,
+				borderStyle: "solid",
+				borderColor: "paste.600",
+				padding: "2px",
+			}}
+		>
+			<IosShareIcon sx={{ color: "paste.600" }} />
+		</Box>
+	);
+};
+
+export const chartIcon = () => {
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				borderRadius: "5px",
+				bgcolor: "paste.100",
+				borderWidth: 1,
+				borderStyle: "solid",
+				borderColor: "paste.600",
+				padding: "2px",
+			}}
+		>
+			<TableChartIcon sx={{ color: "paste.600" }} />
+		</Box>
+	);
+};
+
+export const timerIcon = () => {
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				borderRadius: "5px",
+				bgcolor: "info.100",
+				borderWidth: 1,
+				borderStyle: "solid",
+				borderColor: "info.600",
+				padding: "2px",
+			}}
+		>
+			<TimerIcon sx={{ color: "info.500" }} />
+		</Box>
+	);
+};
+
+export const triggerIcon = () => {
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				borderRadius: "5px",
+				bgcolor: "success.100",
+				borderWidth: 1,
+				borderStyle: "solid",
+				borderColor: "success.600",
+				padding: "2px",
+			}}
+		>
+			<ExitToAppIcon sx={{ color: "success.600" }} />
+		</Box>
+	);
+};
+
+export const inputIcon = () => {
+	return (
+		<Box>
+			<SystemUpdateAltIcon sx={{ color: "grey.600" }} />
+		</Box>
+	);
+};