@evenicanpm/admin-integrate 2.4.1 → 2.5.0

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

@@ -28,8 +28,10 @@ BaseNodeHeader.displayName = "BaseNodeHeader";
 export const BaseNodeHeaderTitle = forwardRef<
 	HTMLHeadingElement,
 	HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-	<h3 ref={ref} data-slot="base-node-title" {...props} />
+>(({ className, children, ...props }, ref) => (
+	<h3 ref={ref} data-slot="base-node-title" {...props}>
+		{children}
+	</h3>
 ));
 BaseNodeHeaderTitle.displayName = "BaseNodeHeaderTitle";
 

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

@@ -50,13 +50,13 @@ export function TaskNode(props: NodeProps): React.ReactElement {
 				>
 					{mapIconByOrchestrationType(
 						(props?.data?.processTask as ProcessTask)?.orchestrationType
-							?.code as string,
+							?.code ?? undefined,
 					)}
 					<Typography
 						variant="h6"
 						sx={{ textAlign: "center", paddingLeft: theme.spacing(1) }}
 					>
-						{(props?.data?.processTask as ProcessTask)?.name as string}
+						{(props?.data?.processTask as ProcessTask)?.name}
 					</Typography>
 				</CardContent>
 				<Handle type="target" position={Position.Top} />
@@ -71,8 +71,7 @@ export function TaskNode(props: NodeProps): React.ReactElement {
 						document.dispatchEvent(
 							new CustomEvent("addItem", {
 								detail: {
-									sort: (props?.data?.processTask as ProcessTask)
-										?.sort as number,
+									sort: (props?.data?.processTask as ProcessTask)?.sort,
 									paralellelProcessingGroup: (
 										props?.data?.processTask as ProcessTask
 									)?.parallelProcessingGroup,

package/src/components/integration-view/task-icon.tsx

@@ -31,6 +31,17 @@ export const mapIconByOrchestrationType = (code: string | undefined) => {
 			return inputIcon();
 	}
 
+	const icon =
+		code === "PubSubPush" ? (
+			<FileUploadIcon sx={{ color: dark }} />
+		) : code === "PubSubPull" ? (
+			<DownloadIcon sx={{ color: dark }} />
+		) : code === "SQLProcess" ? (
+			<StorageIcon sx={{ color: dark }} />
+		) : code === "ExportStaged" ? (
+			<IosShareIcon sx={{ color: dark }} />
+		) : null;
+
 	return (
 		<Box
 			sx={{
@@ -45,15 +56,7 @@ export const mapIconByOrchestrationType = (code: string | undefined) => {
 				padding: "2px",
 			}}
 		>
-			{code === "PubSubPush" ? (
-				<FileUploadIcon sx={{ color: dark }} />
-			) : code === "PubSubPull" ? (
-				<DownloadIcon sx={{ color: dark }} />
-			) : code === "SQLProcess" ? (
-				<StorageIcon sx={{ color: dark }} />
-			) : code === "ExportStaged" ? (
-				<IosShareIcon sx={{ color: dark }} />
-			) : null}
+			{icon}
 		</Box>
 	);
 };

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

@@ -4,7 +4,6 @@ import type {
 	ConfigExport,
 	Process,
 	ProcessExecutionDetails,
-	ProcessExport,
 	ProcessTask,
 	ProcessTaskExecution,
 	ProcessTaskExport,
@@ -31,7 +30,6 @@ type BuildNodeMapper = (
 	partitionLen: number,
 	parentId: string,
 ) => ElkNodeWithFlow;
-export type AddHandler = unknown;
 const asIdentifierString = (value: unknown) =>
 	typeof value === "string" || typeof value === "number" ? String(value) : "";
 
@@ -159,7 +157,7 @@ function buildGroupsAndEdges({
 	getGroupTasks: BuildGroupsTask;
 	// nodeWidth: number,
 	variant: "process" | "process-execution";
-	onAdd?: AddHandler;
+	onAdd?: unknown;
 	mapTaskToNode: BuildNodeMapper;
 	groupSortKey: string;
 	taskIdKey: string;
@@ -259,9 +257,9 @@ export const mapProcessConfigToNodesAndEdges = (
 	data: ConfigExport,
 	nodeWidth: number,
 	variant: "process" | "process-execution",
-	onAdd?: AddHandler,
+	onAdd?: unknown,
 ) => {
-	const process = data.Processes?.[0] as ProcessExport;
+	const process = data.Processes?.[0];
 	const entryPoint: ElkNodeWithFlow = {
 		id: "entry-point",
 		type: "entry-node",
@@ -312,7 +310,7 @@ export const mapProcessConfigToNodesAndEdges = (
 		) => ({
 			id: `task-${asIdentifierString(task.ProcessTaskId ?? task.Name)}`,
 			data: {
-				processTask: mapToCamelCase(task as ProcessTaskExport) || undefined,
+				processTask: mapToCamelCase(task) || undefined,
 				label: task?.Name as string,
 				isLast: onAdd ? index === partitionLen - 1 : false,
 			},

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

@@ -359,7 +359,7 @@ const ListFilter = function ListFilter<FilterShape extends Filters>(
 					onChange={(e) => handlePerPageUpdate(e.target.value as number)}
 				>
 					{pageOptions.map((option) => (
-						<MenuItem value={option}>
+						<MenuItem key={option} value={option}>
 							{option} {t("itemsPerPage")}
 						</MenuItem>
 					))}

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

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

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

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

package/src/components/scheduler/schedule-drawer/details-reducer.ts

@@ -85,7 +85,7 @@ export function detailsReducer(
 				...state,
 				details,
 				errors: {
-					name: !details.name || details.name === "",
+					name: !details.name,
 					startDate: !details.startDate,
 					interval: !details.interval,
 					processes: !details.processes || details.processes.length === 0,
@@ -107,7 +107,7 @@ export function detailsReducer(
 				...state,
 				details: blankState,
 				errors: {
-					name: !blankState.name || blankState.name === "",
+					name: !blankState.name,
 					processes: !blankState.processes || blankState.processes.length === 0,
 				},
 			};

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

@@ -110,6 +110,12 @@ export default function ScheduleDetailsIntegrations(props: Readonly<Props>) {
 		}),
 	);
 
+	const markIntegrationsEdited = () => {
+		if (!props.edited.integrations) {
+			props.setEdited({ ...props.edited, integrations: true });
+		}
+	};
+
 	// Drag and drop
 	function handleDragEnd(event: DragEndEvent) {
 		if (props.dispatchDetails && props.details.processes) {
@@ -128,12 +134,7 @@ export default function ScheduleDetailsIntegrations(props: Readonly<Props>) {
 				};
 				props.dispatchDetails(action);
 
-				if (!props.edited.integrations) {
-					props.setEdited({
-						...props.edited,
-						integrations: true,
-					});
-				}
+				markIntegrationsEdited();
 			}
 		}
 	}
@@ -198,12 +199,7 @@ export default function ScheduleDetailsIntegrations(props: Readonly<Props>) {
 					(props.details.processes ? props.details.processes.length : 0) + 1,
 			};
 
-			if (!props.edited.integrations) {
-				props.setEdited({
-					...props.edited,
-					integrations: true,
-				});
-			}
+			markIntegrationsEdited();
 
 			const newProcesses = [...(props.details.processes || []), updatedItem];
 			const action: EditIntegrationsAction = {
@@ -225,12 +221,7 @@ export default function ScheduleDetailsIntegrations(props: Readonly<Props>) {
 
 	const handleDeleteIntegration = (item: Process) => {
 		if (props.dispatchDetails && props.details.processes) {
-			if (!props.edited.integrations) {
-				props.setEdited({
-					...props.edited,
-					integrations: true,
-				});
-			}
+			markIntegrationsEdited();
 
 			const newProcesses = props.details.processes.filter(
 				(process) => process.id !== item.id,
@@ -241,13 +232,11 @@ export default function ScheduleDetailsIntegrations(props: Readonly<Props>) {
 			};
 			props.dispatchDetails(action);
 
-			if (newProcesses.length === 0) {
-				const clearErrorAction: SetErrorsAction = {
-					type: DetailsActionType.SET_ERRORS,
-					errors: { processes: true },
-				};
-				props.dispatchDetails(clearErrorAction);
-			}
+			const clearErrorAction: SetErrorsAction = {
+				type: DetailsActionType.SET_ERRORS,
+				errors: { processes: newProcesses.length === 0 },
+			};
+			props.dispatchDetails(clearErrorAction);
 		}
 	};
 

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

@@ -275,7 +275,7 @@ export default function ScheduleDetailsMain(props: Readonly<Props>) {
 					</Stack>
 					<Stack direction="row" spacing={1} alignItems="flex-start">
 						<TextField
-							value={props.details?.interval as number}
+							value={props.details?.interval}
 							onChange={handleIntervalChange}
 							error={props.errors?.interval}
 							helperText={props.errors?.interval ? t("invalidInterval") : ""}
@@ -290,7 +290,7 @@ export default function ScheduleDetailsMain(props: Readonly<Props>) {
 							disabled={props.readOnly}
 						/>
 						<Select
-							value={props.details?.intervalUnitId as string}
+							value={props.details?.intervalUnitId ?? undefined}
 							onChange={handleIntervalUnitChange}
 							sx={styles.recurrenceUnit}
 							disabled={props.readOnly}

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

@@ -4,8 +4,8 @@ import type {
 	ProcessScheduleGroupDetailsUpdate,
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 import {
-	createProcessScheduleGroupDetails,
-	updateProcessScheduleGroupDetails,
+	useCreateProcessScheduleGroupDetails,
+	useUpdateProcessScheduleGroupDetails,
 } from "@evenicanpm/admin-integrate/api/scheduler/mutation";
 import { getProcessScheduleGroupDetails } from "@evenicanpm/admin-integrate/api/scheduler/queries";
 import { DrawerButtons } from "@evenicanpm/admin-integrate/components/core";
@@ -74,8 +74,8 @@ export default function ScheduleDrawerGroup(props: Readonly<Props>) {
 		}
 	}, []);
 
-	const updateMutation = updateProcessScheduleGroupDetails();
-	const createMutation = createProcessScheduleGroupDetails();
+	const updateMutation = useUpdateProcessScheduleGroupDetails();
+	const createMutation = useCreateProcessScheduleGroupDetails();
 
 	const handleSave = () => {
 		if (props.detailsState?.details?.processes) {

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

@@ -31,7 +31,7 @@ export default function ScheduleDrawerLegacy(props: Readonly<Props>) {
 			if (typedData.processScheduleById) {
 				const fetchedDetails = typedData.processScheduleById;
 
-				props.setDetails(fetchedDetails as ProcessScheduleById);
+				props.setDetails(fetchedDetails);
 			} else {
 				props.setDetails(null);
 			}

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

@@ -29,9 +29,9 @@ function isHiddenInput(input: ProcessTemplateInput | null): boolean {
 function getDefaultHiddenFieldValue(
 	input: ProcessTemplateInput | null,
 ): FieldValue {
-	if (input?.inputType === InputType.HIDDEN_NUMBER) return 0 as FieldValue;
+	if (input?.inputType === InputType.HIDDEN_NUMBER) return 0;
 	if (input?.inputType === InputType.HIDDEN_NUMBER_OR_NULL) return null;
-	return "" as FieldValue;
+	return "";
 }
 
 export function FormikPageBody({

package/src/components/templatesV2/inputs/primitives/SelectorInput.tsx

@@ -75,15 +75,14 @@ export function SelectorInput({
 				disablePortal={insideTable}
 				options={opts}
 				getOptionLabel={getOptionLabel}
-				isOptionEqualToValue={(opt, v) =>
-					v == null
-						? false
-						: opt === v ||
-							optionEquals(opt, typeof v === "string" ? v : getOptionValue(v))
-				}
+				isOptionEqualToValue={(opt, v) => {
+					if (v == null) return false;
+					const vValue = typeof v === "string" ? v : getOptionValue(v);
+					return opt === v || optionEquals(opt, vValue);
+				}}
 				freeSolo={allowFreeText}
 				value={selectedOption ?? null}
-				onChange={(_e, val) => setValue(val != null ? getOptionValue(val) : "")}
+				onChange={(_e, val) => setValue(val == null ? "" : getOptionValue(val))}
 				onInputChange={(_e, val) => setValue(val)}
 				disabled={disabled ?? readOnly}
 				renderInput={(params) => (

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

@@ -8,7 +8,6 @@ import type {
 	FieldValue,
 	FormState,
 	ProcessTemplateInput,
-	ProcessTemplateInputSchema,
 } from "../../types";
 import { templateFieldKey } from "../../types";
 import { InputType } from "../input-type";
@@ -25,6 +24,8 @@ import {
 } from "../utils/selectors";
 import { renderSearchInput } from "./renderSearchInput";
 
+type RowValue = string | number | boolean | null | undefined;
+
 const QUERY_NAME_INPUT_TYPES = [
 	InputType.TEXT,
 	InputType.TEXT_UNIQUE_IDENTIFIER,
@@ -76,13 +77,9 @@ function queryInputType(
 function normalizeInputTableRows(
 	value: unknown,
 	input: ProcessTemplateInput,
-): 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>
-			>)
+): Array<Record<string, RowValue>> {
+	const rows: Array<Record<string, RowValue>> = Array.isArray(value)
+		? (value as Array<Record<string, RowValue>>)
 		: [];
 	if (!value || rows.length > 0 || (input.schemas?.length ?? 0) !== 2) {
 		return rows;
@@ -161,7 +158,7 @@ function renderInputTable({
 						newRows as Array<Record<string, string>>,
 					)
 				}
-				schemas={(input.schemas as ProcessTemplateInputSchema[]) ?? []}
+				schemas={input.schemas?.filter((s) => s != null) ?? []}
 				tableError={tableErrorToShow ?? null}
 				rowErrors={rowErrorsToShow}
 				readOnly={finalReadOnly}

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

@@ -155,6 +155,8 @@ export function InputTable({
 													s.fieldKey ?? s.label ?? `col_${colIndex}`;
 												const cell = r[columnKey];
 												const cellError = rowErrors?.[i]?.[columnKey] ?? null;
+												const cellDisplayValue =
+													typeof cell === "boolean" ? String(cell) : cell;
 												if (s.inputType === InputType.CHECKBOX) {
 													return (
 														<TableCell key={s.id}>
@@ -207,10 +209,7 @@ export function InputTable({
 												return (
 													<TableCell key={s.id}>
 														{readOnly ? (
-															renderReadOnlyText(
-																undefined,
-																typeof cell === "boolean" ? String(cell) : cell,
-															)
+															renderReadOnlyText(undefined, cellDisplayValue)
 														) : (
 															<TextField
 																size="small"

package/src/components/templatesV2/inputs/utils/parseQueryName.ts

@@ -9,11 +9,11 @@ export function parseQueryName(queryName: string): TemplateInputSearchQueryKey {
 	const qn = queryName.substring(0, indexOf < 0 ? undefined : indexOf).trim();
 
 	if (isTemplateInputSearchQueryKey(qn)) {
-		return qn as TemplateInputSearchQueryKey;
+		return qn;
 	}
 	const mapped = qn ? TEMPLATE_QUERY_NAME_TO_KEY[qn] : undefined;
 	if (mapped !== undefined) {
-		return mapped as TemplateInputSearchQueryKey;
+		return mapped;
 	}
 
 	throw new Error(`queryName ${queryName} invalid`);

package/src/components/templatesV2/inputs/utils/selectors.ts

@@ -22,7 +22,7 @@ export function getSelectorOptionsFromInput(
 
 	const raw = schemaWithOptions?.options;
 	if (raw == null) return [];
-	if (!Array.isArray(raw)) return toStringArray(raw) as string[];
+	if (!Array.isArray(raw)) return toStringArray(raw);
 
 	const result: SelectorOption[] = [];
 	for (const item of raw) {

package/src/components/templatesV2/pageForm.tsx

@@ -7,6 +7,90 @@ import type { FlatPage, FormState } from "./types";
 import { buildZodSchemaForPage } from "./validation/buildZodSchema";
 import { zodFormikValidate } from "./validation/zodFormikValidate";
 
+type PageFormContentProps = Readonly<{
+	formik: FormikProps<FormState>;
+	formikRef: React.MutableRefObject<FormikProps<FormState> | null>;
+	submit: () => Promise<boolean>;
+	stepKey: string;
+	templateId: string;
+	page: FlatPage;
+	setSubmitRef?: (fn: (() => Promise<boolean>) | undefined) => void;
+	setPageValidity?: (valid: boolean) => void;
+	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 }
+	>;
+}>;
+
+function PageFormContent({
+	formik,
+	formikRef,
+	submit,
+	stepKey,
+	templateId,
+	page,
+	setSubmitRef,
+	setPageValidity,
+	clearTemplateFields,
+	readOnly,
+	isEditMode,
+	isCreateMode,
+	disabledFields,
+	setFieldsDisabled,
+	templateConfig,
+	setFieldValidationInProgress,
+	submitValidationResults,
+}: PageFormContentProps) {
+	formikRef.current = formik;
+
+	useEffect(() => {
+		if (setSubmitRef) setSubmitRef(submit);
+		return () => {
+			if (setSubmitRef) setSubmitRef(undefined);
+		};
+	}, [submit, setSubmitRef]);
+
+	useEffect(() => {
+		if (setPageValidity) setPageValidity(true);
+	}, [stepKey, setPageValidity]);
+
+	// Keep Next button enabled so user can always click it. Validation runs on Next click (submit).
+	// We do not disable Next based on errors; errors show after they click Next or touch a field.
+	useEffect(() => {
+		if (setPageValidity) setPageValidity(true);
+	}, [setPageValidity]);
+
+	return (
+		<form onSubmit={formik.handleSubmit}>
+			<FormikPageBody
+				templateId={templateId}
+				page={page}
+				clearTemplateFields={() => clearTemplateFields(templateId)}
+				readOnly={readOnly}
+				isEditMode={isEditMode}
+				isCreateMode={isCreateMode}
+				disabledFields={disabledFields}
+				setFieldsDisabled={setFieldsDisabled}
+				templateConfig={templateConfig}
+				setFieldValidationInProgress={setFieldValidationInProgress}
+				submitValidationResults={submitValidationResults}
+			/>
+		</form>
+	);
+}
+
 export default function PageForm({
 	templateId,
 	page,
@@ -112,40 +196,26 @@ export default function PageForm({
 			}}
 		>
 			{(formik) => {
-				formikRef.current = formik as FormikProps<FormState>;
-				useEffect(() => {
-					if (setSubmitRef) setSubmitRef(submit);
-					return () => {
-						if (setSubmitRef) setSubmitRef(undefined);
-					};
-				}, [submit, setSubmitRef]);
-
-				useEffect(() => {
-					if (setPageValidity) setPageValidity(true);
-				}, [stepKey, setPageValidity]);
-
-				// Keep Next button enabled so user can always click it. Validation runs on Next click (submit).
-				// We do not disable Next based on errors; errors show after they click Next or touch a field.
-				useEffect(() => {
-					if (setPageValidity) setPageValidity(true);
-				}, [setPageValidity]);
-
 				return (
-					<form onSubmit={formik.handleSubmit}>
-						<FormikPageBody
-							templateId={templateId}
-							page={page}
-							clearTemplateFields={() => clearTemplateFields(templateId)}
-							readOnly={readOnly}
-							isEditMode={isEditMode}
-							isCreateMode={isCreateMode}
-							disabledFields={disabledFields}
-							setFieldsDisabled={setFieldsDisabled}
-							templateConfig={templateConfig}
-							setFieldValidationInProgress={setFieldValidationInProgress}
-							submitValidationResults={submitValidationResults}
-						/>
-					</form>
+					<PageFormContent
+						formik={formik as FormikProps<FormState>}
+						formikRef={formikRef}
+						submit={submit}
+						stepKey={stepKey}
+						templateId={templateId}
+						page={page}
+						setSubmitRef={setSubmitRef}
+						setPageValidity={setPageValidity}
+						clearTemplateFields={clearTemplateFields}
+						readOnly={readOnly}
+						isEditMode={isEditMode}
+						isCreateMode={isCreateMode}
+						disabledFields={disabledFields}
+						setFieldsDisabled={setFieldsDisabled}
+						templateConfig={templateConfig}
+						setFieldValidationInProgress={setFieldValidationInProgress}
+						submitValidationResults={submitValidationResults}
+					/>
 				);
 			}}
 		</Formik>

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

@@ -89,7 +89,7 @@ export default function TemplatesList(props: Readonly<Props>) {
 			skip: 0,
 			search: search,
 		});
-		setPerPage(itemsPerPage as number);
+		setPerPage(itemsPerPage || 10);
 		setPage(1);
 	};
 
@@ -189,7 +189,7 @@ export default function TemplatesList(props: Readonly<Props>) {
 							<TablePagination
 								page={page}
 								onChange={handleChangePage}
-								count={Math.ceil(recordCount / (props.input.top as number))}
+								count={Math.ceil(recordCount / (props.input.top || 10))}
 							/>
 						</FlexBox>
 					</Grid>

package/src/components/templatesV2/wizard.tsx

@@ -31,7 +31,6 @@ import {
 	type ProcessTemplate,
 	type ProcessTemplateInputSchema,
 	type ProcessTemplatePage,
-	type SearchOption,
 	sortBy,
 	templateFieldKey,
 } from "./types";
@@ -136,7 +135,7 @@ function getInitialValuesFromTemplates(
 					input?.defaultValue !== null &&
 					!newInitialValues[key]
 				) {
-					newInitialValues[key] = input.defaultValue as FieldValue;
+					newInitialValues[key] = input.defaultValue;
 				}
 			});
 		});
@@ -429,9 +428,9 @@ export default function Wizard({ metadata, sharedCount, ...props }: Props) {
 			const config = JSON.parse(props.templateConfig);
 			applyTemplateConfig(
 				{
-					name: config.taskName as string,
+					name: config.taskName,
 					templateConfig: props.templateConfig,
-				} as SearchOption,
+				},
 				(templateId: string, fieldName: string, value: FieldValue) => {
 					const key = templateFieldKey(templateId, fieldName);
 					setInitialValues((prev) => ({ ...prev, [key]: value }));