@evenicanpm/admin-integrate 1.2.2 → 1.3.0

package/src/components/templates/inputs/index.tsx

@@ -0,0 +1,1351 @@
+"use client";
+
+import type {
+	GetDataDescriptionsQuery,
+	GetSourceEndpointsQuery,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { templateInputSearch } from "@evenicanpm/admin-integrate/api/templates/queries";
+import {
+	isTemplateInputSearchQueryKey,
+	type TemplateInputSearchQueryKey,
+} from "@evenicanpm/admin-integrate/api/templates/queries/types";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteIcon from "@mui/icons-material/Delete";
+import {
+	Autocomplete,
+	type AutocompleteChangeReason,
+	Box,
+	Button,
+	Card,
+	CardContent,
+	Checkbox,
+	FormControlLabel,
+	FormHelperText,
+	IconButton,
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableRow,
+	TextField,
+	Tooltip,
+	Typography,
+} from "@mui/material";
+import { red } from "@mui/material/colors";
+import { debounce } from "lodash";
+import { useSearchParams } from "next/navigation";
+import * as React from "react";
+import {
+	type ErrorState,
+	type FieldValue,
+	type FormState,
+	type ProcessConfigMerge,
+	type ProcessTemplateInput,
+	type ProcessTemplateInputSchema,
+	type ProcessTemplatePage,
+	type SearchOption,
+	sortBy,
+	templateFieldKey,
+} from "../types";
+
+type InputRow =
+	| { type: "pair"; items: [ProcessTemplateInput, ProcessTemplateInput] }
+	| { type: "full"; item: ProcessTemplateInput };
+
+export function TextInput({
+	label,
+	placeholder,
+	value,
+	setValue,
+	error,
+	helpText,
+	readOnly,
+}: {
+	label: string;
+	placeholder?: string | null;
+	value: string;
+	setValue: (v: string) => void;
+	error?: string | null;
+	helpText?: string | null;
+	readOnly?: boolean;
+}) {
+	if (readOnly) return renderReadOnlyText(label, value);
+
+	return (
+		<TextField
+			label={label}
+			value={value ?? ""}
+			onChange={(e) => setValue(e.target.value)}
+			placeholder={placeholder ?? undefined}
+			fullWidth
+			error={Boolean(error)}
+			helperText={error ?? helpText ?? ""}
+			disabled={readOnly}
+		/>
+	);
+}
+
+export function NumberInput({
+	label,
+	placeholder,
+	value,
+	setValue,
+	error,
+	helpText,
+	readOnly,
+}: {
+	label: string;
+	placeholder?: string | null;
+	value: number | "" | null;
+	setValue: (v: number | "") => void;
+	error?: string | null;
+	helpText?: string | null;
+	readOnly?: boolean;
+}) {
+	if (readOnly) return renderReadOnlyText(label, value);
+
+	return (
+		<TextField
+			type="number"
+			label={label}
+			value={value ?? ""}
+			onChange={(e) =>
+				setValue(e.target.value === "" ? "" : Number(e.target.value))
+			}
+			placeholder={placeholder ?? undefined}
+			fullWidth
+			error={Boolean(error)}
+			helperText={error ?? helpText ?? ""}
+			disabled={readOnly}
+		/>
+	);
+}
+
+export function CheckboxInput({
+	label,
+	checked,
+	setChecked,
+	helpText,
+	readOnly,
+}: {
+	label: string;
+	checked: boolean;
+	setChecked: (v: boolean) => void;
+	helpText?: string | null;
+	readOnly?: boolean;
+}) {
+	return (
+		<Box>
+			<FormControlLabel
+				control={
+					<Checkbox
+						checked={checked}
+						onChange={(e) => setChecked(e.target.checked)}
+					/>
+				}
+				label={label}
+				disabled={readOnly}
+			/>
+			{helpText ? (
+				<FormHelperText sx={{ mt: -1.5, mb: 1 }}>{helpText}</FormHelperText>
+			) : null}
+		</Box>
+	);
+}
+
+function toStringArray(value: unknown): string[] {
+	if (value == null) return [];
+
+	// Already an array: coerce each item to string
+	if (Array.isArray(value)) return value.map(String);
+
+	// String: try JSON-parse; if it isn't a JSON array, treat as a single option
+	if (typeof value === "string") {
+		try {
+			const parsed = JSON.parse(value);
+			return Array.isArray(parsed) ? parsed.map(String) : [value];
+		} catch {
+			return [value];
+		}
+	}
+
+	// Plain object: use its values as the option labels/values
+	if (typeof value === "object") {
+		return Object.values(value as Record<string, unknown>).map(String);
+	}
+
+	// Everything else → no options
+	return [];
+}
+
+function getSelectorOptionsFromInput(input: ProcessTemplateInput): string[] {
+	const schemaWithOptions =
+		input?.schemas?.find(
+			(s: ProcessTemplateInputSchema | null) => s?.inputType === "selector",
+		) ?? input?.schemas?.[0];
+
+	return toStringArray(schemaWithOptions?.options);
+}
+
+export function SelectorInput({
+	fieldName,
+	label,
+	value,
+	setValue,
+	helpText,
+	error,
+	options,
+	insideTable = false,
+	minWidth,
+	readOnly,
+}: {
+	fieldName: string;
+	label: string;
+	value: string;
+	setValue: (v: string) => void;
+	helpText?: string | null;
+	error?: string | null;
+	options?: string[];
+	insideTable?: boolean;
+	minWidth?: number;
+	readOnly?: boolean;
+}) {
+	const opts = options ?? [];
+	const allowFreeText = opts.length === 0;
+	const id = `selector-${fieldName}`;
+
+	if (readOnly)
+		return renderReadOnlyText(insideTable ? undefined : label, value);
+
+	return (
+		<Box
+			sx={{
+				minWidth: minWidth ?? (insideTable ? 220 : undefined),
+				width: "100%",
+			}}
+		>
+			<Autocomplete
+				id={id}
+				disablePortal={insideTable}
+				disableClearable
+				options={opts}
+				freeSolo={allowFreeText}
+				value={value ?? ""}
+				onChange={(_e, val) => setValue((val as string) ?? "")}
+				onInputChange={(_e, val) => setValue(val)}
+				disabled={readOnly}
+				renderInput={(params) => (
+					<TextField
+						{...params}
+						size={insideTable ? "small" : "medium"}
+						label={label}
+						name={fieldName}
+						error={Boolean(error)}
+						helperText={error ?? helpText ?? ""}
+						fullWidth
+						disabled={readOnly}
+					/>
+				)}
+			/>
+		</Box>
+	);
+}
+
+function SearchInputWrapper({
+	fieldName,
+	inputType,
+	label,
+	value,
+	setValue,
+	placeholder,
+	helpText,
+	error,
+	queryName,
+	handleFieldChange,
+	clearTemplateFields,
+	readOnly,
+	sharedCountCallBack,
+	isEditMode,
+	setFieldsDisabled,
+	templateId,
+	disabledFields,
+}: {
+	fieldName?: string;
+	inputType: "multi-text-search" | "text-search";
+	label: string;
+	value: string | string[];
+	setValue: ((v: string) => void) | ((v: string[]) => void);
+	placeholder?: string | null;
+	helpText?: string | null;
+	error?: string | null;
+	queryName: TemplateInputSearchQueryKey;
+	handleFieldChange: (
+		templateId: string,
+		fieldName: string,
+		value: FieldValue,
+	) => void;
+	clearTemplateFields?: (templateId: string) => void;
+	readOnly?: boolean;
+	sharedCountCallBack?: (count: number) => void;
+	isEditMode?: boolean;
+	setFieldsDisabled?: (
+		templateId: string,
+		fieldNames: string[],
+		disabled: boolean,
+	) => void;
+	templateId?: string;
+	disabledFields?: Set<string>;
+}) {
+	const searchParams = useSearchParams();
+
+	const [searchText, setSearchText] = React.useState<string>("");
+	const [options, setOptions] = React.useState<SearchOption[]>([]);
+	const [sharedCount, setSharedCount] = React.useState<number>();
+
+	const { data } = templateInputSearch.useData(
+		{
+			input: {
+				processTemplateId: searchParams.get("template")?.toString() ?? null,
+				searchText: searchText,
+			},
+		},
+		queryName,
+	);
+
+	React.useEffect(() => {
+		if (data) {
+			switch (queryName) {
+				case "getSourceEndpoints": {
+					const typedData = data as GetSourceEndpointsQuery;
+					setOptions(
+						typedData.getSourceEndpoints?.map((e) => ({
+							name: e?.name ?? "",
+							templateConfig: e?.templateConfig ?? "",
+						})) ?? [],
+					);
+					break;
+				}
+				case "getDataDescriptions": {
+					const typedData = data as GetDataDescriptionsQuery;
+
+					const options =
+						typedData.getDataDescriptions?.map((d) => {
+							if (d?.dataDescription) {
+								setSharedCount(d?.sharedCount ?? 0);
+								sharedCountCallBack?.(d?.sharedCount ?? 0);
+							}
+
+							return {
+								name: d?.dataDescription ?? "",
+								templateConfig: d?.templateConfig ?? "",
+								sharedCount: d?.sharedCount ?? 0,
+							};
+						}) ?? [];
+
+					setOptions(options);
+
+					break;
+				}
+			}
+		}
+	}, [data]);
+
+	if (readOnly) {
+		return renderReadOnlyText(label, value);
+	}
+
+	const WarningCountIcon = ({ count }: { count: number }) => {
+		const color = red[600];
+
+		return (
+			<svg width="26" height="24" viewBox="0 0 24 24">
+				<polygon
+					points="12,2 22,20 2,20"
+					fill={color}
+					stroke="white"
+					strokeWidth="1"
+				/>
+				<text
+					x="12"
+					y="17"
+					fontSize="8"
+					fontWeight="bold"
+					fill="white"
+					textAnchor="middle"
+				>
+					{count}
+				</text>
+			</svg>
+		);
+	};
+
+	const SharedWarning = ({ sharedCount }: { sharedCount?: number }) => {
+		if (!sharedCount || sharedCount <= 1 || !isEditMode) return null;
+
+		return (
+			<Box sx={{ marginTop: "8px" }}>
+				<Tooltip
+					title={`This data description is shared with ${sharedCount} other integration task`}
+					arrow
+					placement="bottom"
+				>
+					<Box
+						sx={{
+							display: "inline-flex",
+							alignItems: "center",
+							cursor: "pointer",
+						}}
+					>
+						<WarningCountIcon count={sharedCount} />
+					</Box>
+				</Tooltip>
+			</Box>
+		);
+	};
+
+	return (
+		<>
+			{inputType === "multi-text-search" && (
+				<Box sx={{ display: "flex", gap: "10px" }}>
+					<MultiTextSearchInput
+						label={label}
+						value={value as string[]}
+						setValue={setValue as (v: string[]) => void}
+						options={options}
+						placeholder={placeholder}
+						helpText={helpText}
+						error={error}
+						setSearchText={setSearchText}
+						readOnly={readOnly}
+					/>
+
+					<SharedWarning sharedCount={sharedCount} />
+				</Box>
+			)}
+
+			{inputType === "text-search" && (
+				<Box sx={{ display: "flex", gap: "10px" }}>
+					<TextSearchInput
+						fieldName={fieldName}
+						label={label}
+						value={value as string}
+						setValue={setValue as (v: string) => void}
+						options={options}
+						placeholder={placeholder}
+						helpText={helpText}
+						error={error}
+						setSearchText={setSearchText}
+						handleFieldChange={handleFieldChange}
+						clearTemplateFields={clearTemplateFields}
+						readOnly={readOnly}
+						setFieldsDisabled={setFieldsDisabled}
+						templateId={templateId}
+						disabledFields={disabledFields}
+						isEditMode={isEditMode}
+					/>
+
+					<SharedWarning sharedCount={sharedCount} />
+				</Box>
+			)}
+		</>
+	);
+}
+
+export function applyTemplateConfig(
+	selectedOption: SearchOption,
+	handleFieldChange: (
+		templateId: string,
+		fieldName: string,
+		value: FieldValue,
+	) => void,
+) {
+	const merge: ProcessConfigMerge = { input: { config: [] } };
+	try {
+		merge.input = { config: [JSON.parse(selectedOption.templateConfig)] };
+
+		if (merge.input.config.length > 0) {
+			const config = merge.input.config[0];
+			const processTemplateId = config.processTemplateId;
+			for (const key of Object.keys(config)) {
+				handleFieldChange(processTemplateId as string, key, config[key]);
+			}
+		}
+	} catch {
+		console.error(
+			`Failed to apply template config for ${selectedOption.name}. Skipping...`,
+		);
+	}
+}
+
+export function TextSearchInput({
+	fieldName,
+	label,
+	value,
+	setValue,
+	options,
+	placeholder,
+	helpText,
+	error,
+	setSearchText,
+	handleFieldChange,
+	clearTemplateFields,
+	readOnly,
+	setFieldsDisabled,
+	templateId,
+	disabledFields,
+	isEditMode,
+}: {
+	fieldName?: string;
+	label: string;
+	value: string;
+	setValue: (v: string) => void;
+	options: SearchOption[];
+	placeholder?: string | null;
+	helpText?: string | null;
+	error?: string | null;
+	setSearchText: React.Dispatch<React.SetStateAction<string>>;
+	handleFieldChange: (
+		templateId: string,
+		fieldName: string,
+		value: FieldValue,
+	) => void;
+	clearTemplateFields?: (templateId: string) => void;
+	readOnly?: boolean;
+	setFieldsDisabled?: (
+		templateId: string,
+		fieldNames: string[],
+		disabled: boolean,
+	) => void;
+	templateId?: string;
+	disabledFields?: Set<string>;
+	isEditMode?: boolean;
+}) {
+	const searchParams = useSearchParams();
+	const [selected, setSelected] = React.useState<string | null>(value ?? null);
+
+	// remember which option was actually applied so we can reliably re-enable later
+	const appliedOptionRef = React.useRef<string | null>(null);
+
+	// disabledFields + readOnly
+	const selfKey =
+		templateId && fieldName ? templateFieldKey(templateId, fieldName) : null;
+	const isSelfDisabled = selfKey
+		? Boolean(disabledFields?.has(selfKey))
+		: false;
+	const disabled = Boolean(readOnly || isSelfDisabled);
+
+	const debouncedSetSearchText = React.useMemo(
+		() => debounce((s: string) => setSearchText(s), 500),
+		[],
+	);
+	React.useEffect(() => {
+		// Cleanup function to cancel any pending debounced calls
+		return () => {
+			debouncedSetSearchText.cancel();
+		};
+	}, [debouncedSetSearchText]);
+
+	React.useEffect(() => {
+		if (selected && templateId) {
+			const option = options.find((o) => o?.name === selected);
+			if (option) {
+				try {
+					// Always apply config (both edit and non-edit modes)
+					applyTemplateConfig(option, handleFieldChange);
+					appliedOptionRef.current = option.name ?? null;
+
+					// Only disable fields when NOT in edit mode
+					if (setFieldsDisabled && !isEditMode) {
+						const config = JSON.parse(option.templateConfig);
+						const fieldNamesToDisable = Object.keys(config).filter(
+							(key) => key !== "processTemplateId" && key !== (fieldName ?? ""),
+						);
+						setFieldsDisabled(templateId, fieldNamesToDisable, true);
+					}
+				} catch (err) {
+					console.error("Failed to parse template config", err);
+				}
+			}
+		}
+	}, [
+		selected,
+		templateId,
+		options,
+		setFieldsDisabled,
+		handleFieldChange,
+		isEditMode,
+	]);
+
+	const handleAutocompleteOnChange = (
+		event: React.SyntheticEvent,
+		value: string | null,
+		reason: AutocompleteChangeReason,
+	) => {
+		if (reason === "clear" && event.type === "click") {
+			setSelected(null);
+			// Re-enable all fields when cleared
+			if (templateId && setFieldsDisabled) {
+				const appliedName = appliedOptionRef.current;
+				if (appliedName) {
+					const option = options.find((o) => o?.name === appliedName);
+					if (option) {
+						try {
+							const config = JSON.parse(option.templateConfig);
+							// exclude the search field itself when re-enabling (it was never disabled)
+							const fieldNamesToEnable = Object.keys(config).filter(
+								(key) =>
+									key !== "processTemplateId" && key !== (fieldName ?? ""),
+							);
+							setFieldsDisabled(templateId, fieldNamesToEnable, false);
+						} catch (err) {
+							console.error("Failed to parse template config", err);
+						} finally {
+							appliedOptionRef.current = null;
+						}
+					}
+				}
+			}
+			const templateIdFromParams = searchParams.get("template");
+			if (clearTemplateFields && templateIdFromParams) {
+				clearTemplateFields(templateIdFromParams);
+			}
+		} else {
+			setSelected(value);
+		}
+	};
+
+	const handleInputChange = (
+		event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+	) => {
+		const newVal = event.target.value;
+		setValue(newVal);
+		debouncedSetSearchText(newVal);
+
+		if (newVal.trim() === "" && templateId && setFieldsDisabled) {
+			const appliedName = appliedOptionRef.current;
+			if (appliedName) {
+				const option = options.find((o) => o?.name === appliedName);
+				if (option) {
+					try {
+						const config = JSON.parse(option.templateConfig);
+						const fieldNamesToEnable = Object.keys(config).filter(
+							(key) => key !== "processTemplateId" && key !== (fieldName ?? ""),
+						);
+						setFieldsDisabled(templateId, fieldNamesToEnable, false);
+					} catch (err) {
+						console.error(
+							"Failed to parse template config while enabling fields",
+							err,
+						);
+					} finally {
+						appliedOptionRef.current = null;
+					}
+				}
+			}
+
+			if (clearTemplateFields) {
+				clearTemplateFields(templateId);
+			}
+		}
+	};
+
+	const shouldShowInfoMessage = !isEditMode && selected;
+	const helperTextFinal = shouldShowInfoMessage
+		? "Existing data descriptions are not editable during creation."
+		: helpText;
+
+	return (
+		<Box>
+			<Autocomplete
+				freeSolo={!selected}
+				options={options.map((o) => o.name)}
+				value={selected ?? ""}
+				onChange={handleAutocompleteOnChange}
+				disabled={disabled}
+				renderInput={(params) => (
+					<TextField
+						{...params}
+						label={label}
+						value={value ?? ""}
+						onChange={handleInputChange}
+						placeholder={placeholder ?? undefined}
+						fullWidth
+						error={Boolean(error)}
+						helperText={error ?? helperTextFinal ?? ""}
+						disabled={disabled}
+					/>
+				)}
+			/>
+		</Box>
+	);
+}
+
+export function MultiTextSearchInput({
+	label,
+	value,
+	setValue,
+	options,
+	placeholder,
+	helpText,
+	error,
+	setSearchText,
+	readOnly,
+}: {
+	label: string;
+	value: string[];
+	setValue: (v: string[]) => void;
+	options: SearchOption[];
+	placeholder?: string | null;
+	helpText?: string | null;
+	error?: string | null;
+	setSearchText: React.Dispatch<React.SetStateAction<string>>;
+	readOnly?: boolean;
+}) {
+	const [input, setInput] = React.useState<string>("");
+
+	const debouncedSetSearchText = React.useMemo(
+		() => debounce((s: string) => setSearchText(s), 500),
+		[],
+	);
+
+	React.useEffect(() => {
+		// Cleanup function to cancel any pending debounced calls
+		return () => {
+			debouncedSetSearchText.cancel();
+		};
+	}, [debouncedSetSearchText]);
+
+	const handleAutocompleteOnChange = (
+		_e: React.SyntheticEvent,
+		val: string[],
+	) => {
+		console.log("onSelect log", val);
+
+		setValue(val);
+		debouncedSetSearchText("");
+	};
+
+	const handleInputChange = (
+		event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+	) => {
+		setInput(event.target.value);
+		debouncedSetSearchText(event.target.value);
+	};
+
+	return (
+		<Autocomplete
+			multiple
+			freeSolo
+			options={options.map((o) => o.name)}
+			value={value ?? []}
+			onChange={handleAutocompleteOnChange}
+			disabled={readOnly}
+			renderInput={(params) => (
+				<TextField
+					{...params}
+					value={input}
+					onChange={handleInputChange}
+					label={label}
+					placeholder={placeholder ?? undefined}
+					error={Boolean(error)}
+					helperText={error ?? helpText ?? ""}
+					fullWidth
+					disabled={readOnly}
+				/>
+			)}
+		/>
+	);
+}
+
+export function InputTable({
+	rows,
+	setRows,
+	schemas,
+	tableError,
+	readOnly,
+}: {
+	rows: Array<Record<string, any>>;
+	setRows: (rows: Array<Record<string, any>>) => void;
+	schemas: ProcessTemplateInputSchema[];
+	tableError: string | null;
+	readOnly?: boolean;
+}) {
+	const ordered = React.useMemo(
+		() => sortBy<ProcessTemplateInputSchema>(schemas),
+		[schemas],
+	);
+	const addRow = () => {
+		const empty: Record<string, any> = {};
+		for (const s of ordered) {
+			const key = s.fieldKey ?? s.label ?? "";
+			empty[key] =
+				s.inputType === "checkbox" ? false : ((s.defaultValue as any) ?? "");
+		}
+		setRows([...(rows ?? []), empty]);
+	};
+
+	const delRow = (idx: number) => {
+		const copy = [...rows];
+		copy.splice(idx, 1);
+		setRows(copy);
+	};
+
+	const updateCell = (idx: number, columnKey: string, value: any) => {
+		const copy = [...rows];
+		copy[idx] = { ...copy[idx], [columnKey]: value };
+		setRows(copy);
+	};
+
+	return (
+		<>
+			{readOnly && rows.length === 0 && (
+				<Box>
+					<Typography>No values</Typography>
+				</Box>
+			)}
+			{(!readOnly || (readOnly && rows.length > 0)) && (
+				<Card
+					variant="outlined"
+					sx={{ mb: 1, borderColor: tableError ? "error.main" : "grey.400" }}
+				>
+					<CardContent>
+						<Table size="small">
+							<TableHead>
+								<TableRow>
+									{ordered.map((s: ProcessTemplateInputSchema) => (
+										<TableCell key={s.id}>{s.label}</TableCell>
+									))}
+									<TableCell width={1} />
+								</TableRow>
+							</TableHead>
+							<TableBody>
+								{(rows ?? []).map((r: Record<string, any>, i: number) => (
+									<TableRow key={i}>
+										{ordered.map((s: ProcessTemplateInputSchema) => {
+											const columnKey = s.fieldKey ?? s.label;
+											const cell = columnKey ? r[columnKey] : "";
+											if (s.inputType === "checkbox") {
+												return (
+													<TableCell key={s.id}>
+														<Checkbox
+															checked={Boolean(cell)}
+															onChange={(e) =>
+																updateCell(i, columnKey ?? "", e.target.checked)
+															}
+															disabled={readOnly}
+														/>
+													</TableCell>
+												);
+											}
+											if (s.inputType === "selector") {
+												const columnKey = s.fieldKey ?? s.label;
+												const cell = columnKey ? r[columnKey] : "";
+												const opts = toStringArray(s.options);
+
+												return (
+													<TableCell key={s.id}>
+														<SelectorInput
+															insideTable={true}
+															minWidth={120}
+															fieldName={columnKey ?? ""}
+															label={s.label ?? ""}
+															value={cell}
+															options={opts}
+															setValue={(v) =>
+																updateCell(i, columnKey ?? "", v)
+															}
+															readOnly={readOnly}
+														/>
+													</TableCell>
+												);
+											}
+											return (
+												<TableCell key={s.id}>
+													{readOnly ? (
+														renderReadOnlyText(undefined, cell)
+													) : (
+														<TextField
+															size="small"
+															value={cell}
+															onChange={(e) =>
+																updateCell(i, columnKey ?? "", e.target.value)
+															}
+															fullWidth
+															disabled={readOnly}
+														/>
+													)}
+												</TableCell>
+											);
+										})}
+										<TableCell>
+											{!readOnly && (
+												<IconButton
+													onClick={() => delRow(i)}
+													size="small"
+													disabled={readOnly}
+												>
+													<DeleteIcon fontSize="small" />
+												</IconButton>
+											)}
+										</TableCell>
+									</TableRow>
+								))}
+								{!readOnly && (
+									<TableRow>
+										<TableCell colSpan={ordered.length + 1}>
+											<Button
+												onClick={addRow}
+												startIcon={<AddIcon />}
+												variant="outlined"
+												size="small"
+												disabled={readOnly}
+											>
+												Add row
+											</Button>
+										</TableCell>
+									</TableRow>
+								)}
+							</TableBody>
+						</Table>
+					</CardContent>
+				</Card>
+			)}
+		</>
+	);
+}
+
+function renderFormControl({
+	input,
+	templateId,
+	values,
+	errors,
+	handleFieldChange,
+	clearTemplateFields,
+	readOnly,
+	sharedCount,
+	isEditMode,
+	disabledFields,
+	setFieldsDisabled,
+}: {
+	input: ProcessTemplateInput;
+	templateId: string;
+	values: FormState;
+	errors: ErrorState;
+	handleFieldChange: (
+		templateId: string,
+		fieldName: string,
+		value: FieldValue,
+	) => void;
+	clearTemplateFields: (templateId: string) => void;
+	readOnly?: boolean;
+	sharedCount?: (count: number) => void;
+	isEditMode?: boolean;
+	disabledFields?: Set<string>;
+	setFieldsDisabled?: (
+		templateId: string,
+		fieldNames: string[],
+		disabled: boolean,
+	) => void;
+}) {
+	const k = templateFieldKey(templateId, input.fieldName ?? "");
+	const err = errors[k] ?? null;
+	const isFieldDisabled = disabledFields?.has(k) ?? false;
+	const finalReadOnly = readOnly || isFieldDisabled;
+
+	console.log("isFieldDisabled", finalReadOnly);
+
+	if (input.inputType === "hidden" || input.inputType === "hidden-number") {
+		return null;
+	}
+
+	if (input.inputType === "checkbox") {
+		return (
+			<CheckboxInput
+				label={input.label ?? ""}
+				checked={Boolean(values[k] ?? false)}
+				setChecked={(v) =>
+					handleFieldChange(templateId, input.fieldName ?? "", v)
+				}
+				helpText={input.helpText ?? ""}
+				readOnly={finalReadOnly}
+			/>
+		);
+	}
+
+	if (input.inputType === "number") {
+		return (
+			<NumberInput
+				label={input.label ?? ""}
+				value={(values[k] as number) ?? ""}
+				setValue={(v) =>
+					handleFieldChange(templateId, input.fieldName ?? "", v as any)
+				}
+				placeholder={input.placeholder ?? ""}
+				helpText={input.helpText ?? ""}
+				error={err}
+				readOnly={finalReadOnly}
+			/>
+		);
+	}
+
+	if (input.inputType === "selector") {
+		return (
+			<SelectorInput
+				fieldName={input.fieldName ?? ""}
+				label={input.label ?? ""}
+				value={(values[k] as string) ?? ""}
+				setValue={(v) =>
+					handleFieldChange(templateId, input.fieldName ?? "", v)
+				}
+				helpText={input.helpText ?? ""}
+				error={err}
+				options={getSelectorOptionsFromInput(input)}
+				readOnly={finalReadOnly}
+			/>
+		);
+	}
+
+	if (input.inputType === "multi-text-search") {
+		const queryName = parseQueryName(input.queryName ?? "");
+		return (
+			<SearchInputWrapper
+				inputType="multi-text-search"
+				queryName={queryName}
+				label={input.label ?? ""}
+				value={(values[k] as string[]) ?? []}
+				setValue={(v: string[]) =>
+					handleFieldChange(templateId, input.fieldName ?? "", v)
+				}
+				placeholder={input.placeholder ?? ""}
+				helpText={input.helpText ?? ""}
+				error={err}
+				handleFieldChange={handleFieldChange}
+				readOnly={readOnly}
+				sharedCountCallBack={(count) => sharedCount?.(count)}
+				isEditMode={isEditMode}
+				setFieldsDisabled={setFieldsDisabled}
+				templateId={templateId}
+				disabledFields={disabledFields}
+				fieldName={input.fieldName ?? ""}
+			/>
+		);
+	}
+
+	if (input.inputType === "text-search") {
+		const queryName = parseQueryName(input.queryName ?? "");
+		return (
+			<SearchInputWrapper
+				inputType="text-search"
+				queryName={queryName}
+				label={input.label ?? ""}
+				value={(values[k] as string) ?? ""}
+				setValue={(v: string) =>
+					handleFieldChange(templateId, input.fieldName ?? "", v)
+				}
+				placeholder={input.placeholder ?? ""}
+				helpText={input.helpText ?? ""}
+				error={err}
+				handleFieldChange={handleFieldChange}
+				clearTemplateFields={clearTemplateFields}
+				readOnly={readOnly}
+				sharedCountCallBack={(count) => sharedCount?.(count)}
+				isEditMode={isEditMode}
+				setFieldsDisabled={setFieldsDisabled}
+				templateId={templateId}
+				disabledFields={disabledFields}
+				fieldName={input.fieldName ?? ""}
+			/>
+		);
+	}
+
+	if (input.inputType === "input-table") {
+		const value = values[k];
+		const rows = (Array.isArray(value) ? value : []) as Array<
+			Record<string, unknown>
+		>;
+
+		// Specifically for "properties" key in values. Need to convert to array. Might need to consider a less specific solution
+		if (value && rows.length === 0 && input.schemas?.length === 2) {
+			for (const schemaKey of Object.keys(value)) {
+				if (input.schemas[0]?.fieldKey && input.schemas[1]?.fieldKey) {
+					const row: Record<string, unknown> = {};
+					row[input.schemas[0].fieldKey] = schemaKey;
+					row[input.schemas[1].fieldKey] = (value as Record<string, string>)[
+						schemaKey
+					];
+					rows.push(row);
+				}
+			}
+		}
+
+		return (
+			<Box>
+				<Typography
+					variant="subtitle2"
+					sx={{ mb: 1, color: err ? "error.main" : "main.900" }}
+				>
+					{input.label}
+				</Typography>
+				<InputTable
+					rows={rows}
+					setRows={(rows) =>
+						handleFieldChange(templateId, input.fieldName ?? "", rows)
+					}
+					schemas={(input.schemas as ProcessTemplateInputSchema[]) ?? []}
+					tableError={err}
+					readOnly={finalReadOnly}
+				/>
+				{!readOnly && input.helpText && !err ? (
+					<FormHelperText sx={{ my: 1, ml: 2 }}>
+						{input.helpText ?? ""}
+					</FormHelperText>
+				) : null}
+				{err ? (
+					<FormHelperText
+						error
+						sx={{ my: 1, ml: 2, whiteSpace: "pre-wrap", fontFamily: "inherit" }}
+					>
+						{String(err)}
+					</FormHelperText>
+				) : null}
+			</Box>
+		);
+	}
+
+	return (
+		<TextInput
+			label={input.label ?? ""}
+			value={(values[k] as string) ?? ""}
+			setValue={(v) => handleFieldChange(templateId, input.fieldName ?? "", v)}
+			placeholder={input.placeholder ?? ""}
+			helpText={input.helpText ?? ""}
+			error={err}
+			readOnly={finalReadOnly}
+		/>
+	);
+}
+
+function arrangeInputs(inputs: ProcessTemplateInput[]): InputRow[] {
+	const ordered = sortBy(inputs);
+
+	const isTableOrHidden = (inp: ProcessTemplateInput) =>
+		inp.inputType === "input-table" || inp.inputType?.startsWith("hidden");
+
+	const isPairable = (inp?: ProcessTemplateInput) =>
+		!!inp && !isTableOrHidden(inp);
+
+	const areConsecutiveSorts = (
+		a?: ProcessTemplateInput,
+		b?: ProcessTemplateInput,
+	) =>
+		!!a &&
+		!!b &&
+		typeof a.sort === "number" &&
+		typeof b.sort === "number" &&
+		b.sort === a.sort + 1;
+
+	const canPairAtAll = ordered.filter(isPairable).length >= 2;
+
+	const rows: InputRow[] = [];
+	for (let i = 0; i < ordered.length; ) {
+		const curr = ordered[i];
+
+		if (!isPairable(curr) || !canPairAtAll) {
+			rows.push({ type: "full", item: curr });
+			i += 1;
+			continue;
+		}
+
+		const next = ordered[i + 1];
+		if (isPairable(next) && areConsecutiveSorts(curr, next)) {
+			rows.push({ type: "pair", items: [curr, next!] });
+			i += 2;
+		} else {
+			rows.push({ type: "full", item: curr });
+			i += 1;
+		}
+	}
+
+	return rows;
+}
+
+export default function PageBody({
+	templateId,
+	page,
+	values,
+	errors,
+	handleFieldChange,
+	clearTemplateFields,
+	readOnly,
+	sharedCount,
+	isEditMode,
+	disabledFields,
+	setFieldsDisabled,
+}: {
+	templateId: string;
+	page: ProcessTemplatePage;
+	values: FormState;
+	errors: ErrorState;
+	handleFieldChange: (
+		templateId: string,
+		fieldName: string,
+		value: FieldValue,
+	) => void;
+	clearTemplateFields: (templateId: string) => void;
+	readOnly?: boolean;
+	isEditMode?: boolean;
+	sharedCount?: (count: number) => void;
+	disabledFields?: Set<string>;
+	setFieldsDisabled?: (
+		templateId: string,
+		fieldNames: string[],
+		disabled: boolean,
+	) => void;
+}) {
+	React.useEffect(
+		function ensureHiddenDefaults() {
+			const hiddenInputs = page.inputs?.filter(
+				(i: ProcessTemplateInput | null) =>
+					i?.inputType === "hidden" || i?.inputType === "hidden-number",
+			);
+
+			if (hiddenInputs) {
+				for (const input of hiddenInputs) {
+					const key = templateFieldKey(templateId, input?.fieldName ?? "");
+					if (values[key] != null) continue;
+
+					switch (input?.fieldName) {
+						case "processTemplateId":
+							handleFieldChange(
+								templateId,
+								input.fieldName ?? "",
+								Number(templateId),
+							);
+							break;
+						default:
+							handleFieldChange(
+								templateId,
+								input?.fieldName ?? "",
+								input?.inputType === "hidden-number"
+									? (0 as FieldValue)
+									: ("" as FieldValue),
+							);
+							break;
+					}
+				}
+			}
+		},
+		[templateId, page.id, page.inputs, values, handleFieldChange],
+	);
+
+	const arrangedInputs = React.useMemo(
+		() => arrangeInputs(page.inputs as ProcessTemplateInput[]),
+		[page.inputs],
+	);
+
+	return (
+		<Box sx={{ display: "grid", rowGap: 3 }}>
+			{arrangedInputs.map((ai: InputRow, idx: number) => {
+				if (ai.type === "full") {
+					return (
+						<Box key={`full-${idx}`} sx={{ width: "100%" }}>
+							{renderFormControl({
+								input: ai.item,
+								templateId,
+								values,
+								errors,
+								handleFieldChange,
+								clearTemplateFields,
+								readOnly,
+								sharedCount,
+								isEditMode,
+								disabledFields,
+								setFieldsDisabled,
+							})}
+						</Box>
+					);
+				}
+
+				const [i, j] = ai.items;
+				return (
+					<Box
+						key={`pair-${idx}`}
+						sx={{
+							display: "grid",
+							gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" },
+							columnGap: 3,
+							rowGap: 3,
+							width: "100%",
+						}}
+					>
+						<Box>
+							{renderFormControl({
+								input: i,
+								templateId,
+								values,
+								errors,
+								handleFieldChange,
+								clearTemplateFields,
+								readOnly,
+								sharedCount,
+								isEditMode,
+								disabledFields,
+								setFieldsDisabled,
+							})}
+						</Box>
+						<Box>
+							{renderFormControl({
+								input: j,
+								templateId,
+								values,
+								errors,
+								handleFieldChange,
+								clearTemplateFields,
+								readOnly,
+								sharedCount,
+								isEditMode,
+								disabledFields,
+								setFieldsDisabled,
+							})}
+						</Box>
+					</Box>
+				);
+			})}
+		</Box>
+	);
+}
+
+const parseQueryName = (queryName: string) => {
+	let result: TemplateInputSearchQueryKey | null = null;
+	const indexOf = queryName.indexOf("(");
+	const qn = queryName.substring(0, indexOf < 0 ? undefined : indexOf);
+
+	if (isTemplateInputSearchQueryKey(qn)) {
+		result = qn as TemplateInputSearchQueryKey;
+		return result;
+	}
+
+	throw new Error(`queryName ${queryName} invalid`);
+};
+
+const renderReadOnlyText = (
+	label?: string,
+	value?: string | string[] | number | null,
+) => {
+	return (
+		<>
+			{value && (
+				<Box>
+					{label && (
+						<Typography color="grey" variant="caption">
+							{label}
+						</Typography>
+					)}
+					<Typography color="inherit" variant="body1">
+						{Array.isArray(value) ? (value as string[]).join(", ") : value}
+					</Typography>
+				</Box>
+			)}
+		</>
+	);
+};