@evenicanpm/admin-integrate 1.3.0 → 1.4.0

package/src/components/scheduler/schedule-drawer/schedule-details-name.tsx

@@ -24,7 +24,7 @@ interface Props {
 	readOnly?: boolean;
 }
 
-export default function ScheduleDetailsName(props: Props) {
+export default function ScheduleDetailsName(props: Readonly<Props>) {
 	const t = useTranslations("Integrate.Scheduler");
 
 	const theme = useTheme();

package/src/components/scheduler/schedule-drawer/schedule-details.tsx

@@ -17,7 +17,7 @@ interface Props {
 	drawerOpen?: DrawerOpen;
 }
 
-export default function ScheduleDetails(props: Props) {
+export default function ScheduleDetails(props: Readonly<Props>) {
 	const theme = useTheme();
 	const styles = getStyles(theme);
 

package/src/components/scheduler/schedule-drawer/schedule-drawer-group.tsx

@@ -34,7 +34,7 @@ interface Props {
 	handleSave?: (loading: boolean) => void;
 }
 
-export default function ScheduleDrawerGroup(props: Props) {
+export default function ScheduleDrawerGroup(props: Readonly<Props>) {
 	const theme = useTheme();
 	const styles = getStyles(theme);
 
@@ -69,11 +69,7 @@ export default function ScheduleDrawerGroup(props: Props) {
 	}, [props.drawerOpen]);
 
 	useEffect(() => {
-		if (
-			props.drawerOpen.addMode &&
-			props.detailsState &&
-			props.detailsState.details === null
-		) {
+		if (props.drawerOpen.addMode && props?.detailsState?.details === null) {
 			props.dispatchDetails({ type: DetailsActionType.INIT_BLANK });
 		}
 	}, []);
@@ -149,9 +145,9 @@ export default function ScheduleDrawerGroup(props: Props) {
 		}
 	};
 
-	const isEdited = Object.values(props.edited).some((value) => value);
+	const isEdited = Object.values(props.edited).some(Boolean);
 	const isError = props.detailsState?.errors
-		? Object.values(props.detailsState.errors).some((value) => value)
+		? Object.values(props.detailsState.errors).some(Boolean)
 		: false;
 
 	return (

package/src/components/scheduler/schedule-drawer/schedule-drawer-legacy.tsx

@@ -18,7 +18,7 @@ interface Props {
 	handleClose: () => void;
 }
 
-export default function ScheduleDrawerLegacy(props: Props) {
+export default function ScheduleDrawerLegacy(props: Readonly<Props>) {
 	const styles = getStyles();
 
 	const { data } = getProcessScheduleById.useData({

package/src/components/scheduler/schedule-drawer/schedule-drawer.tsx

@@ -30,7 +30,7 @@ interface Props {
 	handleSave?: (loading: boolean) => void;
 }
 
-export default function ScheduleDrawer(props: Props) {
+export default function ScheduleDrawer(props: Readonly<Props>) {
 	const t = useTranslations("Integrate.Scheduler");
 
 	const theme = useTheme();
@@ -46,7 +46,7 @@ export default function ScheduleDrawer(props: Props) {
 
 	const handleClose = (confirmClose?: boolean) => {
 		if (confirmClose) {
-			const isEdited = Object.values(edited).some((value) => value);
+			const isEdited = Object.values(edited).some(Boolean);
 			if (isEdited && !props.drawerOpen?.addMode) {
 				const confirmClose = confirm(t("unsavedChanges"));
 				if (!confirmClose) return;

package/src/components/scheduler/schedule-drawer/sortable-integration-row.tsx

@@ -28,7 +28,7 @@ interface Props {
 	nonScheduledMode?: boolean;
 }
 
-export default function SortableIntegrationRow(props: Props) {
+export default function SortableIntegrationRow(props: Readonly<Props>) {
 	const styles = getStyles();
 
 	const { attributes, listeners, setNodeRef, transform, transition } =

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

@@ -1,7 +1,7 @@
 "use client";
 
 import type {
-	GetDataDescriptionsQuery,
+	CheckUniqueIdentifierQuery,
 	GetSourceEndpointsQuery,
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 import { templateInputSearch } from "@evenicanpm/admin-integrate/api/templates/queries";
@@ -28,10 +28,8 @@ import {
 	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";
@@ -60,7 +58,7 @@ export function TextInput({
 	error,
 	helpText,
 	readOnly,
-}: {
+}: Readonly<{
 	label: string;
 	placeholder?: string | null;
 	value: string;
@@ -68,7 +66,7 @@ export function TextInput({
 	error?: string | null;
 	helpText?: string | null;
 	readOnly?: boolean;
-}) {
+}>) {
 	if (readOnly) return renderReadOnlyText(label, value);
 
 	return (
@@ -93,7 +91,7 @@ export function NumberInput({
 	error,
 	helpText,
 	readOnly,
-}: {
+}: Readonly<{
 	label: string;
 	placeholder?: string | null;
 	value: number | "" | null;
@@ -101,7 +99,7 @@ export function NumberInput({
 	error?: string | null;
 	helpText?: string | null;
 	readOnly?: boolean;
-}) {
+}>) {
 	if (readOnly) return renderReadOnlyText(label, value);
 
 	return (
@@ -127,13 +125,13 @@ export function CheckboxInput({
 	setChecked,
 	helpText,
 	readOnly,
-}: {
+}: Readonly<{
 	label: string;
 	checked: boolean;
 	setChecked: (v: boolean) => void;
 	helpText?: string | null;
 	readOnly?: boolean;
-}) {
+}>) {
 	return (
 		<Box>
 			<FormControlLabel
@@ -198,18 +196,18 @@ export function SelectorInput({
 	insideTable = false,
 	minWidth,
 	readOnly,
-}: {
+}: Readonly<{
 	fieldName: string;
 	label: string;
 	value: string;
-	setValue: (v: string) => void;
+	setValue: (v: string | null) => 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}`;
@@ -231,7 +229,7 @@ export function SelectorInput({
 				options={opts}
 				freeSolo={allowFreeText}
 				value={value ?? ""}
-				onChange={(_e, val) => setValue((val as string) ?? "")}
+				onChange={(_e, val) => setValue((val as string | null) ?? "")}
 				onInputChange={(_e, val) => setValue(val)}
 				disabled={readOnly}
 				renderInput={(params) => (
@@ -264,17 +262,20 @@ function SearchInputWrapper({
 	handleFieldChange,
 	clearTemplateFields,
 	readOnly,
-	sharedCountCallBack,
 	isEditMode,
+	isCreateMode,
 	setFieldsDisabled,
 	templateId,
 	disabledFields,
-}: {
+	templateConfig,
+}: Readonly<{
 	fieldName?: string;
-	inputType: "multi-text-search" | "text-search";
+	inputType: "multi-text-search" | "text-search" | "text-unique-identifier";
 	label: string;
-	value: string | string[];
-	setValue: ((v: string) => void) | ((v: string[]) => void);
+	value: string | string[] | null;
+	setValue:
+		| ((v: string | string[] | boolean | null, fieldName?: string) => void)
+		| ((v: string | string[] | boolean | null) => void);
 	placeholder?: string | null;
 	helpText?: string | null;
 	error?: string | null;
@@ -288,6 +289,7 @@ function SearchInputWrapper({
 	readOnly?: boolean;
 	sharedCountCallBack?: (count: number) => void;
 	isEditMode?: boolean;
+	isCreateMode?: boolean;
 	setFieldsDisabled?: (
 		templateId: string,
 		fieldNames: string[],
@@ -295,20 +297,24 @@ function SearchInputWrapper({
 	) => void;
 	templateId?: string;
 	disabledFields?: Set<string>;
-}) {
+	templateConfig?: 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,
-			},
-		},
+		inputType === "text-unique-identifier"
+			? {
+					uniqueIdentifier: searchText,
+				}
+			: {
+					input: {
+						processTemplateId: searchParams.get("template")?.toString() ?? null,
+						searchText: searchText,
+					},
+				},
 		queryName,
 	);
 
@@ -325,25 +331,16 @@ function SearchInputWrapper({
 					);
 					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);
-
+				case "checkUniqueIdentifier": {
+					const typedData = data as CheckUniqueIdentifierQuery;
+					setValue(
+						(typedData.checkUniqueIdentifier?.isUnique ?? null) as
+							| string
+							| string[]
+							| boolean
+							| null,
+						"isUnique",
+					);
 					break;
 				}
 			}
@@ -354,55 +351,6 @@ function SearchInputWrapper({
 		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" && (
@@ -418,8 +366,6 @@ function SearchInputWrapper({
 						setSearchText={setSearchText}
 						readOnly={readOnly}
 					/>
-
-					<SharedWarning sharedCount={sharedCount} />
 				</Box>
 			)}
 
@@ -429,7 +375,9 @@ function SearchInputWrapper({
 						fieldName={fieldName}
 						label={label}
 						value={value as string}
-						setValue={setValue as (v: string) => void}
+						setValue={
+							setValue as (v: string | string[] | boolean | null) => void
+						}
 						options={options}
 						placeholder={placeholder}
 						helpText={helpText}
@@ -442,9 +390,34 @@ function SearchInputWrapper({
 						templateId={templateId}
 						disabledFields={disabledFields}
 						isEditMode={isEditMode}
+						templateConfig={templateConfig}
 					/>
+				</Box>
+			)}
 
-					<SharedWarning sharedCount={sharedCount} />
+			{inputType === "text-unique-identifier" && (
+				<Box sx={{ display: "flex", gap: "10px" }}>
+					<TextSearchInput
+						fieldName={fieldName}
+						label={label}
+						value={value as string}
+						setValue={
+							setValue as (v: string | string[] | boolean | null) => void
+						}
+						options={[]}
+						placeholder={placeholder}
+						helpText={helpText}
+						error={error}
+						setSearchText={setSearchText}
+						handleFieldChange={handleFieldChange}
+						clearTemplateFields={clearTemplateFields}
+						readOnly={isCreateMode === false || readOnly}
+						setFieldsDisabled={setFieldsDisabled}
+						templateId={templateId}
+						disabledFields={disabledFields}
+						isEditMode={isEditMode}
+						templateConfig={templateConfig}
+					/>
 				</Box>
 			)}
 		</>
@@ -494,11 +467,12 @@ export function TextSearchInput({
 	templateId,
 	disabledFields,
 	isEditMode,
-}: {
+	templateConfig,
+}: Readonly<{
 	fieldName?: string;
 	label: string;
 	value: string;
-	setValue: (v: string) => void;
+	setValue: (v: string | string[] | boolean | null) => void;
 	options: SearchOption[];
 	placeholder?: string | null;
 	helpText?: string | null;
@@ -519,7 +493,8 @@ export function TextSearchInput({
 	templateId?: string;
 	disabledFields?: Set<string>;
 	isEditMode?: boolean;
-}) {
+	templateConfig?: string;
+}>) {
 	const searchParams = useSearchParams();
 	const [selected, setSelected] = React.useState<string | null>(value ?? null);
 
@@ -550,6 +525,16 @@ export function TextSearchInput({
 			const option = options.find((o) => o?.name === selected);
 			if (option) {
 				try {
+					const config = JSON.parse(option.templateConfig);
+
+					if (
+						config &&
+						templateConfig //&&
+						//config.dataDescription === inputConfig.dataDescription
+					) {
+						option.templateConfig = templateConfig;
+					}
+
 					// Always apply config (both edit and non-edit modes)
 					applyTemplateConfig(option, handleFieldChange);
 					appliedOptionRef.current = option.name ?? null;
@@ -690,7 +675,7 @@ export function MultiTextSearchInput({
 	error,
 	setSearchText,
 	readOnly,
-}: {
+}: Readonly<{
 	label: string;
 	value: string[];
 	setValue: (v: string[]) => void;
@@ -700,7 +685,7 @@ export function MultiTextSearchInput({
 	error?: string | null;
 	setSearchText: React.Dispatch<React.SetStateAction<string>>;
 	readOnly?: boolean;
-}) {
+}>) {
 	const [input, setInput] = React.useState<string>("");
 
 	const debouncedSetSearchText = React.useMemo(
@@ -719,8 +704,6 @@ export function MultiTextSearchInput({
 		_e: React.SyntheticEvent,
 		val: string[],
 	) => {
-		console.log("onSelect log", val);
-
 		setValue(val);
 		debouncedSetSearchText("");
 	};
@@ -763,13 +746,13 @@ export function InputTable({
 	schemas,
 	tableError,
 	readOnly,
-}: {
+}: 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],
@@ -820,7 +803,7 @@ export function InputTable({
 							</TableHead>
 							<TableBody>
 								{(rows ?? []).map((r: Record<string, any>, i: number) => (
-									<TableRow key={i}>
+									<TableRow key={`table-row-${i + 1}`}>
 										{ordered.map((s: ProcessTemplateInputSchema) => {
 											const columnKey = s.fieldKey ?? s.label;
 											const cell = columnKey ? r[columnKey] : "";
@@ -924,9 +907,11 @@ function renderFormControl({
 	readOnly,
 	sharedCount,
 	isEditMode,
+	isCreateMode,
 	disabledFields,
 	setFieldsDisabled,
-}: {
+	templateConfig,
+}: Readonly<{
 	input: ProcessTemplateInput;
 	templateId: string;
 	values: FormState;
@@ -940,21 +925,25 @@ function renderFormControl({
 	readOnly?: boolean;
 	sharedCount?: (count: number) => void;
 	isEditMode?: boolean;
+	isCreateMode?: boolean;
 	disabledFields?: Set<string>;
 	setFieldsDisabled?: (
 		templateId: string,
 		fieldNames: string[],
 		disabled: boolean,
 	) => void;
-}) {
+	templateConfig?: string;
+}>) {
 	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") {
+	if (
+		input.inputType === "hidden" ||
+		input.inputType === "hidden-number" ||
+		input.inputType === "hidden-number-or-null"
+	) {
 		return null;
 	}
 
@@ -1013,7 +1002,7 @@ function renderFormControl({
 				queryName={queryName}
 				label={input.label ?? ""}
 				value={(values[k] as string[]) ?? []}
-				setValue={(v: string[]) =>
+				setValue={(v: string | string[] | boolean | null) =>
 					handleFieldChange(templateId, input.fieldName ?? "", v)
 				}
 				placeholder={input.placeholder ?? ""}
@@ -1027,6 +1016,7 @@ function renderFormControl({
 				templateId={templateId}
 				disabledFields={disabledFields}
 				fieldName={input.fieldName ?? ""}
+				templateConfig={templateConfig}
 			/>
 		);
 	}
@@ -1039,7 +1029,7 @@ function renderFormControl({
 				queryName={queryName}
 				label={input.label ?? ""}
 				value={(values[k] as string) ?? ""}
-				setValue={(v: string) =>
+				setValue={(v: string | string[] | boolean | null) =>
 					handleFieldChange(templateId, input.fieldName ?? "", v)
 				}
 				placeholder={input.placeholder ?? ""}
@@ -1054,6 +1044,43 @@ function renderFormControl({
 				templateId={templateId}
 				disabledFields={disabledFields}
 				fieldName={input.fieldName ?? ""}
+				templateConfig={templateConfig}
+			/>
+		);
+	}
+
+	if (input.inputType === "text-unique-identifier") {
+		const queryName = parseQueryName(input.queryName ?? "");
+		return (
+			<SearchInputWrapper
+				inputType="text-unique-identifier"
+				queryName={queryName}
+				label={input.label ?? ""}
+				value={(values[k] as string) ?? ""}
+				setValue={(
+					v: string | string[] | boolean | null,
+					fieldName?: string,
+				) => {
+					if (fieldName) {
+						handleFieldChange(templateId, fieldName, v);
+					} else {
+						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}
+				isCreateMode={isCreateMode}
+				setFieldsDisabled={setFieldsDisabled}
+				templateId={templateId}
+				disabledFields={disabledFields}
+				fieldName={input.fieldName ?? ""}
+				templateConfig={templateConfig}
 			/>
 		);
 	}
@@ -1179,9 +1206,11 @@ export default function PageBody({
 	readOnly,
 	sharedCount,
 	isEditMode,
+	isCreateMode,
 	disabledFields,
 	setFieldsDisabled,
-}: {
+	templateConfig,
+}: Readonly<{
 	templateId: string;
 	page: ProcessTemplatePage;
 	values: FormState;
@@ -1194,6 +1223,7 @@ export default function PageBody({
 	clearTemplateFields: (templateId: string) => void;
 	readOnly?: boolean;
 	isEditMode?: boolean;
+	isCreateMode?: boolean;
 	sharedCount?: (count: number) => void;
 	disabledFields?: Set<string>;
 	setFieldsDisabled?: (
@@ -1201,12 +1231,15 @@ export default function PageBody({
 		fieldNames: string[],
 		disabled: boolean,
 	) => void;
-}) {
+	templateConfig?: string;
+}>) {
 	React.useEffect(
 		function ensureHiddenDefaults() {
 			const hiddenInputs = page.inputs?.filter(
 				(i: ProcessTemplateInput | null) =>
-					i?.inputType === "hidden" || i?.inputType === "hidden-number",
+					i?.inputType === "hidden" ||
+					i?.inputType === "hidden-number" ||
+					i?.inputType === "hidden-number-or-null",
 			);
 
 			if (hiddenInputs) {
@@ -1228,7 +1261,9 @@ export default function PageBody({
 								input?.fieldName ?? "",
 								input?.inputType === "hidden-number"
 									? (0 as FieldValue)
-									: ("" as FieldValue),
+									: input?.inputType === "hidden-number-or-null"
+										? null
+										: ("" as FieldValue),
 							);
 							break;
 					}
@@ -1248,7 +1283,7 @@ export default function PageBody({
 			{arrangedInputs.map((ai: InputRow, idx: number) => {
 				if (ai.type === "full") {
 					return (
-						<Box key={`full-${idx}`} sx={{ width: "100%" }}>
+						<Box key={`full-${idx + 1}`} sx={{ width: "100%" }}>
 							{renderFormControl({
 								input: ai.item,
 								templateId,
@@ -1259,8 +1294,10 @@ export default function PageBody({
 								readOnly,
 								sharedCount,
 								isEditMode,
+								isCreateMode,
 								disabledFields,
 								setFieldsDisabled,
+								templateConfig,
 							})}
 						</Box>
 					);
@@ -1269,7 +1306,7 @@ export default function PageBody({
 				const [i, j] = ai.items;
 				return (
 					<Box
-						key={`pair-${idx}`}
+						key={`pair-${idx + 1}`}
 						sx={{
 							display: "grid",
 							gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" },
@@ -1289,8 +1326,10 @@ export default function PageBody({
 								readOnly,
 								sharedCount,
 								isEditMode,
+								isCreateMode,
 								disabledFields,
 								setFieldsDisabled,
+								templateConfig,
 							})}
 						</Box>
 						<Box>
@@ -1304,8 +1343,10 @@ export default function PageBody({
 								readOnly,
 								sharedCount,
 								isEditMode,
+								isCreateMode,
 								disabledFields,
 								setFieldsDisabled,
+								templateConfig,
 							})}
 						</Box>
 					</Box>