@evenicanpm/admin-integrate 1.8.1 → 2.0.1

package/src/pages/dashboard/dashboard-link-cards.tsx

@@ -9,7 +9,6 @@ import {
 // MUI
 import { Box, Grid2 as Grid, type Theme, useTheme } from "@mui/material";
 import { useTranslations } from "next-intl";
-import React from "react";
 
 const breakpoints = {
 	xs: 6,

package/src/pages/dashboard/dashboard-list-sections.tsx

@@ -11,7 +11,7 @@ import SnackbarAlert, {
 import { getProcessExecutions } from "@evenicanpm/admin-integrate/api/dashboard/queries";
 import DashboardList from "@evenicanpm/admin-integrate/components/dashboard-list";
 import { useTranslations } from "next-intl";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 const defaultInput: ProcessExecutionInput = {
 	sort: "startDate",

package/src/pages/dashboard/dashboard.tsx

@@ -1,7 +1,6 @@
 // Local page components
 import DashboardLinkCards from "@evenicanpm/admin-integrate/pages/dashboard/dashboard-link-cards";
 import DashboardListSections from "@evenicanpm/admin-integrate/pages/dashboard/dashboard-list-sections";
-import React from "react";
 
 export default function IntegrateDashboard() {
 	return (

package/src/pages/executions/executions-list/executions-list-table.tsx

@@ -6,7 +6,6 @@ import { TableHeader } from "@evenicanpm/admin-integrate/components/data-table";
 import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
 // MUI
 import { type SxProps, Table, TableBody, TableContainer } from "@mui/material";
-import React from "react";
 import type { Item } from "./executions-list";
 
 // Local components

package/src/pages/executions/executions.tsx

@@ -15,7 +15,7 @@ import type { Head } from "@evenicanpm/admin-integrate/components/data-table/tab
 // MUI
 import { Box } from "@mui/material";
 import { useTranslations } from "next-intl";
-import React, { useState } from "react";
+import { useState } from "react";
 // Local components
 import ExecutionsList from "./executions-list";
 

package/src/pages/integration-create/integration-create-steps.ts

@@ -0,0 +1,8 @@
+export const INTEGRATION_CREATE_STEPS = {
+	select: 0,
+	templateOptions: 1,
+	sourceTemplateList: 2,
+	targetTemplateList: 3,
+	wizard: 4,
+	preCreation: 5,
+} as const;

package/src/pages/integration-create/integration-create.tsx

@@ -1,5 +1,6 @@
 import type {
 	ConfigExport,
+	ConfigImport,
 	ConfigurationMergeMutationVariables,
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 import {
@@ -11,16 +12,19 @@ import {
 	IntegrateBreadcrumbs,
 } from "@evenicanpm/admin-integrate/components/breadcrumbs";
 import { IntegrationDetailsHeader } from "@evenicanpm/admin-integrate/components/header";
-import { removeTemplateConfig } from "@evenicanpm/admin-integrate/components/templates/wizard";
+import type { ProcessConfigMerge } from "@evenicanpm/admin-integrate/components/templatesV2/types";
+import { removeTemplateConfig } from "@evenicanpm/admin-integrate/components/templatesV2/wizard";
 import { slugify } from "@evenicanpm/admin-integrate/utils/slugify";
 import { Clear, SaveOutlined } from "@mui/icons-material";
 import { Box, Button, type Theme, useTheme } from "@mui/material";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useTranslations } from "next-intl";
-import { useEffect, useState } from "react";
+import { type SetStateAction, useEffect, useState } from "react";
+import { INTEGRATION_CREATE_STEPS } from "./integration-create-steps";
 import PreCreationStep from "./pre-creation-step";
 import SelectStep from "./select-step";
-import TemplateListStep from "./template-list-step";
+import TemplateListStep, { DirectionType } from "./template-list-step";
+import TemplateOptionsStep from "./template-options-step";
 import WizardStep from "./wizard-step";
 
 export default function IntegrationCreate() {
@@ -50,27 +54,38 @@ export default function IntegrationCreate() {
 	];
 
 	const [name, setName] = useState<string>("");
-	const [step, setStep] = useState<number>(0);
-	const [processConfig, setProcessConfig] = useState<any | null>(null);
+	const [step, setStep] = useState<number>(INTEGRATION_CREATE_STEPS.select);
+	const [processConfig, setProcessConfig] = useState<ConfigExport | null>(null);
+	const [dualSourceThenTarget, setDualSourceThenTarget] = useState(false);
 
 	useEffect(() => {
 		if (searchParams.get("group")) {
-			setStep(2);
+			setStep(INTEGRATION_CREATE_STEPS.wizard);
 		}
 	}, [searchParams]);
 
+	useEffect(() => {
+		if (step === INTEGRATION_CREATE_STEPS.templateOptions) {
+			setDualSourceThenTarget(false);
+		}
+	}, [step]);
+
 	const handleCancel = () => {
-		if (step > 0) {
+		if (step > INTEGRATION_CREATE_STEPS.select) {
 			const confirmClose = confirm(t("Common.unsavedChanges"));
 			if (!confirmClose) return;
-			setStep(0);
+			setStep(INTEGRATION_CREATE_STEPS.select);
+			setDualSourceThenTarget(false);
 			router.replace(pathname);
 		} else {
 			router.push("/e4integrate/integrations");
 		}
 	};
 
-	const handleProcessConfigMerge = (configMergeInput: any) => {
+	const handleProcessConfigMerge = (
+		configMergeInput: SetStateAction<ProcessConfigMerge | null>,
+	) => {
+		if (!configMergeInput || typeof configMergeInput === "function") return;
 		const newProcessConfigMerge = { ...configMergeInput };
 		const code = slugify(name);
 		for (const c of newProcessConfigMerge.input.config) {
@@ -80,13 +95,13 @@ export default function IntegrationCreate() {
 
 		console.log("configMergeInput", configMergeInput);
 
-		let sourceName = configMergeInput?.input?.config?.find(
-			(item: any) => (item?.source as string)?.toLowerCase() === "source",
+		const sourceName = configMergeInput?.input?.config?.find(
+			(item) => (item?.source as string)?.toLowerCase() === "source",
 		)?.uniqueIdentifier;
 
 		if (sourceName) {
-			configMergeInput.input.config = configMergeInput.input!.config!.map(
-				(item: any) => {
+			configMergeInput.input.config = configMergeInput.input.config.map(
+				(item) => {
 					if (item?.queues) {
 						return {
 							...item,
@@ -108,10 +123,7 @@ export default function IntegrationCreate() {
 			{
 				onSuccess: ({ configurationMerge }) => {
 					console.log("configurationMerge", configurationMerge);
-					setProcessConfig({
-						...configurationMerge,
-						CreateIntegrationProc: true,
-					});
+					setProcessConfig(configurationMerge ?? null);
 				},
 				onError: (error) => {
 					console.error("Update failed:", error);
@@ -121,9 +133,10 @@ export default function IntegrationCreate() {
 	};
 
 	const handleProcessConfigImport = () => {
+		if (!processConfig) return;
 		processConfigImportMutation.mutate(
 			{
-				config: processConfig,
+				config: processConfig as unknown as ConfigImport,
 				reRoutedFromMerge: true,
 			},
 			{
@@ -140,16 +153,19 @@ export default function IntegrationCreate() {
 	useEffect(() => {
 		// Case when name of process is edited after config merge has been called (ie on pre-creation step), when sending config to import.
 		// If name is changed during wizard step, name is already updated in payload to config merge.
-		if (processConfig?.Processes) {
+		if (processConfig?.Processes?.[0]) {
 			const newConfig = { ...processConfig };
 			const code = slugify(name);
-			newConfig.Processes[0].Name = name;
-			newConfig.Processes[0].Process = code;
+			const firstProcess = newConfig.Processes?.[0];
+			if (firstProcess) {
+				firstProcess.Name = name;
+				firstProcess.Process = code;
+			}
 		}
 	}, [name]);
 
 	useEffect(() => {
-		if (step === 3 && !processConfig) {
+		if (step === INTEGRATION_CREATE_STEPS.preCreation && !processConfig) {
 			const blankConfig: ConfigExport = {
 				Processes: [
 					{
@@ -170,7 +186,11 @@ export default function IntegrationCreate() {
 				<IntegrationDetailsHeader
 					name={name || t("Templates.defaultNewName")}
 					setName={setName}
-					toolbar={step === 3 ? "disabled" : "hidden"}
+					toolbar={
+						step === INTEGRATION_CREATE_STEPS.preCreation
+							? "disabled"
+							: "hidden"
+					}
 					draft
 					untitled={name === ""}
 				>
@@ -187,21 +207,54 @@ export default function IntegrationCreate() {
 						variant="contained"
 						startIcon={<SaveOutlined />}
 						onClick={handleProcessConfigImport}
-						disabled={step !== 3}
+						disabled={step !== INTEGRATION_CREATE_STEPS.preCreation}
 					>
 						{t("Templates.create")}
 					</Button>
 				</IntegrationDetailsHeader>
 			</Box>
-			{step === 0 && <SelectStep setStep={setStep} />}
-			{step === 1 && <TemplateListStep />}
-			{step === 2 && (
+			{step === INTEGRATION_CREATE_STEPS.select && (
+				<SelectStep setStep={setStep} />
+			)}
+			{step === INTEGRATION_CREATE_STEPS.templateOptions && (
+				<TemplateOptionsStep
+					setStep={setStep}
+					onSourceAndTarget={() => setDualSourceThenTarget(true)}
+				/>
+			)}
+			{/* {step === INTEGRATION_CREATE_STEPS.templateList && <TemplateListStep />} */}
+			{step === INTEGRATION_CREATE_STEPS.wizard && (
 				<WizardStep
 					setStep={setStep}
 					setProcessConfigMerge={handleProcessConfigMerge}
 				/>
 			)}
-			{step === 3 && <PreCreationStep processConfig={processConfig} />}
+			{step === INTEGRATION_CREATE_STEPS.preCreation && (
+				<PreCreationStep processConfig={processConfig} />
+			)}
+			{step === INTEGRATION_CREATE_STEPS.sourceTemplateList && (
+				<TemplateListStep
+					listStepTitle={t("Templates.SelectSource")}
+					directionType={DirectionType.Incoming}
+					onSelectTemplate={
+						dualSourceThenTarget
+							? (id) => {
+									const p = new URLSearchParams(searchParams.toString());
+									p.set(`${t("Templates.sourceGroup")}`, id);
+									p.delete(`${t("Templates.group")}`);
+									router.replace(`${pathname}?${p}`);
+									setStep(INTEGRATION_CREATE_STEPS.targetTemplateList);
+								}
+							: undefined
+					}
+				/>
+			)}
+			{step === INTEGRATION_CREATE_STEPS.targetTemplateList && (
+				<TemplateListStep
+					listStepTitle={t("Templates.SelectTarget")}
+					directionType={DirectionType.Outgoing}
+				/>
+			)}
 			{/* </Card> */}
 		</>
 	);

package/src/pages/integration-create/pre-creation-step.tsx

@@ -2,7 +2,7 @@ import { Box, useTheme } from "@mui/material";
 import { useReducer } from "react";
 import type {
 	ConfigExport,
-	EndpointExport,
+	ProcessTask,
 } from "../../../../admin-core/src/api/e4/graphqlRequestSdk";
 import { IntegrationView } from "../../components/integration-view";
 import {
@@ -13,7 +13,7 @@ import {
 } from "../integration-details/task-drawer/task-reducer";
 
 interface Props {
-	processConfig: any | null;
+	processConfig: ConfigExport | null;
 }
 
 export default function PreCreationStep(props: Readonly<Props>) {
@@ -44,20 +44,20 @@ export default function PreCreationStep(props: Readonly<Props>) {
 				canEdit={false}
 				//key={viewRefreshKey}
 				//data={(data as GetProcessByIdQuery)?.processById as Process}
-				config={props.processConfig as ConfigExport}
+				config={props.processConfig ?? undefined}
 				variant="process"
 				drawerOpen={false}
 				processTaskId={undefined}
-				onTaskClick={(processTask: any) => {
-					const endpoint = props.processConfig?.Endpoints.find(
-						(ep: EndpointExport) => ep.Name === processTask.endpoint,
+				onTaskClick={(processTask: ProcessTask) => {
+					const endpoint = (props.processConfig?.Endpoints ?? []).find(
+						(ep) => ep?.Name === processTask.endpoint,
 					);
 
-					let templateConfig: any;
+					let templateConfig: string | undefined;
 
-					if (typeof endpoint.TemplateConfig === "string") {
+					if (typeof endpoint?.TemplateConfig === "string") {
 						templateConfig = endpoint.TemplateConfig;
-					} else if (typeof endpoint.TemplateConfig === "object") {
+					} else if (typeof endpoint?.TemplateConfig === "object") {
 						templateConfig = JSON.stringify(endpoint.TemplateConfig);
 					}
 

package/src/pages/integration-create/select-step.tsx

@@ -15,6 +15,7 @@ import {
 } from "@mui/material";
 import { useTranslations } from "next-intl";
 import type React from "react";
+import { INTEGRATION_CREATE_STEPS } from "./integration-create-steps";
 
 interface Props {
 	setStep: React.Dispatch<React.SetStateAction<number>>;
@@ -22,16 +23,15 @@ interface Props {
 
 export default function SelectStep(props: Readonly<Props>) {
 	const t = useTranslations("Integrate.Templates");
-
 	const theme = useTheme();
 	const styles = getStyles(theme);
 
 	const handleClickBlank = () => {
-		props.setStep(3);
+		props.setStep(INTEGRATION_CREATE_STEPS.preCreation);
 	};
 
 	const handleClickTemplate = () => {
-		props.setStep(1);
+		props.setStep(INTEGRATION_CREATE_STEPS.templateOptions);
 	};
 
 	return (

package/src/pages/integration-create/template-list-step.tsx

@@ -4,13 +4,25 @@ import type {
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 import { getProcessTemplateGroups } from "@evenicanpm/admin-integrate/api/templates/queries";
 import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
-import TemplatesList from "@evenicanpm/admin-integrate/components/templates/templates-list";
+import TemplatesList from "@evenicanpm/admin-integrate/components/templatesV2/templates-list";
 import { Box, Typography, useTheme } from "@mui/material";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 
-export default function TemplateListStep() {
+export enum DirectionType {
+	Incoming = "Incoming",
+	Outgoing = "Outgoing",
+}
+
+interface Props {
+	listStepTitle?: string;
+	directionType?: DirectionType;
+	/** When set, skips default `group` URL handoff (e.g. source pick in dual flow). */
+	onSelectTemplate?: (id: string) => void;
+}
+
+export default function TemplateListStep(props?: Props) {
 	const t = useTranslations("Integrate.Templates");
 
 	const router = useRouter();
@@ -18,6 +30,8 @@ export default function TemplateListStep() {
 	const searchParams = useSearchParams();
 	const theme = useTheme();
 
+	const title = props?.listStepTitle ?? t("listStepTitle");
+
 	const heading: Head[] = [
 		{
 			id: "name",
@@ -26,6 +40,12 @@ export default function TemplateListStep() {
 			width: "95%",
 			sortable: true,
 		},
+		// {
+		// 	id: "createdBy",
+		// 	label: t("ListHeader.createdBy"),
+		// 	align: "right",
+		// 	width: "20%",
+		// },
 		{
 			id: "view",
 			label: t("ListHeader.actions"),
@@ -47,6 +67,10 @@ export default function TemplateListStep() {
 	});
 
 	const handleRedirect = (id: string) => {
+		if (props?.onSelectTemplate) {
+			props.onSelectTemplate(id);
+			return;
+		}
 		const currentParams = new URLSearchParams(searchParams.toString());
 		currentParams.set("group", id);
 		router.replace(`${pathname}?${currentParams.toString()}`);
@@ -61,12 +85,13 @@ export default function TemplateListStep() {
 			}}
 		>
 			<Box sx={{ margin: theme.spacing(2, 0) }}>
-				<Typography variant="h6">{t("listStepTitle")}</Typography>
+				<Typography variant="h6">{title}</Typography>
 			</Box>
 			<TemplatesList
 				heading={heading}
 				data={data as GetProcessTemplateGroupsQuery}
 				loading={isLoading}
+				// input={{ ...input, directionType: props?.directionType }}
 				input={input}
 				setInput={setInput}
 				handleRedirect={handleRedirect}

package/src/pages/integration-create/template-options-step.tsx

@@ -0,0 +1,119 @@
+import LinkCard from "@evenicanpm/admin-integrate/components/link-cards";
+import DownloadOutlinedIcon from "@mui/icons-material/DownloadOutlined";
+import MobiledataOffIcon from "@mui/icons-material/MobiledataOff";
+import UploadOutlinedIcon from "@mui/icons-material/UploadOutlined";
+import {
+	Box,
+	Grid2 as Grid,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { INTEGRATION_CREATE_STEPS } from "./integration-create-steps";
+
+interface Props {
+	setStep: React.Dispatch<React.SetStateAction<number>>;
+	/** Source + Target: go to source list first (parent enables dual flow). */
+	onSourceAndTarget?: () => void;
+}
+
+export default function TemplateOptionsStep(props: Props) {
+	const t = useTranslations("Integrate.Templates");
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const handleClickOption1 = () => {
+		props.onSourceAndTarget?.();
+		props.setStep(INTEGRATION_CREATE_STEPS.sourceTemplateList);
+	};
+	const handleClickOption2 = () =>
+		props.setStep(INTEGRATION_CREATE_STEPS.sourceTemplateList);
+	const handleClickOption3 = () =>
+		props.setStep(INTEGRATION_CREATE_STEPS.targetTemplateList);
+
+	return (
+		<Box sx={styles.main}>
+			<Grid container spacing={1} maxWidth={theme.spacing(110)}>
+				<Grid size={{ xs: 12 }}>
+					<Typography variant="h6" align="center">
+						{t("templateOptionsTitle")}
+					</Typography>
+				</Grid>
+				<Grid size={{ xs: 12, md: 4 }}>
+					<LinkCard
+						title={t("templateOption1")}
+						description={t("templateOption1Description")}
+						onClick={handleClickOption1}
+					>
+						<Box
+							sx={{
+								...styles.iconSquare,
+								color: "black.600",
+								backgroundColor: "#BE7374",
+							}}
+						>
+							<MobiledataOffIcon sx={styles.icon} />
+						</Box>
+					</LinkCard>
+				</Grid>
+				<Grid size={{ xs: 12, md: 4 }}>
+					<LinkCard
+						title={t("templateOption2")}
+						description={t("templateOption2Description")}
+						onClick={handleClickOption2}
+					>
+						<Box
+							sx={{
+								...styles.iconSquare,
+								color: "black.600",
+								backgroundColor: "bluish.500",
+							}}
+						>
+							<UploadOutlinedIcon sx={styles.icon} />
+						</Box>
+					</LinkCard>
+				</Grid>
+				<Grid size={{ xs: 12, md: 4 }}>
+					<LinkCard
+						title={t("templateOption3")}
+						description={t("templateOption3Description")}
+						onClick={handleClickOption3}
+					>
+						<Box
+							sx={{
+								...styles.iconSquare,
+								color: "black.600",
+								backgroundColor: "orange.500",
+							}}
+						>
+							<DownloadOutlinedIcon sx={styles.icon} />
+						</Box>
+					</LinkCard>
+				</Grid>
+			</Grid>
+		</Box>
+	);
+}
+
+const getStyles = (theme: Theme) => ({
+	main: {
+		backgroundColor: theme.palette.grey[50],
+		padding: theme.spacing(2),
+		border: `1px solid ${theme.palette.grey[300]}`,
+		minHeight: `min(${theme.spacing(80)}, 60vh)`,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+	},
+	iconSquare: {
+		padding: theme.spacing(1),
+		paddingBottom: theme.spacing(0.5),
+		marginBottom: theme.spacing(1),
+		borderRadius: 1,
+	},
+	icon: {
+		fontSize: "h4.fontSize",
+	},
+});

package/src/pages/integration-create/wizard-step.tsx

@@ -1,11 +1,12 @@
 // Custom components
-import { Wizard } from "@evenicanpm/admin-integrate/components/templates";
+import { Wizard } from "@evenicanpm/admin-integrate/components/templatesV2";
 // Types
-import type { ProcessConfigMerge } from "@evenicanpm/admin-integrate/components/templates/types";
+import type { ProcessConfigMerge } from "@evenicanpm/admin-integrate/components/templatesV2/types";
 // Mui
 import { Box } from "@mui/material";
 // Util
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { INTEGRATION_CREATE_STEPS } from "./integration-create-steps";
 
 const metadata = {
 	name: "",
@@ -27,12 +28,12 @@ export default function WizardStep(props: Readonly<Props>) {
 	const searchParams = useSearchParams();
 
 	const handleBack = () => {
-		props.setStep(1);
+		props.setStep(INTEGRATION_CREATE_STEPS.templateOptions);
 		router.replace(pathname);
 	};
 
 	const handleFinish = () => {
-		props.setStep(3);
+		props.setStep(INTEGRATION_CREATE_STEPS.preCreation);
 		router.replace(pathname);
 	};
 

package/src/pages/integration-details/import-process/copy-tasks-list.tsx

@@ -185,9 +185,7 @@ export default function CopyTasksList(props: Readonly<Props>) {
 													toggleChecked={toggleChecked}
 													alert={props.importState.alert}
 												/>
-											) : (
-												<></>
-											),
+											) : null,
 										)}
 									</TableBody>
 								</Table>

package/src/pages/integration-details/integration-details.tsx

@@ -434,7 +434,7 @@ export default function IntegrationDetails() {
 					onClose={() => dispatchTaskState({ type: TaskActionType.CLOSE })}
 					anchor="right"
 					taskState={taskState}
-					renderKey={taskState.processTaskId}
+					renderKey={taskState.processTaskId ?? 0}
 					dispatch={dispatchTaskState}
 					handleUpdateConfig={handleUpdateConfig}
 					config={config ?? (configFromApi as any)?.configurationExport}

package/src/pages/integration-details/task-drawer/add-task.tsx

@@ -8,13 +8,13 @@ import type {
 import { processConfigMerge } from "@evenicanpm/admin-integrate/api/process-config/mutation";
 import { getProcessTemplates } from "@evenicanpm/admin-integrate/api/templates/queries";
 import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
-import { Wizard } from "@evenicanpm/admin-integrate/components/templates";
-import TemplatesList from "@evenicanpm/admin-integrate/components/templates/templates-list";
+import { Wizard } from "@evenicanpm/admin-integrate/components/templatesV2";
+import TemplatesList from "@evenicanpm/admin-integrate/components/templatesV2/templates-list";
 import type {
 	Metadata,
 	ProcessConfigMerge,
-} from "@evenicanpm/admin-integrate/components/templates/types";
-import { removeTemplateConfig } from "@evenicanpm/admin-integrate/components/templates/wizard";
+} from "@evenicanpm/admin-integrate/components/templatesV2/types";
+import { removeTemplateConfig } from "@evenicanpm/admin-integrate/components/templatesV2/wizard";
 import { Box, Typography, useTheme } from "@mui/material";
 import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";

package/src/pages/integration-details/task-drawer/edit-task.tsx

@@ -5,12 +5,12 @@ import type {
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 import { processConfigMerge } from "@evenicanpm/admin-integrate/api/process-config/mutation";
 import { TitleEdit } from "@evenicanpm/admin-integrate/components/core";
-import { Wizard } from "@evenicanpm/admin-integrate/components/templates";
+import { Wizard } from "@evenicanpm/admin-integrate/components/templatesV2";
 import type {
 	Metadata,
 	ProcessConfigMerge,
-} from "@evenicanpm/admin-integrate/components/templates/types";
-import { removeTemplateConfig } from "@evenicanpm/admin-integrate/components/templates/wizard";
+} from "@evenicanpm/admin-integrate/components/templatesV2/types";
+import { removeTemplateConfig } from "@evenicanpm/admin-integrate/components/templatesV2/wizard";
 import ReportProblemIcon from "@mui/icons-material/ReportProblem";
 import {
 	Box,
@@ -31,7 +31,7 @@ interface Props {
 	dispatch: React.Dispatch<TaskAction>;
 	handleUpdateConfig: (newConfig: ConfigExport) => void;
 	editable?: boolean;
-	templateConfigInput?: any | null;
+	templateConfigInput?: unknown | null;
 }
 
 export default function EditTask(props: Readonly<Props>) {
@@ -136,7 +136,7 @@ export default function EditTask(props: Readonly<Props>) {
 									.parallelProcessingGroup as number,
 								sort: props.taskState.sort as number,
 								processTaskId: props?.taskState?.processTaskId
-									? Number.parseInt(props.taskState.processTaskId)
+									? Number.parseInt(props.taskState.processTaskId, 10)
 									: null,
 							} as Metadata
 						}

package/src/pages/integration-details/task-drawer/task-drawer.tsx

@@ -24,10 +24,10 @@ import {
 
 interface Props extends DrawerProps {
 	taskState: TaskState;
-	renderKey: any;
+	renderKey: string | number;
 	dispatch: React.Dispatch<TaskAction>;
 	handleUpdateConfig?: (newConfig: ConfigExport) => void;
-	templateConfigInput?: any | null;
+	templateConfigInput?: unknown;
 	config: ConfigExport;
 }