@evenicanpm/admin-integrate 1.2.2 → 1.3.0

package/src/pages/integrations/integration-list/integration-list-row.tsx

@@ -1,147 +0,0 @@
-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";
-import { SxProps } from "@mui/material";
-
-// Custom components
-import {
-	StyledTableCell,
-	StyledTableRow,
-	StyledIconButton,
-} from "@evenicanpm/admin-integrate/components/data-table/table-row";
-import {
-	IntegrationTag,
-	IntegrationStatusIcon,
-} from "@evenicanpm/admin-integrate/components/integration-list";
-
-// Hooks
-import useTimestamp from "@evenicanpm/admin-integrate/hooks/use-timestamp";
-
-// Types
-import { executionItem } from "./integration-list";
-import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
-import { TableCellProps } from "@mui/material";
-
-interface Props {
-	item: executionItem;
-	heading: Head[]; // for alignment
-	sx?: SxProps;
-}
-
-const IntegrationListRow: React.FC<Props> = (props: Props) => {
-	const theme = useTheme();
-	const styles = getStyles(theme);
-
-	// e.g. "xx days ago"
-	const time = useTimestamp(props.item.modified);
-	const localTime = new Date(props.item.modified).toString();
-
-	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 = () => {
-		redirect(
-			`/e4integrate/integration/${props.item.id}?IntegrationId=${props.item.id}`,
-			RedirectType.push,
-		);
-	};
-
-	return (
-		<StyledTableRow sx={props.sx}>
-			<StyledTableCell
-				align={props.heading[0].align as TableCellProps["align"]}
-				width={props.heading[0].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>
-			<StyledTableCell
-				align={props.heading[1].align as TableCellProps["align"]}
-				width={props.heading[1].width}
-			>
-				<Typography>{props.item.id}</Typography>
-			</StyledTableCell>
-			<StyledTableCell
-				align={props.heading[1].align as TableCellProps["align"]}
-				width={props.heading[1].width}
-			>
-				<IntegrationTag
-					process={{
-						isScheduled: props.item.isScheduled,
-						isTriggered: props.item.isTriggered,
-					}}
-				/>
-			</StyledTableCell>
-			<StyledTableCell
-				align={props.heading[2].align as TableCellProps["align"]}
-				width={props.heading[2].width}
-				sx={styles.timeCell}
-			>
-				<Typography
-					onMouseEnter={handlePopoverOpen}
-					onMouseLeave={handlePopoverClose}
-				>
-					{time}
-				</Typography>
-				<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>{localTime}</Typography>
-					</Box>
-				</Popover>
-			</StyledTableCell>
-			<StyledTableCell
-				align={props.heading[3].align as TableCellProps["align"]}
-				width={props.heading[3].width}
-			>
-				<StyledIconButton onClick={handleRedirect}>
-					<RemoveRedEye />
-				</StyledIconButton>
-			</StyledTableCell>
-		</StyledTableRow>
-	);
-};
-
-const getStyles = (theme: Theme) => {
-	return {
-		timeCell: {
-			cursor: "default",
-		},
-		popover: {
-			padding: theme.spacing(1),
-		},
-	};
-};
-
-export default IntegrationListRow;

package/src/pages/integrations/integration-list/integration-list-table.tsx

@@ -1,78 +0,0 @@
-import React from "react";
-
-// Types
-import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
-import { Item } from "./integration-list";
-
-// API
-import { ProcessExecutionInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-
-// MUI
-import { Theme, useTheme } from "@mui/material";
-import { TableContainer, Table, TableBody } from "@mui/material";
-import { SxProps } from "@mui/material";
-
-// Custom components
-import { TableHeader } from "@evenicanpm/admin-integrate/components/data-table";
-
-// Local components
-import IntegrationListRow from "./integration-list-row";
-
-interface Props {
-	heading: Head[];
-	items: Item[];
-	input: ProcessExecutionInput;
-	setInput: (newInput: ProcessExecutionInput) => void;
-	rowSx?: SxProps;
-}
-
-export default function IntegrationListTable(props: Props) {
-	const theme = useTheme();
-	const styles = getStyles(theme);
-
-	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, index) => (
-							<IntegrationListRow
-								key={index}
-								item={item}
-								heading={props.heading}
-								sx={props.rowSx}
-							/>
-						))}
-					</TableBody>
-				</Table>
-			</TableContainer>
-		</>
-	);
-}
-
-const getStyles = (theme: Theme) => {
-	return {};
-};

package/src/pages/scheduler/schedule-drawer/schedule-details-integrations.tsx

@@ -1,227 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { useTranslations } from "next-intl";
-
-// Dnd
-import {
-	DndContext,
-	closestCenter,
-	KeyboardSensor,
-	PointerSensor,
-	useSensor,
-	useSensors,
-	DragEndEvent,
-} from "@dnd-kit/core";
-import {
-	arrayMove,
-	SortableContext,
-	sortableKeyboardCoordinates,
-	verticalListSortingStrategy,
-} from "@dnd-kit/sortable";
-import { restrictToFirstScrollableAncestor } from "@dnd-kit/modifiers";
-
-// Api
-import {
-	GetProcessScheduleGroupDetailsQuery,
-	ProcessScheduleGroupDetailsUpdate,
-	GetProcessScheduleByIdQuery,
-} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-
-// MUI
-import { Theme, useTheme } from "@mui/material";
-import {
-	Box,
-	Typography,
-	Stack,
-	TableContainer,
-	Table,
-	TableBody,
-	Button,
-} from "@mui/material";
-import { Add } from "@mui/icons-material";
-
-// Custom components
-import { TableHeader } from "@evenicanpm/admin-integrate/components/data-table";
-import { EditedTypography } from "@evenicanpm/admin-integrate/components/core";
-
-// Local components
-import SortableIntegrationRow from "./sortable-integration-row";
-
-// Types
-import { Edited } from "./edited";
-import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
-
-export type Process = {
-	id: string;
-	sort: number;
-	name: string;
-	processIcon: string;
-};
-
-interface Props {
-	data: GetProcessScheduleGroupDetailsQuery | GetProcessScheduleByIdQuery;
-	details: ProcessScheduleGroupDetailsUpdate;
-	setDetails: (newDetails: ProcessScheduleGroupDetailsUpdate) => void;
-	edited: Edited;
-	setEdited: (newEdited: Edited) => void;
-	readOnly?: boolean;
-}
-
-export default function ScheduleDetailsIntegrations(props: Props) {
-	const t = useTranslations("Integrate.Scheduler");
-
-	const theme = useTheme();
-	const styles = getStyles(theme);
-
-	const [items, setItems] = useState<Process[]>([]);
-
-	const sensors = useSensors(
-		useSensor(PointerSensor),
-		useSensor(KeyboardSensor, {
-			coordinateGetter: sortableKeyboardCoordinates,
-		}),
-	);
-
-	useEffect(() => {
-		if (props.data) {
-			if ("processScheduleGroupDetails" in props.data) {
-				setItems(
-					(props.data.processScheduleGroupDetails?.processSchedule
-						?.processes as Process[]) || [],
-				);
-			} else if ("processScheduleById" in props.data) {
-				setItems([props.data.processScheduleById?.process as Process]);
-			}
-		}
-	}, [props.data]);
-
-	function handleDragEnd(event: DragEndEvent) {
-		const { active, over } = event;
-
-		if (over && active.id !== over.id) {
-			setItems((items) => {
-				const oldIndex = items.findIndex((process) => process.id === active.id);
-				const newIndex = items.findIndex((process) => process.id === over.id);
-
-				return arrayMove(items, oldIndex, newIndex);
-			});
-
-			props.setDetails({
-				...props.details,
-				processes: items,
-			});
-			if (!props.edited.integrations) {
-				props.setEdited({
-					...props.edited,
-					integrations: true,
-				});
-			}
-		}
-	}
-
-	// @ts-ignore
-	const handleDeleteIntegration = (item: Process) => {
-		// TODO: delete integration
-	};
-
-	let heading: Head[] = [
-		{
-			id: "drag",
-			label: "",
-			align: "right",
-			width: "1%",
-		},
-		{
-			id: "name",
-			label: t("integration"),
-			align: "left",
-			width: "92%",
-		},
-		{
-			id: "actions",
-			label: t("ListHeader.actions"),
-			align: "right",
-			width: "7%",
-		},
-	];
-
-	return (
-		<Box sx={styles.main}>
-			{items.length > 0 ? (
-				<>
-					<Box display="flex" justifyContent="space-between">
-						<Stack direction="row" spacing={1} alignItems="center">
-							<Typography variant="body1">
-								{t("scheduledIntegrations")}
-							</Typography>
-							<EditedTypography edited={props.edited.integrations} />
-						</Stack>
-						{!props.readOnly && (
-							<Button
-								color="info"
-								variant="contained"
-								sx={{ fontSize: theme.typography.caption.fontSize }}
-								startIcon={<Add />}
-							>
-								Add
-							</Button>
-						)}
-					</Box>
-					<Box sx={styles.list}>
-						<DndContext
-							sensors={sensors}
-							collisionDetection={closestCenter}
-							onDragEnd={handleDragEnd}
-							modifiers={[restrictToFirstScrollableAncestor]}
-						>
-							<SortableContext
-								items={items}
-								strategy={verticalListSortingStrategy}
-							>
-								<TableContainer>
-									<Table>
-										<TableHeader
-											heading={heading}
-											orderBy={"sort"}
-											order={"asc"}
-										/>
-										<TableBody>
-											{items.map((item) => (
-												<SortableIntegrationRow
-													key={item.id}
-													item={item}
-													heading={heading}
-													handleDeleteIntegration={handleDeleteIntegration}
-													readOnly={props.readOnly}
-												/>
-											))}
-										</TableBody>
-									</Table>
-								</TableContainer>
-							</SortableContext>
-						</DndContext>
-					</Box>
-				</>
-			) : (
-				<></>
-			)}
-		</Box>
-	);
-}
-
-const getStyles = (theme: Theme) => {
-	return {
-		main: {
-			padding: theme.spacing(2, 3),
-
-			maxHeight: "50vh",
-			overflow: "auto",
-		},
-		list: {
-			margin: theme.spacing(1, 0),
-			borderColor: theme.palette.grey[200],
-			borderWidth: theme.spacing(0.25),
-			borderStyle: "solid",
-			borderRadius: "1%",
-		},
-	};
-};

package/src/pages/scheduler/schedule-drawer/schedule-details-name.tsx

@@ -1,77 +0,0 @@
-import React from "react";
-
-// Api
-import { ProcessScheduleGroupDetailsUpdate } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-
-// MUI
-import { Theme, useTheme } from "@mui/material";
-import { Box, Stack } from "@mui/material";
-
-// Custom components
-import { ScheduleIcon } from "@evenicanpm/admin-integrate/components/scheduler";
-import {
-	TitleEdit,
-	EditedTypography,
-} from "@evenicanpm/admin-integrate/components/core";
-
-// Types
-import { Edited } from "./edited";
-
-interface Props {
-	details: ProcessScheduleGroupDetailsUpdate;
-	setDetails: (newDetails: ProcessScheduleGroupDetailsUpdate) => void;
-	edited: Edited;
-	setEdited: (newEdited: Edited) => void;
-	readOnly?: boolean;
-}
-
-export default function ScheduleDetailsName(props: Props) {
-	const theme = useTheme();
-	const styles = getStyles(theme);
-
-	const onConfirm = (input: string) => {
-		if (input !== props.details.name) {
-			props.setDetails({
-				...props.details,
-				name: input,
-				code: input.replaceAll(" ", "_").toLowerCase(),
-			});
-			props.setEdited({
-				...props.edited,
-				name: true,
-			});
-		}
-	};
-
-	return (
-		<Box sx={styles.main}>
-			<Stack direction="row" spacing={1} sx={styles.stack}>
-				<Box display="flex" justifyContent="center" alignItems="center">
-					<ScheduleIcon
-						isDisabled={props.details.isDisabled || false}
-						isLegacy={props.readOnly || false}
-						enablePopover
-					/>
-				</Box>
-				<TitleEdit
-					title={props.details.name || ""}
-					onConfirm={onConfirm}
-					readOnly={props.readOnly}
-					fullWidth
-				/>
-			</Stack>
-			<EditedTypography edited={props.edited.name} />
-		</Box>
-	);
-}
-
-const getStyles = (theme: Theme) => {
-	return {
-		main: {
-			marginBottom: theme.spacing(2),
-		},
-		stack: {
-			minHeight: theme.spacing(7),
-		},
-	};
-};

package/src/pages/scheduler/schedule-drawer/schedule-drawer-buttons.tsx

@@ -1,72 +0,0 @@
-import { useTranslations } from "next-intl";
-
-// MUI
-import { Theme, useTheme } from "@mui/material";
-import { Box, IconButton, Button, Stack } from "@mui/material";
-import {
-	KeyboardDoubleArrowRightOutlined,
-	Clear,
-	Save,
-} from "@mui/icons-material";
-
-// Custom components
-import { OutlinedIconButton } from "@evenicanpm/admin-integrate/components/button";
-
-// Types
-import { Edited } from "./edited";
-
-interface Props {
-	handleClose: () => void;
-	handleSave: () => void;
-	edited: Edited;
-	readOnly?: boolean;
-}
-
-export default function ScheduleDrawerButtons(props: Props) {
-	const t = useTranslations("Integrate.Scheduler");
-
-	const theme = useTheme();
-	const styles = getStyles(theme);
-
-	const isEdited = Object.values(props.edited).some((value) => value);
-
-	return (
-		<Box sx={styles.buttons} display="flex" justifyContent="space-between">
-			<IconButton onClick={props.handleClose}>
-				<KeyboardDoubleArrowRightOutlined />
-			</IconButton>
-			<Stack spacing={1} direction="row">
-				{!props.readOnly && (
-					<Button
-						variant="contained"
-						color="info"
-						startIcon={<Save />}
-						onClick={props.handleSave}
-						disabled={!isEdited}
-					>
-						{t("save")}
-					</Button>
-				)}
-				<OutlinedIconButton onClick={props.handleClose} sx={styles.closeButton}>
-					<Clear />
-				</OutlinedIconButton>
-			</Stack>
-		</Box>
-	);
-}
-
-const getStyles = (theme: Theme) => {
-	return {
-		buttons: {
-			padding: theme.spacing(2),
-			backgroundColor: "grey.100",
-		},
-		closeButton: {
-			backgroundColor: "error.main",
-			"&:hover": {
-				backgroundColor: "error.500",
-			},
-			color: "white",
-		},
-	};
-};

package/src/pages/scheduler/schedule-drawer/schedule-drawer-group.tsx

@@ -1,103 +0,0 @@
-import { useEffect } from "react";
-
-// Api
-import {
-	GetProcessScheduleGroupDetailsQuery,
-	ProcessScheduleGroupDetailsUpdate,
-} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-import { getProcessScheduleGroupDetails } from "@evenicanpm/admin-integrate/api/scheduler/queries";
-
-// Mui
-import { Divider } from "@mui/material";
-
-// Local components
-import ScheduleDrawerButtons from "./schedule-drawer-buttons";
-import ScheduleDetails from "./schedule-details";
-import ScheduleDetailsIntegrations from "./schedule-details-integrations";
-import ScheduleDetailsSkeleton from "./schedule-details-skeleton";
-
-// Types
-import { DrawerOpen } from "../scheduler";
-import { Edited } from "./edited";
-
-interface Props {
-	drawerOpen: DrawerOpen;
-	details: ProcessScheduleGroupDetailsUpdate | null;
-	setDetails: (newDetails: ProcessScheduleGroupDetailsUpdate | null) => void;
-	edited: Edited;
-	setEdited: (newEdited: Edited) => void;
-	handleClose: () => void;
-}
-
-export default function ScheduleDrawerGroup(props: Props) {
-	const styles = getStyles();
-
-	const { data } = getProcessScheduleGroupDetails.useData({
-		id: props.drawerOpen.id,
-	});
-
-	useEffect(() => {
-		if (data) {
-			const typedData = data as GetProcessScheduleGroupDetailsQuery;
-			if (typedData.processScheduleGroupDetails) {
-				const fetchedDetails = typedData.processScheduleGroupDetails;
-				const processes = fetchedDetails.processSchedule?.processes || [];
-				const newDetails = {
-					...fetchedDetails,
-					processes:
-						processes.map((pr) => ({
-							id: pr?.id || "",
-							sort: pr?.sort || 0,
-						})) || [],
-				};
-				delete newDetails.processSchedule;
-
-				props.setDetails(newDetails as ProcessScheduleGroupDetailsUpdate);
-			} else {
-				props.setDetails(null);
-			}
-		}
-	}, [data]);
-
-	const handleSave = () => {};
-
-	return (
-		<>
-			<ScheduleDrawerButtons
-				handleClose={props.handleClose}
-				handleSave={handleSave}
-				edited={props.edited}
-			/>
-			<Divider sx={styles.divider} />
-			{props.details ? (
-				<>
-					<ScheduleDetails
-						id={props.drawerOpen.id}
-						details={props.details}
-						setDetails={props.setDetails}
-						edited={props.edited}
-						setEdited={props.setEdited}
-					/>
-					<Divider sx={styles.divider} />
-					<ScheduleDetailsIntegrations
-						data={data as GetProcessScheduleGroupDetailsQuery}
-						details={props.details}
-						setDetails={props.setDetails}
-						edited={props.edited}
-						setEdited={props.setEdited}
-					/>
-				</>
-			) : (
-				<ScheduleDetailsSkeleton />
-			)}
-		</>
-	);
-}
-
-const getStyles = () => {
-	return {
-		divider: {
-			borderColor: "grey.400",
-		},
-	};
-};