@evenicanpm/admin-integrate 1.3.0 → 1.4.0

package/src/pages/integration-create/pre-creation-step.tsx

@@ -1,12 +1,84 @@
-//import type { ProcessConfigMerge } from "@evenicanpm/admin-integrate/components/templates/types";
-import { Box } from "@mui/material";
+import { Box, useTheme } from "@mui/material";
+import { useReducer } from "react";
+import type {
+	ConfigExport,
+	EndpointExport,
+} from "../../../../admin-core/src/api/e4/graphqlRequestSdk";
+import { IntegrationView } from "../../components/integration-view";
+import {
+	type EditAction,
+	TaskActionType,
+	TaskMode,
+	taskReducer,
+} from "../integration-details/task-drawer/task-reducer";
 
 interface Props {
 	processConfig: any | null;
 }
 
-export default function PreCreationStep(props: Props) {
+export default function PreCreationStep(props: Readonly<Props>) {
+	const theme = useTheme();
+
+	const [_taskState, dispatchTaskState] = useReducer(taskReducer, {
+		open: false,
+		mode: TaskMode.NONE,
+		step: null,
+	});
+
 	// TODO: render integration
-	console.log("processConfigMerge payload:", props.processConfig);
-	return <Box></Box>;
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				height: "80vh",
+				width: "100%",
+				overflow: "hidden",
+				backgroundColor: theme.palette.background.default,
+				border: `1px solid ${theme.palette.grey[400]}`,
+				alignItems: null,
+				justifyContent: null,
+			}}
+			className="integration-view-container"
+		>
+			<IntegrationView
+				canEdit={false}
+				//key={viewRefreshKey}
+				//data={(data as GetProcessByIdQuery)?.processById as Process}
+				config={props.processConfig as ConfigExport}
+				variant="process"
+				drawerOpen={false}
+				processTaskId={undefined}
+				onTaskClick={(processTask: any) => {
+					const endpoint = props.processConfig?.Endpoints.find(
+						(ep: EndpointExport) => ep.Name === processTask.endpoint,
+					);
+
+					let templateConfig: any;
+
+					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,
+					} as EditAction);
+				}}
+			/>
+			{/* <TaskDrawer
+											open={taskState.open}
+											onClose={() => dispatchTaskState({ type: TaskActionType.CLOSE })}
+											anchor="right"
+											taskState={taskState}
+											dispatch={dispatchTaskState}
+											//handleUpdateConfig={handleUpdateConfig}
+										/> */}
+		</Box>
+	);
 }

package/src/pages/integration-create/select-step.tsx

@@ -20,7 +20,7 @@ interface Props {
 	setStep: React.Dispatch<React.SetStateAction<number>>;
 }
 
-export default function SelectStep(props: Props) {
+export default function SelectStep(props: Readonly<Props>) {
 	const t = useTranslations("Integrate.Templates");
 
 	const theme = useTheme();

package/src/pages/integration-create/wizard-step.tsx

@@ -21,7 +21,7 @@ interface Props {
 	>;
 }
 
-export default function WizardStep(props: Props) {
+export default function WizardStep(props: Readonly<Props>) {
 	const router = useRouter();
 	const pathname = usePathname();
 	const searchParams = useSearchParams();
@@ -44,6 +44,7 @@ export default function WizardStep(props: Props) {
 				handleBack={handleBack}
 				handleFinish={handleFinish}
 				setProcessConfigMerge={props.setProcessConfigMerge}
+				isCreateMode
 			/>
 		</Box>
 	);

package/src/pages/integration-details/import-process/copy-tasks-list.tsx

@@ -42,7 +42,7 @@ interface Props {
 	dispatch: React.Dispatch<ImportAction>;
 }
 
-export default function CopyTasksList(props: Props) {
+export default function CopyTasksList(props: Readonly<Props>) {
 	const t = useTranslations("Integrate.IntegrationDetails.ImportProcess");
 
 	const params = useParams<{ processId: string }>();
@@ -74,7 +74,7 @@ export default function CopyTasksList(props: Props) {
 		null,
 	);
 	const anyChecked =
-		checked === null ? false : Object.values(checked).some((value) => value);
+		checked === null ? false : Object.values(checked).some(Boolean);
 	const disableConfirm =
 		props.loading || !!props.importState.alert || !anyChecked;
 

package/src/pages/integration-details/import-process/copy-tasks-row.tsx

@@ -22,7 +22,7 @@ interface Props {
 	sx?: SxProps;
 }
 
-export default function CopyTasksRow(props: Props) {
+export default function CopyTasksRow(props: Readonly<Props>) {
 	const headings = {
 		actions: props.heading.find((h) => h.id === "actions"),
 		name: props.heading.find((h) => h.id === "name"),

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

@@ -17,7 +17,7 @@ interface Props {
 	dispatch: React.Dispatch<ImportAction>;
 }
 
-export default function ImportConfirm(props: Props) {
+export default function ImportConfirm(props: Readonly<Props>) {
 	const t = useTranslations("Integrate.IntegrationDetails.ImportProcess");
 	const params = useParams<{ processId: string }>();
 

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

@@ -22,7 +22,7 @@ export default function ImportDrawer({
 	importState,
 	dispatch,
 	...props
-}: Props) {
+}: Readonly<Props>) {
 	const theme = useTheme();
 	const styles = getStyles(theme);
 

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

@@ -25,7 +25,7 @@ interface Props {
 	dispatch: React.Dispatch<ImportAction>;
 }
 
-export default function ImportProcess(props: Props) {
+export default function ImportProcess(props: Readonly<Props>) {
 	const t = useTranslations("Integrate.IntegrationDetails.ImportProcess");
 	const l = useTranslations("Integrate.IntegrationList.ListHeader");
 

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

@@ -1,7 +1,8 @@
 import type {
 	ConfigExport,
+	ConfigImport,
+	ConfigurationExportQuery,
 	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";
@@ -14,11 +15,15 @@ import { IntegrationDetailsHeader } from "@evenicanpm/admin-integrate/components
 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, useTheme } from "@mui/material";
-import { useParams } from "next/navigation";
+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,
@@ -32,10 +37,76 @@ import {
 	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[]>([
 		{
@@ -61,36 +132,123 @@ export default function IntegrationDetails() {
 		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 { 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);
+		//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 { 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));
+				const newCrumbs: Crumb[] = structuredClone(breadcrumbs);
 				newCrumbs.push({ name: typedData.processById.name as string });
 				setBreadcrumbs(newCrumbs);
 			}
@@ -120,13 +278,30 @@ export default function IntegrationDetails() {
 
 	const [viewRefreshKey, setViewRefreshKey] = useState<number>(Date.now());
 	useEffect(() => {
-		const typedData = data as GetProcessByIdQuery;
-		if (typedData?.processById) {
+		setViewRefreshKey(Date.now());
+	}, [data, config]);
+
+	useEffect(() => {
+		if (!scheduleLoading) {
 			setViewRefreshKey(Date.now());
 		}
-	}, [data]);
+	}, [scheduleLoading]);
 
-	if (isLoading) {
+	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 />
@@ -138,19 +313,53 @@ export default function IntegrationDetails() {
 		<Box>
 			<IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
 			<IntegrationDetailsHeader
-				name={details?.processById?.name || "Untitled Integration"}
+				name={
+					(config || (configFromApi as any)?.configurationExport)?.Processes[0]
+						?.Name || "Untitled Integration"
+				}
 				icon={details?.processById?.processIcon ?? ""}
-				setName={() => {}}
-				onImportClick={() =>
-					dispatchImportState({ type: ImportActionType.OPEN })
+				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}`)
 				}
-				onScheduleClick={handleScheduleDrawerOpen}
 			>
+				{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>
@@ -169,28 +378,66 @@ export default function IntegrationDetails() {
 						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
-					}
-				/>
+				{!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
@@ -208,14 +455,14 @@ export default function IntegrationDetails() {
 				dispatch={dispatchImportState}
 			/>
 			{/* temporary ui below */}
-			<Button
+			{/* <Button
 				variant="contained"
 				color="primary"
 				onClick={() => dispatchTaskState({ type: TaskActionType.OPEN_ADD })}
 				// sx={{ visibility: "hidden" }}
 			>
 				Add task
-			</Button>
+			</Button> */}
 		</Box>
 	);
 }