@evenicanpm/admin-integrate 1.2.2 → 1.4.0

package/src/components/execution-history-drawer/execution-history-drawer.tsx

@@ -0,0 +1,202 @@
+"use client";
+import type {
+	GetProcessExecutionsByProcessQuery,
+	ProcessExecutionInput,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { FlexBox } from "@evenicanpm/admin-core/components/flex-box";
+import { TablePagination } from "@evenicanpm/admin-integrate/components/data-table";
+import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight";
+import {
+	Box,
+	Card,
+	Grid2 as Grid,
+	Stack,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import IconButton from "@mui/material/IconButton";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useEffect, useState } from "react";
+import ExecutionsCard from "./executions-card";
+
+// Returned from processExecutionsByProcess query
+export interface Item {
+	id: string;
+	name: string;
+	startDate: string;
+	executionStatus: {
+		id: string;
+	};
+}
+
+interface Props {
+	data: GetProcessExecutionsByProcessQuery;
+	loading: boolean;
+	input: ProcessExecutionInput;
+	setInput: (newInput: ProcessExecutionInput) => void;
+	drawerOpen?: boolean;
+	setDrawerOpen?: (open: boolean) => void;
+}
+
+const ExecutionHistoryDrawer: React.FC<Props> = (props: Props) => {
+	const t = useTranslations("Integrate.Executions");
+
+	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
+
+	useEffect(() => {
+		if (props.data?.processExecutionsByProcess?.nodes) {
+			setItems(props.data.processExecutionsByProcess.nodes as Item[]);
+			setFetched(true);
+		}
+	}, [props.data]);
+
+	const handleChangePage = (
+		event: React.ChangeEvent<unknown>,
+		value: number,
+	) => {
+		const page = (props.input.skip || 0) / (props.input.top || 10) + 1;
+		if (page !== value && event) {
+			props.setInput({
+				...props.input,
+				skip: (props.input.top || 10) * (value - 1),
+			});
+			setFetched(false);
+		}
+	};
+	// Toggle drawer open/close
+	const toggleDrawer = () => {
+		if (props.setDrawerOpen) props.setDrawerOpen(!props.drawerOpen);
+	};
+
+	return (
+		<Box
+			sx={{
+				width: props.drawerOpen ? 345 : 43,
+				//transition: "width 0.3s ease",
+				backgroundColor: theme.palette.background.default,
+				borderRight: `1px solid ${theme.palette.grey[400]}`,
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "flex-start",
+				position: "relative",
+				overflow: "auto",
+			}}
+		>
+			<Box
+				sx={{
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					width: "100%",
+					p: 1,
+					borderBottom: `1px solid ${theme.palette.divider}`,
+				}}
+			>
+				{props.drawerOpen && (
+					<Typography
+						variant="subtitle1"
+						align="center"
+						sx={{
+							fontWeight: 600,
+							flex: 1,
+							padding: theme.spacing(0, 0, 0, 2),
+						}}
+					>
+						{t("ExecutionsDetail.history")}
+					</Typography>
+				)}
+				<IconButton
+					onClick={toggleDrawer}
+					size="small"
+					sx={{
+						transition: "transform 0.3s ease",
+						transform: props.drawerOpen ? "rotate(180deg)" : "rotate(0deg)",
+					}}
+				>
+					<KeyboardDoubleArrowRightIcon />
+				</IconButton>
+			</Box>
+			{props.drawerOpen &&
+				props?.data?.processExecutionsByProcess?.nodes?.map((item) => (
+					<ExecutionsCard key={item?.id as string} item={item as Item} />
+				))}
+
+			{!props.loading && props.drawerOpen && fetched && items.length === 0 ? (
+				<Card
+					sx={{
+						background: "transparent",
+						textAlign: "center",
+						padding: theme.spacing(0, 2),
+						boxShadow: "none",
+					}}
+				>
+					<FlexBox
+						justifyContent="center"
+						alignItems="center"
+						sx={{
+							minHeight: "335px",
+							marginBottom: theme.spacing(2),
+							background: "transparent",
+						}}
+					>
+						<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?.processExecutionsByProcess &&
+			fetched &&
+			props.drawerOpen &&
+			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={(props.input.skip || 0) / (props.input.top || 10) + 1}
+								onChange={handleChangePage}
+								count={Math.ceil(
+									(props.data.processExecutionsByProcess.recordCount || 10) /
+										(props.input.top || 10),
+								)}
+							/>
+						</FlexBox>
+					</Grid>
+				</Grid>
+			) : null}
+		</Box>
+	);
+};
+
+const getStyles = (theme: Theme) => {
+	return {
+		iconButton: {
+			borderRadius: 1,
+		},
+		pagination: {
+			marginTop: "auto",
+			width: "100%",
+		},
+		paginationBox: {
+			paddingLeft: theme.spacing(0),
+			width: "100%",
+		},
+	};
+};
+
+export default ExecutionHistoryDrawer;

package/src/components/execution-history-drawer/executions-card.tsx

@@ -0,0 +1,85 @@
+import {
+	ExecutionStatusIcon,
+	ExecutionTag,
+} from "@evenicanpm/admin-integrate/components/execution";
+import { toShortDate } from "@evenicanpm/admin-integrate/utils/date-functions";
+import { Box, Card, Typography, useTheme } from "@mui/material";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import type React from "react";
+import type { Item } from "./execution-history-drawer";
+
+interface Props {
+	item: Item;
+}
+
+const ExecutionsCard: React.FC<Props> = (props: Props) => {
+	const { item } = props;
+	const theme = useTheme();
+	const router = useRouter();
+	const params = useParams();
+	const searchParams = useSearchParams();
+
+	const processId = params?.processId as string;
+	const selectedExecutionId = searchParams.get("ExecutionId");
+
+	const isSelected = item.id.toString() === selectedExecutionId;
+
+	const handleChangeExecutionId = (newId: string) => {
+		router.push(`/e4integrate/executions/${processId}?ExecutionId=${newId}`);
+	};
+
+	return (
+		<Box
+			sx={{
+				padding: theme.spacing(0.5, 2),
+				width: "100%",
+			}}
+		>
+			<Card
+				onClick={() => handleChangeExecutionId(item.id.toString())}
+				sx={{
+					backgroundColor: isSelected ? "#DBF0FE" /* primary[100] */ : "white",
+					border: `1px solid ${isSelected ? "#4E97FD" /*primary[500]*/ : theme.palette.grey[400]}`,
+					boxShadow: "none",
+					borderRadius: 2.5,
+					width: "100%",
+					p: 1,
+					cursor: "pointer",
+					transition: "all 0.2s ease-in-out",
+					"&:hover": { boxShadow: 4 },
+				}}
+			>
+				{/* Top Row: Icon, Name, and Status */}
+				<Box display="flex" alignItems="center" justifyContent="space-between">
+					<Box display="flex" alignItems="center" gap={1}>
+						<ExecutionStatusIcon executionStatusId={item.executionStatus.id} />
+						<Typography
+							variant="subtitle1"
+							title={item.name}
+							fontWeight={600}
+							sx={{
+								whiteSpace: "nowrap",
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								maxWidth: 100,
+							}}
+						>
+							{item.name}
+						</Typography>
+					</Box>
+
+					<ExecutionTag executionStatusId={item.executionStatus.id} />
+				</Box>
+
+				<Typography
+					variant="body2"
+					sx={{ color: theme.palette.grey[500], mt: 1, ml: 0 }}
+				>
+					{toShortDate(item.startDate)}
+				</Typography>
+			</Card>
+		</Box>
+	);
+};
+
+export default ExecutionsCard;

package/src/components/execution-history-drawer/index.ts

@@ -0,0 +1 @@
+export { default as ExecutionHistoryDrawer } from "./execution-history-drawer";

package/src/components/footer/footer.tsx

@@ -1,11 +1,15 @@
-import React from "react";
-import { useTranslations } from "next-intl";
-
+import { Copyright } from "@mui/icons-material";
 // MUI
-import { Theme, useTheme } from "@mui/material";
+import {
+	Box,
+	Grid2 as Grid,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
 import styled from "@mui/material/styles/styled";
-import { Typography, Box, Grid2 as Grid } from "@mui/material";
-import { Copyright } from "@mui/icons-material";
+import { useTranslations } from "next-intl";
+import type React from "react";
 
 // Styled components
 const Footer = styled("footer")(() => ({

package/src/components/header/dashboard-list-header.tsx

@@ -1,11 +1,16 @@
-import React from "react";
-import { redirect, RedirectType } from "next/navigation";
-import { useTranslations } from "next-intl";
-
-// MUI
-import { Theme, useTheme } from "@mui/material";
-import { Grid2 as Grid, Box, Typography, Button } from "@mui/material";
 import { Refresh, VisibilityOutlined } from "@mui/icons-material";
+// MUI
+import {
+	Box,
+	Button,
+	Grid2 as Grid,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { RedirectType, redirect } from "next/navigation";
+import { useTranslations } from "next-intl";
+import type React from "react";
 
 // Custom components
 import { OutlinedIconButton } from "../button";

package/src/components/header/execution-details-header.tsx

@@ -1,17 +1,24 @@
-import React, { useState } from "react";
-
-// MUI
-import { Theme, useTheme } from "@mui/material";
-import { Grid2 as Grid, Typography, Stack } from "@mui/material";
-
-// Custom components
-import { ExecutionTag } from "@evenicanpm/admin-integrate/components/execution";
 import { DateTimePopover } from "@evenicanpm/admin-integrate/components/core";
+import { ExecutionTag } from "@evenicanpm/admin-integrate/components/execution";
+import {
+	toDurationDate,
+	toShortDate,
+} from "@evenicanpm/admin-integrate/utils/date-functions";
+import {
+	Grid2 as Grid,
+	Stack,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useState } from "react";
 
-interface Execution {
+export interface Execution {
 	name: string;
 	startDate: string;
-	endDate: string;
+	endDate?: string;
 	executionStatus: {
 		id: string;
 	};
@@ -23,13 +30,14 @@ interface Props {
 }
 
 const ExecutionDetailsHeader: React.FC<Props> = (props: Props) => {
+	const t = useTranslations("Integrate");
+
 	const theme = useTheme();
 	const styles = getStyles(theme);
 
-	const startDate = new Date(props.execution.startDate);
-	const endDate = new Date(props.execution.endDate);
-	const localTime = startDate.toLocaleString();
-	const duration = (endDate.getTime() - startDate.getTime()) / 1000;
+	const duration = props.execution.endDate
+		? toDurationDate(props.execution.startDate, props.execution.endDate)
+		: "";
 
 	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 	const open = Boolean(anchorEl);
@@ -41,7 +49,6 @@ const ExecutionDetailsHeader: React.FC<Props> = (props: Props) => {
 	const handlePopoverClose = () => {
 		setAnchorEl(null);
 	};
-
 	return (
 		<Grid container columnSpacing={1}>
 			<Grid size={8}>
@@ -66,18 +73,20 @@ const ExecutionDetailsHeader: React.FC<Props> = (props: Props) => {
 				</Stack>
 			</Grid>
 			<Grid size={12}>
-				<Stack
-					spacing={1}
-					direction="row"
-					onMouseEnter={handlePopoverOpen}
-					onMouseLeave={handlePopoverClose}
-				>
-					<Typography color="grey" variant="caption">
-						{localTime}
-					</Typography>
-					<Typography color="grey" variant="caption">
-						Duration: {duration}s
+				<Stack spacing={1} direction="row">
+					<Typography
+						color="grey"
+						variant="caption"
+						onMouseEnter={handlePopoverOpen}
+						onMouseLeave={handlePopoverClose}
+					>
+						{toShortDate(props.execution.startDate)}
 					</Typography>
+					{duration && (
+						<Typography color="grey" variant="caption">
+							{t("Executions.duration")}: {duration}
+						</Typography>
+					)}
 				</Stack>
 			</Grid>
 			<DateTimePopover

package/src/components/header/header.tsx

@@ -1,6 +1,13 @@
-import React from "react";
-import { Box, Typography, AppBar, Toolbar, Stack } from "@mui/material";
-import { Theme, useTheme } from "@mui/material";
+import {
+	AppBar,
+	Box,
+	Stack,
+	type Theme,
+	Toolbar,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import type React from "react";
 
 interface Props {
 	title: string; // e.g. Executions

package/src/components/header/index.ts

@@ -1,4 +1,4 @@
-export { default as IntegrateHeader } from "./header";
 export { default as DashboardListHeader } from "./dashboard-list-header";
 export { default as ExecutionDetailsHeader } from "./execution-details-header";
+export { default as IntegrateHeader } from "./header";
 export { default as IntegrationDetailsHeader } from "./integration-details-header";

package/src/components/header/integration-details-header.tsx

@@ -1,29 +1,37 @@
-import React from "react";
-import { useTranslations } from "next-intl";
-
-// MUI
-import { Theme, useTheme } from "@mui/material";
-import { Grid2 as Grid, Stack, Divider, Button, Box } from "@mui/material";
 import {
-	InfoOutlined,
+	StatusTag,
+	TitleEdit,
+} from "@evenicanpm/admin-integrate/components/core";
+import { IntegrationStatusIcon } from "@evenicanpm/admin-integrate/components/integration-list";
+import {
+	AccessTime,
 	Code,
 	FileUploadOutlined,
 	PlayArrowOutlined,
 } from "@mui/icons-material";
-
-// Custom components
-import { TitleEdit } from "@evenicanpm/admin-integrate/components/core";
-
-// TODO: when applying on page, change to use type of API query result
-type DetailsTemp = {
-	name: string;
-	processIcon: string;
-};
+import {
+	Box,
+	Button,
+	Divider,
+	Grid2 as Grid,
+	Stack,
+	type SxProps,
+	type Theme,
+	useTheme,
+} from "@mui/material";
+import { useTranslations } from "next-intl";
 
 interface Props {
-	details: DetailsTemp;
-	setDetails: (newDetails: DetailsTemp) => void;
+	name: string;
+	setName: React.Dispatch<React.SetStateAction<string>>;
+	onImportClick?: React.MouseEventHandler<HTMLButtonElement>;
+	onScheduleClick?: React.MouseEventHandler<HTMLButtonElement>;
+	onExecutionsClick?: React.MouseEventHandler<HTMLButtonElement>;
+	icon?: string;
 	children?: React.ReactNode; // buttons to go in header, e.g. save, cancel etc.
+	toolbar?: "enabled" | "disabled" | "hidden";
+	draft?: boolean;
+	untitled?: boolean;
 }
 
 const IntegrationDetailsHeader: React.FC<Props> = (props: Props) => {
@@ -33,24 +41,39 @@ const IntegrationDetailsHeader: React.FC<Props> = (props: Props) => {
 	const styles = getStyles(theme);
 
 	const onConfirm = (input: string) => {
-		props.setDetails({ ...props.details, name: input });
+		props.setName(input);
 	};
 
+	const toolbarStyles: SxProps =
+		props.toolbar === "disabled"
+			? {
+					...styles.controlsButton,
+					color: theme.palette.grey[100],
+					borderColor: theme.palette.grey[300],
+				}
+			: styles.controlsButton;
+
 	return (
-		<Grid container rowSpacing={1} columnSpacing={0}>
-			<Grid size={{ xs: 12, sm: 8 }}>
+		<Grid container rowSpacing={1} columnSpacing={0} sx={styles.root}>
+			<Grid
+				size={{ xs: 12, sm: 8 }}
+				pl={2}
+				pt={1}
+				display="flex"
+				alignItems="center"
+			>
 				<Stack spacing={1} direction="row" alignItems="center">
-					{/* TODO: Apply Process icon component once that is merged. Using temp icon for now */}
-					<InfoOutlined color="info" />
+					<IntegrationStatusIcon processIcon={props.icon || "noIcon"} />
 
-					<TitleEdit
-						title={props.details.name}
-						onConfirm={onConfirm}
-						variant="h5"
-					/>
+					<TitleEdit title={props.name} onConfirm={onConfirm} variant="h5" />
+
+					{props.untitled && <StatusTag type="warning" text={t("untitled")} />}
+					{props.draft && !props.untitled && (
+						<StatusTag type="info" text={t("draft")} />
+					)}
 				</Stack>
 			</Grid>
-			<Grid size={{ xs: 12, sm: 4 }}>
+			<Grid size={{ xs: 12, sm: 4 }} pt={1} pr={2}>
 				<Stack
 					spacing={1}
 					direction="row"
@@ -61,28 +84,68 @@ const IntegrationDetailsHeader: React.FC<Props> = (props: Props) => {
 					{props.children}
 				</Stack>
 			</Grid>
-			<Grid size={12}>
-				<Divider sx={styles.divider} />
-			</Grid>
-			<Grid size={12}>
-				<Stack direction="row">
-					<Box sx={styles.controlsButton}>
-						<Button startIcon={<Code />}>{t("codeView")}</Button>
-					</Box>
-					<Box sx={styles.controlsButton}>
-						<Button startIcon={<FileUploadOutlined />}>{t("import")}</Button>
-					</Box>
-					<Box sx={{ ...styles.controlsButton, border: "none" }}>
-						<Button startIcon={<PlayArrowOutlined />}>{t("executions")}</Button>
-					</Box>
-				</Stack>
-			</Grid>
+
+			{(!props.toolbar || props.toolbar !== "hidden") && (
+				<>
+					<Grid size={12}>
+						<Divider sx={styles.divider} />
+					</Grid>
+					<Grid size={12} pb={1} pl={1} pr={1}>
+						<Stack direction="row">
+							<Box sx={toolbarStyles}>
+								<Button
+									startIcon={<Code />}
+									disabled={props.toolbar === "disabled"}
+								>
+									{t("codeView")}
+								</Button>
+							</Box>
+							<Box sx={toolbarStyles}>
+								<Button
+									startIcon={<FileUploadOutlined />}
+									disabled={props.toolbar === "disabled"}
+									onClick={(e) => {
+										if (props.onImportClick) props.onImportClick(e);
+									}}
+								>
+									{t("import")}
+								</Button>
+							</Box>
+							<Box sx={{ ...toolbarStyles }}>
+								<Button
+									startIcon={<AccessTime />}
+									disabled={props.toolbar === "disabled"}
+									onClick={(e) => {
+										if (props.onScheduleClick) props.onScheduleClick(e);
+									}}
+								>
+									{t("schedule")}
+								</Button>
+							</Box>
+							<Box sx={{ ...toolbarStyles, border: "none" }}>
+								<Button
+									startIcon={<PlayArrowOutlined />}
+									disabled={props.toolbar === "disabled"}
+									onClick={(e) => {
+										if (props.onExecutionsClick) props.onExecutionsClick(e);
+									}}
+								>
+									{t("executions")}
+								</Button>
+							</Box>
+						</Stack>
+					</Grid>
+				</>
+			)}
 		</Grid>
 	);
 };
 
 const getStyles = (theme: Theme) => {
 	return {
+		root: {
+			backgroundColor: theme.palette.background.paper,
+		},
 		divider: {
 			border: `1px solid ${theme.palette.grey[500]}`,
 		},

package/src/components/integration-list/index.ts

@@ -1,2 +1,3 @@
-export { default as IntegrationTag } from "./integration-tag";
 export { default as IntegrationStatusIcon } from "./integration-status-icon";
+export { default as IntegrationTag } from "./integration-tag";
+export { default as IntegrationList } from "./list";

package/src/components/integration-list/integration-filter.ts

@@ -1,4 +1,4 @@
-import {
+import type {
 	Filters,
 	MultiSelectFilter,
 } from "@evenicanpm/admin-integrate/components/list-filter/list-filter-types";