@evenicanpm/admin-integrate 2.0.0 → 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/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,14 +1,14 @@
+import { MarkerType } from "@xyflow/react";
+import _ from "lodash";
 import type {
 	ConfigExport,
+	Process,
 	ProcessExecutionDetails,
 	ProcessExport,
 	ProcessTask,
 	ProcessTaskExecution,
 	ProcessTaskExport,
-} from "@evenicanpm/admin-core/src/api/e4/graphqlRequestSdk";
-import { MarkerType } from "@xyflow/react";
-import _ from "lodash";
-import type { Process } from "../../../../../admin-core/src/api/e4/graphqlRequestSdk";
+} from "../../../../../admin-core/src/api/e4/graphqlRequestSdk";
 import type {
 	ElkExtendedEdgeWithFlow,
 	ElkNodeWithFlow,
@@ -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: string;
 	const keys = Object.keys(processTask);
 	let n = keys.length;
-	const 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,25 +292,25 @@ 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,
@@ -359,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);

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/form-type.ts

@@ -5,6 +5,12 @@ export type TableRow = Record<string, string | number | boolean | null>;
 
 export type SetRowsFn = (rows: TableRow[]) => void;
 
+/** Used for TEXT_UNIQUE_IDENTIFIER when updating a sibling field (e.g. `isUnique`). */
+export type SearchInputExtendedSetValue = (
+	v: FieldValue,
+	fieldName?: string,
+) => void;
+
 export interface InputTableProps {
 	rows: TableRow[];
 	setRows: SetRowsFn;
@@ -25,7 +31,7 @@ export type SearchInputWrapperProps = {
 	setValue:
 		| ((v: string) => void)
 		| ((v: string[]) => void)
-		| ((v: string, fieldName?: string) => void);
+		| SearchInputExtendedSetValue;
 
 	placeholder?: string | null;
 	helpText?: string | null;

package/src/components/templatesV2/inputs/renderers/renderFormControl.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Box, FormHelperText, Typography } from "@mui/material";
-import { Field } from "formik";
+import { Field, type FieldProps } from "formik";
 import type * as React from "react";
 import type {
 	ErrorState,
@@ -76,9 +76,13 @@ function queryInputType(
 function normalizeInputTableRows(
 	value: unknown,
 	input: ProcessTemplateInput,
-): Array<Record<string, unknown>> {
-	const rows: Array<Record<string, unknown>> = Array.isArray(value)
-		? (value as Array<Record<string, unknown>>)
+): Array<Record<string, string | number | boolean | null | undefined>> {
+	const rows: Array<
+		Record<string, string | number | boolean | null | undefined>
+	> = Array.isArray(value)
+		? (value as Array<
+				Record<string, string | number | boolean | null | undefined>
+			>)
 		: [];
 	if (!value || rows.length > 0 || (input.schemas?.length ?? 0) !== 2) {
 		return rows;
@@ -151,7 +155,11 @@ function renderInputTable({
 			<InputTable
 				rows={rows}
 				setRows={(newRows) =>
-					handleFieldChange(templateId, input.fieldName ?? "", newRows)
+					handleFieldChange(
+						templateId,
+						input.fieldName ?? "",
+						newRows as Array<Record<string, string>>,
+					)
 				}
 				schemas={(input.schemas as ProcessTemplateInputSchema[]) ?? []}
 				tableError={tableErrorToShow ?? null}
@@ -204,7 +212,7 @@ export function renderFormControl({
 		value: FieldValue,
 	) => void;
 	setFieldTouched?: (field: string, value: boolean) => void;
-	validateField?: (field: string) => void | Promise<unknown>;
+	validateField?: (field: string) => undefined | Promise<unknown>;
 	validateForm?: () => Promise<Record<string, unknown>>;
 	readOnly?: boolean;
 	disabledFields?: Set<string>;
@@ -230,7 +238,7 @@ export function renderFormControl({
 		const submitValidationResult = submitValidationResults?.[k] ?? null;
 		return (
 			<Field name={k}>
-				{({ field, form, meta }: any) => (
+				{({ field, form, meta }: FieldProps) => (
 					<TextWithQueryInput
 						inputType={queryInputTypeVal}
 						label={input.label ?? ""}
@@ -264,7 +272,7 @@ export function renderFormControl({
 	if (input.inputType === InputType.CHECKBOX) {
 		return (
 			<Field name={k}>
-				{({ field, form }: any) => (
+				{({ field, form }: FieldProps) => (
 					<CheckboxInput
 						label={input.label ?? ""}
 						checked={Boolean(field.value ?? false)}
@@ -280,7 +288,7 @@ export function renderFormControl({
 	if (input.inputType === InputType.NUMBER) {
 		return (
 			<Field name={k}>
-				{({ field, form, meta }: any) => (
+				{({ field, form, meta }: FieldProps) => (
 					<NumberInput
 						label={input.label ?? ""}
 						value={(field.value as number) ?? ""}
@@ -299,7 +307,7 @@ export function renderFormControl({
 	if (input.inputType === InputType.SELECTOR) {
 		return (
 			<Field name={k}>
-				{({ field, form, meta }: any) => (
+				{({ field, form, meta }: FieldProps) => (
 					<SelectorInput
 						fieldName={input.fieldName ?? ""}
 						label={input.label ?? ""}
@@ -359,7 +367,7 @@ export function renderFormControl({
 
 	return (
 		<Field name={k}>
-			{({ field, form, meta }: any) => (
+			{({ field, form, meta }: FieldProps) => (
 				<TextInput
 					label={input.label ?? ""}
 					value={(field.value as string) ?? ""}

package/src/components/templatesV2/inputs/renderers/renderSearchInput.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Field, type FieldProps } from "formik";
-import * as React from "react";
 import {
 	type FieldValue,
 	type ProcessTemplateInput,
@@ -46,7 +45,7 @@ export function renderSearchInput({
 	if (input.inputType === InputType.MULTI_TEXT_SEARCH) {
 		return (
 			<Field name={k}>
-				{({ field, form, meta }: any) => (
+				{({ field, form, meta }: FieldProps) => (
 					<SearchInputWrapper
 						inputType={InputType.MULTI_TEXT_SEARCH}
 						queryName={queryName}
@@ -66,7 +65,7 @@ export function renderSearchInput({
 	if (input.inputType === InputType.TEXT_SEARCH) {
 		return (
 			<Field name={k}>
-				{({ field, form, meta }: any) => (
+				{({ field, form, meta }: FieldProps) => (
 					<SearchInputWrapper
 						inputType={InputType.TEXT_SEARCH}
 						queryName={queryName}
@@ -97,7 +96,7 @@ export function renderSearchInput({
 
 				<Field name={k}>
 					{({ field, form, meta }: FieldProps) => {
-						const setUniqueValue = (v: string, fieldName?: string) => {
+						const setUniqueValue = (v: FieldValue, fieldName?: string) => {
 							const targetKey = fieldName
 								? templateFieldKey(templateId, fieldName)
 								: k;

package/src/components/templatesV2/inputs/search/useSearchInput.ts

@@ -3,19 +3,21 @@ import type {
 	GetSourceEndpointsQuery,
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 import { templateInputSearch } from "@evenicanpm/admin-integrate/api/templates/queries";
-import type { TemplateInputSearchQueryKey } from "@evenicanpm/admin-integrate/api/templates/queries/types";
 import { useSearchParams } from "next/navigation";
 import React from "react";
 import type { SearchOption } from "../../types";
 import { ReservedFieldName } from "../field-names";
+import type {
+	SearchInputExtendedSetValue,
+	SearchInputWrapperProps,
+} from "../form-type";
 import { InputType } from "../input-type";
 import { TemplateSearchQueryKey } from "./search-query-key";
 
-type UseSearchInputProps = {
-	inputType: InputType;
-	queryName: TemplateInputSearchQueryKey;
-	setValue?: (v: any, fieldName?: string) => void;
-};
+type UseSearchInputProps = Pick<
+	SearchInputWrapperProps,
+	"inputType" | "queryName" | "setValue"
+>;
 
 export function useSearchInput({
 	inputType,
@@ -59,7 +61,10 @@ export function useSearchInput({
 				const typed = data as CheckUniqueIdentifierQuery;
 				const unique = typed.checkUniqueIdentifier?.isUnique ?? null;
 				setIsUnique(unique);
-				setValue?.(unique, ReservedFieldName.IsUnique);
+				(setValue as SearchInputExtendedSetValue | undefined)?.(
+					unique,
+					ReservedFieldName.IsUnique,
+				);
 				break;
 			}
 		}

package/src/components/templatesV2/inputs/table/InputTable.tsx

@@ -28,15 +28,17 @@ import { renderReadOnlyText } from "../utils/renderReadOnlyText";
 /** Reserved key for React list key; not a schema column. */
 const ROW_ID_KEY = "__rowId" as const;
 
-function getRowId(row: Record<string, any>, index: number): string {
+type RowRecord = Record<string, string | number | boolean | null | undefined>;
+
+function getRowId(row: RowRecord, index: number): string {
 	const id = row[ROW_ID_KEY];
 	if (typeof id === "string" && id.length > 0) return id;
 	return `row-${index}`;
 }
 
 function ensureRowIds(
-	rows: Array<Record<string, any>>,
-	setRows: (rows: Array<Record<string, any>>) => void,
+	rows: RowRecord[],
+	setRows: (rows: RowRecord[]) => void,
 ): void {
 	const needsId = rows.some(
 		(r) => r[ROW_ID_KEY] == null || r[ROW_ID_KEY] === "",
@@ -60,8 +62,8 @@ export function InputTable({
 	readOnly,
 	onCellBlur,
 }: Readonly<{
-	rows: Array<Record<string, any>>;
-	setRows: (rows: Array<Record<string, any>>) => void;
+	rows: RowRecord[];
+	setRows: (rows: RowRecord[]) => void;
 	schemas: ProcessTemplateInputSchema[];
 	tableError: string | null;
 	rowErrors?: Array<Record<string, string>>;
@@ -95,7 +97,7 @@ export function InputTable({
 	}, [rows, ordered]);
 
 	const addRow = () => {
-		const empty: Record<string, any> = {
+		const empty: RowRecord = {
 			[ROW_ID_KEY]: crypto.randomUUID(),
 		};
 		ordered.forEach((s, colIndex) => {
@@ -112,7 +114,11 @@ export function InputTable({
 		setRows(copy);
 	};
 
-	const updateCell = (idx: number, columnKey: string, value: any) => {
+	const updateCell = (
+		idx: number,
+		columnKey: string,
+		value: string | number | boolean | null | undefined,
+	) => {
 		const copy = [...rows];
 		copy[idx] = { ...copy[idx], [columnKey]: value };
 		setRows(copy);
@@ -141,7 +147,7 @@ export function InputTable({
 								</TableRow>
 							</TableHead>
 							<TableBody>
-								{(rows ?? []).map((r: Record<string, any>, i: number) => (
+								{(rows ?? []).map((r: RowRecord, i: number) => (
 									<TableRow key={getRowId(r, i)}>
 										{ordered.map(
 											(s: ProcessTemplateInputSchema, colIndex: number) => {
@@ -188,7 +194,7 @@ export function InputTable({
 																minWidth={120}
 																fieldName={columnKey}
 																label={s.label ?? ""}
-																value={cell}
+																value={cell == null ? "" : String(cell)}
 																options={opts}
 																setValue={(v) => updateCell(i, columnKey, v)}
 																error={cellError}
@@ -201,11 +207,14 @@ export function InputTable({
 												return (
 													<TableCell key={s.id}>
 														{readOnly ? (
-															renderReadOnlyText(undefined, cell)
+															renderReadOnlyText(
+																undefined,
+																typeof cell === "boolean" ? String(cell) : cell,
+															)
 														) : (
 															<TextField
 																size="small"
-																value={cell}
+																value={cell == null ? "" : String(cell)}
 																onChange={(e) =>
 																	updateCell(i, columnKey, e.target.value)
 																}