@evenicanpm/admin-integrate 1.2.2 → 1.4.0

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

@@ -1,18 +1,13 @@
-import React from "react";
-
-// Types
-import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
-import { Item } from "./executions-list";
-
 // API
-import { ProcessExecutionInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-
-// MUI
-import { TableContainer, Table, TableBody } from "@mui/material";
-import { SxProps } from "@mui/material";
-
+import type { ProcessExecutionInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 // Custom components
 import { TableHeader } from "@evenicanpm/admin-integrate/components/data-table";
+// Types
+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
 import ExecutionsListRow from "./executions-list-row";
@@ -25,7 +20,7 @@ interface Props {
 	rowSx?: SxProps;
 }
 
-export default function ExecutionsListTable(props: Props) {
+export default function ExecutionsListTable(props: Readonly<Props>) {
 	const handleRequestSort = (property: string) => {
 		const current = props.input.sort;
 		if (property === current) {
@@ -43,28 +38,26 @@ export default function ExecutionsListTable(props: Props) {
 	};
 
 	return (
-		<>
-			<TableContainer>
-				<Table>
-					<TableHeader
-						heading={props.heading}
-						orderBy={props.input.sort || ""}
-						order={props.input.sortDesc ? "desc" : "asc"}
-						onRequestSort={handleRequestSort}
-						rowSx={props.rowSx}
-					/>
-					<TableBody>
-						{props.items.map((item, index) => (
-							<ExecutionsListRow
-								key={index}
-								item={item}
-								heading={props.heading}
-								sx={props.rowSx}
-							/>
-						))}
-					</TableBody>
-				</Table>
-			</TableContainer>
-		</>
+		<TableContainer>
+			<Table>
+				<TableHeader
+					heading={props.heading}
+					orderBy={props.input.sort || ""}
+					order={props.input.sortDesc ? "desc" : "asc"}
+					onRequestSort={handleRequestSort}
+					rowSx={props.rowSx}
+				/>
+				<TableBody>
+					{props.items.map((item) => (
+						<ExecutionsListRow
+							key={item.id}
+							item={item}
+							heading={props.heading}
+							sx={props.rowSx}
+						/>
+					))}
+				</TableBody>
+			</Table>
+		</TableContainer>
 	);
 }

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

@@ -1,38 +1,44 @@
-import React, { useState, useEffect } from "react";
-import { useTranslations } from "next-intl";
-
 // API
-import { GetProcessExecutionsQuery } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-import { ProcessExecutionInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-
-// MUI
-import { Theme, useTheme } from "@mui/material";
-import { Card, Box, Stack, Typography, Grid2 as Grid } from "@mui/material";
-
+import type {
+	GetProcessExecutionsQuery,
+	ProcessExecutionInput,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 // Custom components
 import { FlexBox } from "@evenicanpm/admin-core/components/flex-box";
 import {
 	TablePagination,
 	TableSkeleton,
 } from "@evenicanpm/admin-integrate/components/data-table";
-import { ListFilter } from "@evenicanpm/admin-integrate/components/list-filter";
-
-// Local components
-import ExecutionsListTable from "./executions-list-table";
-
 // Types
-import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
-import { ListFilterOutput } from "@evenicanpm/admin-integrate/components/list-filter/list-filter-types";
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
 import {
-	ExecutionsListFilters,
+	type ExecutionsListFilters,
 	executionListFilters,
 } from "@evenicanpm/admin-integrate/components/execution/execution-filter";
+import { ListFilter } from "@evenicanpm/admin-integrate/components/list-filter";
+import type { ListFilterOutput } from "@evenicanpm/admin-integrate/components/list-filter/list-filter-types";
+// MUI
+import {
+	Box,
+	Card,
+	Grid2 as Grid,
+	Stack,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useEffect, useState } from "react";
+// Local components
+import ExecutionsListTable from "./executions-list-table";
 
 // Returned from processExecutions query
 export interface Item {
 	id: string;
 	name: string;
 	startDate: string;
+	endDate?: string;
 	executionStatus: {
 		id: string;
 	};

package/src/pages/executions/executions.tsx

@@ -1,28 +1,24 @@
-import React, { useState } from "react";
-import { useTranslations } from "next-intl";
-
-// API
-import { getProcessExecutions } from "@evenicanpm/admin-integrate/api/dashboard/queries";
-import {
-	ProcessExecutionInput,
+import type {
 	GetProcessExecutionsQuery,
+	ProcessExecutionInput,
 } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-
-// MUI
-import { Box } from "@mui/material";
-
+// API
+import { getProcessExecutions } from "@evenicanpm/admin-integrate/api/dashboard/queries";
 // Custom components
 import {
+	type Crumb,
 	IntegrateBreadcrumbs,
-	Crumb,
 } from "@evenicanpm/admin-integrate/components/breadcrumbs";
+// Types
+import type { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
 
+// MUI
+import { Box } from "@mui/material";
+import { useTranslations } from "next-intl";
+import React, { useState } from "react";
 // Local components
 import ExecutionsList from "./executions-list";
 
-// Types
-import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
-
 export default function Executions() {
 	const t = useTranslations("Integrate");
 	const l = useTranslations("Integrate.Executions.ListHeader");

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

@@ -0,0 +1 @@
+export { default } from "./integration-create";

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

@@ -0,0 +1,216 @@
+import type {
+	ConfigExport,
+	ConfigurationMergeMutationVariables,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import {
+	processConfigImport,
+	processConfigMerge,
+} from "@evenicanpm/admin-integrate/api/process-config/mutation";
+import {
+	type Crumb,
+	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 { 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 PreCreationStep from "./pre-creation-step";
+import SelectStep from "./select-step";
+import TemplateListStep from "./template-list-step";
+import WizardStep from "./wizard-step";
+
+export default function IntegrationCreate() {
+	const t = useTranslations("Integrate");
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const router = useRouter();
+	const searchParams = useSearchParams();
+	const pathname = usePathname();
+	const processConfigMergeMutation = processConfigMerge();
+	const processConfigImportMutation = processConfigImport();
+
+	const breadcrumbs: Crumb[] = [
+		{
+			name: t("Header.dashboard"),
+			url: "/e4integrate",
+		},
+		{
+			name: t("Header.integrations"),
+			url: "/e4integrate/integrations",
+		},
+		{
+			name: t("Header.newIntegration"),
+		},
+	];
+
+	const [name, setName] = useState<string>("");
+	const [step, setStep] = useState<number>(0);
+	const [processConfig, setProcessConfig] = useState<any | null>(null);
+
+	useEffect(() => {
+		if (searchParams.get("group")) {
+			setStep(2);
+		}
+	}, [searchParams]);
+
+	const handleCancel = () => {
+		if (step > 0) {
+			const confirmClose = confirm(t("Common.unsavedChanges"));
+			if (!confirmClose) return;
+			setStep(0);
+			router.replace(pathname);
+		} else {
+			router.push("/e4integrate/integrations");
+		}
+	};
+
+	const handleProcessConfigMerge = (configMergeInput: any) => {
+		const newProcessConfigMerge = { ...configMergeInput };
+		const code = slugify(name);
+		for (const c of newProcessConfigMerge.input.config) {
+			c.name = name;
+			c.code = code;
+		}
+
+		console.log("configMergeInput", configMergeInput);
+
+		let sourceName = configMergeInput?.input?.config?.find(
+			(item: any) => (item?.source as string)?.toLowerCase() === "source",
+		)?.uniqueIdentifier;
+
+		if (sourceName) {
+			configMergeInput.input.config = configMergeInput.input!.config!.map(
+				(item: any) => {
+					if (item?.queues) {
+						return {
+							...item,
+							queues: `${sourceName}_endpoint`,
+						};
+					} else {
+						return item;
+					}
+				},
+			);
+		}
+
+		processConfigMergeMutation.mutate(
+			{
+				input:
+					removeTemplateConfig(newProcessConfigMerge?.input) ||
+					({} as ConfigurationMergeMutationVariables),
+			},
+			{
+				onSuccess: ({ configurationMerge }) => {
+					console.log("configurationMerge", configurationMerge);
+					setProcessConfig({
+						...configurationMerge,
+						CreateIntegrationProc: true,
+					});
+				},
+				onError: (error) => {
+					console.error("Update failed:", error);
+				},
+			},
+		);
+	};
+
+	const handleProcessConfigImport = () => {
+		processConfigImportMutation.mutate(
+			{
+				config: processConfig,
+				reRoutedFromMerge: true,
+			},
+			{
+				onSuccess: () => {
+					router.push("/e4integrate/integrations");
+				},
+				onError: (error) => {
+					console.error("Update failed:", error);
+				},
+			},
+		);
+	};
+
+	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) {
+			const newConfig = { ...processConfig };
+			const code = slugify(name);
+			newConfig.Processes[0].Name = name;
+			newConfig.Processes[0].Process = code;
+		}
+	}, [name]);
+
+	useEffect(() => {
+		if (step === 3 && !processConfig) {
+			const blankConfig: ConfigExport = {
+				Processes: [
+					{
+						Process: slugify(name),
+						Name: name,
+					},
+				],
+			};
+			setProcessConfig(blankConfig);
+		}
+	}, [step, processConfig]);
+
+	return (
+		<>
+			<IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
+			{/* <Card> */}
+			<Box sx={styles.header}>
+				<IntegrationDetailsHeader
+					name={name || t("Templates.defaultNewName")}
+					setName={setName}
+					toolbar={step === 3 ? "disabled" : "hidden"}
+					draft
+					untitled={name === ""}
+				>
+					<Button
+						color="error"
+						variant="contained"
+						startIcon={<Clear />}
+						onClick={handleCancel}
+					>
+						{t("Templates.cancel")}
+					</Button>
+					<Button
+						color="info"
+						variant="contained"
+						startIcon={<SaveOutlined />}
+						onClick={handleProcessConfigImport}
+						disabled={step !== 3}
+					>
+						{t("Templates.create")}
+					</Button>
+				</IntegrationDetailsHeader>
+			</Box>
+			{step === 0 && <SelectStep setStep={setStep} />}
+			{step === 1 && <TemplateListStep />}
+			{step === 2 && (
+				<WizardStep
+					setStep={setStep}
+					setProcessConfigMerge={handleProcessConfigMerge}
+				/>
+			)}
+			{step === 3 && <PreCreationStep processConfig={processConfig} />}
+			{/* </Card> */}
+		</>
+	);
+}
+
+const getStyles = (_theme: Theme) => {
+	return {
+		header: {
+			//padding: theme.spacing(2),
+		},
+	};
+};

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

@@ -0,0 +1,84 @@
+import { Box, useTheme } from "@mui/material";
+import { useReducer } from "react";
+import type {
+	ConfigExport,
+	EndpointExport,
+} from "../../../../admin-core/src/api/e4/graphqlRequestSdk";
+import { IntegrationView } from "../../components/integration-view";
+import {
+	type EditAction,
+	TaskActionType,
+	TaskMode,
+	taskReducer,
+} from "../integration-details/task-drawer/task-reducer";
+
+interface Props {
+	processConfig: any | null;
+}
+
+export default function PreCreationStep(props: Readonly<Props>) {
+	const theme = useTheme();
+
+	const [_taskState, dispatchTaskState] = useReducer(taskReducer, {
+		open: false,
+		mode: TaskMode.NONE,
+		step: null,
+	});
+
+	// TODO: render integration
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				height: "80vh",
+				width: "100%",
+				overflow: "hidden",
+				backgroundColor: theme.palette.background.default,
+				border: `1px solid ${theme.palette.grey[400]}`,
+				alignItems: null,
+				justifyContent: null,
+			}}
+			className="integration-view-container"
+		>
+			<IntegrationView
+				canEdit={false}
+				//key={viewRefreshKey}
+				//data={(data as GetProcessByIdQuery)?.processById as Process}
+				config={props.processConfig as ConfigExport}
+				variant="process"
+				drawerOpen={false}
+				processTaskId={undefined}
+				onTaskClick={(processTask: any) => {
+					const endpoint = props.processConfig?.Endpoints.find(
+						(ep: EndpointExport) => ep.Name === processTask.endpoint,
+					);
+
+					let templateConfig: any;
+
+					if (typeof endpoint.TemplateConfig === "string") {
+						templateConfig = endpoint.TemplateConfig;
+					} else if (typeof endpoint.TemplateConfig === "object") {
+						templateConfig = JSON.stringify(endpoint.TemplateConfig);
+					}
+
+					dispatchTaskState({
+						type: TaskActionType.OPEN_EDIT,
+						processTaskId: processTask.id,
+						templateConfig: templateConfig,
+						sort: processTask.sort,
+						parallelProcessingGroup: processTask.parallelProcessingGroup,
+						processTemplateId: endpoint?.ProcessTemplateId,
+					} as EditAction);
+				}}
+			/>
+			{/* <TaskDrawer
+											open={taskState.open}
+											onClose={() => dispatchTaskState({ type: TaskActionType.CLOSE })}
+											anchor="right"
+											taskState={taskState}
+											dispatch={dispatchTaskState}
+											//handleUpdateConfig={handleUpdateConfig}
+										/> */}
+		</Box>
+	);
+}

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

@@ -0,0 +1,105 @@
+// Custom components
+import LinkCard from "@evenicanpm/admin-integrate/components/link-cards";
+import {
+	DescriptionOutlined,
+	InsertDriveFileOutlined,
+} from "@mui/icons-material";
+
+// Mui
+import {
+	Box,
+	Grid2 as Grid,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { useTranslations } from "next-intl";
+import type React from "react";
+
+interface Props {
+	setStep: React.Dispatch<React.SetStateAction<number>>;
+}
+
+export default function SelectStep(props: Readonly<Props>) {
+	const t = useTranslations("Integrate.Templates");
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const handleClickBlank = () => {
+		props.setStep(3);
+	};
+
+	const handleClickTemplate = () => {
+		props.setStep(1);
+	};
+
+	return (
+		<Box sx={styles.main}>
+			<Grid container spacing={1} maxWidth={theme.spacing(70)}>
+				<Grid size={{ xs: 12 }}>
+					<Typography variant="h6" align="center">
+						{t("selectStepTitle")}
+					</Typography>
+				</Grid>
+				<Grid size={{ xs: 12, md: 6 }}>
+					<LinkCard
+						title={t("selectBlank")}
+						description={t("selectBlankDescription")}
+						onClick={handleClickBlank}
+					>
+						<Box
+							sx={{
+								...styles.iconSquare,
+								color: "grey.600",
+								backgroundColor: "grey.300",
+							}}
+						>
+							<InsertDriveFileOutlined sx={styles.icon} />
+						</Box>
+					</LinkCard>
+				</Grid>
+				<Grid size={{ xs: 12, md: 6 }}>
+					<LinkCard
+						title={t("selectTemplate")}
+						description={t("selectTemplateDescription")}
+						onClick={handleClickTemplate}
+					>
+						<Box
+							sx={{
+								...styles.iconSquare,
+								color: "bluish.600",
+								backgroundColor: "bluish.300",
+							}}
+						>
+							<DescriptionOutlined sx={styles.icon} />
+						</Box>
+					</LinkCard>
+				</Grid>
+			</Grid>
+		</Box>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		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/template-list-step.tsx

@@ -0,0 +1,77 @@
+import type {
+	FilterQueryInput,
+	GetProcessTemplateGroupsQuery,
+} 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 { 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() {
+	const t = useTranslations("Integrate.Templates");
+
+	const router = useRouter();
+	const pathname = usePathname();
+	const searchParams = useSearchParams();
+	const theme = useTheme();
+
+	const heading: Head[] = [
+		{
+			id: "name",
+			label: t("ListHeader.name"),
+			align: "left",
+			width: "95%",
+			sortable: true,
+		},
+		{
+			id: "view",
+			label: t("ListHeader.actions"),
+			align: "right",
+			width: "5%",
+		},
+	];
+
+	// TODO: initialize input based on url query params
+	const [input, setInput] = useState<FilterQueryInput>({
+		sort: "name",
+		sortDesc: false,
+		top: 10,
+		skip: 0,
+	});
+
+	const { data, isLoading } = getProcessTemplateGroups.useData({
+		input: input,
+	});
+
+	const handleRedirect = (id: string) => {
+		const currentParams = new URLSearchParams(searchParams.toString());
+		currentParams.set("group", id);
+		router.replace(`${pathname}?${currentParams.toString()}`);
+	};
+
+	return (
+		<Box
+			sx={{
+				backgroundColor: theme.palette.grey[50],
+				padding: theme.spacing(2),
+				border: `1px solid ${theme.palette.grey[300]}`,
+			}}
+		>
+			<Box sx={{ margin: theme.spacing(2, 0) }}>
+				<Typography variant="h6">{t("listStepTitle")}</Typography>
+			</Box>
+			<TemplatesList
+				heading={heading}
+				data={data as GetProcessTemplateGroupsQuery}
+				loading={isLoading}
+				input={input}
+				setInput={setInput}
+				handleRedirect={handleRedirect}
+				isTemplateGroupsList
+			/>
+		</Box>
+	);
+}