@evenicanpm/admin-integrate 1.2.0 → 1.3.0

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

@@ -0,0 +1,258 @@
+import type {
+	GetProcessesQuery,
+	ProcessInput,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { FlexBox } from "@evenicanpm/admin-core/components/flex-box";
+import {
+	TablePagination,
+	TableSkeleton,
+} from "@evenicanpm/admin-integrate/components/data-table";
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import {
+	type IntegrationListFilters,
+	integrationListFilters,
+} from "@evenicanpm/admin-integrate/components/integration-list/integration-filter";
+import { ListFilter } from "@evenicanpm/admin-integrate/components/list-filter";
+import type { ListFilterOutput } from "@evenicanpm/admin-integrate/components/list-filter/list-filter-types";
+import {
+	Box,
+	Card,
+	Grid2 as Grid,
+	Stack,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useEffect, useState } from "react";
+import IntegrationListTable from "./integration-list-table";
+
+// Returned from processExecutions query
+export interface integrationItem {
+	isScheduled: 0 | 1;
+	isTriggered: 0 | 1;
+	id: string;
+	name: string;
+	modified: string;
+	processIcon: string;
+}
+
+// Row height in terms of multiples of theme.spacing(1) (e.g. theme.spacing(7.5 & rows per page))
+const rowHeight = 7.5;
+
+interface Props {
+	heading: Head[];
+	data: GetProcessesQuery;
+	loading: boolean;
+	input: ProcessInput;
+	setInput: (newInput: ProcessInput) => void;
+	handleRedirect?: (id: string) => void;
+	isImportMode?: boolean;
+	readOnly?: boolean;
+}
+
+const IntegrationList: React.FC<Props> = (props: Props) => {
+	const t = useTranslations("Integrate.IntegrationList");
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const [items, setItems] = useState<integrationItem[]>([]);
+	const [page, setPage] = useState(
+		(props.input.skip ?? 0) / (props.input.top ?? 10) + 1,
+	);
+	const [perPage, setPerPage] = useState<number>(props.input.top || 10);
+
+	const handleChangePage = (
+		event: React.ChangeEvent<unknown>,
+		value: number,
+	) => {
+		if (page !== value && event) {
+			setPage(value);
+			props.setInput({
+				...props.input,
+				skip: (props.input.top || 10) * (value - 1),
+			});
+		}
+	};
+
+	const handleSetFilters = (
+		filterUpdate: ListFilterOutput<IntegrationListFilters>,
+	) => {
+		const { itemsPerPage, search, filters } = filterUpdate;
+
+		props.setInput({
+			...props.input,
+			top: itemsPerPage,
+			skip: 0,
+			search: search,
+			integrationTags:
+				filters?.multiSelectFilter?.map((f) => `${f.id}`) || null,
+		});
+		setPerPage(itemsPerPage as number);
+		setPage(1);
+	};
+
+	const handleClearFilters = () => {
+		props.setInput({
+			...props.input,
+			skip: 0,
+			integrationTags: null,
+		});
+	};
+
+	useEffect(() => {
+		if (props.data?.processes?.nodes) {
+			setItems(props.data.processes.nodes as integrationItem[]);
+		}
+	}, [props.data]);
+
+	return (
+		<>
+			<Box sx={styles.list}>
+				<ListFilter<IntegrationListFilters>
+					setFilters={handleSetFilters}
+					clearFilters={handleClearFilters}
+					filters={
+						props.heading.find((h) => h.id === "isScheduled")
+							? integrationListFilters
+							: ({} as IntegrationListFilters)
+					}
+					config={{
+						pagination: {
+							pageDefault: 10,
+							pageOptions: [10, 20, 50],
+						},
+					}}
+				/>
+			</Box>
+
+			{props.loading && !props.data && (
+				<Card>
+					<TableSkeleton
+						heading={props.heading}
+						perPage={perPage}
+						rowSx={styles.rowSx}
+					/>
+				</Card>
+			)}
+
+			{!props.loading && props.data.processes && items.length > 0 ? (
+				<Box
+					sx={{
+						minHeight:
+							props.data.processes.pageInfo?.resultsReturned &&
+							props.data.processes.pageInfo.resultsReturned < perPage &&
+							page === 1
+								? theme.spacing(
+										rowHeight *
+											(props.data.processes.pageInfo.resultsReturned + 1),
+									)
+								: theme.spacing(rowHeight * (perPage + 1)),
+					}}
+				>
+					<Card>
+						<IntegrationListTable
+							heading={props.heading}
+							items={items}
+							input={props.input}
+							setInput={props.setInput}
+							rowSx={styles.rowSx}
+							handleRedirect={props.handleRedirect}
+							isImportMode={props.isImportMode}
+							readOnly={props.readOnly}
+						/>
+					</Card>
+				</Box>
+			) : null}
+
+			{!props.loading && items.length === 0 ? (
+				<Card>
+					<FlexBox
+						justifyContent="center"
+						alignItems="center"
+						sx={{
+							minHeight: "335px",
+							marginBottom: theme.spacing(2),
+						}}
+					>
+						<Stack spacing={1} justifyContent="center" alignItems="center">
+							<Typography variant="h6" color="info">
+								{t("ListEmpty.title")}
+							</Typography>
+							<Typography variant="body1">{t("ListEmpty.body")}</Typography>
+						</Stack>
+					</FlexBox>
+				</Card>
+			) : null}
+
+			{!props.loading && props.data?.processes && items.length > 0 ? (
+				<Grid container spacing={1} sx={styles.pagination}>
+					<Grid size={{ xs: 10.5 }}>
+						<FlexBox
+							justifyContent="center"
+							alignItems="center"
+							sx={styles.paginationBox}
+						>
+							<TablePagination
+								page={page}
+								onChange={handleChangePage}
+								count={Math.ceil(
+									(props.data.processes.recordCount || 10) /
+										(props.input.top || 10),
+								)}
+							/>
+						</FlexBox>
+					</Grid>
+					<Grid size={{ xs: 1.5 }}>
+						<FlexBox
+							justifyContent="flex-end"
+							alignItems="center"
+							sx={{ height: "100%" }}
+						>
+							<Typography color="grey">
+								{`${props.data.processes.pageInfo?.resultsReturned || 0}  ${t("Pagination.of")} ${props.data.processes.recordCount || 0} ${t("Pagination.items")}`}
+							</Typography>
+						</FlexBox>
+					</Grid>
+				</Grid>
+			) : null}
+		</>
+	);
+};
+
+const getStyles = (theme: Theme) => {
+	return {
+		title: {
+			display: "flex",
+			alignItems: "center",
+			height: "100%",
+		},
+		typography: {
+			fontWeight: "medium",
+		},
+		button: {
+			borderWidth: 2,
+			borderRadius: 1,
+			marginRight: theme.spacing(1),
+		},
+		iconButton: {
+			borderRadius: 1,
+		},
+		pagination: {
+			marginTop: theme.spacing(2),
+		},
+		list: {
+			margin: theme.spacing(2, 0),
+		},
+		paginationBox: {
+			paddingLeft: theme.spacing(15),
+		},
+		rowSx: {
+			height: theme.spacing(rowHeight),
+		},
+	};
+};
+
+export default IntegrationList;

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

@@ -0,0 +1,31 @@
+import { BaseEdge, type EdgeProps, getSmoothStepPath } from "@xyflow/react";
+import React from "react";
+
+export function AnimatedSVGEdge({
+	id,
+	sourceX,
+	sourceY,
+	targetX,
+	targetY,
+	sourcePosition,
+	targetPosition,
+	markerEnd,
+}: EdgeProps) {
+	const [edgePath] = getSmoothStepPath({
+		sourceX,
+		sourceY,
+		sourcePosition,
+		targetX,
+		targetY,
+		targetPosition,
+	});
+
+	return (
+		<>
+			<BaseEdge id={id} path={edgePath} markerEnd={markerEnd} />
+			<circle r="5" fill="#4E97FD">
+				<animateMotion dur="2s" repeatCount="indefinite" path={edgePath} />
+			</circle>
+		</>
+	);
+}

package/src/components/integration-view/edges/default-edge.tsx

@@ -1,4 +1,4 @@
-import { BaseEdge, EdgeProps, getSmoothStepPath } from "@xyflow/react";
+import { BaseEdge, type EdgeProps, getSmoothStepPath } from "@xyflow/react";
 
 export function DefaultEdge({
 	id,

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

@@ -1,4 +1,4 @@
-import { LayoutOptions } from "elkjs";
+import type { LayoutOptions } from "elkjs";
 
 export const layoutOptions: LayoutOptions = {
 	"elk.algorithm": "layered",
@@ -8,7 +8,7 @@ export const layoutOptions: LayoutOptions = {
 	"org.eclipse.elk.hierarchyHandling": "INCLUDE_CHILDREN",
 
 	// Center parent nodes among their children, children immediately below
-	"org.eclipse.elk.layered.contentAlignment": "H_CENTER,V_TOP",
+	//"org.eclipse.elk.layered.contentAlignment": "H_CENTER,V_TOP",
 
 	// Reduce edge crossings
 	"org.eclipse.elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",

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

@@ -1,18 +1,47 @@
-import { ElkExtendedEdge, ElkNode } from "elkjs";
+import type { ElkExtendedEdge, ElkNode } from "elkjs";
+import type {
+	ProcessTask,
+	ProcessTaskExecution,
+} from "../../../../admin-core/src/api/e4/graphqlRequestSdk";
 
 export interface ElkNodeWithFlow extends ElkNode {
 	type?: string;
-	data?: {
-		label: string;
-		icon?: any;
-		isLast?: boolean;
-	};
+	data?: any;
 	position?: {
 		x: number;
 		y: number;
 	};
 	children?: ElkNodeWithFlow[];
 	extent?: string;
+	parentId?: string;
+	sort?: number;
+}
+
+export interface GroupNode extends ElkNodeWithFlow {
+	data: {
+		label: string;
+		parallelProcessesingGroup?: number;
+		isLast?: boolean;
+		disabled?: boolean;
+		selected?: boolean;
+	};
+}
+
+export interface ProcessTaskNode extends ElkNodeWithFlow {
+	data: {
+		processTask: ProcessTask;
+		isLast?: boolean;
+		disabled?: boolean;
+		selected?: boolean;
+	};
+}
+
+export interface ProcessTaskExecutionNode extends ElkNodeWithFlow {
+	data: {
+		processTaskExecution: ProcessTaskExecution;
+		isLast?: boolean;
+		disabled?: boolean;
+	};
 }
 
 export interface ElkExtendedEdgeWithFlow extends ElkExtendedEdge {

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

@@ -1,16 +1,26 @@
+import { AnimatedSVGEdge } from "./animated-svg";
 import { DefaultEdge } from "./edges/default-edge";
 import { ConnectionNode } from "./nodes/connection-node";
+import { EmptyNode } from "./nodes/empty-node";
 import { EntryNode } from "./nodes/entry-node";
+import { ExecutionEntryNode } from "./nodes/execution-entry-node";
+import { ExecutionTaskNode } from "./nodes/execution-task-node";
 import { GroupNode } from "./nodes/group-node";
+import { RowNode } from "./nodes/row-node";
 import { TaskNode } from "./nodes/task-node";
 
 export const edgeTypes = {
 	"default-edge": DefaultEdge,
+	"animated-edge": AnimatedSVGEdge,
 };
 
 export const nodeTypes = {
 	"connection-node": ConnectionNode,
 	"entry-node": EntryNode,
+	"execution-entry-node": ExecutionEntryNode,
 	"group-node": GroupNode,
 	"task-node": TaskNode, // Assuming you have a custom connection node
+	"execution-task-node": ExecutionTaskNode, // Assuming you have a custom connection node,
+	"row-node": RowNode,
+	"empty-node": EmptyNode,
 };