@evenicanpm/admin-integrate 1.2.2 → 1.4.0

package/src/components/core/drawer-buttons.tsx

@@ -0,0 +1,52 @@
+import { OutlinedIconButton } from "@evenicanpm/admin-integrate/components/button";
+import { Clear } from "@mui/icons-material";
+import { Box, Divider, Stack, type Theme, useTheme } from "@mui/material";
+
+interface Props {
+	handleClose: () => void;
+	children?: React.ReactNode; // e.g. add button, save button, etc.
+}
+
+export default function DrawerButtons(props: Readonly<Props>) {
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	return (
+		<>
+			<Box sx={styles.buttons} display="flex" justifyContent="flex-end">
+				{/* <IconButton onClick={props.handleClose}>
+					<KeyboardDoubleArrowRightOutlined />
+				</IconButton> */}
+				<Stack spacing={1} direction="row">
+					{props.children}
+					<OutlinedIconButton
+						onClick={props.handleClose}
+						sx={styles.closeButton}
+					>
+						<Clear />
+					</OutlinedIconButton>
+				</Stack>
+			</Box>
+			<Divider sx={styles.divider} />
+		</>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		buttons: {
+			padding: theme.spacing(2),
+			backgroundColor: "grey.100",
+		},
+		closeButton: {
+			backgroundColor: "error.main",
+			"&:hover": {
+				backgroundColor: "error.500",
+			},
+			color: "white",
+		},
+		divider: {
+			borderColor: "grey.400",
+		},
+	};
+};

package/src/components/core/edited-typography.tsx

@@ -1,11 +1,11 @@
-import { useTranslations } from "next-intl";
 import { Typography } from "@mui/material";
+import { useTranslations } from "next-intl";
 
 interface Props {
 	edited: boolean;
 }
 
-export default function EditedTypography(props: Props) {
+export default function EditedTypography(props: Readonly<Props>) {
 	const t = useTranslations("Integrate.Scheduler");
 
 	return (

package/src/components/core/index.ts

@@ -1,4 +1,6 @@
-export { default as Loading } from "./loading";
 export { default as DateTimePopover } from "./date-time-popover";
-export { default as TitleEdit } from "./title-edit";
+export { default as DrawerButtons } from "./drawer-buttons";
 export { default as EditedTypography } from "./edited-typography";
+export { default as Loading } from "./loading";
+export { default as StatusTag } from "./status-tag";
+export { default as TitleEdit } from "./title-edit";

package/src/components/core/loading.tsx

@@ -1,6 +1,6 @@
-import CircularProgress from "@mui/material/CircularProgress";
 import FlexRowCenter from "@evenicanpm/admin-core/components/flex-box/flex-row-center";
 import { useTheme } from "@mui/material";
+import CircularProgress from "@mui/material/CircularProgress";
 
 const Loading = () => {
 	const theme = useTheme();

package/src/components/core/status-tag.tsx

@@ -0,0 +1,97 @@
+import { Box, type SxProps, Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
+
+// Styled components
+const StyledTagBox = styled(Box)(({ theme }) => ({
+	padding: theme.spacing(0, 1.5),
+	border: "solid 1px",
+	borderRadius: 4,
+	alignContent: "center",
+	maxWidth: "fit-content",
+	maxHeight: "fit-content",
+}));
+const StyledTag = styled(Typography)(() => ({
+	fontWeight: "bold",
+}));
+
+type Status = "info" | "success" | "warning" | "error" | "unavailable";
+
+interface Props {
+	type: Status;
+	text: string;
+	sx?: SxProps;
+}
+
+export default function StatusTag(props: Props) {
+	const statusTagMap: { [key in Status]: React.ReactNode } = {
+		info: (
+			<StyledTagBox
+				sx={{
+					backgroundColor: "info.100",
+					borderColor: "info.main",
+					...props.sx,
+				}}
+			>
+				<StyledTag color="info" variant="caption">
+					{props.text}
+				</StyledTag>
+			</StyledTagBox>
+		),
+		success: (
+			<StyledTagBox
+				sx={{
+					backgroundColor: "success.100",
+					borderColor: "success.main",
+					...props.sx,
+				}}
+			>
+				<StyledTag color="success" variant="caption">
+					{props.text}
+				</StyledTag>
+			</StyledTagBox>
+		),
+		warning: (
+			<StyledTagBox
+				sx={{
+					backgroundColor: "warning.100",
+					borderColor: "orange.700",
+					color: "orange.700",
+					...props.sx,
+				}}
+			>
+				<StyledTag color="inherit" variant="caption">
+					{props.text}
+				</StyledTag>
+			</StyledTagBox>
+		),
+		error: (
+			<StyledTagBox
+				sx={{
+					backgroundColor: "error.100",
+					borderColor: "error.main",
+					...props.sx,
+				}}
+			>
+				<StyledTag color="error" variant="caption">
+					{props.text}
+				</StyledTag>
+			</StyledTagBox>
+		),
+		unavailable: (
+			<StyledTagBox
+				sx={{
+					backgroundColor: "grey.300",
+					borderColor: "grey.700",
+					color: "grey.700",
+					...props.sx,
+				}}
+			>
+				<StyledTag color="inherit" variant="caption">
+					{props.text}
+				</StyledTag>
+			</StyledTagBox>
+		),
+	};
+
+	return statusTagMap[props.type] || statusTagMap["unavailable" as Status];
+}

package/src/components/core/title-edit.tsx

@@ -1,17 +1,16 @@
-import { useState } from "react";
-
-import { Theme, useTheme } from "@mui/material";
+import { OutlinedIconButton } from "@evenicanpm/admin-integrate/components/button";
+import { Check, Clear, EditOutlined } from "@mui/icons-material";
 import {
 	Box,
+	IconButton,
 	Stack,
-	Typography,
 	TextField,
-	IconButton,
-	TypographyOwnProps,
+	type Theme,
+	Typography,
+	type TypographyOwnProps,
+	useTheme,
 } from "@mui/material";
-import { EditOutlined, Clear, Check } from "@mui/icons-material";
-
-import { OutlinedIconButton } from "@evenicanpm/admin-integrate/components/button";
+import { useEffect, useState } from "react";
 
 interface Props {
 	title: string;
@@ -21,7 +20,7 @@ interface Props {
 	variant?: TypographyOwnProps["variant"];
 }
 
-export default function TitleEdit(props: Props) {
+export default function TitleEdit(props: Readonly<Props>) {
 	const theme = useTheme();
 	const styles = getStyles(theme);
 
@@ -42,7 +41,11 @@ export default function TitleEdit(props: Props) {
 	};
 
 	const handleConfirm = () => {
-		props.onConfirm(input);
+		// NOSONAR - regex replacement requires replace, not replaceAll
+		// replaceAll - Doesn’t properly handle \s+ logic - Misleading Sonar suggestion
+		const trimmed = input.trim().replace(/\s+/g, " ");
+		props.onConfirm(trimmed);
+		setInput(trimmed);
 		setEditMode(false);
 	};
 
@@ -52,6 +55,12 @@ export default function TitleEdit(props: Props) {
 		}
 	};
 
+	useEffect(() => {
+		if (props.readOnly) {
+			handleClose();
+		}
+	}, [props.readOnly]);
+
 	return (
 		<>
 			<Box
@@ -63,11 +72,7 @@ export default function TitleEdit(props: Props) {
 				justifyContent="flex-start"
 				alignItems="center"
 			>
-				{!editMode ? (
-					<Typography sx={styles.name} variant={props.variant || "h6"}>
-						{props.title}
-					</Typography>
-				) : (
+				{editMode ? (
 					<TextField
 						sx={styles.input}
 						fullWidth={props.fullWidth}
@@ -77,15 +82,15 @@ export default function TitleEdit(props: Props) {
 						onChange={handleChange}
 						onKeyDown={handleKeyDown}
 					/>
+				) : (
+					<Typography sx={styles.name} variant={props.variant || "h6"}>
+						{props.title}
+					</Typography>
 				)}
 			</Box>
 			{!props.readOnly && (
 				<Box display="flex" justifyContent="flex-end" alignItems="center">
-					{!editMode ? (
-						<IconButton onClick={handleClickEdit}>
-							<EditOutlined />
-						</IconButton>
-					) : (
+					{editMode ? (
 						<Stack direction="row" spacing={1}>
 							<OutlinedIconButton color="error" onClick={handleClose}>
 								<Clear />
@@ -93,11 +98,15 @@ export default function TitleEdit(props: Props) {
 							<OutlinedIconButton
 								color="success"
 								onClick={handleConfirm}
-								disabled={input === ""}
+								disabled={!/(.|\s)*\S(.|\s)*/.test(input)}
 							>
 								<Check />
 							</OutlinedIconButton>
 						</Stack>
+					) : (
+						<IconButton onClick={handleClickEdit}>
+							<EditOutlined />
+						</IconButton>
 					)}
 				</Box>
 			)}

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

@@ -1,26 +1,26 @@
-import React, { useState } from "react";
-import { redirect, RedirectType } from "next/navigation";
-
-// MUI
-import { Theme, useTheme } from "@mui/material";
-import { Box, Stack, Typography, Popover } from "@mui/material";
-import { RemoveRedEye } from "@mui/icons-material";
-
-// Custom components
+import { DateTimePopover } from "@evenicanpm/admin-integrate/components/core";
 import {
+	StyledIconButton,
 	StyledTableCell,
 	StyledTableRow,
-	StyledIconButton,
 } from "@evenicanpm/admin-integrate/components/data-table/table-row";
 import { ExecutionStatusIcon } from "@evenicanpm/admin-integrate/components/execution";
-
-// Hooks
-import useTimestamp from "@evenicanpm/admin-integrate/hooks/use-timestamp";
-
-// Types
-import { Item } from "./dashboard-list";
-import { Head } from "../data-table/table-header";
-import { TableCellProps, SxProps } from "@mui/material";
+import { toDistanceDate } from "@evenicanpm/admin-integrate/utils/date-functions";
+import { 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 { Head } from "../data-table/table-header";
+import type { Item } from "./dashboard-list";
 
 interface Props {
 	item: Item;
@@ -33,10 +33,6 @@ const DashboardListRow: React.FC<Props> = (props: Props) => {
 	const theme = useTheme();
 	const styles = getStyles(theme);
 
-	// e.g. "xx days ago"
-	const time = useTimestamp(props.item.startDate);
-	const localTime = new Date(props.item.startDate).toString();
-
 	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 	const open = Boolean(anchorEl);
 
@@ -96,9 +92,10 @@ const DashboardListRow: React.FC<Props> = (props: Props) => {
 					onMouseEnter={handlePopoverOpen}
 					onMouseLeave={handlePopoverClose}
 				>
-					{time}
+					{toDistanceDate(props.item.startDate)}
 				</Typography>
-				<Popover
+				<DateTimePopover
+					dateIsoString={props.item.startDate}
 					sx={{ pointerEvents: "none" }}
 					open={open}
 					anchorEl={anchorEl}
@@ -112,11 +109,7 @@ const DashboardListRow: React.FC<Props> = (props: Props) => {
 					}}
 					onClose={handlePopoverClose}
 					disableRestoreFocus
-				>
-					<Box sx={styles.popover}>
-						<Typography>{localTime}</Typography>
-					</Box>
-				</Popover>
+				/>
 			</StyledTableCell>
 			<StyledTableCell
 				align={props.heading[2].align as TableCellProps["align"]}

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

@@ -1,23 +1,27 @@
-import React, { useState, useEffect } from "react";
-import { useTranslations } from "next-intl";
-
 // API
-import { GetProcessExecutionsQuery } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-
-// MUI
-import { Card, Table, TableContainer, TableBody, Box } from "@mui/material";
-import { Theme, useTheme } from "@mui/material";
-
+import type { GetProcessExecutionsQuery } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 // Custom components
 import { FlexBox } from "@evenicanpm/admin-core/components/flex-box";
-
+// MUI
+import {
+	Box,
+	Card,
+	Stack,
+	Table,
+	TableBody,
+	TableContainer,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useEffect, useState } from "react";
 import { TableHeader, TableSkeleton } from "../data-table";
-import DashboardListRow from "./dashboard-list-row";
-import { DashboardListHeader } from "../header/";
-
 // Types
-import { Head } from "../data-table/table-header";
-import { Typography, Stack } from "@mui/material";
+import type { Head } from "../data-table/table-header";
+import { DashboardListHeader } from "../header/";
+import DashboardListRow from "./dashboard-list-row";
 
 // Returned from processExecutions query
 export interface Item {
@@ -91,7 +95,7 @@ const DashboardList: React.FC<Props> = (props: Props) => {
 						<TableBody>
 							{items.map((item, index) => (
 								<DashboardListRow
-									key={index}
+									key={`list-row-${index + 1}`}
 									item={item}
 									heading={props.heading}
 									enableBgColor={props.enableBgColor}

package/src/components/data-table/table-header.tsx

@@ -1,12 +1,10 @@
-import TableRow from "@mui/material/TableRow";
+import { ExpandLess, ExpandMore } from "@mui/icons-material";
+import { type SxProps, type Theme, useTheme } from "@mui/material";
+import styled from "@mui/material/styles/styled";
+import TableCell, { type TableCellProps } from "@mui/material/TableCell";
 import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
 import TableSortLabel from "@mui/material/TableSortLabel";
-import TableCell, { TableCellProps } from "@mui/material/TableCell";
-import styled from "@mui/material/styles/styled";
-
-import { SxProps } from "@mui/material";
-import { Theme, useTheme } from "@mui/material";
-import { ExpandLess, ExpandMore } from "@mui/icons-material";
 
 // STYLED COMPONENTS
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
@@ -38,7 +36,7 @@ export default function TableHeader({
 	orderBy,
 	onRequestSort,
 	rowSx,
-}: Props) {
+}: Readonly<Props>) {
 	const theme = useTheme();
 	const styles = getStyles(theme);
 

package/src/components/data-table/table-pagination.tsx

@@ -1,4 +1,4 @@
-import Pagination, { PaginationProps } from "@mui/material/Pagination";
+import Pagination, { type PaginationProps } from "@mui/material/Pagination";
 import styled from "@mui/material/styles/styled";
 
 // STYLED COMPONENT

package/src/components/data-table/table-row.tsx

@@ -1,5 +1,5 @@
+import { IconButton, TableCell, TableRow } from "@mui/material";
 import styled from "@mui/material/styles/styled";
-import { TableRow, TableCell, IconButton } from "@mui/material";
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
 	fontSize: 14,

package/src/components/data-table/table-skeleton.tsx

@@ -1,8 +1,13 @@
-import { TableContainer, Table, TableBody, Skeleton } from "@mui/material";
-import { SxProps } from "@mui/material";
+import {
+	Skeleton,
+	type SxProps,
+	Table,
+	TableBody,
+	TableContainer,
+} from "@mui/material";
 
-import TableHeader, { Head } from "./table-header";
-import { StyledTableRow, StyledTableCell } from "./table-row";
+import TableHeader, { type Head } from "./table-header";
+import { StyledTableCell, StyledTableRow } from "./table-row";
 
 interface Props {
 	heading: Head[];
@@ -11,7 +16,7 @@ interface Props {
 	rowSx?: SxProps;
 }
 
-export default function TableSkeleton(props: Props) {
+export default function TableSkeleton(props: Readonly<Props>) {
 	const rangeArray: number[] = Array.from(
 		{ length: props.perPage },
 		(_, i) => i,

package/src/components/execution/execution-filter.ts

@@ -1,4 +1,4 @@
-import {
+import type {
 	DateRangeFilter,
 	Filters,
 	MultiSelectFilter,

package/src/components/execution/execution-status-icon.tsx

@@ -1,21 +1,21 @@
-import React from "react";
-
-import { SxProps } from "@mui/material";
 import {
-	Loop,
 	CheckCircleOutline,
-	WarningAmber,
-	ErrorOutline,
 	Clear,
+	ErrorOutline,
+	Loop,
+	WarningAmber,
 } from "@mui/icons-material";
 
+import type { SxProps } from "@mui/material";
+import type React from "react";
+
 interface Props {
 	executionStatusId: string;
 	sx?: SxProps;
 }
 
 const ExecutionStatusIcon: React.FC<Props> = (props: Props) => {
-	const statusIconMap: { [key: string]: any } = {
+	const statusIconMap: { [key: string]: React.ReactNode } = {
 		"300": <Loop color="info" />,
 		"400": <CheckCircleOutline color="success" />,
 		"450": <WarningAmber color="warning" />,

package/src/components/execution/execution-tag.tsx

@@ -1,22 +1,7 @@
-import React from "react";
+import { StatusTag } from "@evenicanpm/admin-integrate/components/core";
+import type { SxProps } from "@mui/material";
 import { useTranslations } from "next-intl";
 
-import { styled } from "@mui/material/styles";
-import { Box, Typography, SxProps } from "@mui/material";
-
-// Styled components
-const StyledTagBox = styled(Box)(({ theme }) => ({
-	padding: theme.spacing(0, 1.5),
-	border: "solid 1px",
-	borderRadius: 4,
-	alignContent: "center",
-	maxWidth: "fit-content",
-	maxHeight: "fit-content",
-}));
-const StyledTag = styled(Typography)(() => ({
-	fontWeight: "bold",
-}));
-
 interface Props {
 	executionStatusId: string;
 	sx?: SxProps;
@@ -25,73 +10,23 @@ interface Props {
 const ExecutionTag: React.FC<Props> = (props: Props) => {
 	const t = useTranslations("Integrate");
 
-	const statusTagMap: { [key: string]: any } = {
+	const statusTagMap: { [key: string]: React.ReactNode } = {
 		300: (
-			<StyledTagBox
-				sx={{
-					backgroundColor: "info.100",
-					borderColor: "info.main",
-					...props.sx,
-				}}
-			>
-				<StyledTag color="info" variant="caption">
-					{t("Executions.inProgress")}
-				</StyledTag>
-			</StyledTagBox>
+			<StatusTag type="info" text={t("Executions.inProgress")} sx={props.sx} />
 		),
 		400: (
-			<StyledTagBox
-				sx={{
-					backgroundColor: "success.100",
-					borderColor: "success.main",
-					...props.sx,
-				}}
-			>
-				<StyledTag color="success" variant="caption">
-					{t("Executions.complete")}
-				</StyledTag>
-			</StyledTagBox>
+			<StatusTag type="success" text={t("Executions.complete")} sx={props.sx} />
 		),
 		450: (
-			<StyledTagBox
-				sx={{
-					backgroundColor: "warning.100",
-					borderColor: "orange.700",
-					color: "orange.700",
-					...props.sx,
-				}}
-			>
-				<StyledTag color="inherit" variant="caption">
-					{t("Executions.warning")}
-				</StyledTag>
-			</StyledTagBox>
-		),
-		500: (
-			<StyledTagBox
-				sx={{
-					backgroundColor: "error.100",
-					borderColor: "error.main",
-					...props.sx,
-				}}
-			>
-				<StyledTag color="error" variant="caption">
-					{t("Executions.failed")}
-				</StyledTag>
-			</StyledTagBox>
+			<StatusTag type="warning" text={t("Executions.warning")} sx={props.sx} />
 		),
+		500: <StatusTag type="error" text={t("Executions.failed")} sx={props.sx} />,
 		999: (
-			<StyledTagBox
-				sx={{
-					backgroundColor: "grey.300",
-					borderColor: "grey.600",
-					color: "grey.600",
-					...props.sx,
-				}}
-			>
-				<StyledTag color="inherit" variant="caption">
-					{t("Executions.unavailable")}
-				</StyledTag>
-			</StyledTagBox>
+			<StatusTag
+				type="unavailable"
+				text={t("Executions.unavailable")}
+				sx={props.sx}
+			/>
 		),
 	};
 

package/src/components/execution/index.ts

@@ -1,2 +1,2 @@
-export { default as ExecutionTag } from "./execution-tag";
 export { default as ExecutionStatusIcon } from "./execution-status-icon";
+export { default as ExecutionTag } from "./execution-tag";