@evenicanpm/admin-integrate 1.8.0 → 2.0.0

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

@@ -11,16 +11,18 @@ 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 { 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 { 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,20 +52,28 @@ export default function IntegrationCreate() {
 	];
 
 	const [name, setName] = useState<string>("");
-	const [step, setStep] = useState<number>(0);
+	const [step, setStep] = useState<number>(INTEGRATION_CREATE_STEPS.select);
 	const [processConfig, setProcessConfig] = useState<any | 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");
@@ -80,7 +90,7 @@ export default function IntegrationCreate() {
 
 		console.log("configMergeInput", configMergeInput);
 
-		let sourceName = configMergeInput?.input?.config?.find(
+		const sourceName = configMergeInput?.input?.config?.find(
 			(item: any) => (item?.source as string)?.toLowerCase() === "source",
 		)?.uniqueIdentifier;
 
@@ -149,7 +159,7 @@ export default function IntegrationCreate() {
 	}, [name]);
 
 	useEffect(() => {
-		if (step === 3 && !processConfig) {
+		if (step === INTEGRATION_CREATE_STEPS.preCreation && !processConfig) {
 			const blankConfig: ConfigExport = {
 				Processes: [
 					{
@@ -170,7 +180,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 +201,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/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/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,