@evenicanpm/admin-integrate 1.2.2 → 1.3.0

package/src/components/integration-view/temp-data/initialElements.tsx

@@ -1,11 +1,11 @@
-import { ElkExtendedEdgeWithFlow, ElkNodeWithFlow } from "../elk-types";
-
 import StorageIcon from "@mui/icons-material/Storage";
 import TableChartIcon from "@mui/icons-material/TableChart";
-import SystemUpdateAltIcon from "@mui/icons-material/SystemUpdateAlt";
+import { Box } from "@mui/material";
 
 import { MarkerType } from "@xyflow/react";
-import { Box } from "@mui/material";
+import type { ElkExtendedEdgeWithFlow, ElkNodeWithFlow } from "../elk-types";
+
+//import { timerIcon, triggerIcon } from "../icons";
 
 const pullIcon = () => {
 	return (
@@ -35,22 +35,15 @@ const chartIcon = () => {
 				alignItems: "center",
 				justifyContent: "center",
 				borderRadius: "5px",
-				bgcolor: "paste.100",
+				bgcolor: "#EADDFF", // Purple not implemented in the theme
 				borderWidth: 1,
 				borderStyle: "solid",
-				borderColor: "paste.600",
+				borderColor: "#6750A4", // Purple not implemented in the theme
 				padding: "2px",
 			}}
 		>
-			<TableChartIcon sx={{ color: "paste.600" }} />
-		</Box>
-	);
-};
-
-const inputIcon = () => {
-	return (
-		<Box>
-			<SystemUpdateAltIcon sx={{ color: "grey.600" }} />
+			<TableChartIcon sx={{ color: "#6750A4" }} />{" "}
+			{/* Purple not implemented in the theme */}
 		</Box>
 	);
 };
@@ -58,9 +51,15 @@ const inputIcon = () => {
 export const initialNodes: ElkNodeWithFlow[] = [
 	{
 		id: "1",
-		type: "task-node",
-		data: { label: "Set Entry Point", icon: inputIcon() },
-		width: 450,
+		type: "execution-entry-node",
+		data: {
+			label: "Trigger",
+			//icon: timerIcon(),
+			label2: "Schedule",
+			//icon2: triggerIcon(),
+			executionStatus: "400",
+		},
+		width: 200,
 		height: 70,
 		position: { x: 0, y: 0 },
 		layoutOptions: {
@@ -80,9 +79,10 @@ export const initialNodes: ElkNodeWithFlow[] = [
 					label: "Pull Data From External MS DB 1",
 					icon: pullIcon(),
 					isLast: true,
+					executionStatus: "500",
 				},
 				position: { x: 0, y: 0 },
-				type: "task-node",
+				type: "execution-task-node",
 				width: 450,
 				height: 70,
 				extent: "parent",
@@ -93,11 +93,12 @@ export const initialNodes: ElkNodeWithFlow[] = [
 				data: {
 					label: "Stage Data 1",
 					icon: chartIcon(),
+					executionStatus: "400",
 				},
 				position: { x: 0, y: 0 },
 				width: 450,
 				height: 70,
-				type: "task-node",
+				type: "execution-task-node",
 				extent: "parent",
 			},
 			{
@@ -113,9 +114,10 @@ export const initialNodes: ElkNodeWithFlow[] = [
 				data: {
 					label: "Stage Data 2",
 					icon: chartIcon(),
+					executionStatus: "300",
 				},
 				position: { x: 0, y: 0 },
-				type: "task-node",
+				type: "execution-task-node",
 				width: 450,
 				height: 70,
 				extent: "parent",
@@ -126,9 +128,10 @@ export const initialNodes: ElkNodeWithFlow[] = [
 					label: "Process Data",
 					icon: chartIcon(),
 					isLast: true,
+					executionStatus: "400",
 				},
 				position: { x: 0, y: 0 },
-				type: "task-node",
+				type: "execution-task-node",
 				width: 450,
 				height: 70,
 				extent: "parent",
@@ -147,9 +150,10 @@ export const initialNodes: ElkNodeWithFlow[] = [
 					label: "Stage Data 3",
 					icon: chartIcon(),
 					isLast: true,
+					executionStatus: "500",
 				},
 				position: { x: 0, y: 0 },
-				type: "task-node",
+				type: "execution-task-node",
 				width: 450,
 				height: 70,
 				extent: "parent",
@@ -173,52 +177,52 @@ export const initialEdges: ElkExtendedEdgeWithFlow[] = [
 		id: "2gs-2gc",
 		sources: ["2gs"],
 		targets: ["2gconnect1"],
-		type: "default-edge",
+		type: "animated-edge",
 	},
 	{
 		id: "2gs-2g1",
 		sources: ["2gconnect1"],
 		targets: ["2g1"],
-		type: "default-edge",
+		type: "animated-edge",
 		markerEnd: markerEnd,
 	},
 	{
 		id: "2gs-2g2",
 		sources: ["2gconnect1"],
 		targets: ["2g2"],
-		type: "default-edge",
+		type: "animated-edge",
 		markerEnd: markerEnd,
 	},
 	{
 		id: "2gs-2g3",
 		sources: ["2gconnect1"],
 		targets: ["2g3"],
-		type: "default-edge",
+		type: "animated-edge",
 		markerEnd: markerEnd,
 	},
 	{
 		id: "2g1-2g4",
 		sources: ["2g1"],
 		targets: ["2gconnect2"],
-		type: "default-edge",
+		type: "animated-edge",
 	},
 	{
 		id: "2g2-2g4",
 		sources: ["2g2"],
 		targets: ["2gconnect2"],
-		type: "default-edge",
+		type: "animated-edge",
 	},
 	{
-		id: "2g3-2g4",
+		id: "2g3->2g4",
 		sources: ["2g3"],
 		targets: ["2gconnect2"],
-		type: "default-edge",
+		type: "animated-edge",
 	},
 	{
 		id: "2gc-2g4",
 		sources: ["2gconnect2"],
 		targets: ["2g4"],
-		type: "default-edge",
+		type: "animated-edge",
 		markerEnd: markerEnd,
 	},
 ];

package/src/components/integration-view/types.ts

@@ -1,6 +1,6 @@
-interface ElkOptions {}
+type ElkOptions = {};
 
-interface ElkPosition {}
+type ElkPosition = {};
 
 interface ElkItem {
 	id: string;

package/src/components/layouts/main-layout.tsx

@@ -1,10 +1,9 @@
 "use client";
-import { styled } from "@mui/material";
 
 import BodyWrapper from "@evenicanpm/admin-core/components/layouts/main-dashboard/dashboard-body-wrapper";
-import DashboardSidebar from "@evenicanpm/admin-core/components/layouts/main-dashboard/dashboard-sidebar/dashboard-sidebar";
-
 import { LayoutProvider } from "@evenicanpm/admin-core/components/layouts/main-dashboard/dashboard-layout-context";
+import DashboardSidebar from "@evenicanpm/admin-core/components/layouts/main-dashboard/dashboard-sidebar/dashboard-sidebar";
+import { styled } from "@mui/material";
 
 // STYLED COMPONENT
 const StyledContainer = styled("div")(() => ({

package/src/components/layouts/root-container.tsx

@@ -1,10 +1,7 @@
-import React from "react";
-
-import { Theme, useTheme } from "@mui/material";
-import { Container, Box, Stack } from "@mui/material";
-import { SxProps, Breakpoint } from "@mui/system";
-
 import { IntegrateFooter } from "@evenicanpm/admin-integrate/components/footer";
+import { Box, Container, Stack, type Theme, useTheme } from "@mui/material";
+import type { Breakpoint, SxProps } from "@mui/system";
+import type React from "react";
 
 interface Props {
 	maxWidth?: false | Breakpoint;

package/src/components/link-cards/link-card.tsx

@@ -1,19 +1,30 @@
 // STYLED COMPONENTS
-import { BodyText, TitleText, Wrapper } from "./styles";
-import React from "react";
-import { redirect, RedirectType } from "next/navigation";
+
 import { Box, CardActionArea } from "@mui/material";
+import { RedirectType, redirect } from "next/navigation";
+import type React from "react";
+import { BodyText, TitleText, Wrapper } from "./styles";
 
 // ============================================================
 type Props = {
 	title: string;
 	description?: string;
 	url?: string;
+	onClick?: () => void;
 	children?: React.ReactNode;
 };
 // ============================================================
-export default function LinkCard({ title, description, url, children }: Props) {
+export default function LinkCard({
+	title,
+	description,
+	url,
+	onClick,
+	children,
+}: Props) {
 	const handleRedirect = () => {
+		if (onClick) {
+			onClick();
+		}
 		if (url) {
 			redirect(url, RedirectType.push);
 		}

package/src/components/link-cards/styles.ts

@@ -1,7 +1,7 @@
 "use client";
 
-import styled from "@mui/material/styles/styled";
 import { Card, Typography } from "@mui/material";
+import styled from "@mui/material/styles/styled";
 
 // STYLED COMPONENTS
 export const Wrapper = styled(Card)(({ theme }) => ({

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

@@ -1,8 +1,9 @@
-import { Typography, FormControl } from "@mui/material";
+import { FormControl, Typography } from "@mui/material";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
-import React, { useState } from "react";
-import { DateFilter, FilterProps } from "./list-filter-types";
 import { useTranslations } from "next-intl";
+import type React from "react";
+import { useState } from "react";
+import type { DateFilter, FilterProps } from "./list-filter-types";
 
 const DateFilterComponent: React.FC<FilterProps<DateFilter>> = ({
 	filter,

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

@@ -1,9 +1,15 @@
-import { Box, Typography, Theme, useTheme, FormControl } from "@mui/material";
-import { useTranslations } from "next-intl";
-
+import {
+	Box,
+	FormControl,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
-import React, { useState } from "react";
-import { DateRangeFilter, FilterProps } from "./list-filter-types";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useState } from "react";
+import type { DateRangeFilter, FilterProps } from "./list-filter-types";
 
 const DateRangeFilterComponent: React.FC<FilterProps<DateRangeFilter>> = ({
 	filter,

package/src/components/list-filter/index.ts

@@ -1,6 +1,6 @@
 export { default as DateFilter } from "./date-filter";
 export { default as DateRangeFilter } from "./date-range-filter";
 export { default as ListFilter } from "./list-filter";
+export * from "./list-filter-types";
 export { default as MultiSelectFilterComponent } from "./multi-select-filter";
 export { default as SelectFilterComponent } from "./select-filter";
-export * from "./list-filter-types";

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

@@ -1,42 +1,42 @@
 "use client";
-import { debounce } from "lodash";
-import { useTranslations } from "next-intl";
-import React, { useEffect, useState } from "react";
 
 import {
-	Search,
-	FilterAltOutlined,
-	CloseOutlined,
 	ArrowForwardIos,
+	CloseOutlined,
 	Delete,
+	FilterAltOutlined,
+	Search,
 } from "@mui/icons-material";
 import {
+	Badge,
 	Box,
 	Button,
+	ClickAwayListener,
 	IconButton,
-	TextField,
 	InputAdornment,
-	Select,
 	MenuItem,
-	Theme,
-	useTheme,
 	Paper,
 	Popper,
-	Badge,
-	ClickAwayListener,
+	Select,
+	TextField,
+	type Theme,
+	useTheme,
 } from "@mui/material";
-import {
-	Filters,
+import { debounce } from "lodash";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useEffect, useState } from "react";
+import { OutlinedIconButton } from "../button";
+import DateFilterComponent from "./date-filter";
+import DateRangeFilterComponent from "./date-range-filter";
+import type {
+	FilterConfig,
 	FilterResult,
+	Filters,
 	ListFilterOutput,
-	FilterConfig,
 } from "./list-filter-types";
-
-import { OutlinedIconButton } from "../button";
-import SelectFilterComponent from "./select-filter";
 import MultiSelectFilterComponent from "./multi-select-filter";
-import DateFilterComponent from "./date-filter";
-import DateRangeFilterComponent from "./date-range-filter";
+import SelectFilterComponent from "./select-filter";
 
 interface FilterProps<FilterShape extends Filters> {
 	setFilters: (filterUpdate: ListFilterOutput<FilterShape>) => void;
@@ -74,14 +74,14 @@ const ListFilter = function ListFilter<FilterShape extends Filters>(
 			if (filter.type === "select" && filter.value)
 				return {
 					...values,
-					// @ts-ignore
+					// @ts-expect-error
 					[key]: filter.options.find((o) => o.id === filter.value[0].id),
 				};
 			if (filter.type === "multiSelect" && filter.value)
 				return {
 					...values,
 					[key]: filter.options.filter((o) =>
-						// @ts-ignore
+						// @ts-expect-error
 						filter.value.find((v) => v.id === o.id),
 					),
 				};
@@ -217,7 +217,12 @@ const ListFilter = function ListFilter<FilterShape extends Filters>(
 								<FilterAltOutlined />
 							</OutlinedIconButton>
 						</Badge>
-						<Popper open={open} anchorEl={anchorEl} placement="bottom-start">
+						<Popper
+							sx={{ zIndex: theme.zIndex.drawer + 1 }}
+							open={open}
+							anchorEl={anchorEl}
+							placement="bottom-start"
+						>
 							<Paper sx={styles.popOut} elevation={3}>
 								<Box sx={styles.closeRow}>
 									{manualClose ? (
@@ -298,7 +303,7 @@ const ListFilter = function ListFilter<FilterShape extends Filters>(
 												startIcon={<Delete />}
 												onClick={handleFilterClear}
 											>
-												Clear
+												{t("clear")}
 											</Button>
 										) : (
 											""
@@ -311,7 +316,7 @@ const ListFilter = function ListFilter<FilterShape extends Filters>(
 											disabled={Object.values(filterErrors).some((v) => v)}
 											onClick={handleFilterSet}
 										>
-											Filter
+											{t("filter")}
 										</Button>
 									</Box>
 								</Box>

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

@@ -1,22 +1,23 @@
-import { useTranslations } from "next-intl";
+import { CloseOutlined } from "@mui/icons-material";
 import {
 	Box,
-	Typography,
+	Chip,
+	FormControl,
 	IconButton,
 	InputAdornment,
-	Select,
 	MenuItem,
-	Theme,
+	Select,
+	type Theme,
+	Typography,
 	useTheme,
-	FormControl,
-	Chip,
 } from "@mui/material";
-import { CloseOutlined } from "@mui/icons-material";
-import React, { useState } from "react";
-import {
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useState } from "react";
+import type {
 	FilterOption,
-	MultiSelectFilter,
 	FilterProps,
+	MultiSelectFilter,
 } from "./list-filter-types";
 
 const MultiSelectFilterComponent: React.FC<FilterProps<MultiSelectFilter>> = ({

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

@@ -1,17 +1,22 @@
-import { useTranslations } from "next-intl";
+import { CloseOutlined } from "@mui/icons-material";
 import {
-	Typography,
+	FormControl,
 	IconButton,
 	InputAdornment,
-	Select,
 	MenuItem,
-	Theme,
+	Select,
+	type Theme,
+	Typography,
 	useTheme,
-	FormControl,
 } from "@mui/material";
-import { CloseOutlined } from "@mui/icons-material";
-import React, { useState } from "react";
-import { FilterOption, SelectFilter, FilterProps } from "./list-filter-types";
+import { useTranslations } from "next-intl";
+import type React from "react";
+import { useState } from "react";
+import type {
+	FilterOption,
+	FilterProps,
+	SelectFilter,
+} from "./list-filter-types";
 
 const SelectFilterComponent: React.FC<FilterProps<SelectFilter>> = ({
 	filter,

package/src/components/scheduler/day-selector.tsx

@@ -1,10 +1,17 @@
-import { useTranslations } from "next-intl";
 // MUI
-import { Theme, useTheme } from "@mui/material";
-import { Typography, Box, Stack, ButtonBase } from "@mui/material";
+import {
+	Box,
+	ButtonBase,
+	Stack,
+	type SxProps,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
+import { useTranslations } from "next-intl";
 
 // Types
-import { IsDay } from "./scheduler-types";
+import type { IsDay } from "./scheduler-types";
 
 interface Props {
 	days: IsDay;
@@ -16,7 +23,7 @@ const DaySelector: React.FC<Props> = (props: Props) => {
 	const t = useTranslations("Integrate.Scheduler.DaySelector");
 
 	const theme = useTheme();
-	const styles = getStyles(theme);
+	const styles: DaySelectorStyles = getStyles(theme);
 
 	const handleClick = (field: keyof IsDay) => {
 		if (!props.disabled) {
@@ -34,7 +41,7 @@ const DaySelector: React.FC<Props> = (props: Props) => {
 				disableRipple={props.disabled}
 			>
 				<Box
-					sx={getDayStyle(styles, props.days.isMonday)}
+					sx={getDayStyle(styles, props.days?.isMonday)}
 					alignContent="center"
 					textAlign="center"
 				>
@@ -49,7 +56,7 @@ const DaySelector: React.FC<Props> = (props: Props) => {
 				disableRipple={props.disabled}
 			>
 				<Box
-					sx={getDayStyle(styles, props.days.isTuesday)}
+					sx={getDayStyle(styles, props.days?.isTuesday)}
 					alignContent="center"
 					textAlign="center"
 				>
@@ -64,7 +71,7 @@ const DaySelector: React.FC<Props> = (props: Props) => {
 				disableRipple={props.disabled}
 			>
 				<Box
-					sx={getDayStyle(styles, props.days.isWednesday)}
+					sx={getDayStyle(styles, props.days?.isWednesday)}
 					alignContent="center"
 					textAlign="center"
 				>
@@ -79,7 +86,7 @@ const DaySelector: React.FC<Props> = (props: Props) => {
 				disableRipple={props.disabled}
 			>
 				<Box
-					sx={getDayStyle(styles, props.days.isThursday)}
+					sx={getDayStyle(styles, props.days?.isThursday)}
 					alignContent="center"
 					textAlign="center"
 				>
@@ -94,7 +101,7 @@ const DaySelector: React.FC<Props> = (props: Props) => {
 				disableRipple={props.disabled}
 			>
 				<Box
-					sx={getDayStyle(styles, props.days.isFriday)}
+					sx={getDayStyle(styles, props.days?.isFriday)}
 					alignContent="center"
 					textAlign="center"
 				>
@@ -109,7 +116,7 @@ const DaySelector: React.FC<Props> = (props: Props) => {
 				disableRipple={props.disabled}
 			>
 				<Box
-					sx={getDayStyle(styles, props.days.isSaturday)}
+					sx={getDayStyle(styles, props.days?.isSaturday)}
 					alignContent="center"
 					textAlign="center"
 				>
@@ -124,7 +131,7 @@ const DaySelector: React.FC<Props> = (props: Props) => {
 				disableRipple={props.disabled}
 			>
 				<Box
-					sx={getDayStyle(styles, props.days.isSunday)}
+					sx={getDayStyle(styles, props.days?.isSunday)}
 					alignContent="center"
 					textAlign="center"
 				>
@@ -137,7 +144,14 @@ const DaySelector: React.FC<Props> = (props: Props) => {
 	);
 };
 
-const getStyles = (theme: Theme) => {
+interface DaySelectorStyles {
+	days: SxProps;
+	dayOfWeek: SxProps;
+	dayOfWeekSelected: SxProps;
+	dayInitial: SxProps;
+}
+
+const getStyles = (theme: Theme): DaySelectorStyles => {
 	return {
 		days: {
 			marginTop: theme.spacing(0),
@@ -164,9 +178,9 @@ const getStyles = (theme: Theme) => {
 	};
 };
 
-const getDayStyle = (styles: any, selected: boolean) => {
+const getDayStyle = (styles: DaySelectorStyles, selected: boolean): SxProps => {
 	if (selected) {
-		return { ...styles.dayOfWeek, ...styles.dayOfWeekSelected };
+		return { ...styles.dayOfWeek, ...styles.dayOfWeekSelected } as SxProps;
 	}
 	return styles.dayOfWeek;
 };