@evenicanpm/admin-integrate 1.2.2 → 1.4.0

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

@@ -1,14 +1,13 @@
-import React from "react";
-
-import { SxProps } from "@mui/material";
-import StorageIcon from "@mui/icons-material/Storage";
-import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
 import CodeIcon from "@mui/icons-material/Code";
-import TableChartIcon from "@mui/icons-material/TableChart";
+import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
 import EmailIcon from "@mui/icons-material/Email";
 import IosShareIcon from "@mui/icons-material/IosShare";
 import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
+import StorageIcon from "@mui/icons-material/Storage";
+import TableChartIcon from "@mui/icons-material/TableChart";
+import type { SxProps } from "@mui/material";
 import { purple } from "@mui/material/colors";
+import type React from "react";
 
 interface Props {
 	processIcon: string;
@@ -17,7 +16,7 @@ interface Props {
 
 const IntegrationStatusIcon: React.FC<Props> = (props: Props) => {
 	const color = purple[500];
-	const statusIconMap = {
+	const statusIconMap: { [key: string]: React.ReactNode } = {
 		DB: <StorageIcon color="success" />,
 		Webhook: <ElectricBoltIcon color="error" />,
 		Restful: <CodeIcon color="info" />,
@@ -27,7 +26,7 @@ const IntegrationStatusIcon: React.FC<Props> = (props: Props) => {
 		noIcon: <QuestionMarkIcon color="info" />,
 	};
 
-	return statusIconMap[props.processIcon] || statusIconMap["noIcon"];
+	return statusIconMap[props.processIcon] || statusIconMap.noIcon;
 };
 
 export default IntegrationStatusIcon;

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

@@ -1,20 +1,7 @@
-import React from "react";
-import { styled } from "@mui/material/styles";
-import { Box, Typography, SxProps } from "@mui/material";
+import { StatusTag } from "@evenicanpm/admin-integrate/components/core";
+import { Box, type SxProps } from "@mui/material";
 import { useTranslations } from "next-intl";
 
-const StyledTagBox = styled(Box)(({ theme }) => ({
-	padding: theme.spacing(0, 1.5),
-	border: "solid 1px",
-	borderRadius: 4,
-	alignContent: "center",
-	maxWidth: "fit-content",
-}));
-
-const StyledTag = styled(Typography)(({ theme }) => ({
-	fontWeight: "bold",
-}));
-
 interface Props {
 	process: {
 		isScheduled: number;
@@ -29,46 +16,15 @@ const IntegrationTag: React.FC<Props> = ({ process, sx }) => {
 	return (
 		<Box display="flex" gap={1} justifyContent="center">
 			{process.isTriggered === 1 && (
-				<StyledTagBox
-					sx={{
-						backgroundColor: "info.100",
-						borderColor: "transparent",
-						...sx,
-					}}
-				>
-					<StyledTag color="info" variant="caption">
-						{t("triggered")}
-					</StyledTag>
-				</StyledTagBox>
+				<StatusTag type="info" text={t("triggered")} sx={sx} />
 			)}
 
 			{process.isScheduled === 1 && (
-				<StyledTagBox
-					sx={{
-						backgroundColor: "success.100",
-						borderColor: "transparent",
-						...sx,
-					}}
-				>
-					<StyledTag color="success" variant="caption">
-						{t("scheduled")}
-					</StyledTag>
-				</StyledTagBox>
+				<StatusTag type="success" text={t("scheduled")} sx={sx} />
 			)}
 
-			{process.isScheduled === 0 && process.isTriggered === 0 && (
-				<StyledTagBox
-					sx={{
-						backgroundColor: "warning.100",
-						borderColor: "transparent",
-						color: "orange.700",
-						...sx,
-					}}
-				>
-					<StyledTag color="inherit" variant="caption">
-						{t("scheduledPending")}
-					</StyledTag>
-				</StyledTagBox>
+			{process.isScheduled === 0 && (
+				<StatusTag type="warning" text={t("scheduledPending")} sx={sx} />
 			)}
 		</Box>
 	);

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

@@ -0,0 +1,161 @@
+import { DateTimePopover } from "@evenicanpm/admin-integrate/components/core";
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import {
+	StyledIconButton,
+	StyledTableCell,
+	StyledTableRow,
+} from "@evenicanpm/admin-integrate/components/data-table/table-row";
+import {
+	IntegrationStatusIcon,
+	IntegrationTag,
+} from "@evenicanpm/admin-integrate/components/integration-list";
+import { toDistanceDate } from "@evenicanpm/admin-integrate/utils/date-functions";
+import { ContentCopyOutlined, RemoveRedEye } from "@mui/icons-material";
+import {
+	Box,
+	Stack,
+	type SxProps,
+	type TableCellProps,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { RedirectType, redirect } from "next/navigation";
+import type React from "react";
+import { useState } from "react";
+import type { IntegrationItem } from "./integration-list";
+
+interface Props {
+	item: IntegrationItem;
+	heading: Head[]; // for alignment
+	sx?: SxProps;
+	handleRedirect?: (id: string) => void;
+	isImportMode?: boolean;
+	readOnly?: boolean;
+}
+
+const IntegrationListRow: React.FC<Props> = (props: Props) => {
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+	const open = Boolean(anchorEl);
+
+	const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+		setAnchorEl(event.currentTarget);
+	};
+
+	const handlePopoverClose = () => {
+		setAnchorEl(null);
+	};
+
+	const handleRedirect = () => {
+		if (props.handleRedirect) {
+			props.handleRedirect(props.item.id);
+		} else {
+			redirect(`/e4integrate/integrations/${props.item.id}`, RedirectType.push);
+		}
+	};
+
+	const headings = {
+		name: props.heading.find((h) => h.id === "name"),
+		id: props.heading.find((h) => h.id === "id"),
+		isScheduled: props.heading.find((h) => h.id === "isScheduled"),
+		modified: props.heading.find((h) => h.id === "modified"),
+		view: props.heading.find((h) => h.id === "view"),
+	};
+
+	return (
+		<StyledTableRow sx={props.sx}>
+			{headings.name && (
+				<StyledTableCell
+					align={headings.name.align as TableCellProps["align"]}
+					width={headings.name.width}
+				>
+					<Stack spacing={1} direction="row">
+						<Box display="flex" justifyContent="flex-end" alignItems="center">
+							<IntegrationStatusIcon processIcon={props.item.processIcon} />
+						</Box>
+						<Box display="flex" justifyContent="flex-end" alignItems="center">
+							<Typography>{props.item.name}</Typography>
+						</Box>
+					</Stack>
+				</StyledTableCell>
+			)}
+			{headings.id && (
+				<StyledTableCell
+					align={headings.id.align as TableCellProps["align"]}
+					width={headings.id.width}
+				>
+					<Typography>{props.item.id}</Typography>
+				</StyledTableCell>
+			)}
+			{headings.isScheduled && (
+				<StyledTableCell
+					align={headings.isScheduled.align as TableCellProps["align"]}
+					width={headings.isScheduled.width}
+				>
+					<IntegrationTag
+						process={{
+							isScheduled: props.item.isScheduled,
+							isTriggered: props.item.isTriggered,
+						}}
+					/>
+				</StyledTableCell>
+			)}
+			{headings.modified && (
+				<StyledTableCell
+					align={headings.modified.align as TableCellProps["align"]}
+					width={headings.modified.width}
+					sx={styles.timeCell}
+				>
+					<Typography
+						onMouseEnter={handlePopoverOpen}
+						onMouseLeave={handlePopoverClose}
+					>
+						{toDistanceDate(props.item.modified)}
+					</Typography>
+					<DateTimePopover
+						dateIsoString={props.item.modified}
+						sx={{ pointerEvents: "none" }}
+						open={open}
+						anchorEl={anchorEl}
+						anchorOrigin={{
+							vertical: "bottom",
+							horizontal: "center",
+						}}
+						transformOrigin={{
+							vertical: "top",
+							horizontal: "center",
+						}}
+						onClose={handlePopoverClose}
+						disableRestoreFocus
+					/>
+				</StyledTableCell>
+			)}
+			{headings.view && (
+				<StyledTableCell
+					align={headings.view.align as TableCellProps["align"]}
+					width={headings.view.width}
+				>
+					<StyledIconButton onClick={handleRedirect} disabled={props.readOnly}>
+						{props.isImportMode ? <ContentCopyOutlined /> : <RemoveRedEye />}
+					</StyledIconButton>
+				</StyledTableCell>
+			)}
+		</StyledTableRow>
+	);
+};
+
+const getStyles = (theme: Theme) => {
+	return {
+		timeCell: {
+			cursor: "default",
+		},
+		popover: {
+			padding: theme.spacing(1),
+		},
+	};
+};
+
+export default IntegrationListRow;

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

@@ -0,0 +1,62 @@
+import type { ProcessExecutionInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { TableHeader } from "@evenicanpm/admin-integrate/components/data-table";
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import { type SxProps, Table, TableBody, TableContainer } from "@mui/material";
+import type { IntegrationItem } from "./integration-list";
+import IntegrationListRow from "./integration-list-row";
+
+interface Props {
+	heading: Head[];
+	items: IntegrationItem[];
+	input: ProcessExecutionInput;
+	setInput: (newInput: ProcessExecutionInput) => void;
+	rowSx?: SxProps;
+	handleRedirect?: (id: string) => void;
+	isImportMode?: boolean;
+	readOnly?: boolean;
+}
+
+export default function IntegrationListTable(props: Readonly<Props>) {
+	const handleRequestSort = (property: string) => {
+		const current = props.input.sort;
+		if (property === current) {
+			props.setInput({
+				...props.input,
+				sortDesc: !props.input.sortDesc,
+			});
+		} else {
+			props.setInput({
+				...props.input,
+				sort: property,
+				sortDesc: false,
+			});
+		}
+	};
+
+	return (
+		<TableContainer>
+			<Table>
+				<TableHeader
+					heading={props.heading}
+					orderBy={props.input.sort ?? ""}
+					order={props.input.sortDesc ? "desc" : "asc"}
+					onRequestSort={handleRequestSort}
+					rowSx={props.rowSx}
+				/>
+				<TableBody>
+					{props.items.map((item) => (
+						<IntegrationListRow
+							key={item.id}
+							item={item}
+							heading={props.heading}
+							sx={props.rowSx}
+							handleRedirect={props.handleRedirect}
+							isImportMode={props.isImportMode}
+							readOnly={props.readOnly}
+						/>
+					))}
+				</TableBody>
+			</Table>
+		</TableContainer>
+	);
+}

package/src/{pages/integrations/integration-list → components/integration-list/list}/integration-list.tsx

@@ -1,46 +1,35 @@
-import React, { useState, useEffect } from "react";
-import { useTranslations } from "next-intl";
-
-// API
-import {
+import type {
 	GetProcessesQuery,
 	ProcessInput,
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-import { ProcessExecutionInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-
-// MUI
-import { Theme, useTheme } from "@mui/material";
-import {
-	Card,
-	Box,
-	Stack,
-	Typography,
-	Grid2 as Grid,
-	Skeleton,
-} from "@mui/material";
-
-// Custom components
 import { FlexBox } from "@evenicanpm/admin-core/components/flex-box";
 import {
 	TablePagination,
 	TableSkeleton,
 } from "@evenicanpm/admin-integrate/components/data-table";
-import { ListFilter } from "@evenicanpm/admin-integrate/components/list-filter";
-
-// Local components
-import IntegrationListTable from "./integration-list-table";
-
-// Types
-import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
-import { ListFilterOutput } from "@evenicanpm/admin-integrate/components/list-filter/list-filter-types";
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
 import {
-	IntegrationListFilters,
+	type IntegrationListFilters,
 	integrationListFilters,
 } from "@evenicanpm/admin-integrate/components/integration-list/integration-filter";
-import { log } from "console";
+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 executionItem {
+export interface IntegrationItem {
 	isScheduled: 0 | 1;
 	isTriggered: 0 | 1;
 	id: string;
@@ -58,6 +47,9 @@ interface Props {
 	loading: boolean;
 	input: ProcessInput;
 	setInput: (newInput: ProcessInput) => void;
+	handleRedirect?: (id: string) => void;
+	isImportMode?: boolean;
+	readOnly?: boolean;
 }
 
 const IntegrationList: React.FC<Props> = (props: Props) => {
@@ -66,22 +58,22 @@ const IntegrationList: React.FC<Props> = (props: Props) => {
 	const theme = useTheme();
 	const styles = getStyles(theme);
 
-	const [items, setItems] = useState<Item[]>([]);
-	const [fetched, setFetched] = useState<boolean>(false); // prevents "empty list" msg from showing for split second
-	const [page, setPage] = useState(props.input.skip / props.input.top + 1);
-	const [perPage, setPerPage] = useState(props.input.top);
+	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) {
+		if (page !== value && event) {
 			setPage(value);
 			props.setInput({
 				...props.input,
-				skip: props.input.top * (value - 1),
+				skip: (props.input.top || 10) * (value - 1),
 			});
-			setFetched(false);
 		}
 	};
 
@@ -89,7 +81,6 @@ const IntegrationList: React.FC<Props> = (props: Props) => {
 		filterUpdate: ListFilterOutput<IntegrationListFilters>,
 	) => {
 		const { itemsPerPage, search, filters } = filterUpdate;
-		console.log("filters", filters?.multiSelectFilter);
 
 		props.setInput({
 			...props.input,
@@ -98,10 +89,8 @@ const IntegrationList: React.FC<Props> = (props: Props) => {
 			search: search,
 			integrationTags:
 				filters?.multiSelectFilter?.map((f) => `${f.id}`) || null,
-			sortDesc: true,
 		});
-		setFetched(false);
-		setPerPage(itemsPerPage);
+		setPerPage(itemsPerPage as number);
 		setPage(1);
 	};
 
@@ -111,13 +100,11 @@ const IntegrationList: React.FC<Props> = (props: Props) => {
 			skip: 0,
 			integrationTags: null,
 		});
-		setFetched(false);
 	};
 
 	useEffect(() => {
-		if (props.data) {
-			setItems(props.data.processes.nodes as Item[]);
-			setFetched(true);
+		if (props.data?.processes?.nodes) {
+			setItems(props.data.processes.nodes as IntegrationItem[]);
 		}
 	}, [props.data]);
 
@@ -127,7 +114,11 @@ const IntegrationList: React.FC<Props> = (props: Props) => {
 				<ListFilter<IntegrationListFilters>
 					setFilters={handleSetFilters}
 					clearFilters={handleClearFilters}
-					filters={integrationListFilters}
+					filters={
+						props.heading.find((h) => h.id === "isScheduled")
+							? integrationListFilters
+							: ({} as IntegrationListFilters)
+					}
 					config={{
 						pagination: {
 							pageDefault: 10,
@@ -147,10 +138,11 @@ const IntegrationList: React.FC<Props> = (props: Props) => {
 				</Card>
 			)}
 
-			{!props.loading && props.data && fetched && items.length > 0 ? (
+			{!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(
@@ -167,12 +159,15 @@ const IntegrationList: React.FC<Props> = (props: Props) => {
 							input={props.input}
 							setInput={props.setInput}
 							rowSx={styles.rowSx}
+							handleRedirect={props.handleRedirect}
+							isImportMode={props.isImportMode}
+							readOnly={props.readOnly}
 						/>
 					</Card>
 				</Box>
 			) : null}
 
-			{!props.loading && fetched && items.length === 0 ? (
+			{!props.loading && items.length === 0 ? (
 				<Card>
 					<FlexBox
 						justifyContent="center"
@@ -192,7 +187,7 @@ const IntegrationList: React.FC<Props> = (props: Props) => {
 				</Card>
 			) : null}
 
-			{!props.loading && props.data && fetched && items.length > 0 ? (
+			{!props.loading && props.data?.processes && items.length > 0 ? (
 				<Grid container spacing={1} sx={styles.pagination}>
 					<Grid size={{ xs: 10.5 }}>
 						<FlexBox
@@ -204,7 +199,8 @@ const IntegrationList: React.FC<Props> = (props: Props) => {
 								page={page}
 								onChange={handleChangePage}
 								count={Math.ceil(
-									props.data.processes.recordCount / props.input.top,
+									(props.data.processes.recordCount || 10) /
+										(props.input.top || 10),
 								)}
 							/>
 						</FlexBox>
@@ -216,7 +212,7 @@ const IntegrationList: React.FC<Props> = (props: Props) => {
 							sx={{ height: "100%" }}
 						>
 							<Typography color="grey">
-								{`${props.data.processes.pageInfo.resultsReturned}  ${t("Pagination.of")} ${props.data.processes.recordCount} ${t("Pagination.items")}`}
+								{`${props.data.processes.pageInfo?.resultsReturned || 0}  ${t("Pagination.of")} ${props.data.processes.recordCount || 0} ${t("Pagination.items")}`}
 							</Typography>
 						</FlexBox>
 					</Grid>

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,
@@ -16,9 +16,5 @@ export function DefaultEdge({
 		borderRadius: 0,
 	});
 
-	return (
-		<>
-			<BaseEdge id={id} path={edgePath} markerEnd={markerEnd} />
-		</>
-	);
+	return <BaseEdge id={id} path={edgePath} markerEnd={markerEnd} />;
 }

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,28 @@
+import { AnimatedSVGEdge } from "./animated-svg";
 import { DefaultEdge } from "./edges/default-edge";
+import { AddNode } from "./nodes/add-node";
 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,
+	"add-node": AddNode, // Temporary use TaskNode for AddNode
 };