@evenicanpm/admin-integrate 1.3.0 → 1.4.0

package/src/components/templates/templates-list/templates-list-table.tsx

@@ -14,7 +14,7 @@ interface Props {
 	rowSx?: SxProps;
 }
 
-export default function TemplatesListTable(props: Props) {
+export default function TemplatesListTable(props: Readonly<Props>) {
 	const handleRequestSort = (property: string) => {
 		const current = props.input.sort;
 		if (property === current) {
@@ -44,7 +44,7 @@ export default function TemplatesListTable(props: Props) {
 				<TableBody>
 					{props.items.map((item, index) => (
 						<TemplatesListRow
-							key={index}
+							key={`list-row-${index + 1}`}
 							item={item}
 							heading={props.heading}
 							sx={props.rowSx}

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

@@ -47,7 +47,7 @@ interface Props {
 	isTemplateGroupsList?: boolean;
 }
 
-export default function TemplatesList(props: Props) {
+export default function TemplatesList(props: Readonly<Props>) {
 	const t = useTranslations("Integrate.Templates");
 
 	const theme = useTheme();

package/src/components/templates/types.tsx

@@ -49,6 +49,7 @@ export type Metadata = {
 	code: string;
 	parallelProcessingGroup: number;
 	sort: number;
+	processTaskId?: number;
 };
 
 export type FlatPage = ProcessTemplatePage & {

package/src/components/templates/wizard.tsx

@@ -18,7 +18,7 @@ import {
 	useTheme,
 } from "@mui/material";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-// import { useTranslations } from "next-intl"; //Need to figure out how to use this if if templates are data driven
+// useTranslations - Need to figure out how to use this if if templates are data driven
 import React, { useEffect, useState } from "react";
 import PageBody, { applyTemplateConfig } from "./inputs";
 import {
@@ -72,9 +72,9 @@ function buildProcessConfigMerge(
 		t.pages?.forEach((page) => {
 			page?.inputs?.forEach((input) => {
 				const key = templateFieldKey(t.id, input?.fieldName ?? ""); // e.g. "1::dataDescription"
-				if (!Object.hasOwn(values, key)) return;
 
 				// metadata override (no hardcoding)
+				// allow any metafields to be mapped
 				if (input?.fieldName && input.fieldName in metadata) {
 					obj[input.fieldName] = metadata[
 						input.fieldName as keyof Metadata
@@ -82,13 +82,24 @@ function buildProcessConfigMerge(
 					return;
 				}
 
-				const v = values[key];
+				if (!Object.hasOwn(values, key)) return;
+
+				let v = values[key];
+
 				if (
-					input &&
-					input.inputType === "input-table" &&
+					input?.inputType === "input-table" &&
 					Array.isArray(v) &&
 					input.schemas?.length
 				) {
+					v = v.map((row: any) =>
+						(row?.DataType || row?.FieldType) === "String"
+							? {
+									...row,
+									Length: 4000,
+								}
+							: row,
+					);
+
 					const isStr = (x: unknown): x is string => typeof x === "string";
 					const valueCol =
 						input.schemas.find((s) => s?.fieldKey === "{0}")?.fieldKey ?? null;
@@ -113,16 +124,19 @@ function buildProcessConfigMerge(
 						const collapsed = (v as Array<Record<string, FieldValue>>).reduce(
 							(acc, row) => {
 								const rawKey = (row as any)[keyColFinal];
-								const k =
-									typeof rawKey === "string"
-										? rawKey.trim()
-										: rawKey != null
-											? String(rawKey)
-											: "";
+
+								let k = "";
+								if (typeof rawKey === "string") {
+									k = rawKey.trim();
+								} else if (rawKey != null) {
+									k = String(rawKey);
+								}
+
 								if (!k) return acc;
 
 								const val = (row as any)[valueCol ?? ""];
 								if (val !== undefined) acc[k] = val as FieldValue;
+
 								return acc;
 							},
 							{} as Record<string, FieldValue>,
@@ -137,15 +151,21 @@ function buildProcessConfigMerge(
 					const collapsed = (v as Array<Record<string, FieldValue>>).reduce(
 						(acc, row) => {
 							const rawKey = (row as any)[keyCol]; // e.g., row["{Variable}"] === "ASD"
-							const k =
-								typeof rawKey === "string"
-									? rawKey.trim()
-									: rawKey != null
-										? String(rawKey)
-										: "";
+
+							let k = "";
+							if (typeof rawKey === "string") {
+								k = rawKey.trim();
+							} else if (rawKey !== null && rawKey !== undefined) {
+								k = String(rawKey);
+							}
+
 							if (!k) return acc;
 
-							const val = (row as any)[valueCol ?? ""]; // e.g., row["{0}"] === "1"
+							const val =
+								valueCol !== null && valueCol !== undefined
+									? (row as any)[valueCol]
+									: undefined; // e.g., row["{0}"] === "1"
+
 							if (val !== undefined) acc[k] = val as FieldValue;
 							return acc;
 						},
@@ -161,22 +181,6 @@ function buildProcessConfigMerge(
 				if (input?.fieldName) {
 					obj[input.fieldName] = v;
 				}
-
-				console.log(
-					"fieldName:",
-					input?.fieldName,
-					"Mapping key:",
-					key,
-					"with value:",
-					values[key],
-				);
-
-				//obj[input.fieldName] = values[key]; // map to pure fieldName
-
-				// obj[input.fieldName] =
-				// input.fieldName in metadata
-				//   ? (metadata as any)[input.fieldName]
-				//   : values[key];
 			});
 		});
 
@@ -206,7 +210,10 @@ export function removeTemplateConfig(input: any): any {
 	return input;
 }
 
-function Header({ title, subtitle }: { title: string; subtitle?: string }) {
+function Header({
+	title,
+	subtitle,
+}: Readonly<{ title: string; subtitle?: string }>) {
 	return (
 		<Box sx={{ mb: 2 }}>
 			<Typography variant="h6" sx={{ mb: 0.5 }}>
@@ -221,11 +228,11 @@ function TemplateNav({
 	templates,
 	activeIndex,
 	stylings,
-}: {
+}: Readonly<{
 	templates: ProcessTemplate[];
 	activeIndex: number;
 	stylings?: object;
-}) {
+}>) {
 	return (
 		<Stepper activeStep={activeIndex} sx={stylings}>
 			{templates.map((t) => (
@@ -242,12 +249,12 @@ function PageNav({
 	activeIndex,
 	stylings,
 	isEditMode,
-}: {
+}: Readonly<{
 	pages: ProcessTemplatePage[];
 	activeIndex: number;
 	stylings?: object;
 	isEditMode?: boolean;
-}) {
+}>) {
 	return (
 		<Stepper nonLinear={isEditMode} activeStep={activeIndex} sx={stylings}>
 			{pages.map((p) => (
@@ -271,11 +278,16 @@ interface Props {
 	templateConfig?: string | null;
 	disableBackToTemplates?: boolean;
 	isEditMode?: boolean;
+	isCreateMode?: boolean;
 	readOnly?: boolean;
 	sharedCount?: (count: number) => void;
 }
 
-export default function Wizard({ metadata, sharedCount, ...props }: Props) {
+export default function Wizard({
+	metadata,
+	sharedCount,
+	...props
+}: Readonly<Props>) {
 	const theme = useTheme();
 
 	const router = useRouter();
@@ -285,18 +297,21 @@ export default function Wizard({ metadata, sharedCount, ...props }: Props) {
 	const [templates, setTemplates] = useState<ProcessTemplate[]>([]);
 	const [templatesSorted, setTemplatesSorted] = useState<ProcessTemplate[]>([]);
 
-	const [configTemplateId, setConfigTemplateId] = useState<string | null>(null);
 	const { data, isLoading } = getProcessTemplate.useData({
 		input: {
 			processTemplateGroupId: props.processTemplateGroupId || null,
-			processTemplateId: configTemplateId || props.processTemplateId || null,
+			processTemplateId:
+				/*configTemplateId ||*/ props.processTemplateId || null,
 		},
 	});
 
+	const [values, setValues] = React.useState<FormState>({});
+
 	useEffect(() => {
 		const typedData = data as GetProcessTemplateQuery;
 		if (typedData?.processTemplate) {
 			const templates = typedData.processTemplate as ProcessTemplate[];
+
 			setTemplates(templates);
 			setTemplatesSorted(
 				templates.map((t) => ({
@@ -304,10 +319,29 @@ export default function Wizard({ metadata, sharedCount, ...props }: Props) {
 					pages: sortBy(t.pages as ProcessTemplatePage[]),
 				})),
 			);
+
+			templates.forEach((tpl) => {
+				tpl.pages?.forEach((page) => {
+					page?.inputs?.forEach((input) => {
+						const key = templateFieldKey(tpl.id, input?.fieldName ?? "");
+						if (
+							input?.defaultValue !== undefined &&
+							input?.defaultValue !== null &&
+							!values[key]
+						) {
+							setValues((prev) => ({
+								...prev,
+								[key]: input.defaultValue as FieldValue,
+							}));
+						}
+					});
+				});
+			});
 		}
 	}, [data]);
 
 	const [flatPages, setFlatPages] = useState<FlatPage[]>([]);
+
 	useEffect(() => {
 		let counter = 0;
 		const newFlatPages = templatesSorted.flatMap((tpl, ti) => {
@@ -349,7 +383,6 @@ export default function Wizard({ metadata, sharedCount, ...props }: Props) {
 		}
 	}, [currentTemplate]);
 
-	const [values, setValues] = React.useState<FormState>({});
 	const [errors, setErrors] = React.useState<ErrorState>({});
 	const [disabledFields, setDisabledFields] = React.useState<Set<string>>(
 		new Set(),
@@ -360,7 +393,9 @@ export default function Wizard({ metadata, sharedCount, ...props }: Props) {
 
 	const handleFieldChange = React.useCallback(
 		(templateId: string, fieldName: string, value: FieldValue) => {
+			if (!templateId || !fieldName || value == null) return;
 			const key = templateFieldKey(templateId, fieldName);
+
 			setValues((prev) => ({ ...prev, [key]: value }));
 			setErrors((prev) => ({ ...prev, [key]: null }));
 		},
@@ -390,12 +425,11 @@ export default function Wizard({ metadata, sharedCount, ...props }: Props) {
 			const config = JSON.parse(props.templateConfig as string);
 			applyTemplateConfig(
 				{
-					name: config.dataDescription as string,
+					name: config.taskName as string,
 					templateConfig: props.templateConfig as string,
 				} as SearchOption,
 				handleFieldChange,
 			);
-			setConfigTemplateId(config.processTemplateId ?? null);
 		}
 	}, [props.templateConfig]);
 
@@ -513,6 +547,19 @@ export default function Wizard({ metadata, sharedCount, ...props }: Props) {
 					continue;
 				}
 
+				if (
+					input.fieldName === "uniqueIdentifier" &&
+					typeof value === "string"
+				) {
+					const notUnique = Object.entries(values).find(
+						([k, v]) => k.endsWith(`${templateId}::isUnique`) && v === false,
+					);
+					if (notUnique) {
+						pageErrs[key] = "This identifier is not unique.";
+						continue;
+					}
+				}
+
 				const fieldErr = validateInput(input, value);
 				if (fieldErr) pageErrs[key] = fieldErr;
 			}
@@ -540,8 +587,7 @@ export default function Wizard({ metadata, sharedCount, ...props }: Props) {
 		if (currentFlat && !validatePage(currentFlat, currentFlat._templateId))
 			return;
 
-		const payload = buildProcessConfigMerge(templatesSorted, values, metadata);
-		console.log("processConfigMerge payload:", payload);
+		let payload = buildProcessConfigMerge(templatesSorted, values, metadata);
 
 		props.setProcessConfigMerge(payload);
 		if (props.handleFinish) {
@@ -556,9 +602,9 @@ export default function Wizard({ metadata, sharedCount, ...props }: Props) {
 		isLoading &&
 		!currentFlat &&
 		!currentTemplate &&
-		(!props.processTemplateGroupId ||
-			!props.processTemplateId ||
-			!configTemplateId)
+		!props.templateConfig &&
+		(!props.processTemplateGroupId || !props.processTemplateId) /*||
+			!configTemplateId*/
 	) {
 		return (
 			<Box sx={{ padding: theme.spacing(10, 3) }}>
@@ -626,8 +672,10 @@ export default function Wizard({ metadata, sharedCount, ...props }: Props) {
 							readOnly={props.readOnly}
 							sharedCount={(count) => sharedCount?.(count)}
 							isEditMode={props.isEditMode}
+							isCreateMode={props.isCreateMode}
 							disabledFields={disabledFields}
 							setFieldsDisabled={setFieldsDisabled}
+							templateConfig={props.templateConfig || ""}
 						/>
 					</Box>
 

package/src/pages/dashboard/dashboard-list-sections.tsx

@@ -4,7 +4,7 @@ import type {
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 // Custom components
 import SnackbarAlert, {
-	type iSnackbarAlert,
+	type ISnackbarAlert,
 } from "@evenicanpm/admin-core/components/snackbar-alert";
 
 // API
@@ -25,7 +25,7 @@ export default function DashboardListSections() {
 	const m = useTranslations("Integrate.Message");
 
 	const [refreshed, setRefreshed] = useState<boolean>(false);
-	const [message, setMessage] = useState<iSnackbarAlert>({ open: false });
+	const [message, setMessage] = useState<ISnackbarAlert>({ open: false });
 
 	const {
 		data: recent,

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

@@ -7,7 +7,7 @@ import type {
 	ProcessTaskExecution,
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 import SnackbarAlert, {
-	type iSnackbarAlert,
+	type ISnackbarAlert,
 } from "@evenicanpm/admin-core/components/snackbar-alert";
 import {
 	getProcessExecutionDetails,
@@ -96,7 +96,7 @@ export default function ExecutionDetails() {
 			setSelected(typedData.processExecutionDetails as Execution);
 
 			if (breadcrumbs.length === 2) {
-				const newCrumbs: Crumb[] = JSON.parse(JSON.stringify(breadcrumbs));
+				const newCrumbs: Crumb[] = globalThis.structuredClone(breadcrumbs);
 
 				newCrumbs.push({
 					name: typedData.processExecutionDetails.name as string,
@@ -119,7 +119,7 @@ export default function ExecutionDetails() {
 	}, [executions]);
 
 	const runProcess = runProcessWebhook();
-	const [message, setMessage] = useState<iSnackbarAlert>({ open: false });
+	const [message, setMessage] = useState<ISnackbarAlert>({ open: false });
 
 	const handleRun = () => {
 		runProcess.mutate(
@@ -214,6 +214,7 @@ export default function ExecutionDetails() {
 					onTaskClick={handleSelectedTaskExecution}
 					drawerOpen={!!selectedTaskExecution}
 					processTaskId={selectedTaskExecution?.id}
+					canEdit={false}
 				/>
 				<TaskExecutionDrawer
 					open={selectedTaskExecution !== null}

package/src/pages/execution-details/task-execution-details.tsx

@@ -21,7 +21,7 @@ interface Props {
 	details: ProcessTaskExecution;
 }
 
-export default function TaskExecutionDetails({ details }: Props) {
+export default function TaskExecutionDetails({ details }: Readonly<Props>) {
 	const t = useTranslations("Integrate.Executions");
 	const theme = useTheme();
 	const styles = getStyles(theme);

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

@@ -29,7 +29,7 @@ export default function TaskExecutionDrawer({
 	processTaskExecution,
 	handleClose,
 	...props
-}: Props) {
+}: Readonly<Props>) {
 	const theme = useTheme();
 
 	return (

package/src/pages/executions/executions-list/executions-list-table.tsx

@@ -20,7 +20,7 @@ interface Props {
 	rowSx?: SxProps;
 }
 
-export default function ExecutionsListTable(props: Props) {
+export default function ExecutionsListTable(props: Readonly<Props>) {
 	const handleRequestSort = (property: string) => {
 		const current = props.input.sort;
 		if (property === current) {

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

@@ -1,4 +1,7 @@
-import type { ConfigurationMergeMutationVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import type {
+	ConfigExport,
+	ConfigurationMergeMutationVariables,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 import {
 	processConfigImport,
 	processConfigMerge,
@@ -11,7 +14,7 @@ import { IntegrationDetailsHeader } from "@evenicanpm/admin-integrate/components
 import { removeTemplateConfig } from "@evenicanpm/admin-integrate/components/templates/wizard";
 import { slugify } from "@evenicanpm/admin-integrate/utils/slugify";
 import { Clear, SaveOutlined } from "@mui/icons-material";
-import { Box, Button, Card, type Theme, useTheme } from "@mui/material";
+import { Box, Button, type Theme, useTheme } from "@mui/material";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
@@ -75,6 +78,27 @@ export default function IntegrationCreate() {
 			c.code = code;
 		}
 
+		console.log("configMergeInput", configMergeInput);
+
+		let sourceName = configMergeInput?.input?.config?.find(
+			(item: any) => (item?.source as string)?.toLowerCase() === "source",
+		)?.uniqueIdentifier;
+
+		if (sourceName) {
+			configMergeInput.input.config = configMergeInput.input!.config!.map(
+				(item: any) => {
+					if (item?.queues) {
+						return {
+							...item,
+							queues: `${sourceName}_endpoint`,
+						};
+					} else {
+						return item;
+					}
+				},
+			);
+		}
+
 		processConfigMergeMutation.mutate(
 			{
 				input:
@@ -82,8 +106,13 @@ export default function IntegrationCreate() {
 					({} as ConfigurationMergeMutationVariables),
 			},
 			{
-				onSuccess: ({ configurationMerge }) =>
-					setProcessConfig(configurationMerge),
+				onSuccess: ({ configurationMerge }) => {
+					console.log("configurationMerge", configurationMerge);
+					setProcessConfig({
+						...configurationMerge,
+						CreateIntegrationProc: true,
+					});
+				},
 				onError: (error) => {
 					console.error("Update failed:", error);
 				},
@@ -98,8 +127,7 @@ export default function IntegrationCreate() {
 				reRoutedFromMerge: true,
 			},
 			{
-				onSuccess: (res) => {
-					console.log("res", res);
+				onSuccess: () => {
 					router.push("/e4integrate/integrations");
 				},
 				onError: (error) => {
@@ -120,55 +148,69 @@ export default function IntegrationCreate() {
 		}
 	}, [name]);
 
+	useEffect(() => {
+		if (step === 3 && !processConfig) {
+			const blankConfig: ConfigExport = {
+				Processes: [
+					{
+						Process: slugify(name),
+						Name: name,
+					},
+				],
+			};
+			setProcessConfig(blankConfig);
+		}
+	}, [step, processConfig]);
+
 	return (
 		<>
 			<IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
-			<Card>
-				<Box sx={styles.header}>
-					<IntegrationDetailsHeader
-						name={name || t("Templates.defaultNewName")}
-						setName={setName}
-						toolbar={step === 3 ? "disabled" : "hidden"}
-						draft
-						untitled={name === ""}
+			{/* <Card> */}
+			<Box sx={styles.header}>
+				<IntegrationDetailsHeader
+					name={name || t("Templates.defaultNewName")}
+					setName={setName}
+					toolbar={step === 3 ? "disabled" : "hidden"}
+					draft
+					untitled={name === ""}
+				>
+					<Button
+						color="error"
+						variant="contained"
+						startIcon={<Clear />}
+						onClick={handleCancel}
+					>
+						{t("Templates.cancel")}
+					</Button>
+					<Button
+						color="info"
+						variant="contained"
+						startIcon={<SaveOutlined />}
+						onClick={handleProcessConfigImport}
+						disabled={step !== 3}
 					>
-						<Button
-							color="error"
-							variant="contained"
-							startIcon={<Clear />}
-							onClick={handleCancel}
-						>
-							{t("Templates.cancel")}
-						</Button>
-						<Button
-							color="info"
-							variant="contained"
-							startIcon={<SaveOutlined />}
-							onClick={handleProcessConfigImport}
-							disabled={step !== 3}
-						>
-							{t("Templates.create")}
-						</Button>
-					</IntegrationDetailsHeader>
-				</Box>
-				{step === 0 && <SelectStep setStep={setStep} />}
-				{step === 1 && <TemplateListStep />}
-				{step === 2 && (
-					<WizardStep
-						setStep={setStep}
-						setProcessConfigMerge={handleProcessConfigMerge}
-					/>
-				)}
-				{step === 3 && <PreCreationStep processConfig={processConfig} />}
-			</Card>
+						{t("Templates.create")}
+					</Button>
+				</IntegrationDetailsHeader>
+			</Box>
+			{step === 0 && <SelectStep setStep={setStep} />}
+			{step === 1 && <TemplateListStep />}
+			{step === 2 && (
+				<WizardStep
+					setStep={setStep}
+					setProcessConfigMerge={handleProcessConfigMerge}
+				/>
+			)}
+			{step === 3 && <PreCreationStep processConfig={processConfig} />}
+			{/* </Card> */}
 		</>
 	);
 }
 
-const getStyles = (theme: Theme) => {
+const getStyles = (_theme: Theme) => {
 	return {
 		header: {
-			padding: theme.spacing(2),
+			//padding: theme.spacing(2),
 		},
 	};
 };