@evenicanpm/admin-integrate 1.1.0 → 1.2.0

package/src/components/scheduler/schedule-icon.tsx

@@ -0,0 +1,87 @@
+import React, { useState } from "react";
+import { useTranslations } from "next-intl";
+
+import { Theme, useTheme } from "@mui/material";
+import { Box, Popover, Typography } from "@mui/material";
+import { CalendarToday, Block, ReportGmailerrorred } from "@mui/icons-material";
+
+interface Props {
+	isLegacy?: boolean;
+	isDisabled?: boolean;
+	enablePopover?: boolean;
+}
+
+const ScheduleIcon: React.FC<Props> = (props: Props) => {
+	const t = useTranslations("Integrate.Scheduler");
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const iconMap: { [key: string]: any } = {
+		enabled: <CalendarToday color="success" />,
+		disabled: <Block sx={{ color: "grey.600" }} />,
+		legacy: <ReportGmailerrorred color="error" />,
+	};
+
+	let type = "enabled";
+	if (props.isLegacy) type = "legacy";
+	else if (props.isDisabled) type = "disabled";
+
+	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+	const open = Boolean(anchorEl);
+
+	const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+		if (props.enablePopover) {
+			setAnchorEl(event.currentTarget);
+		}
+	};
+
+	const handlePopoverClose = () => {
+		if (props.enablePopover) {
+			setAnchorEl(null);
+		}
+	};
+
+	return (
+		<>
+			<Box
+				display="flex"
+				alignItems="center"
+				justifyContent="center"
+				onMouseEnter={handlePopoverOpen}
+				onMouseLeave={handlePopoverClose}
+			>
+				{iconMap[type]}
+			</Box>
+			<Popover
+				sx={{ pointerEvents: "none" }}
+				open={open}
+				anchorEl={anchorEl}
+				anchorOrigin={{
+					vertical: "bottom",
+					horizontal: "center",
+				}}
+				transformOrigin={{
+					vertical: "top",
+					horizontal: "center",
+				}}
+				onClose={handlePopoverClose}
+				disableRestoreFocus
+			>
+				<Box sx={styles.popover}>
+					<Typography>{t(type)}</Typography>
+				</Box>
+			</Popover>
+		</>
+	);
+};
+
+export default ScheduleIcon;
+
+const getStyles = (theme: Theme) => {
+	return {
+		popover: {
+			padding: theme.spacing(1),
+		},
+	};
+};

package/src/components/scheduler/scheduler-types.ts

@@ -0,0 +1,40 @@
+export type DayString =
+	| "monday"
+	| "tuesday"
+	| "wednesday"
+	| "thursday"
+	| "friday"
+	| "saturday"
+	| "sunday"
+	| "everyday"
+	| "disabled";
+
+export type IsDay = {
+	isMonday: boolean;
+	isTuesday: boolean;
+	isWednesday: boolean;
+	isThursday: boolean;
+	isFriday: boolean;
+	isSaturday: boolean;
+	isSunday: boolean;
+};
+
+export const dayKeys: DayString[] = [
+	"monday",
+	"tuesday",
+	"wednesday",
+	"thursday",
+	"friday",
+	"saturday",
+	"sunday",
+];
+
+export const isDayMap = {
+	monday: "isMonday",
+	tuesday: "isTuesday",
+	wednesday: "isWednesday",
+	thursday: "isThursday",
+	friday: "isFriday",
+	saturday: "isSaturday",
+	sunday: "isSunday",
+} as const;

package/src/hooks/use-breadcrumbs.ts

@@ -1,45 +1,45 @@
-import { Crumb } from "../components/breadcrumbs/breadcrumbs";
+import { Crumb } from "../components/breadcrumbs";
 
 const baseUrl = "/e4integrate";
 
 const lookup: { [key: string]: Crumb } = {
-  dashboard: {
-    name: "Dashboard",
-    url: `${baseUrl}/dashboard`,
-  },
-  executions: {
-    name: "Executions",
-    url: `${baseUrl}/executions`,
-  },
-  integrations: {
-    name: "Integrations",
-    url: `${baseUrl}/integrations`,
-  },
-  scheduler: {
-    name: "Schedules",
-    url: `${baseUrl}/scheduler`,
-  },
+	dashboard: {
+		name: "Dashboard",
+		url: `${baseUrl}/dashboard`,
+	},
+	executions: {
+		name: "Executions",
+		url: `${baseUrl}/executions`,
+	},
+	integrations: {
+		name: "Integrations",
+		url: `${baseUrl}/integrations`,
+	},
+	scheduler: {
+		name: "Schedules",
+		url: `${baseUrl}/scheduler`,
+	},
 };
 
 // hook that generates breadcrumbs based on url & name of integration if applicable
 const useBreadcrumbs = (url: string, integrationName?: string) => {
-  // Dashboard crumb is always the root (breadcrumbs not shown on Dashboard page itself)
-  const breadcrumbs: Crumb[] = [lookup.dashboard];
+	// Dashboard crumb is always the root (breadcrumbs not shown on Dashboard page itself)
+	const breadcrumbs: Crumb[] = [lookup.dashboard];
 
-  const splitUrl = url.split("/").splice(4);
-  const path = splitUrl[0];
-  if (!lookup[path])
-    throw new Error(`Breadcrumb entry does not exist for path ${path}`);
-  if (path !== "dashboard") {
-    breadcrumbs.push(lookup[path]);
-  }
+	const splitUrl = url.split("/").splice(4);
+	const path = splitUrl[0];
+	if (!lookup[path])
+		throw new Error(`Breadcrumb entry does not exist for path ${path}`);
+	if (path !== "dashboard") {
+		breadcrumbs.push(lookup[path]);
+	}
 
-  if (integrationName) {
-    breadcrumbs.push({ name: integrationName, url: "" });
-  }
-  delete breadcrumbs.at(-1).url;
+	if (integrationName) {
+		breadcrumbs.push({ name: integrationName, url: "" });
+	}
+	delete breadcrumbs.at(-1).url;
 
-  return breadcrumbs;
+	return breadcrumbs;
 };
 
 export default useBreadcrumbs;

package/src/hooks/use-recurrence.tsx

@@ -0,0 +1,13 @@
+export default function useRecurrence(
+	interval: number,
+	intervalUnitId: string,
+) {
+	if (interval <= 0 || (intervalUnitId !== "1" && intervalUnitId !== "2")) {
+		return "N/A";
+	}
+
+	const unitString = intervalUnitId === "1" ? "Minute" : "Hour";
+	let result: string =
+		"Every " + interval + " " + unitString + (interval === 1 ? "" : "s");
+	return result;
+}

package/src/hooks/use-timestamp.tsx

@@ -1,25 +1,25 @@
 export default function useTimestamp(dateTime: string) {
-  const then = new Date(dateTime);
-  const diffTime = Date.now() - then.getTime();
-  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+	const then = new Date(dateTime);
+	const diffTime = Date.now() - then.getTime();
+	const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
 
-  let result: string;
-  if (diffDays === 0) {
-    const diffMin = Math.floor(diffTime / (1000 * 60));
-    if (diffMin === 0) {
-      result = "Now";
-    } else if (diffMin >= 60) {
-      result = Math.floor(diffTime / (1000 * 60 * 60)) + "h ago";
-    } else {
-      result = diffMin + "m ago";
-    }
-  } else {
-    if (diffDays === 1) {
-      result = "Yesterday";
-    } else {
-      result = diffDays + " days ago";
-    }
-  }
+	let result: string;
+	if (diffDays === 0) {
+		const diffMin = Math.floor(diffTime / (1000 * 60));
+		if (diffMin === 0) {
+			result = "Now";
+		} else if (diffMin >= 60) {
+			result = Math.floor(diffTime / (1000 * 60 * 60)) + "h ago";
+		} else {
+			result = diffMin + "m ago";
+		}
+	} else {
+		if (diffDays === 1) {
+			result = "Yesterday";
+		} else {
+			result = diffDays + " days ago";
+		}
+	}
 
-  return result;
+	return result;
 }

package/src/pages/dashboard/dashboard-link-cards.tsx

@@ -5,118 +5,118 @@ import { useTranslations } from "next-intl";
 import { Theme, useTheme } from "@mui/material";
 import { Box, Grid2 as Grid } from "@mui/material";
 import {
-  RocketLaunchOutlined,
-  IntegrationInstructionsOutlined,
-  PlaylistPlayOutlined,
-  AccessTimeOutlined,
+	RocketLaunchOutlined,
+	IntegrationInstructionsOutlined,
+	PlaylistPlayOutlined,
+	AccessTimeOutlined,
 } from "@mui/icons-material";
 
 // Custom components
 import LinkCard from "@evenicanpm/admin-integrate/components/link-cards";
 
 const breakpoints = {
-  xs: 6,
-  md: 3,
+	xs: 6,
+	md: 3,
 };
 
 export default function DashboardLinkCards() {
-  const t = useTranslations("Integrate.Dashboard.LinkCard");
+	const t = useTranslations("Integrate.Dashboard.LinkCard");
 
-  const theme = useTheme();
-  const styles = getStyles(theme);
+	const theme = useTheme();
+	const styles = getStyles(theme);
 
-  const linkcardProps = {
-    quickstart: {
-      title: t("quickstart"),
-      description: t("quickstartDescription"),
-      url: "/e4integrate",
-      children: (
-        <Box
-          sx={{
-            ...styles.iconSquare,
-            backgroundColor: "paste.600",
-          }}
-        >
-          <RocketLaunchOutlined sx={styles.icon} />
-        </Box>
-      ),
-    },
-    integrations: {
-      title: t("integrations"),
-      description: t("integrationsDescription"),
-      url: "/e4integrate/integrations",
-      children: (
-        <Box
-          sx={{
-            ...styles.iconSquare,
-            backgroundColor: "orange.400",
-          }}
-        >
-          <IntegrationInstructionsOutlined sx={styles.icon} />
-        </Box>
-      ),
-    },
-    scheduler: {
-      title: t("scheduler"),
-      description: t("schedulerDescription"),
-      url: "/e4integrate/scheduler",
-      children: (
-        <Box
-          sx={{
-            ...styles.iconSquare,
-            backgroundColor: "marron.600",
-          }}
-        >
-          <AccessTimeOutlined sx={styles.icon} />
-        </Box>
-      ),
-    },
-    executions: {
-      title: t("executions"),
-      description: t("executionsDescription"),
-      url: "/e4integrate/executions",
-      children: (
-        <Box
-          sx={{
-            ...styles.iconSquare,
-            backgroundColor: "info.500",
-          }}
-        >
-          <PlaylistPlayOutlined sx={styles.icon} />
-        </Box>
-      ),
-    },
-  };
+	const linkcardProps = {
+		quickstart: {
+			title: t("quickstart"),
+			description: t("quickstartDescription"),
+			url: "/e4integrate",
+			children: (
+				<Box
+					sx={{
+						...styles.iconSquare,
+						backgroundColor: "paste.600",
+					}}
+				>
+					<RocketLaunchOutlined sx={styles.icon} />
+				</Box>
+			),
+		},
+		integrations: {
+			title: t("integrations"),
+			description: t("integrationsDescription"),
+			url: "/e4integrate/integrations",
+			children: (
+				<Box
+					sx={{
+						...styles.iconSquare,
+						backgroundColor: "orange.400",
+					}}
+				>
+					<IntegrationInstructionsOutlined sx={styles.icon} />
+				</Box>
+			),
+		},
+		scheduler: {
+			title: t("scheduler"),
+			description: t("schedulerDescription"),
+			url: "/e4integrate/scheduler",
+			children: (
+				<Box
+					sx={{
+						...styles.iconSquare,
+						backgroundColor: "marron.600",
+					}}
+				>
+					<AccessTimeOutlined sx={styles.icon} />
+				</Box>
+			),
+		},
+		executions: {
+			title: t("executions"),
+			description: t("executionsDescription"),
+			url: "/e4integrate/executions",
+			children: (
+				<Box
+					sx={{
+						...styles.iconSquare,
+						backgroundColor: "info.500",
+					}}
+				>
+					<PlaylistPlayOutlined sx={styles.icon} />
+				</Box>
+			),
+		},
+	};
 
-  return (
-    <Grid container spacing={4}>
-      <Grid size={breakpoints}>
-        <LinkCard {...linkcardProps.quickstart} />
-      </Grid>
-      <Grid size={breakpoints}>
-        <LinkCard {...linkcardProps.integrations} />
-      </Grid>
-      <Grid size={breakpoints}>
-        <LinkCard {...linkcardProps.executions} />
-      </Grid>
-      <Grid size={breakpoints}>
-        <LinkCard {...linkcardProps.scheduler} />
-      </Grid>
-    </Grid>
-  );
+	return (
+		<Grid container spacing={4}>
+			<Grid size={breakpoints}>
+				<LinkCard {...linkcardProps.quickstart} />
+			</Grid>
+			<Grid size={breakpoints}>
+				<LinkCard {...linkcardProps.integrations} />
+			</Grid>
+			<Grid size={breakpoints}>
+				<LinkCard {...linkcardProps.executions} />
+			</Grid>
+			<Grid size={breakpoints}>
+				<LinkCard {...linkcardProps.scheduler} />
+			</Grid>
+		</Grid>
+	);
 }
 
 const getStyles = (theme: Theme) => {
-  return {
-    iconSquare: {
-      padding: theme.spacing(1),
-      paddingBottom: theme.spacing(0.5),
-      marginBottom: theme.spacing(1),
-      color: "grey.200",
-      borderRadius: 1,
-    },
-    icon: {
-      fontSize: "h4.fontSize",
-    },
-  };
+	return {
+		iconSquare: {
+			padding: theme.spacing(1),
+			paddingBottom: theme.spacing(0.5),
+			marginBottom: theme.spacing(1),
+			color: "grey.200",
+			borderRadius: 1,
+		},
+		icon: {
+			fontSize: "h4.fontSize",
+		},
+	};
 };