@evenicanpm/admin-integrate 1.2.2 → 1.4.0

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

@@ -0,0 +1,149 @@
+import type {
+	GetProcessByIdWithTasksQuery,
+	GetProcessesQuery,
+	ProcessInput,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { getProcesses } from "@evenicanpm/admin-integrate/api/Integrations/queries";
+import { getProcessByIdWithTasks } from "@evenicanpm/admin-integrate/api/process/queries";
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import { IntegrationList } from "@evenicanpm/admin-integrate/components/integration-list";
+import { Alert, Box, type Theme, Typography, useTheme } from "@mui/material";
+import { useParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import ImportConfirm from "./import-confirm";
+import {
+	type AlertAction,
+	type ImportAction,
+	ImportActionType,
+	type ImportState,
+	type SelectProcessAction,
+} from "./import-process-reducer";
+
+interface Props {
+	importState: ImportState;
+	dispatch: React.Dispatch<ImportAction>;
+}
+
+export default function ImportProcess(props: Readonly<Props>) {
+	const t = useTranslations("Integrate.IntegrationDetails.ImportProcess");
+	const l = useTranslations("Integrate.IntegrationList.ListHeader");
+
+	const params = useParams<{ processId: string }>();
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const heading: Head[] = [
+		{
+			id: "name",
+			label: l("integrationName"),
+			align: "left",
+			width: "30%",
+			sortable: true,
+		},
+		{
+			id: "id",
+			label: l("id"),
+			align: "left",
+			width: "15%",
+		},
+		{
+			id: "view",
+			label: l("actions"),
+			align: "center",
+			width: "5%",
+		},
+	];
+
+	// TODO: initialize input based on url query params
+	const [input, setInput] = useState<ProcessInput>({
+		skip: 0,
+		sort: "name",
+		sortDesc: false,
+		top: 10,
+		integrationTags: null,
+		search: null,
+	});
+
+	const { data: processes, isLoading: processesLoading } = getProcesses.useData(
+		{
+			input: input,
+		},
+	);
+
+	const { data: current } = getProcessByIdWithTasks.useData({
+		id: params.processId,
+	});
+
+	useEffect(() => {
+		const typedData = current as GetProcessByIdWithTasksQuery;
+		if (typedData?.processById?.processTasks) {
+			if (typedData.processById.processTasks.length > 0) {
+				props.dispatch({
+					type: ImportActionType.ALERT,
+					alert: t("Alert.notEmpty"),
+				} as AlertAction);
+			}
+		}
+	}, [current]);
+
+	const handleRedirect = (id: string) => {
+		props.dispatch({
+			type: ImportActionType.SELECT,
+			selectedId: id,
+		} as SelectProcessAction);
+	};
+
+	return (
+		<Box sx={styles.main}>
+			<Box>
+				<Typography variant="h6">{t("title")}</Typography>
+				{props.importState.step === 0 && (
+					<Typography variant="caption" color="grey">
+						{t("descList")}
+					</Typography>
+				)}
+				{props.importState.step === 1 && (
+					<Typography variant="caption" color="grey">
+						{t("descTasks")}
+					</Typography>
+				)}
+			</Box>
+			{props.importState.alert && (
+				<Alert sx={styles.alert} severity="error">
+					{props.importState.alert}
+				</Alert>
+			)}
+			{props.importState.step === 0 && (
+				<IntegrationList
+					heading={heading}
+					data={processes as GetProcessesQuery}
+					loading={processesLoading}
+					input={input}
+					setInput={setInput}
+					handleRedirect={handleRedirect}
+					isImportMode
+					readOnly={!!props.importState.alert}
+				/>
+			)}
+			{props.importState.step === 1 && (
+				<ImportConfirm
+					importState={props.importState}
+					dispatch={props.dispatch}
+				/>
+			)}
+		</Box>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		main: {
+			padding: theme.spacing(2),
+		},
+		alert: {
+			marginTop: theme.spacing(2),
+		},
+	};
+};

package/src/pages/integration-details/index.ts

@@ -0,0 +1 @@
+export { default } from "./integration-details";

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

@@ -0,0 +1,468 @@
+import type {
+	ConfigExport,
+	ConfigImport,
+	ConfigurationExportQuery,
+	GetProcessByIdQuery,
+} 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 CancelIcon from "@mui/icons-material/Cancel";
+import SaveIcon from "@mui/icons-material/Save";
+import { Box, Button, CircularProgress, useTheme } from "@mui/material";
+import { useParams, useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useEffect, useReducer, useState } from "react";
+import { configurationExport } from "../../api/configuration/queries";
+import { buildConfigurationExportQueryKey } from "../../api/configuration/queries/configuration-export.query";
+import { processConfigImport } from "../../api/process-config/mutation";
+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";
+
+function mergeByKey(
+	keyFields: string | string[],
+	arr1: any[] = [],
+	arr2: any[] = [],
+) {
+	const keys = Array.isArray(keyFields) ? keyFields : [keyFields];
+
+	// Build lookup maps for each key -> value => baseItem (from arr1)
+	const lookupByKey: Record<string, Map<any, any>> = {};
+	for (const k of keys) {
+		lookupByKey[k] = new Map();
+	}
+
+	for (const item of arr1) {
+		for (const key of keys) {
+			const val = item?.[key];
+			if (val !== undefined && val !== null) {
+				lookupByKey[key].set(val, item);
+			}
+		}
+	}
+
+	// Use a Set to preserve insertion order and ensure uniqueness
+	const resultSet = new Set<any>(arr1);
+
+	for (const item of arr2) {
+		let matchedBase: any = null;
+
+		// Try keys in order of priority
+		for (const key of keys) {
+			const val = item?.[key];
+			if (val !== undefined && val !== null) {
+				const candidate = lookupByKey[key].get(val);
+				if (candidate) {
+					matchedBase = candidate;
+					break;
+				}
+			}
+		}
+
+		if (matchedBase) {
+			// Merge properties from item into matched base (respecting exclusions)
+			for (const prop of Object.keys(item)) {
+				if (prop !== "Sort" && prop !== "ParallelProcessingGroup") {
+					matchedBase[prop] = item[prop];
+				}
+			}
+		} else {
+			// No match found by any tiered key -> add as new
+			resultSet.add(item);
+			// Register the newly added item in lookups so subsequent arr2 items can match it
+			for (const key of keys) {
+				const val = item?.[key];
+				if (val !== undefined && val !== null) {
+					lookupByKey[key].set(val, item);
+				}
+			}
+		}
+	}
+
+	return Array.from(resultSet);
+}
+
+export default function IntegrationDetails() {
+	const t = useTranslations("Integrate");
+	const params = useParams<{ processId: string }>();
+	const theme = useTheme();
+	const router = useRouter();
+
+	const [config, setConfig] = useState<ConfigExport | null>(null);
+
+	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,
+	});
+
+	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 {
+		data: configFromApi,
+		isLoading: configLoading,
+		refetch,
+	} = configurationExport.useData(
+		{
+			processId: params.processId,
+			includeIds: true,
+			useSourceEndpoint: true,
+		},
+		{
+			queryKey: buildConfigurationExportQueryKey.byInput({
+				processId: params.processId,
+				includeIds: true,
+				useSourceEndpoint: true,
+			}),
+			refetchOnWindowFocus: false, // prevents refetching while user is in process of editing the integration
+		},
+	);
+
+	const handleUpdateConfig = (newConfig: ConfigExport) => {
+		dispatchTaskState({
+			type: TaskActionType.CLOSE,
+		});
+		// 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 configData: ConfigExport =
+			config ?? (configFromApi as any)?.configurationExport;
+
+		configData.DepotGroups = mergeByKey(
+			"DepotGroup",
+			configData.DepotGroups || [],
+			newConfig.DepotGroups || [],
+		);
+
+		configData.Depots = mergeByKey(
+			"Depot",
+			configData.Depots || [],
+			newConfig.Depots || [],
+		);
+
+		configData.Endpoints = mergeByKey(
+			"Endpoint",
+			configData.Endpoints || [],
+			newConfig.Endpoints || [],
+		);
+
+		configData.Entities = mergeByKey(
+			"Entity",
+			configData.Entities || [],
+			newConfig.Entities || [],
+		);
+
+		if (newConfig?.Processes?.[0])
+			newConfig.Processes[0].ProcessTasks =
+				newConfig?.Processes[0]?.ProcessTasks?.map((newTask) => {
+					if (newTask)
+						newTask.Name =
+							newTask?.Name || newTask?.ProcessTask?.replaceAll("_", " ");
+
+					return newTask;
+				});
+
+		if (configData?.Processes?.[0])
+			configData.Processes[0].ProcessTasks = mergeByKey(
+				["ProcessTaskId", "ProcessTask"],
+				configData.Processes?.[0]?.ProcessTasks || [],
+				newConfig.Processes?.[0]?.ProcessTasks || [],
+			);
+
+		setConfig(configData);
+	};
+
+	const processConfigImportMutation = processConfigImport();
+
+	const handleProcessConfigImport = () => {
+		if (config) {
+			processConfigImportMutation.mutate(
+				{
+					config: config as ConfigImport,
+					reRoutedFromMerge: true,
+				},
+				{
+					onSuccess: () => {
+						setConfig(null);
+					},
+					onError: (error) => {
+						console.error("Update failed:", error);
+					},
+				},
+			);
+		}
+	};
+
+	const details = data as GetProcessByIdQuery | undefined;
+
+	useEffect(() => {
+		const typedData = details as GetProcessByIdQuery;
+		if (typedData?.processById) {
+			if (breadcrumbs.length === 2) {
+				const newCrumbs: Crumb[] = structuredClone(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(() => {
+		setViewRefreshKey(Date.now());
+	}, [data, config]);
+
+	useEffect(() => {
+		if (!scheduleLoading) {
+			setViewRefreshKey(Date.now());
+		}
+	}, [scheduleLoading]);
+
+	const onAdd = (data: any) => {
+		dispatchTaskState({
+			type: TaskActionType.OPEN_ADD,
+			sort: data.sort,
+			parallelProcessingGroup: data.paralellelProcessingGroup,
+		} as EditAction);
+	};
+
+	useEffect(() => {
+		const handler = (e: CustomEvent) => onAdd(e.detail);
+
+		document.addEventListener("addItem", handler as EventListener);
+	}, []);
+
+	if (isLoading || configLoading) {
+		return (
+			<Box sx={{ padding: theme.spacing(10, 3) }}>
+				<Loading />
+			</Box>
+		);
+	}
+
+	return (
+		<Box>
+			<IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
+			<IntegrationDetailsHeader
+				name={
+					(config || (configFromApi as any)?.configurationExport)?.Processes[0]
+						?.Name || "Untitled Integration"
+				}
+				icon={details?.processById?.processIcon ?? ""}
+				setName={(name) => {
+					const configData =
+						config || (configFromApi as any)?.configurationExport;
+					configData.Processes[0].Name = name;
+					setConfig(configData);
+				}}
+				onImportClick={() => {
+					if (!config) {
+						dispatchImportState({ type: ImportActionType.OPEN });
+					}
+				}}
+				onScheduleClick={() => {
+					if (!config) {
+						handleScheduleDrawerOpen();
+					}
+				}}
+				onExecutionsClick={() =>
+					router.push(`/e4integrate/executions/${params.processId}`)
+				}
+			>
+				{config ? (
+					<Button
+						variant="contained"
+						color="error"
+						startIcon={<CancelIcon />}
+						sx={{ padding: theme.spacing(1.3, 2) }}
+						onClick={() => {
+							refetch().then(() => {
+								setConfig(null);
+							});
+						}}
+					>
+						Cancel
+					</Button>
+				) : null}
+				<Button
+					variant="contained"
+					color="info"
+					startIcon={<SaveIcon />}
+					sx={{ padding: theme.spacing(1.3, 2) }}
+					onClick={handleProcessConfigImport}
+					disabled={!config}
+				>
+					{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,
+				}}
+			>
+				{!scheduleLoading &&
+				!importState.loading &&
+				(config || configFromApi) ? (
+					<IntegrationView
+						canEdit
+						key={viewRefreshKey}
+						//data={(data as GetProcessByIdQuery)?.processById as Process}
+						config={
+							config ||
+							((configFromApi as ConfigurationExportQuery)
+								.configurationExport as ConfigExport)
+						}
+						variant="process"
+						onTaskClick={(processTask: any) => {
+							const endpoint = (
+								config ??
+								(configFromApi as ConfigurationExportQuery).configurationExport
+							)?.Endpoints?.find(
+								(ep) => !!ep && ep.Name === processTask.endpoint,
+							);
+
+							let templateConfig: any;
+
+							if (endpoint) {
+								if (typeof endpoint.TemplateConfig === "string") {
+									templateConfig = endpoint.TemplateConfig;
+								} else if (typeof endpoint.TemplateConfig === "object") {
+									templateConfig = JSON.stringify(endpoint.TemplateConfig);
+								}
+							}
+
+							dispatchTaskState({
+								type: TaskActionType.OPEN_EDIT,
+								processTaskId: processTask.id,
+								templateConfig: templateConfig,
+								sort: processTask.sort,
+								parallelProcessingGroup: processTask.parallelProcessingGroup,
+								processTemplateId: endpoint?.ProcessTemplateId,
+								name: processTask.name,
+							} as EditAction);
+						}}
+						drawerOpen={taskState.open}
+						processTaskId={
+							taskState.processTaskId ? taskState.processTaskId : undefined
+						}
+						onConfigChange={setConfig}
+						onAdd={() => {}}
+					/>
+				) : (
+					<CircularProgress />
+				)}
+				<TaskDrawer
+					open={taskState.open}
+					onClose={() => dispatchTaskState({ type: TaskActionType.CLOSE })}
+					anchor="right"
+					taskState={taskState}
+					renderKey={taskState.processTaskId}
+					dispatch={dispatchTaskState}
+					handleUpdateConfig={handleUpdateConfig}
+					config={config ?? (configFromApi as any)?.configurationExport}
+				/>
+			</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>
+	);
+}