@evenicanpm/admin-integrate 1.2.2 → 1.3.0

package/src/pages/integration-details/integration-details.tsx

@@ -0,0 +1,221 @@
+import type {
+	ConfigExport,
+	GetProcessByIdQuery,
+	Process,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { getProcessById } from "@evenicanpm/admin-integrate/api/process/queries";
+import { buildProcessByIdQueryKey } from "@evenicanpm/admin-integrate/api/process/queries/get-process-by-id.query";
+import {
+	type Crumb,
+	IntegrateBreadcrumbs,
+} from "@evenicanpm/admin-integrate/components/breadcrumbs";
+import { Loading } from "@evenicanpm/admin-integrate/components/core";
+import { IntegrationDetailsHeader } from "@evenicanpm/admin-integrate/components/header";
+import IntegrationView from "@evenicanpm/admin-integrate/components/integration-view/integration-view";
+import type { DrawerOpen } from "@evenicanpm/admin-integrate/components/scheduler/schedule-drawer/schedule-drawer";
+import ScheduleDrawer from "@evenicanpm/admin-integrate/components/scheduler/schedule-drawer/schedule-drawer";
+import SaveIcon from "@mui/icons-material/Save";
+import { Box, Button, useTheme } from "@mui/material";
+import { useParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useEffect, useReducer, useState } from "react";
+import ImportDrawer from "./import-process/import-drawer";
+import {
+	ImportActionType,
+	importReducer,
+} from "./import-process/import-process-reducer";
+import TaskDrawer from "./task-drawer/task-drawer";
+import {
+	type EditAction,
+	TaskActionType,
+	TaskMode,
+	taskReducer,
+} from "./task-drawer/task-reducer";
+
+export default function IntegrationDetails() {
+	const t = useTranslations("Integrate");
+	const params = useParams<{ processId: string }>();
+	const theme = useTheme();
+
+	const [breadcrumbs, setBreadcrumbs] = useState<Crumb[]>([
+		{
+			name: t("Header.dashboard"),
+			url: "/e4integrate",
+		},
+		{
+			name: t("Header.integrations"),
+			url: "/e4integrate/integrations",
+		},
+	]);
+
+	const [taskState, dispatchTaskState] = useReducer(taskReducer, {
+		open: false,
+		mode: TaskMode.NONE,
+		step: null,
+	});
+
+	const [importState, dispatchImportState] = useReducer(importReducer, {
+		open: false,
+		step: null,
+		alert: null,
+		loading: false,
+	});
+
+	// TODO: initialize config w/ result of configurationExport query. Local edits done on this state.
+	const [config, setConfig] = useState<ConfigExport | null>(null);
+	console.log("config", config); // TODO: remove when config export implemented.
+
+	const handleUpdateConfig = (newConfig: ConfigExport) => {
+		// TODO: update config state with newConfig from configMerge
+
+		// when config export is implemented, change functionality to instead update the config state, rather than replace it
+		// this is so we can do things like change a single task's name, because doing an overwrite will replace the new name
+		// since config merge will generate names for the tasks automatically.
+		// also don't want to do things like overwrite parallel processing group, sort, Process name, etc.
+		setConfig(newConfig);
+	};
+
+	const { data, isLoading } = getProcessById.useData(
+		{
+			id: params.processId,
+		},
+		{
+			queryKey: buildProcessByIdQueryKey.byInput({ id: params.processId }),
+			refetchOnWindowFocus: false, // prevents refetching while user is in process of editing the integration
+		},
+	);
+	const details = data as GetProcessByIdQuery | undefined;
+
+	useEffect(() => {
+		const typedData = details as GetProcessByIdQuery;
+		if (typedData?.processById) {
+			if (breadcrumbs.length === 2) {
+				const newCrumbs: Crumb[] = JSON.parse(JSON.stringify(breadcrumbs));
+				newCrumbs.push({ name: typedData.processById.name as string });
+				setBreadcrumbs(newCrumbs);
+			}
+		}
+	}, [details]);
+
+	const [drawerOpen, setDrawerOpen] = useState<DrawerOpen | null>(null);
+	const [scheduleLoading, setScheduleLoading] = useState<boolean>(false);
+
+	const handleScheduleDrawerOpen = () => {
+		if (details?.processById) {
+			if (details.processById.processScheduleGroup) {
+				setDrawerOpen({
+					id: details.processById.processScheduleGroup.id,
+					group: true,
+					addMode: false,
+				});
+			} else {
+				setDrawerOpen({
+					id: "",
+					group: true,
+					addMode: true,
+				});
+			}
+		}
+	};
+
+	const [viewRefreshKey, setViewRefreshKey] = useState<number>(Date.now());
+	useEffect(() => {
+		const typedData = data as GetProcessByIdQuery;
+		if (typedData?.processById) {
+			setViewRefreshKey(Date.now());
+		}
+	}, [data]);
+
+	if (isLoading) {
+		return (
+			<Box sx={{ padding: theme.spacing(10, 3) }}>
+				<Loading />
+			</Box>
+		);
+	}
+
+	return (
+		<Box>
+			<IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
+			<IntegrationDetailsHeader
+				name={details?.processById?.name || "Untitled Integration"}
+				icon={details?.processById?.processIcon ?? ""}
+				setName={() => {}}
+				onImportClick={() =>
+					dispatchImportState({ type: ImportActionType.OPEN })
+				}
+				onScheduleClick={handleScheduleDrawerOpen}
+			>
+				<Button
+					variant="contained"
+					color="info"
+					startIcon={<SaveIcon />}
+					sx={{ padding: theme.spacing(1.3, 2) }}
+				>
+					{t("IntegrationDetails.save")}
+				</Button>
+			</IntegrationDetailsHeader>
+
+			<Box
+				sx={{
+					display: "flex",
+					height: "80vh",
+					width: "100%",
+					overflow: "hidden",
+					backgroundColor: theme.palette.background.default,
+					border: `1px solid ${theme.palette.grey[400]}`,
+					alignItems: scheduleLoading || importState.loading ? "center" : null,
+					justifyContent:
+						scheduleLoading || importState.loading ? "center" : null,
+				}}
+			>
+				<IntegrationView
+					key={viewRefreshKey}
+					data={(data as GetProcessByIdQuery)?.processById as Process}
+					variant="process"
+					onTaskClick={(id: string) =>
+						dispatchTaskState({
+							type: TaskActionType.OPEN_EDIT,
+							processTaskId: id,
+						} as EditAction)
+					}
+					drawerOpen={taskState.open}
+					processTaskId={
+						taskState.processTaskId ? taskState.processTaskId : undefined
+					}
+				/>
+				<TaskDrawer
+					open={taskState.open}
+					onClose={() => dispatchTaskState({ type: TaskActionType.CLOSE })}
+					anchor="right"
+					taskState={taskState}
+					dispatch={dispatchTaskState}
+					handleUpdateConfig={handleUpdateConfig}
+				/>
+			</Box>
+			<ScheduleDrawer
+				drawerOpen={drawerOpen}
+				setDrawerOpen={setDrawerOpen}
+				processData={data as GetProcessByIdQuery}
+				handleSave={(loading: boolean) => setScheduleLoading(loading)}
+			/>
+
+			<ImportDrawer
+				open={importState.open}
+				onClose={() => dispatchImportState({ type: ImportActionType.CLOSE })}
+				anchor="right"
+				importState={importState}
+				dispatch={dispatchImportState}
+			/>
+			{/* temporary ui below */}
+			<Button
+				variant="contained"
+				color="primary"
+				onClick={() => dispatchTaskState({ type: TaskActionType.OPEN_ADD })}
+				// sx={{ visibility: "hidden" }}
+			>
+				Add task
+			</Button>
+		</Box>
+	);
+}

package/src/pages/integration-details/task-drawer/add-task.tsx

@@ -0,0 +1,120 @@
+import type {
+	FilterQueryInput,
+	GetProcessTemplatesQuery,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { getProcessTemplates } from "@evenicanpm/admin-integrate/api/templates/queries";
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import { Wizard } from "@evenicanpm/admin-integrate/components/templates";
+import TemplatesList from "@evenicanpm/admin-integrate/components/templates/templates-list";
+import type { ProcessConfigMerge } from "@evenicanpm/admin-integrate/components/templates/types";
+import { Box, Typography, useTheme } from "@mui/material";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import {
+	type TaskAction,
+	TaskActionType,
+	type TaskState,
+} from "./task-reducer";
+
+interface Props {
+	taskState: TaskState;
+	dispatch: React.Dispatch<TaskAction>;
+}
+
+// steps:
+//  - 0: choose template from list
+//  - 1: wizard (finish --> update flowchart view with added task, close drawer)
+export default function AddTask(props: Props) {
+	const t = useTranslations("Integrate");
+	const theme = useTheme();
+
+	const heading: Head[] = [
+		{
+			id: "name",
+			label: t("Templates.ListHeader.name"),
+			align: "left",
+			width: "95%",
+			sortable: true,
+		},
+		{
+			id: "view",
+			label: t("Templates.ListHeader.actions"),
+			align: "right",
+			width: "5%",
+		},
+	];
+
+	const [processConfigMerge, setProcessConfigMerge] =
+		useState<ProcessConfigMerge | null>(null);
+	const [processTemplateId, setProcessTemplateId] = useState<string | null>(
+		null,
+	);
+
+	const [input, setInput] = useState<FilterQueryInput>({
+		sort: "name",
+		sortDesc: false,
+		top: 10,
+		skip: 0,
+	});
+
+	const { data, isLoading } = getProcessTemplates.useData({
+		input: input,
+	});
+
+	const handleNext = () => {
+		const action: TaskAction = { type: TaskActionType.INCREMENT_STEP };
+		props.dispatch(action);
+	};
+	const handleBack = () => {
+		const action: TaskAction = { type: TaskActionType.DECREMENT_STEP };
+		props.dispatch(action);
+	};
+
+	const handleRedirect = (id: string) => {
+		setProcessTemplateId(id);
+		handleNext();
+	};
+
+	return (
+		<>
+			{props.taskState.step === 0 && (
+				<Box sx={{ marginBottom: theme.spacing(3) }}>
+					<Typography variant="h6">
+						{t("IntegrationDetails.AddTask.title")}
+					</Typography>
+					<Typography variant="body1">
+						{t("IntegrationDetails.AddTask.descList")}
+					</Typography>
+				</Box>
+			)}
+			{props.taskState.step === 0 && (
+				<TemplatesList
+					heading={heading}
+					data={data as GetProcessTemplatesQuery}
+					loading={isLoading}
+					input={input}
+					setInput={setInput}
+					handleRedirect={handleRedirect}
+				/>
+			)}
+			{props.taskState.step === 1 && processTemplateId && (
+				<Wizard
+					// todo: should be set to metadata returned from api query for integration details
+					metadata={{
+						name: "",
+						code: "",
+						parallelProcessingGroup: 1,
+						sort: 1,
+					}}
+					setProcessConfigMerge={setProcessConfigMerge}
+					processTemplateId={processTemplateId}
+					handleBack={handleBack}
+					handleFinish={handleNext}
+				/>
+			)}
+			{props.taskState.step === 2 && (
+				<Typography>{JSON.stringify(processConfigMerge)}</Typography>
+			)}
+		</>
+	);
+}

package/src/pages/integration-details/task-drawer/edit-task.tsx

@@ -0,0 +1,175 @@
+import type {
+	ConfigExport,
+	ConfigurationMergeMutation,
+	ConfigurationMergeMutationVariables,
+	GetProcessTaskByIdQuery,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { processConfigMerge } from "@evenicanpm/admin-integrate/api/process-config/mutation";
+import { getProcessTaskById } from "@evenicanpm/admin-integrate/api/process-task/queries";
+import {
+	Loading,
+	TitleEdit,
+} from "@evenicanpm/admin-integrate/components/core";
+import { Wizard } from "@evenicanpm/admin-integrate/components/templates";
+import type {
+	Metadata,
+	ProcessConfigMerge,
+} from "@evenicanpm/admin-integrate/components/templates/types";
+import { removeTemplateConfig } from "@evenicanpm/admin-integrate/components/templates/wizard";
+import ReportProblemIcon from "@mui/icons-material/ReportProblem";
+import { Box, Stack, Typography, useTheme } from "@mui/material";
+import { useEffect, useState } from "react";
+import {
+	type TaskAction,
+	TaskActionType,
+	type TaskState,
+} from "./task-reducer";
+
+interface Props {
+	taskState: TaskState;
+	dispatch: React.Dispatch<TaskAction>;
+	handleUpdateConfig: (newConfig: ConfigExport) => void;
+	editable?: boolean;
+}
+
+export default function EditTask(props: Props) {
+	const theme = useTheme();
+
+	const processConfigMergeMutation = processConfigMerge();
+
+	const [processConfigMergeInput, setProcessConfigMergeInput] =
+		useState<ProcessConfigMerge | null>(null);
+
+	const handleFinish = () => {
+		const action: TaskAction = { type: TaskActionType.INCREMENT_STEP };
+		props.dispatch(action);
+	};
+	const handleBack = () => {
+		const action: TaskAction = { type: TaskActionType.DECREMENT_STEP };
+		props.dispatch(action);
+	};
+
+	const { data, isLoading } = getProcessTaskById.useData({
+		id: props.taskState.processTaskId as string,
+	});
+
+	const [metadata, setMetadata] = useState<Metadata | null>(null);
+	const [name, setName] = useState<string>("");
+	const [sharedCount, setSharedCount] = useState<number>();
+
+	useEffect(() => {
+		const typedData = data as GetProcessTaskByIdQuery;
+
+		if (typedData?.processTaskById) {
+			setMetadata({
+				name: "", // name/code of parent Process is not relevant when editing a single task.
+				code: "",
+				parallelProcessingGroup: typedData.processTaskById
+					.parallelProcessingGroup as number,
+				sort: typedData.processTaskById.sort as number,
+			});
+
+			setName(typedData?.processTaskById?.name as string);
+		}
+	}, [data]);
+
+	const handleNameEdit = (input: string) => {
+		setName(input);
+
+		// TODO: on name change confirm, update main config state in details pg w/ updated name/code for this task
+		// props.handleUpdateConfig(...)
+	};
+
+	useEffect(() => {
+		if (processConfigMergeInput) {
+			const input =
+				removeTemplateConfig(processConfigMergeInput?.input) ||
+				({} as ConfigurationMergeMutationVariables);
+			processConfigMergeMutation.mutate(
+				{
+					input: input,
+				},
+				{
+					onSuccess: async (data: ConfigurationMergeMutation) => {
+						props.handleUpdateConfig(data?.configurationMerge as ConfigExport);
+					},
+					onError: (error) => {
+						console.error("Update failed:", error);
+					},
+				},
+			);
+		}
+	}, [processConfigMergeInput]);
+
+	if (isLoading) {
+		return (
+			<Box sx={{ padding: theme.spacing(10, 3) }}>
+				<Loading />
+			</Box>
+		);
+	}
+
+	const templateConfig = (data as GetProcessTaskByIdQuery)?.processTaskById
+		?.endpoint?.templateConfig;
+
+	return (
+		<>
+			{props.taskState.step === 0 && metadata && (
+				<Box sx={{ marginBottom: theme.spacing(1) }}>
+					<Stack
+						direction="row"
+						spacing={1}
+						sx={{ minHeight: theme.spacing(7) }}
+					>
+						<TitleEdit
+							title={name}
+							onConfirm={handleNameEdit}
+							fullWidth
+							variant="h6"
+							readOnly={!props.editable}
+						/>
+					</Stack>
+					{sharedCount !== undefined && sharedCount > 1 && props?.editable && (
+						<Typography
+							variant="body2"
+							color="error"
+							sx={{
+								display: "flex",
+								alignItems: "center",
+								gap: "5px",
+								fontSize: "12px",
+							}}
+						>
+							<ReportProblemIcon color="error" sx={{ fontSize: "18px" }} />{" "}
+							Changes to this integration tasks will affect other tasks sharing
+							the same <strong>Data Description</strong>
+						</Typography>
+					)}
+				</Box>
+			)}
+			{props.taskState.step === 0 &&
+				/*(data as GetProcessTaskByIdQuery).processTaskById?.endpoint
+					?.templateConfig &&*/
+				metadata && (
+					<Wizard
+						metadata={metadata as Metadata}
+						setProcessConfigMerge={setProcessConfigMergeInput}
+						handleBack={handleBack}
+						handleFinish={handleFinish}
+						templateConfig={templateConfig}
+						processTemplateId={
+							(data as GetProcessTaskByIdQuery).processTaskById?.endpoint
+								?.processTemplate?.id as string
+						}
+						isEditMode
+						disableBackToTemplates
+						readOnly={!props.editable}
+						sharedCount={(count: number) => setSharedCount(count)}
+					/>
+				)}
+			{props.taskState.step === 1 && (
+				<Typography>{JSON.stringify(processConfigMergeInput)}</Typography>
+			)}
+		</>
+	);
+}

package/src/pages/integration-details/task-drawer/task-drawer.tsx

@@ -0,0 +1,139 @@
+import type { ConfigExport } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { DrawerButtons } from "@evenicanpm/admin-integrate/components/core";
+import { EditOutlined } from "@mui/icons-material";
+import {
+	Box,
+	Button,
+	type DrawerProps,
+	Drawer as MuiDrawer,
+	type Theme,
+	useTheme,
+} from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { usePathname, useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import AddTask from "./add-task";
+import EditTask from "./edit-task";
+import {
+	type TaskAction,
+	TaskActionType,
+	TaskMode,
+	type TaskState,
+} from "./task-reducer";
+
+interface Props extends DrawerProps {
+	taskState: TaskState;
+	dispatch: React.Dispatch<TaskAction>;
+	handleUpdateConfig: (newConfig: ConfigExport) => void;
+}
+
+const Drawer = styled(MuiDrawer)({
+	position: "relative", //imp
+	//width: 625, //drawer width
+	"& .MuiDrawer-paper": {
+		width: 625, //drawer width
+		position: "absolute", //imp
+		transition: "none !important",
+	},
+});
+
+export default function TaskDrawer({
+	taskState,
+	dispatch,
+	handleUpdateConfig,
+	...props
+}: Props) {
+	const t = useTranslations("Integrate.IntegrationDetails.TaskDrawer");
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const router = useRouter();
+	const pathname = usePathname();
+
+	const [editable, setEditable] = useState<boolean>(false);
+	const [reloadKey, setReloadKey] = useState<number>(Date.now());
+
+	const confirmCancel = () => {
+		if (editable) {
+			return confirm(t("confirmTaskUpdateText"));
+		}
+		return true;
+	};
+
+	const handleClose = () => {
+		if (!confirmCancel()) return;
+
+		const action: TaskAction = { type: TaskActionType.CLOSE };
+		dispatch(action);
+		setEditable(false);
+	};
+
+	const handleEdit = () => {
+		if (!confirmCancel()) return;
+
+		if (editable) setReloadKey(Date.now());
+		setEditable(!editable);
+	};
+
+	useEffect(() => {
+		if (taskState.step === null || taskState.step === 0) {
+			router.replace(pathname);
+		}
+	}, [taskState.step]);
+
+	return (
+		<Drawer
+			{...props}
+			variant="persistent"
+			sx={{ padding: theme.spacing(2), width: taskState.open ? 525 : 0 }}
+		>
+			<DrawerButtons handleClose={handleClose}>
+				{taskState.mode === TaskMode.EDIT && (
+					<Button
+						variant={editable ? "outlined" : "contained"}
+						color={editable ? "error" : "info"}
+						onClick={handleEdit}
+						endIcon={<EditOutlined />}
+					>
+						{editable ? t("cancel") : t("edit")}
+					</Button>
+				)}
+			</DrawerButtons>
+			<Box sx={styles.main}>
+				{taskState.mode === TaskMode.ADD && (
+					<AddTask taskState={taskState} dispatch={dispatch} />
+				)}
+				{taskState.mode === TaskMode.EDIT && (
+					<EditTask
+						key={reloadKey}
+						taskState={taskState}
+						dispatch={dispatch}
+						editable={editable}
+						handleUpdateConfig={handleUpdateConfig}
+					/>
+				)}
+			</Box>
+		</Drawer>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		main: {
+			//width: 600,
+			padding: theme.spacing(2),
+		},
+		drawer: {
+			//width: 600,
+		},
+		enableEdit: {
+			backgroundColor: "info.main",
+			"&:hover": {
+				backgroundColor: "info.400",
+			},
+			color: "white",
+		},
+	};
+};