@evenicanpm/admin-integrate 1.2.2 → 1.3.0

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,36 @@
-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>;
+	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 +40,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 +83,65 @@ 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"}
+								>
+									{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";

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;