@evenicanpm/admin-integrate 1.3.0 → 1.4.0

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

@@ -0,0 +1,20 @@
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import { IconButton, useTheme } from "@mui/material";
+
+export function AddNode(): JSX.Element {
+	const theme = useTheme();
+
+	return (
+		<IconButton>
+			<AddCircleOutlineIcon
+				sx={{
+					color: "grey.600",
+					marginLeft: theme.spacing(1),
+					"&:hover": {
+						color: "#4E97FD", //Blue not implemented in the theme
+					},
+				}}
+			/>
+		</IconButton>
+	);
+}

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

@@ -38,7 +38,7 @@ export function GroupNode(props: NodeProps): JSX.Element {
 						paddingRight: "48px",
 					}}
 				>
-					{props.data.variant === "process" ? (
+					{props.data.variant === "process" && !!props?.data?.canEdit ? (
 						<AddCircleOutlineIcon
 							sx={{
 								color: "grey.600",
@@ -47,6 +47,20 @@ export function GroupNode(props: NodeProps): JSX.Element {
 								},
 								marginLeft: "-16px",
 							}}
+							onClick={(e) => {
+								e.stopPropagation();
+								e.preventDefault();
+
+								document.dispatchEvent(
+									new CustomEvent("addItem", {
+										detail: {
+											sort: (props?.data?.maxSort as number) + 1,
+											paralellelProcessingGroup:
+												props?.data?.parallelProcessingGroup,
+										},
+									}),
+								);
+							}}
 						/>
 					) : null}
 				</CardContent>

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

@@ -1,5 +1,12 @@
 import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
-import { Box, Card, CardContent, Typography, useTheme } from "@mui/material";
+import {
+	Box,
+	Card,
+	CardContent,
+	Typography,
+	IconButton,
+	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";
@@ -26,6 +33,9 @@ export function TaskNode(props: NodeProps): JSX.Element {
 						borderColor: props?.data?.disabled ? "grey.700" : "#4E97FD", //Blue not implemented in the theme
 						backgroundColor: props?.data?.disabled ? "#fff" : "#DBF0FE",
 					},
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
 				}}
 			>
 				<CardContent
@@ -37,7 +47,6 @@ export function TaskNode(props: NodeProps): JSX.Element {
 						alignItems: "center",
 					}}
 				>
-					{/* {props?.data?.icon as any} */}
 					{mapIconByOrchestrationType(
 						(props?.data?.processTask as ProcessTask)?.orchestrationType
 							?.code as string,
@@ -53,15 +62,34 @@ export function TaskNode(props: NodeProps): JSX.Element {
 				<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
-						},
+				<IconButton
+					onClick={(e) => {
+						e.stopPropagation();
+						e.preventDefault();
+
+						document.dispatchEvent(
+							new CustomEvent("addItem", {
+								detail: {
+									sort: (props?.data?.processTask as ProcessTask)
+										?.sort as number,
+									paralellelProcessingGroup: (
+										props?.data?.processTask as ProcessTask
+									)?.parallelProcessingGroup,
+								},
+							}),
+						);
 					}}
-				/>
+				>
+					<AddCircleOutlineIcon
+						sx={{
+							color: "grey.600",
+							marginLeft: theme.spacing(1),
+							"&:hover": {
+								color: "#4E97FD", //Blue not implemented in the theme
+							},
+						}}
+					/>
+				</IconButton>
 			) : null}
 		</Box>
 	);

package/src/components/integration-view/temp-data/initialElements.tsx

@@ -5,8 +5,6 @@ import { Box } from "@mui/material";
 import { MarkerType } from "@xyflow/react";
 import type { ElkExtendedEdgeWithFlow, ElkNodeWithFlow } from "../elk-types";
 
-//import { timerIcon, triggerIcon } from "../icons";
-
 const pullIcon = () => {
 	return (
 		<Box

package/src/components/integration-view/utils/mapping.ts

@@ -0,0 +1,404 @@
+import {
+	ProcessExecutionDetails,
+	ConfigExport,
+	ProcessExport,
+	ProcessTask,
+	ProcessTaskExport,
+	ProcessTaskExecution,
+} from "@evenicanpm/admin-core/src/api/e4/graphqlRequestSdk";
+import { Process } from "../../../../../admin-core/src/api/e4/graphqlRequestSdk";
+import {
+	ElkExtendedEdgeWithFlow,
+	ElkNodeWithFlow,
+	GroupNode,
+	// ProcessTaskExecutionNode,
+	// ProcessTaskNode,
+} from "../elk-types";
+import { MarkerType } from "@xyflow/react";
+import _ from "lodash";
+
+const markerEnd = {
+	type: MarkerType.ArrowClosed,
+	width: 20,
+	height: 20,
+};
+
+export function mapToCamelCase(processTask: ProcessTaskExport): ProcessTask {
+	let key,
+		keys = Object.keys(processTask);
+	let n = keys.length;
+	let newobj: { [key: string]: any } = {};
+	while (n--) {
+		key = keys[n];
+		newobj[key.substring(0, 1).toLowerCase() + key.substring(1)] =
+			processTask[key as keyof typeof processTask];
+	}
+
+	return {
+		...newobj,
+		id: newobj.processTaskId,
+		name: newobj.name,
+		sort: newobj.sort,
+		orchestrationType: {
+			code: newobj.orchestrationType,
+		},
+		parallelProcessingGroup: newobj.parallelProcessingGroup,
+	} as ProcessTask;
+}
+
+export const mapEmptyNodesAndEdges = (
+	data: Process | ProcessExecutionDetails,
+	nodeWidth: number,
+) => {
+	const nodes: ElkNodeWithFlow[] = [];
+	const edges: ElkExtendedEdgeWithFlow[] = [];
+
+	const entryPoint: ElkNodeWithFlow = {
+		id: "entry-point",
+		type: "entry-node",
+		data: {
+			isScheduled: false,
+			isTriggered: false,
+		},
+		width: nodeWidth,
+		height:
+			(data as Process)?.isScheduled && (data as Process)?.isTriggered
+				? 104
+				: 70,
+		position: { x: 0, y: 0 },
+		layoutOptions: {
+			"org.eclipse.elk.priority": "1",
+		},
+	};
+
+	nodes.push(entryPoint);
+
+	const entryPointConnector: ElkNodeWithFlow = {
+		id: "entry-point-connector",
+		position: { x: 0, y: 0 },
+		type: "connection-node",
+		width: 1,
+		height: 1,
+		//extent: "parent",
+	};
+
+	nodes.push(entryPointConnector);
+
+	const groupId = `group-1`;
+
+	const emptyNode = {
+		id: groupId,
+		data: {
+			label: `Group 1`,
+		},
+		position: { x: 0, y: 0 },
+		type: "empty-node",
+		children: [],
+		layoutOptions: {
+			"org.eclipse.elk.priority": groupId,
+		},
+		draggable: false,
+		width: nodeWidth,
+		height: 100,
+	};
+
+	nodes.push(emptyNode);
+
+	edges.push(
+		{
+			id: `entry-point-entry-point-connector`,
+			sources: ["entry-point"],
+			targets: ["entry-point-connector"],
+			type: "default-edge",
+		},
+		{
+			id: `entry-point-connector-${groupId}`,
+			sources: ["entry-point-connector"],
+			targets: [groupId],
+			type: "default-edge",
+			markerEnd: markerEnd,
+		},
+	);
+
+	return {
+		nodes,
+		edges,
+	};
+};
+
+// Helper to build groups, nodes, and edges
+function buildGroupsAndEdges({
+	entryPoint,
+	entryPointConnector,
+	groupLabels,
+	getGroupTasks,
+	// nodeWidth,
+	variant,
+	onAdd,
+	mapTaskToNode,
+	groupSortKey = "Sort",
+	taskIdKey = "id",
+	taskNameKey = "name",
+	connectorIdPrefix = "group-",
+}: {
+	entryPoint: ElkNodeWithFlow;
+	entryPointConnector: ElkNodeWithFlow;
+	groupLabels: number[];
+	getGroupTasks: Function;
+	// nodeWidth: number,
+	variant: "process" | "process-execution";
+	onAdd?: Function;
+	mapTaskToNode: Function;
+	groupSortKey: string;
+	taskIdKey: string;
+	taskNameKey: string;
+	connectorIdPrefix: string;
+}) {
+	const groups: GroupNode[] = groupLabels.map((groupLabel: any) => ({
+		id: `group-${groupLabel}`,
+		data: {
+			label: `Group ${groupLabel}`,
+			variant: variant,
+			parallelProcessingGroup: groupLabel,
+			canEdit: !!onAdd,
+		},
+		position: { x: 0, y: 0 },
+		type: "group-node",
+		children: [],
+		layoutOptions: {
+			"org.eclipse.elk.priority": `${groupLabel}`,
+		},
+		draggable: false,
+	}));
+	const edges: any[] = [];
+	edges.push({
+		id: `entry-point-entry-point-connector`,
+		sources: ["entry-point"],
+		targets: ["entry-point-connector"],
+		type: "default-edge",
+	});
+	groups.forEach((group) => {
+		edges.push({
+			id: `entry-point-connector-${group.id}`,
+			sources: ["entry-point-connector"],
+			targets: [group.id],
+			type: "default-edge",
+			markerEnd: markerEnd,
+		});
+		const groupTasks = getGroupTasks(group);
+		const tasksPartitioned = _.values(_.groupBy(groupTasks, groupSortKey));
+		const groupNodes: any[] = [];
+		tasksPartitioned.forEach((partition) => {
+			partition.forEach((task: any, index: number) => {
+				groupNodes.push(mapTaskToNode(task, index, partition.length, group.id));
+			});
+		});
+		let prevConnectorId: string | null = null;
+		tasksPartitioned.forEach((partition, tpIndex) => {
+			_.sortBy(partition, [(task: any) => task[taskNameKey]]);
+			if (prevConnectorId) {
+				partition.forEach((task: any) => {
+					edges.push({
+						id: `${prevConnectorId}-${task[taskIdKey] || task[taskNameKey]}`,
+						sources: [prevConnectorId],
+						targets: [`task-${task[taskIdKey] || task[taskNameKey]}`],
+						type: "default-edge",
+						markerEnd: markerEnd,
+					});
+				});
+			}
+			const connectorId = `${connectorIdPrefix}${group.id}-connect-${tpIndex}`;
+			prevConnectorId = connectorId;
+			if (tpIndex !== tasksPartitioned.length - 1) {
+				partition.forEach((task: any) => {
+					edges.push({
+						id: `task-${task[taskIdKey] || task[taskNameKey]}-${connectorId}`,
+						sources: [`task-${task[taskIdKey] || task[taskNameKey]}`],
+						targets: [connectorId],
+						type: "default-edge",
+					});
+				});
+			}
+			if (prevConnectorId && tpIndex !== tasksPartitioned.length - 1) {
+				groupNodes.push({
+					id: prevConnectorId,
+					position: { x: 0, y: 0 },
+					type: "connection-node",
+					width: 1,
+					height: 1,
+					extent: "parent",
+					parentId: group.id,
+				});
+			}
+		});
+		group.children = groupNodes;
+	});
+	return { nodes: [entryPoint, entryPointConnector, ...groups], edges };
+}
+
+export const mapProcessConfigToNodesAndEdges = (
+	data: ConfigExport,
+	nodeWidth: number,
+	variant: "process" | "process-execution",
+	onAdd?: Function,
+) => {
+	const process = data.Processes?.[0] as ProcessExport;
+	const entryPoint: ElkNodeWithFlow = {
+		id: "entry-point",
+		type: "entry-node",
+		data: {
+			isScheduled:
+				variant === "process" ? !!process?.ProcessScheduleGroup : false,
+			isTriggered: variant === "process" ? !!process?.IsTriggered : false,
+		},
+		width: nodeWidth,
+		height: process?.ProcessScheduleGroup && process?.IsTriggered ? 104 : 70,
+		position: { x: 0, y: 0 },
+		layoutOptions: {
+			"org.eclipse.elk.priority": "1",
+		},
+	};
+	const entryPointConnector: ElkNodeWithFlow = {
+		id: "entry-point-connector",
+		position: { x: 0, y: 0 },
+		type: "connection-node",
+		width: 1,
+		height: 1,
+	};
+	let groupLabels = _.uniq(
+		_.map(process?.ProcessTasks, "ParallelProcessingGroup"),
+	);
+	groupLabels = _.sortBy(groupLabels);
+	return buildGroupsAndEdges({
+		entryPoint,
+		entryPointConnector,
+		groupLabels,
+		getGroupTasks: (group: any) =>
+			_.sortBy(
+				process?.ProcessTasks?.filter(
+					(task) =>
+						task?.ParallelProcessingGroup?.toString() ===
+						group.id.split("-")[1],
+				),
+				["Sort", "Name"],
+			),
+		//nodeWidth,
+		variant,
+		onAdd,
+		mapTaskToNode: (
+			task: any,
+			index: number,
+			partitionLen: number,
+			parentId: string,
+		) => ({
+			id: `task-${task?.ProcessTaskId || task?.Name}`,
+			data: {
+				processTask: mapToCamelCase(task as ProcessTaskExport) || undefined,
+				label: task?.Name as string,
+				isLast: onAdd ? index === partitionLen - 1 : false,
+				onAdd: index === partitionLen - 1 ? onAdd : undefined,
+			},
+			position: { x: 0, y: 0 },
+			type: variant === "process" ? "task-node" : "execution-task-node",
+			width: nodeWidth + (index === partitionLen - 1 ? 64 : 0),
+			height: 70,
+			parentId,
+		}),
+		groupSortKey: "Sort",
+		taskIdKey: "ProcessTaskId",
+		taskNameKey: "Name",
+		connectorIdPrefix: "group-",
+	});
+};
+
+export const mapProcessTasksToNodesAndEdges = (
+	data: Process | ProcessExecutionDetails,
+	nodeWidth: number,
+	variant: "process" | "process-execution",
+) => {
+	const entryPoint: ElkNodeWithFlow = {
+		id: "entry-point",
+		type: "entry-node",
+		data: {
+			isScheduled:
+				variant === "process" ? !!(data as Process)?.isScheduled : false,
+			isTriggered:
+				variant === "process" ? !!(data as Process)?.isTriggered : false,
+		},
+		width: nodeWidth,
+		height:
+			(data as Process)?.isScheduled && (data as Process)?.isTriggered
+				? 104
+				: 70,
+		position: { x: 0, y: 0 },
+		layoutOptions: {
+			"org.eclipse.elk.priority": "1",
+		},
+	};
+	const entryPointConnector: ElkNodeWithFlow = {
+		id: "entry-point-connector",
+		position: { x: 0, y: 0 },
+		type: "connection-node",
+		width: 1,
+		height: 1,
+	};
+	let groupLabels: number[];
+	if (variant === "process") {
+		groupLabels = _.uniq(
+			_.map((data as Process)?.processTasks, "parallelProcessingGroup"),
+		);
+	} else {
+		groupLabels = _.uniq(
+			_.map(
+				(data as ProcessExecutionDetails)?.processTaskExecutions,
+				"parallelProcessingGroup",
+			),
+		);
+	}
+	groupLabels = _.sortBy(groupLabels);
+	return buildGroupsAndEdges({
+		entryPoint,
+		entryPointConnector,
+		groupLabels,
+		getGroupTasks: (group: any) =>
+			_.sortBy(
+				(variant === "process"
+					? (data as Process)?.processTasks
+					: (data as ProcessExecutionDetails)?.processTaskExecutions
+				)?.filter(
+					(task) =>
+						task?.parallelProcessingGroup?.toString() ===
+						group.id.split("-")[1],
+				),
+				["sort", "name"],
+			),
+		//nodeWidth,
+		variant,
+		onAdd: undefined,
+		mapTaskToNode: (
+			task: any,
+			index: number,
+			partitionLen: number,
+			parentId: string,
+		) => ({
+			id: `task-${task?.id}`,
+			data: {
+				processTask: variant === "process" ? (task as ProcessTask) : undefined,
+				processTaskExecution:
+					variant === "process-execution"
+						? (task as ProcessTaskExecution)
+						: undefined,
+				isLast: index === partitionLen - 1,
+			},
+			position: { x: 0, y: 0 },
+			type: variant === "process" ? "task-node" : "execution-task-node",
+			width: nodeWidth + (index === partitionLen - 1 ? 64 : 0),
+			height: 70,
+			parentId,
+		}),
+		groupSortKey: "sort",
+		taskIdKey: "id",
+		taskNameKey: "name",
+		connectorIdPrefix: "group-",
+	});
+};

package/src/components/layouts/main-layout.tsx

@@ -14,7 +14,7 @@ const StyledContainer = styled("div")(() => ({
 export default function MainLayout({
 	children,
 }: {
-	children: React.ReactNode;
+	readonly children: React.ReactNode;
 }) {
 	return (
 		<LayoutProvider>

package/src/components/layouts/root-container.tsx

@@ -9,17 +9,14 @@ interface Props {
 	sx?: SxProps;
 }
 
-export default function RootContainer(props: Props) {
+export default function RootContainer(props: Readonly<Props>) {
 	const theme = useTheme();
 	const styles = getStyles(theme);
 
 	const defaultMaxWidth = "xl";
 
 	return (
-		<Container
-			maxWidth={props.maxWidth !== undefined ? props.maxWidth : defaultMaxWidth}
-			sx={props.sx}
-		>
+		<Container maxWidth={props.maxWidth ?? defaultMaxWidth} sx={props.sx}>
 			<Box sx={styles.root}>
 				<Stack spacing={2}>{props.children}</Stack>
 				<IntegrateFooter />

package/src/components/link-cards/link-card.tsx

@@ -20,7 +20,7 @@ export default function LinkCard({
 	url,
 	onClick,
 	children,
-}: Props) {
+}: Readonly<Props>) {
 	const handleRedirect = () => {
 		if (onClick) {
 			onClick();

package/src/components/list-filter/date-filter.tsx

@@ -18,7 +18,9 @@ const DateFilterComponent: React.FC<FilterProps<DateFilter>> = ({
 
 	const updateValue = (date: null | Date | string) => {
 		const newValue: string | null =
-			date !== null && typeof date !== "string" && !isNaN(date?.getTime())
+			date !== null &&
+			typeof date !== "string" &&
+			!Number.isNaN(date?.getTime())
 				? date.toISOString()
 				: null;
 

package/src/components/list-filter/date-range-filter.tsx

@@ -29,7 +29,9 @@ const DateRangeFilterComponent: React.FC<FilterProps<DateRangeFilter>> = ({
 
 	const updateValue = (part: "start" | "end", date: null | Date | string) => {
 		const dateValue: string | null =
-			date !== null && typeof date !== "string" && !isNaN(date?.getTime())
+			date !== null &&
+			typeof date !== "string" &&
+			!Number.isNaN(date?.getTime())
 				? date.toISOString()
 				: null;
 
@@ -50,7 +52,7 @@ const DateRangeFilterComponent: React.FC<FilterProps<DateRangeFilter>> = ({
 		let errorValue: typeof error = {
 			start: null,
 			end: null,
-			...(error ? error : {}),
+			...error,
 			[part]: newError ? t("Filter.invalidDate") : null,
 		};
 

package/src/components/list-filter/list-filter.tsx

@@ -313,7 +313,7 @@ const ListFilter = function ListFilter<FilterShape extends Filters>(
 											variant="contained"
 											color="info"
 											startIcon={<ArrowForwardIos />}
-											disabled={Object.values(filterErrors).some((v) => v)}
+											disabled={Object.values(filterErrors).some(Boolean)}
 											onClick={handleFilterSet}
 										>
 											{t("filter")}

package/src/components/list-filter/select-filter.tsx

@@ -39,10 +39,16 @@ const SelectFilterComponent: React.FC<FilterProps<SelectFilter>> = ({
 	) as { [id: string | number]: FilterOption };
 
 	const updateValue = (optionId: string | number | null) => {
-		const newValue =
-			optionId !== null ? mappedOptionDictionary[optionId] : null;
-		setValue(newValue && [newValue]);
-		onSet(newValue && [newValue]);
+		if (optionId == null) {
+			setValue(null);
+			onSet(null);
+			return;
+		}
+
+		const newValue = mappedOptionDictionary[optionId];
+
+		setValue(newValue ? [newValue] : null);
+		onSet(newValue ? [newValue] : null);
 	};
 
 	return (

package/src/components/scheduler/schedule-drawer/schedule-details-integrations.tsx

@@ -82,7 +82,7 @@ interface Props {
 	defaultScheduledProcess?: DefaultScheduledProcess;
 }
 
-export default function ScheduleDetailsIntegrations(props: Props) {
+export default function ScheduleDetailsIntegrations(props: Readonly<Props>) {
 	const t = useTranslations("Integrate.Scheduler");
 	const l = useTranslations("Integrate.Filter");
 
@@ -179,12 +179,12 @@ export default function ScheduleDetailsIntegrations(props: Props) {
 
 	const debounceFetch = debounce(fetchNonScheduledProcesses, 400);
 	useEffect(() => {
-		if (searchTerm !== "") {
-			debounceFetch(searchTerm);
-		} else {
+		if (searchTerm === "") {
 			setItems([]);
 			setNonScheduledProcessesResult(null);
 			setNonScheduledMode(false);
+		} else {
+			debounceFetch(searchTerm);
 		}
 		return debounceFetch.cancel;
 	}, [searchTerm]);
@@ -255,8 +255,7 @@ export default function ScheduleDetailsIntegrations(props: Props) {
 		if (
 			props.dispatchDetails &&
 			props.defaultScheduledProcess &&
-			props.details.processes &&
-			props.details.processes.length === 0
+			props?.details?.processes?.length === 0
 		) {
 			handleClickAddIntegration({
 				...props.defaultScheduledProcess,
@@ -374,8 +373,7 @@ export default function ScheduleDetailsIntegrations(props: Props) {
 											{
 												// Processes found in details state (using props.details.processes)
 												!nonScheduledMode &&
-													props.details.processes &&
-													props.details.processes.map((item) => (
+													props?.details?.processes?.map((item) => (
 														<SortableIntegrationRow
 															key={item.id}
 															item={item as Process}

package/src/components/scheduler/schedule-drawer/schedule-details-main.tsx

@@ -43,7 +43,7 @@ interface Props {
 	readOnly?: boolean;
 }
 
-export default function ScheduleDetailsMain(props: Props) {
+export default function ScheduleDetailsMain(props: Readonly<Props>) {
 	const t = useTranslations("Integrate.Scheduler");
 
 	const theme = useTheme();