@evenicanpm/admin-integrate 1.8.1 → 2.0.1

package/src/components/integration-view/nodes/execution-entry-node.tsx

@@ -9,6 +9,7 @@ import {
 	useTheme,
 } from "@mui/material";
 import { Handle, type NodeProps, Position } from "@xyflow/react";
+import type { ReactNode } from "react";
 
 export function ExecutionEntryNode(props: NodeProps): JSX.Element {
 	const theme = useTheme();
@@ -50,7 +51,7 @@ export function ExecutionEntryNode(props: NodeProps): JSX.Element {
 				}}
 			>
 				<CardContent sx={styles.cardContent}>
-					{props?.data?.icon as any}
+					{props?.data?.icon as ReactNode}
 					<Typography variant="h6" sx={styles.label}>
 						{props?.data?.label as string}
 					</Typography>
@@ -61,7 +62,7 @@ export function ExecutionEntryNode(props: NodeProps): JSX.Element {
 					<>
 						<Divider sx={styles.divider} />
 						<CardContent sx={styles.cardContent}>
-							{props?.data?.icon2 as any}
+							{props?.data?.icon2 as ReactNode}
 							<Typography variant="h6" sx={styles.label}>
 								{props?.data?.label2 as string}
 							</Typography>

package/src/components/integration-view/nodes/task-node.tsx

@@ -3,8 +3,8 @@ import {
 	Box,
 	Card,
 	CardContent,
-	Typography,
 	IconButton,
+	Typography,
 	useTheme,
 } from "@mui/material";
 import { Handle, type NodeProps, Position } from "@xyflow/react";

package/src/components/integration-view/types.ts

@@ -1,3 +1,4 @@
+/*
 type ElkOptions = {};
 
 type ElkPosition = {};
@@ -10,3 +11,4 @@ interface ElkItem {
 	y: number;
 	layoutOptions: ElkOptions;
 }
+*/

package/src/components/integration-view/utils/mapping.ts

@@ -1,21 +1,21 @@
-import {
-	ProcessExecutionDetails,
+import { MarkerType } from "@xyflow/react";
+import _ from "lodash";
+import type {
 	ConfigExport,
+	Process,
+	ProcessExecutionDetails,
 	ProcessExport,
 	ProcessTask,
-	ProcessTaskExport,
 	ProcessTaskExecution,
-} from "@evenicanpm/admin-core/src/api/e4/graphqlRequestSdk";
-import { Process } from "../../../../../admin-core/src/api/e4/graphqlRequestSdk";
-import {
+	ProcessTaskExport,
+} from "../../../../../admin-core/src/api/e4/graphqlRequestSdk";
+import type {
 	ElkExtendedEdgeWithFlow,
 	ElkNodeWithFlow,
 	GroupNode,
 	// ProcessTaskExecutionNode,
 	// ProcessTaskNode,
 } from "../elk-types";
-import { MarkerType } from "@xyflow/react";
-import _ from "lodash";
 
 const markerEnd = {
 	type: MarkerType.ArrowClosed,
@@ -23,11 +23,23 @@ const markerEnd = {
 	height: 20,
 };
 
+type TaskRecord = Record<string, unknown>;
+type BuildGroupsTask = (group: GroupNode) => TaskRecord[];
+type BuildNodeMapper = (
+	task: TaskRecord,
+	index: number,
+	partitionLen: number,
+	parentId: string,
+) => ElkNodeWithFlow;
+export type AddHandler = unknown;
+const asIdentifierString = (value: unknown) =>
+	typeof value === "string" || typeof value === "number" ? String(value) : "";
+
 export function mapToCamelCase(processTask: ProcessTaskExport): ProcessTask {
-	let key,
-		keys = Object.keys(processTask);
+	let key: string;
+	const keys = Object.keys(processTask);
 	let n = keys.length;
-	let newobj: { [key: string]: any } = {};
+	const newobj: Record<string, unknown> = {};
 	while (n--) {
 		key = keys[n];
 		newobj[key.substring(0, 1).toLowerCase() + key.substring(1)] =
@@ -144,17 +156,17 @@ function buildGroupsAndEdges({
 	entryPoint: ElkNodeWithFlow;
 	entryPointConnector: ElkNodeWithFlow;
 	groupLabels: number[];
-	getGroupTasks: Function;
+	getGroupTasks: BuildGroupsTask;
 	// nodeWidth: number,
 	variant: "process" | "process-execution";
-	onAdd?: Function;
-	mapTaskToNode: Function;
+	onAdd?: AddHandler;
+	mapTaskToNode: BuildNodeMapper;
 	groupSortKey: string;
 	taskIdKey: string;
 	taskNameKey: string;
 	connectorIdPrefix: string;
 }) {
-	const groups: GroupNode[] = groupLabels.map((groupLabel: any) => ({
+	const groups: GroupNode[] = groupLabels.map((groupLabel: number) => ({
 		id: `group-${groupLabel}`,
 		data: {
 			label: `Group ${groupLabel}`,
@@ -170,7 +182,7 @@ function buildGroupsAndEdges({
 		},
 		draggable: false,
 	}));
-	const edges: any[] = [];
+	const edges: ElkExtendedEdgeWithFlow[] = [];
 	edges.push({
 		id: `entry-point-entry-point-connector`,
 		sources: ["entry-point"],
@@ -187,21 +199,25 @@ function buildGroupsAndEdges({
 		});
 		const groupTasks = getGroupTasks(group);
 		const tasksPartitioned = _.values(_.groupBy(groupTasks, groupSortKey));
-		const groupNodes: any[] = [];
+		const groupNodes: ElkNodeWithFlow[] = [];
 		tasksPartitioned.forEach((partition) => {
-			partition.forEach((task: any, index: number) => {
+			partition.forEach((task: TaskRecord, index: number) => {
 				groupNodes.push(mapTaskToNode(task, index, partition.length, group.id));
 			});
 		});
 		let prevConnectorId: string | null = null;
 		tasksPartitioned.forEach((partition, tpIndex) => {
-			_.sortBy(partition, [(task: any) => task[taskNameKey]]);
+			_.sortBy(partition, [(task: TaskRecord) => task[taskNameKey]]);
 			if (prevConnectorId) {
-				partition.forEach((task: any) => {
+				const fromConnectorId = prevConnectorId;
+				partition.forEach((task: TaskRecord) => {
+					const taskIdentifier = asIdentifierString(
+						task[taskIdKey] ?? task[taskNameKey],
+					);
 					edges.push({
-						id: `${prevConnectorId}-${task[taskIdKey] || task[taskNameKey]}`,
-						sources: [prevConnectorId],
-						targets: [`task-${task[taskIdKey] || task[taskNameKey]}`],
+						id: `${fromConnectorId}-${taskIdentifier}`,
+						sources: [fromConnectorId],
+						targets: [`task-${taskIdentifier}`],
 						type: "default-edge",
 						markerEnd: markerEnd,
 					});
@@ -210,10 +226,13 @@ function buildGroupsAndEdges({
 			const connectorId = `${connectorIdPrefix}${group.id}-connect-${tpIndex}`;
 			prevConnectorId = connectorId;
 			if (tpIndex !== tasksPartitioned.length - 1) {
-				partition.forEach((task: any) => {
+				partition.forEach((task: TaskRecord) => {
+					const taskIdentifier = asIdentifierString(
+						task[taskIdKey] ?? task[taskNameKey],
+					);
 					edges.push({
-						id: `task-${task[taskIdKey] || task[taskNameKey]}-${connectorId}`,
-						sources: [`task-${task[taskIdKey] || task[taskNameKey]}`],
+						id: `task-${taskIdentifier}-${connectorId}`,
+						sources: [`task-${taskIdentifier}`],
 						targets: [connectorId],
 						type: "default-edge",
 					});
@@ -240,7 +259,7 @@ export const mapProcessConfigToNodesAndEdges = (
 	data: ConfigExport,
 	nodeWidth: number,
 	variant: "process" | "process-execution",
-	onAdd?: Function,
+	onAdd?: AddHandler,
 ) => {
 	const process = data.Processes?.[0] as ProcessExport;
 	const entryPoint: ElkNodeWithFlow = {
@@ -273,30 +292,29 @@ export const mapProcessConfigToNodesAndEdges = (
 		entryPoint,
 		entryPointConnector,
 		groupLabels,
-		getGroupTasks: (group: any) =>
+		getGroupTasks: (group: GroupNode) =>
 			_.sortBy(
 				process?.ProcessTasks?.filter(
-					(task) =>
-						task?.ParallelProcessingGroup?.toString() ===
-						group.id.split("-")[1],
-				),
+					(task): task is ProcessTaskExport =>
+						task != null &&
+						task.ParallelProcessingGroup?.toString() === group.id.split("-")[1],
+				) ?? [],
 				["Sort", "Name"],
-			),
+			) as TaskRecord[],
 		//nodeWidth,
 		variant,
 		onAdd,
 		mapTaskToNode: (
-			task: any,
+			task: TaskRecord,
 			index: number,
 			partitionLen: number,
 			parentId: string,
 		) => ({
-			id: `task-${task?.ProcessTaskId || task?.Name}`,
+			id: `task-${asIdentifierString(task.ProcessTaskId ?? task.Name)}`,
 			data: {
 				processTask: mapToCamelCase(task as ProcessTaskExport) || undefined,
 				label: task?.Name as string,
 				isLast: onAdd ? index === partitionLen - 1 : false,
-				onAdd: index === partitionLen - 1 ? onAdd : undefined,
 			},
 			position: { x: 0, y: 0 },
 			type: variant === "process" ? "task-node" : "execution-task-node",
@@ -360,28 +378,30 @@ export const mapProcessTasksToNodesAndEdges = (
 		entryPoint,
 		entryPointConnector,
 		groupLabels,
-		getGroupTasks: (group: any) =>
-			_.sortBy(
-				(variant === "process"
+		getGroupTasks: (group: GroupNode) => {
+			const tasks =
+				variant === "process"
 					? (data as Process)?.processTasks
-					: (data as ProcessExecutionDetails)?.processTaskExecutions
-				)?.filter(
-					(task) =>
-						task?.parallelProcessingGroup?.toString() ===
-						group.id.split("-")[1],
-				),
+					: (data as ProcessExecutionDetails)?.processTaskExecutions;
+			return _.sortBy(
+				tasks?.filter(
+					(task): task is ProcessTask | ProcessTaskExecution =>
+						task != null &&
+						task.parallelProcessingGroup?.toString() === group.id.split("-")[1],
+				) ?? [],
 				["sort", "name"],
-			),
+			) as TaskRecord[];
+		},
 		//nodeWidth,
 		variant,
 		onAdd: undefined,
 		mapTaskToNode: (
-			task: any,
+			task: TaskRecord,
 			index: number,
 			partitionLen: number,
 			parentId: string,
 		) => ({
-			id: `task-${task?.id}`,
+			id: `task-${asIdentifierString(task.id)}`,
 			data: {
 				processTask: variant === "process" ? (task as ProcessTask) : undefined,
 				processTaskExecution:

package/src/components/list-filter/list-filter-types.ts

@@ -38,6 +38,12 @@ export interface Filters {
 		| MultiSelectFilter;
 }
 
+export type FilterValue =
+	| DateFilter["value"]
+	| DateRangeFilter["value"]
+	| SelectFilter["value"]
+	| MultiSelectFilter["value"];
+
 export type FilterResult<FilterShape extends Filters> = {
 	[Property in keyof FilterShape]: FilterShape[Property]["value"];
 };

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

@@ -33,6 +33,7 @@ import type {
 	FilterConfig,
 	FilterResult,
 	Filters,
+	FilterValue,
 	ListFilterOutput,
 } from "./list-filter-types";
 import MultiSelectFilterComponent from "./multi-select-filter";
@@ -71,22 +72,22 @@ const ListFilter = function ListFilter<FilterShape extends Filters>(
 
 	const defaultValues = Object.entries(filters).reduce(
 		(values, [key, filter]) => {
-			if (filter.type === "select" && filter.value)
-				return {
-					...values,
+			if (filter.type === "select" && filter.value) {
+				return Object.assign(values, {
 					// @ts-expect-error
 					[key]: filter.options.find((o) => o.id === filter.value[0].id),
-				};
-			if (filter.type === "multiSelect" && filter.value)
-				return {
-					...values,
+				});
+			}
+			if (filter.type === "multiSelect" && filter.value) {
+				return Object.assign(values, {
 					[key]: filter.options.filter((o) =>
 						// @ts-expect-error
 						filter.value.find((v) => v.id === o.id),
 					),
-				};
+				});
+			}
 
-			return { ...values, [key]: filter.value };
+			return Object.assign(values, { [key]: filter.value });
 		},
 		{},
 	) as FilterResult<FilterShape>;
@@ -94,10 +95,10 @@ const ListFilter = function ListFilter<FilterShape extends Filters>(
 	const filterErrorsBase: FilterErrors<FilterShape> = Object.keys(
 		filters,
 	).reduce(
-		(values, key) => ({
-			...values,
-			[key]: false,
-		}),
+		(values, key) =>
+			Object.assign(values, {
+				[key]: false,
+			}),
 		{},
 	) as FilterErrors<FilterShape>;
 
@@ -124,7 +125,7 @@ const ListFilter = function ListFilter<FilterShape extends Filters>(
 		0,
 	);
 
-	const updateFilterValue = (name: string, value: any) => {
+	const updateFilterValue = (name: string, value: FilterValue | undefined) => {
 		if (Array.isArray(value) && !value.length) value = null;
 		setFilterValues({
 			...filterValues,
@@ -174,7 +175,10 @@ const ListFilter = function ListFilter<FilterShape extends Filters>(
 
 	const handleFilterClear = () => {
 		const emptyFilterValues = Object.keys(filterValues).reduce(
-			(values, key) => ({ ...values, [key]: null }),
+			(values, key) =>
+				Object.assign(values, {
+					[key]: null,
+				}),
 			{},
 		) as FilterResult<FilterShape>;
 		setPublishedFilterValues(emptyFilterValues);
@@ -293,6 +297,8 @@ const ListFilter = function ListFilter<FilterShape extends Filters>(
 															onError={(e) => updateFilterErrors(name, e)}
 														/>
 													);
+												default:
+													return null;
 											}
 										})}
 									<Box sx={styles.buttonRow}>

package/src/components/list-filter/multi-select-filter.tsx

@@ -31,15 +31,15 @@ const MultiSelectFilterComponent: React.FC<FilterProps<MultiSelectFilter>> = ({
 	const t = useTranslations("Integrate");
 
 	const mappedOptionDictionary = filter.options.reduce(
-		(dictionary, option) => ({
-			...dictionary,
-			[option.id]: {
+		(dictionary, option) => {
+			dictionary[option.id] = {
 				id: option.id,
 				value: t(option.value),
-			},
-		}),
-		{},
-	) as { [id: string | number]: FilterOption };
+			};
+			return dictionary;
+		},
+		{} as { [id: string | number]: FilterOption },
+	);
 
 	const [value, setValue] = useState(current);
 

package/src/components/list-filter/select-filter.tsx

@@ -31,12 +31,12 @@ const SelectFilterComponent: React.FC<FilterProps<SelectFilter>> = ({
 	const [value, setValue] = useState(current);
 
 	const mappedOptionDictionary = filter.options.reduce(
-		(dictionary, option) => ({
-			...dictionary,
-			[option.id]: option,
-		}),
-		{},
-	) as { [id: string | number]: FilterOption };
+		(dictionary: { [id: string | number]: FilterOption }, option) => {
+			dictionary[option.id] = option;
+			return dictionary;
+		},
+		{} as { [id: string | number]: FilterOption },
+	);
 
 	const updateValue = (optionId: string | number | null) => {
 		if (optionId == null) {

package/src/components/scheduler/day-selector.tsx

@@ -158,7 +158,7 @@ const getStyles = (theme: Theme): DaySelectorStyles => {
 		},
 		dayOfWeek: {
 			color: "grey.700",
-			border: "solid " + theme.palette.grey[500] + " " + theme.spacing(0.5),
+			border: `solid ${theme.palette.grey[500]} ${theme.spacing(0.5)}`,
 			backgroundColor: theme.palette.grey[50],
 			borderRadius: "50%",
 			width: theme.spacing(5),

package/src/components/templatesV2/inputs/FormikPageBody.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { Box } from "@mui/material";
+import { useFormikContext } from "formik";
+import * as React from "react";
+import type {
+	ErrorState,
+	FieldValue,
+	FormState,
+	ProcessTemplateInput,
+	ProcessTemplatePage,
+} from "../types";
+import { templateFieldKey } from "../types";
+import { FormModeProvider } from "./context/FormModeContext";
+import { TemplateProvider } from "./context/TemplateContext";
+import { ReservedFieldName } from "./field-names";
+import { InputType } from "./input-type";
+import { renderFormControl } from "./renderers/renderFormControl";
+import { arrangeInputs } from "./utils/arrangeInputs";
+
+function isHiddenInput(input: ProcessTemplateInput | null): boolean {
+	return (
+		input?.inputType === InputType.HIDDEN ||
+		input?.inputType === InputType.HIDDEN_NUMBER ||
+		input?.inputType === InputType.HIDDEN_NUMBER_OR_NULL
+	);
+}
+
+function getDefaultHiddenFieldValue(
+	input: ProcessTemplateInput | null,
+): FieldValue {
+	if (input?.inputType === InputType.HIDDEN_NUMBER) return 0 as FieldValue;
+	if (input?.inputType === InputType.HIDDEN_NUMBER_OR_NULL) return null;
+	return "" as FieldValue;
+}
+
+export function FormikPageBody({
+	templateId,
+	page,
+	clearTemplateFields,
+	readOnly,
+	isEditMode,
+	isCreateMode,
+	disabledFields,
+	setFieldsDisabled,
+	templateConfig,
+	setFieldValidationInProgress,
+	submitValidationResults,
+}: Readonly<{
+	templateId: string;
+	page: ProcessTemplatePage;
+	clearTemplateFields: (templateId: string) => void;
+	readOnly?: boolean;
+	isEditMode?: boolean;
+	isCreateMode?: boolean;
+	disabledFields?: Set<string>;
+	setFieldsDisabled?: (
+		templateId: string,
+		fieldNames: string[],
+		disabled: boolean,
+	) => void;
+	templateConfig?: string;
+	setFieldValidationInProgress?: (inProgress: boolean) => void;
+	submitValidationResults?: Record<
+		string,
+		{ isValid: boolean; message: string }
+	>;
+}>) {
+	const {
+		values,
+		errors,
+		touched,
+		setFieldValue,
+		setFieldTouched,
+		validateField,
+		validateForm,
+	} = useFormikContext<FormState>();
+
+	React.useEffect(() => {
+		const hiddenInputs = page.inputs?.filter(isHiddenInput) ?? [];
+
+		for (const input of hiddenInputs) {
+			const key = templateFieldKey(templateId, input?.fieldName ?? "");
+			if (values[key] != null) continue;
+
+			if (input?.fieldName === ReservedFieldName.ProcessTemplateId) {
+				setFieldValue(key, Number(templateId));
+				continue;
+			}
+			setFieldValue(key, getDefaultHiddenFieldValue(input));
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [templateId, page.id, page.inputs]);
+
+	const rows = React.useMemo(() => {
+		const inputs = (page.inputs ?? []).filter(
+			(inp): inp is ProcessTemplateInput => inp != null,
+		) as ProcessTemplateInput[];
+		return arrangeInputs(inputs);
+	}, [page.inputs]);
+
+	const handleFieldChange = (
+		tId: string,
+		fieldName: string,
+		value: FieldValue,
+	) => {
+		setFieldValue(templateFieldKey(tId, fieldName), value);
+	};
+
+	const errorsNormalized: ErrorState = React.useMemo(() => {
+		const out: Record<string, string | null> = {};
+		for (const key of Object.keys(errors ?? {})) {
+			const v = (errors as Record<string, unknown>)[key];
+			if (v == null) {
+				out[key] = null;
+			} else if (typeof v === "string") {
+				out[key] = v;
+			} else if (typeof v === "object") {
+				out[key] = "";
+			} else if (typeof v === "number" || typeof v === "boolean") {
+				out[key] = String(v);
+			} else {
+				out[key] = "";
+			}
+		}
+		return out;
+	}, [errors]);
+
+	const touchedNormalized: Record<string, boolean> = React.useMemo(() => {
+		const t = touched ?? {};
+		const out: Record<string, boolean> = {};
+		for (const key of Object.keys(t)) {
+			out[key] = (t as Record<string, unknown>)[key] === true;
+		}
+		return out;
+	}, [touched]);
+
+	const formControlProps = {
+		templateId,
+		values,
+		errors: errorsNormalized,
+		touched: touchedNormalized,
+		handleFieldChange,
+		setFieldTouched,
+		validateField,
+		validateForm,
+		readOnly,
+		disabledFields,
+		setFieldValidationInProgress,
+		submitValidationResults,
+	};
+
+	const renderRow = (
+		row: (typeof rows)[number],
+		idx: number,
+	): React.ReactNode => {
+		if (row.type === "pair") {
+			const [a, b] = row.items;
+			return (
+				<Box key={idx} sx={{ display: "flex", gap: 2, marginTop: 2 }}>
+					{renderFormControl({ ...formControlProps, input: a })}
+					{renderFormControl({ ...formControlProps, input: b })}
+				</Box>
+			);
+		}
+		if (row.type === "full") {
+			return (
+				<Box key={idx} sx={{ mb: 2, marginTop: 2 }}>
+					{renderFormControl({ ...formControlProps, input: row.item })}
+				</Box>
+			);
+		}
+		return null;
+	};
+
+	return (
+		<FormModeProvider value={{ readOnly, isEditMode, isCreateMode }}>
+			<TemplateProvider
+				value={{
+					templateId,
+					templateConfig,
+					disabledFields,
+					setFieldsDisabled,
+					clearTemplateFields,
+				}}
+			>
+				<Box>{rows.map(renderRow)}</Box>
+			</TemplateProvider>
+		</FormModeProvider>
+	);
+}

package/src/components/templatesV2/inputs/context/FormModeContext.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+type FormMode = {
+	readOnly?: boolean;
+	isEditMode?: boolean;
+	isCreateMode?: boolean;
+};
+
+const FormModeContext = React.createContext<FormMode | null>(null);
+
+export function FormModeProvider({
+	value,
+	children,
+}: Readonly<{
+	value: FormMode;
+	children: React.ReactNode;
+}>) {
+	return (
+		<FormModeContext.Provider value={value}>
+			{children}
+		</FormModeContext.Provider>
+	);
+}
+
+export function useFormMode() {
+	const ctx = React.useContext(FormModeContext);
+	if (!ctx) {
+		throw new Error("useFormMode must be used inside FormModeProvider");
+	}
+	return ctx;
+}

package/src/components/templatesV2/inputs/context/TemplateContext.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+
+type TemplateContextValue = {
+	templateId: string;
+	templateConfig?: string;
+	disabledFields?: Set<string>;
+	setFieldsDisabled?: (
+		templateId: string,
+		fieldNames: string[],
+		disabled: boolean,
+	) => void;
+	clearTemplateFields?: (templateId: string) => void;
+};
+
+const TemplateContext = React.createContext<TemplateContextValue | null>(null);
+
+export function TemplateProvider({
+	value,
+	children,
+}: Readonly<{
+	value: TemplateContextValue;
+	children: React.ReactNode;
+}>) {
+	return (
+		<TemplateContext.Provider value={value}>
+			{children}
+		</TemplateContext.Provider>
+	);
+}
+
+export function useTemplateContext() {
+	const ctx = React.useContext(TemplateContext);
+	if (!ctx) {
+		throw new Error("useTemplateContext must be used inside TemplateProvider");
+	}
+	return ctx;
+}