@evenicanpm/admin-integrate 1.2.0 → 1.3.0

package/src/api/scheduler/queries/get-scheduled-processes.query.ts

@@ -1,8 +1,11 @@
-import { useQuery, QueryClient, UseQueryOptions } from "@tanstack/react-query";
+import type { GetScheduledProcessesQueryVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import {
+	type QueryClient,
+	type UseQueryOptions,
+	useQuery,
+} from "@tanstack/react-query";
 import { queryFn } from "./get-scheduled-processes.server";
 
-import { GetScheduledProcessesQueryVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-
 export const buildScheduledProcessesQueryKey = {
 	all: () => ["getScheduledProcesses"] as const,
 	byInput: (variables?: GetScheduledProcessesQueryVariables) => [

package/src/api/scheduler/queries/get-scheduled-processes.server.ts

@@ -1,6 +1,6 @@
 "use server";
+import type { GetScheduledProcessesQueryVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 import createGraphqlclient from "@evenicanpm/admin-core/api/sdk/graphqlClient.client";
-import { GetScheduledProcessesQueryVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 
 export const queryFn = async (
 	variables: GetScheduledProcessesQueryVariables,

package/src/api/scheduler/queries/index.ts

@@ -1,3 +1,4 @@
-export { getScheduledProcesses } from "./get-scheduled-processes.query";
-export { getProcessScheduleGroupDetails } from "./get-process-schedule-group-details.query";
+export { getNonScheduledProcesses } from "./get-non-scheduled-processes.query";
 export { getProcessScheduleById } from "./get-process-schedule.query";
+export { getProcessScheduleGroupDetails } from "./get-process-schedule-group-details.query";
+export { getScheduledProcesses } from "./get-scheduled-processes.query";

package/src/api/templates/queries/get-process-template-groups.query.ts

@@ -0,0 +1,48 @@
+import type { GetProcessTemplateGroupsQueryVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import {
+	type QueryClient,
+	type UseQueryOptions,
+	useQuery,
+} from "@tanstack/react-query";
+import { queryFn } from "./get-process-template-groups.server";
+
+export const buildProcessTemplateGroupsQueryKey = {
+	all: () => ["getProcessTemplateGroups"] as const,
+	byInput: (variables?: GetProcessTemplateGroupsQueryVariables) => [
+		"getProcessTemplateGroups",
+		variables,
+	],
+};
+
+export const getProcessTemplateGroups = {
+	queryKey: buildProcessTemplateGroupsQueryKey.all(),
+
+	prefetch: (
+		queryClient: QueryClient,
+		variables: GetProcessTemplateGroupsQueryVariables,
+	) =>
+		queryClient.prefetchQuery({
+			queryKey: buildProcessTemplateGroupsQueryKey.byInput(variables),
+			queryFn: () => queryFn(variables),
+		}),
+
+	fetchData: async (
+		queryClient: QueryClient,
+		variables: GetProcessTemplateGroupsQueryVariables,
+	) => {
+		return await queryClient.fetchQuery({
+			queryKey: buildProcessTemplateGroupsQueryKey.byInput(variables),
+			queryFn: () => queryFn(variables),
+		});
+	},
+
+	useData: (
+		variables: GetProcessTemplateGroupsQueryVariables,
+		options?: UseQueryOptions,
+	) =>
+		useQuery({
+			queryKey: buildProcessTemplateGroupsQueryKey.byInput(variables),
+			queryFn: () => queryFn(variables),
+			...options,
+		}),
+};

package/src/api/templates/queries/get-process-template-groups.server.ts

@@ -0,0 +1,11 @@
+"use server";
+import type { GetProcessTemplateGroupsQueryVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import createGraphqlclient from "@evenicanpm/admin-core/api/sdk/graphqlClient.client";
+
+export const queryFn = async (
+	variables: GetProcessTemplateGroupsQueryVariables,
+) => {
+	const sdk = await createGraphqlclient();
+	const { data } = await sdk.GetProcessTemplateGroups(variables);
+	return data;
+};

package/src/api/templates/queries/get-process-template-records.query.ts

@@ -0,0 +1,48 @@
+import type { GetProcessTemplateRecordsQueryVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import {
+	type QueryClient,
+	type UseQueryOptions,
+	useQuery,
+} from "@tanstack/react-query";
+import { queryFn } from "./get-process-template-records.server";
+
+export const buildProcessTemplateRecordsQueryKey = {
+	all: () => ["getProcessTemplateRecords"] as const,
+	byInput: (variables?: GetProcessTemplateRecordsQueryVariables) => [
+		"getProcessTemplateRecords",
+		variables,
+	],
+};
+
+export const getProcessTemplateRecords = {
+	queryKey: buildProcessTemplateRecordsQueryKey.all(),
+
+	prefetch: (
+		queryClient: QueryClient,
+		variables: GetProcessTemplateRecordsQueryVariables,
+	) =>
+		queryClient.prefetchQuery({
+			queryKey: buildProcessTemplateRecordsQueryKey.byInput(variables),
+			queryFn: () => queryFn(variables),
+		}),
+
+	fetchData: async (
+		queryClient: QueryClient,
+		variables: GetProcessTemplateRecordsQueryVariables,
+	) => {
+		return await queryClient.fetchQuery({
+			queryKey: buildProcessTemplateRecordsQueryKey.byInput(variables),
+			queryFn: () => queryFn(variables),
+		});
+	},
+
+	useData: (
+		variables: GetProcessTemplateRecordsQueryVariables,
+		options?: UseQueryOptions,
+	) =>
+		useQuery({
+			queryKey: buildProcessTemplateRecordsQueryKey.byInput(variables),
+			queryFn: () => queryFn(variables),
+			...options,
+		}),
+};

package/src/api/templates/queries/get-process-template-records.server.ts

@@ -0,0 +1,11 @@
+"use server";
+import type { GetProcessTemplateRecordsQueryVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import createGraphqlclient from "@evenicanpm/admin-core/api/sdk/graphqlClient.client";
+
+export const queryFn = async (
+	variables: GetProcessTemplateRecordsQueryVariables,
+) => {
+	const sdk = await createGraphqlclient();
+	const { data } = await sdk.GetProcessTemplateRecords(variables);
+	return data;
+};

package/src/api/templates/queries/get-process-template.query.ts

@@ -0,0 +1,48 @@
+import type { GetProcessTemplateQueryVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import {
+	type QueryClient,
+	type UseQueryOptions,
+	useQuery,
+} from "@tanstack/react-query";
+import { queryFn } from "./get-process-template.server";
+
+export const buildProcessTemplateQueryKey = {
+	all: () => ["getProcessTemplate"] as const,
+	byInput: (variables?: GetProcessTemplateQueryVariables) => [
+		"getProcessTemplate",
+		variables,
+	],
+};
+
+export const getProcessTemplate = {
+	queryKey: buildProcessTemplateQueryKey.all(),
+
+	prefetch: (
+		queryClient: QueryClient,
+		variables: GetProcessTemplateQueryVariables,
+	) =>
+		queryClient.prefetchQuery({
+			queryKey: buildProcessTemplateQueryKey.byInput(variables),
+			queryFn: () => queryFn(variables),
+		}),
+
+	fetchData: async (
+		queryClient: QueryClient,
+		variables: GetProcessTemplateQueryVariables,
+	) => {
+		return await queryClient.fetchQuery({
+			queryKey: buildProcessTemplateQueryKey.byInput(variables),
+			queryFn: () => queryFn(variables),
+		});
+	},
+
+	useData: (
+		variables: GetProcessTemplateQueryVariables,
+		options?: UseQueryOptions,
+	) =>
+		useQuery({
+			queryKey: buildProcessTemplateQueryKey.byInput(variables),
+			queryFn: () => queryFn(variables),
+			...options,
+		}),
+};

package/src/api/templates/queries/get-process-template.server.ts

@@ -0,0 +1,9 @@
+"use server";
+import type { GetProcessTemplateQueryVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import createGraphqlclient from "@evenicanpm/admin-core/api/sdk/graphqlClient.client";
+
+export const queryFn = async (variables: GetProcessTemplateQueryVariables) => {
+	const sdk = await createGraphqlclient();
+	const { data } = await sdk.GetProcessTemplate(variables);
+	return data;
+};

package/src/api/templates/queries/get-process-templates.query.ts

@@ -0,0 +1,45 @@
+import type { GetProcessTemplatesQueryVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import {
+	type QueryClient,
+	type UseQueryOptions,
+	useQuery,
+} from "@tanstack/react-query";
+import { queryFn } from "./get-process-templates.server";
+
+export const buildProcessTemplatesQueryKey = {
+	byInput: (variables?: GetProcessTemplatesQueryVariables) => [
+		"getProcessTemplates",
+		variables,
+	],
+};
+
+export const getProcessTemplates = {
+	prefetch: (
+		queryClient: QueryClient,
+		variables: GetProcessTemplatesQueryVariables,
+	) =>
+		queryClient.prefetchQuery({
+			queryKey: buildProcessTemplatesQueryKey.byInput(variables),
+			queryFn: () => queryFn(variables),
+		}),
+
+	fetchData: async (
+		queryClient: QueryClient,
+		variables: GetProcessTemplatesQueryVariables,
+	) => {
+		return await queryClient.fetchQuery({
+			queryKey: buildProcessTemplatesQueryKey.byInput(variables),
+			queryFn: () => queryFn(variables),
+		});
+	},
+
+	useData: (
+		variables: GetProcessTemplatesQueryVariables,
+		options?: UseQueryOptions,
+	) =>
+		useQuery({
+			queryKey: buildProcessTemplatesQueryKey.byInput(variables),
+			queryFn: () => queryFn(variables),
+			...options,
+		}),
+};

package/src/api/templates/queries/get-process-templates.server.ts

@@ -0,0 +1,9 @@
+"use server";
+import type { GetProcessTemplatesQueryVariables } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import createGraphqlclient from "@evenicanpm/admin-core/api/sdk/graphqlClient.client";
+
+export const queryFn = async (variables: GetProcessTemplatesQueryVariables) => {
+	const sdk = await createGraphqlclient();
+	const { data } = await sdk.GetProcessTemplates(variables);
+	return data;
+};

package/src/api/templates/queries/index.ts

@@ -0,0 +1,5 @@
+export { getProcessTemplate } from "./get-process-template.query";
+export { getProcessTemplateGroups } from "./get-process-template-groups.query";
+export { getProcessTemplateRecords } from "./get-process-template-records.query";
+export { getProcessTemplates } from "./get-process-templates.query";
+export { templateInputSearch } from "./template-input-search.query";

package/src/api/templates/queries/template-input-search.query.ts

@@ -0,0 +1,34 @@
+import type {
+	GetDataDescriptionsQueryVariables,
+	GetSourceEndpointsQueryVariables,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import { type UseQueryOptions, useQuery } from "@tanstack/react-query";
+import { queryFn } from "./template-input-search.server";
+import type {
+	TemplateInputSearchQueryKey,
+	TemplateInputSearchQueryVariables,
+} from "./types";
+
+export const buildTemplateSearchQueryKey = {
+	getSourceEndpoints: (variables: GetSourceEndpointsQueryVariables) => [
+		"getSourceEndpoints",
+		variables,
+	],
+	getDataDescriptions: (variables: GetDataDescriptionsQueryVariables) => [
+		"getDataDescriptions",
+		variables,
+	],
+};
+
+export const templateInputSearch = {
+	useData: (
+		variables: TemplateInputSearchQueryVariables,
+		queryKey: TemplateInputSearchQueryKey,
+		options?: UseQueryOptions,
+	) =>
+		useQuery({
+			queryKey: buildTemplateSearchQueryKey[queryKey](variables),
+			queryFn: () => queryFn(variables, queryKey),
+			...options,
+		}),
+};

package/src/api/templates/queries/template-input-search.server.ts

@@ -0,0 +1,35 @@
+"use server";
+import type {
+	GetDataDescriptionsQueryVariables,
+	GetSourceEndpointsQueryVariables,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import createGraphqlclient from "@evenicanpm/admin-core/api/sdk/graphqlClient.client";
+import type {
+	TemplateInputSearchQueryKey,
+	TemplateInputSearchQueryVariables,
+} from "./types";
+
+export const queryFn = async (
+	variables: TemplateInputSearchQueryVariables,
+	queryKey: TemplateInputSearchQueryKey,
+) => {
+	const sdk = await createGraphqlclient();
+
+	switch (queryKey) {
+		case "getSourceEndpoints": {
+			const { data } = await sdk.GetSourceEndpoints(
+				variables as GetSourceEndpointsQueryVariables,
+			);
+			return data;
+		}
+		case "getDataDescriptions": {
+			const { data } = await sdk.GetDataDescriptions(
+				variables as GetDataDescriptionsQueryVariables,
+			);
+			return data;
+		}
+		default: {
+			throw new Error(`queryKey "${queryKey}" invalid`);
+		}
+	}
+};

package/src/api/templates/queries/types.ts

@@ -0,0 +1,28 @@
+import type {
+	GetDataDescriptionsQuery,
+	GetDataDescriptionsQueryVariables,
+	GetSourceEndpointsQuery,
+	GetSourceEndpointsQueryVariables,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+
+export type TemplateInputSearchQueryVariables =
+	| GetSourceEndpointsQueryVariables
+	| GetDataDescriptionsQueryVariables;
+
+export type TemplateInputSearchQuery =
+	| GetSourceEndpointsQuery
+	| GetDataDescriptionsQuery;
+
+export type TemplateInputSearchQueryKey =
+	| "getSourceEndpoints"
+	| "getDataDescriptions";
+
+export const isTemplateInputSearchQueryKey = (
+	qn: string,
+): qn is TemplateInputSearchQueryKey => {
+	const keys: TemplateInputSearchQueryKey[] = [
+		"getSourceEndpoints",
+		"getDataDescriptions",
+	];
+	return keys.includes(qn as TemplateInputSearchQueryKey);
+};

package/src/components/breadcrumbs/breadcrumbs.tsx

@@ -1,15 +1,18 @@
-import React from "react";
-import Link from "next/link";
-
+import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+import { Breadcrumbs, Button, Typography } from "@mui/material";
 // MUI
 import styled from "@mui/material/styles/styled";
-import { Breadcrumbs, Typography } from "@mui/material";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
 
-import { Crumb } from "./types";
+import type { Crumb } from "./types";
 
 // STYLED COMPONENTS
 export const Wrapper = styled("div")(({ theme }) => ({
 	padding: theme.spacing(0, 1, 3),
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
 }));
 
 type Props = {
@@ -17,6 +20,13 @@ type Props = {
 };
 
 export default function IntegrateBreadcrumbs({ breadcrumbs }: Props) {
+	const router = useRouter();
+	const pathname = usePathname();
+
+	const showBackButton = /^\/e4integrate\/(integrations|executions)\/\w+/.test(
+		pathname || "",
+	);
+
 	return (
 		<Wrapper>
 			<Breadcrumbs>
@@ -34,6 +44,23 @@ export default function IntegrateBreadcrumbs({ breadcrumbs }: Props) {
 					),
 				)}
 			</Breadcrumbs>
+			{showBackButton ? (
+				<Button
+					variant="text"
+					size="small"
+					color="info"
+					onClick={() => router.back()}
+					sx={{
+						textTransform: "none",
+						minWidth: "auto",
+						backgroundColor: "transparent",
+					}}
+				>
+					<ArrowBackIosIcon sx={{ width: "14px" }} /> Back
+				</Button>
+			) : (
+				<div />
+			)}
 		</Wrapper>
 	);
 }

package/src/components/button/outlined-icon-button.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { IconButton, IconButtonProps } from "@mui/material";
+import { IconButton, type IconButtonProps } from "@mui/material";
+import type React from "react";
 
 interface Props extends IconButtonProps {
 	children: React.ReactNode;

package/src/components/core/date-time-popover.tsx

@@ -1,5 +1,12 @@
-import { Theme, useTheme } from "@mui/material";
-import { Popover, Box, Typography, PopoverProps } from "@mui/material";
+import { toLongDate } from "@evenicanpm/admin-integrate/utils/date-functions";
+import {
+	Box,
+	Popover,
+	type PopoverProps,
+	type Theme,
+	Typography,
+	useTheme,
+} from "@mui/material";
 
 interface Props extends PopoverProps {
 	dateIsoString: string;
@@ -12,12 +19,12 @@ export default function DateTimePopover({
 	const theme = useTheme();
 	const styles = getStyles(theme);
 
-	const date = new Date(dateIsoString);
+	const formatted = toLongDate(dateIsoString);
 
 	return (
 		<Popover {...popoverProps}>
 			<Box sx={styles.popover}>
-				<Typography>{date.toString()}</Typography>
+				<Typography>{formatted}</Typography>
 			</Box>
 		</Popover>
 	);

package/src/components/core/drawer-buttons.tsx

@@ -0,0 +1,52 @@
+import { OutlinedIconButton } from "@evenicanpm/admin-integrate/components/button";
+import { Clear } from "@mui/icons-material";
+import { Box, Divider, Stack, type Theme, useTheme } from "@mui/material";
+
+interface Props {
+	handleClose: () => void;
+	children?: React.ReactNode; // e.g. add button, save button, etc.
+}
+
+export default function DrawerButtons(props: Props) {
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	return (
+		<>
+			<Box sx={styles.buttons} display="flex" justifyContent="flex-end">
+				{/* <IconButton onClick={props.handleClose}>
+					<KeyboardDoubleArrowRightOutlined />
+				</IconButton> */}
+				<Stack spacing={1} direction="row">
+					{props.children}
+					<OutlinedIconButton
+						onClick={props.handleClose}
+						sx={styles.closeButton}
+					>
+						<Clear />
+					</OutlinedIconButton>
+				</Stack>
+			</Box>
+			<Divider sx={styles.divider} />
+		</>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		buttons: {
+			padding: theme.spacing(2),
+			backgroundColor: "grey.100",
+		},
+		closeButton: {
+			backgroundColor: "error.main",
+			"&:hover": {
+				backgroundColor: "error.500",
+			},
+			color: "white",
+		},
+		divider: {
+			borderColor: "grey.400",
+		},
+	};
+};

package/src/components/core/edited-typography.tsx

@@ -1,5 +1,5 @@
-import { useTranslations } from "next-intl";
 import { Typography } from "@mui/material";
+import { useTranslations } from "next-intl";
 
 interface Props {
 	edited: boolean;

package/src/components/core/index.ts

@@ -1,4 +1,6 @@
-export { default as Loading } from "./loading";
 export { default as DateTimePopover } from "./date-time-popover";
-export { default as TitleEdit } from "./title-edit";
+export { default as DrawerButtons } from "./drawer-buttons";
 export { default as EditedTypography } from "./edited-typography";
+export { default as Loading } from "./loading";
+export { default as StatusTag } from "./status-tag";
+export { default as TitleEdit } from "./title-edit";

package/src/components/core/loading.tsx

@@ -1,6 +1,6 @@
-import CircularProgress from "@mui/material/CircularProgress";
 import FlexRowCenter from "@evenicanpm/admin-core/components/flex-box/flex-row-center";
 import { useTheme } from "@mui/material";
+import CircularProgress from "@mui/material/CircularProgress";
 
 const Loading = () => {
 	const theme = useTheme();

package/src/components/core/status-tag.tsx

@@ -0,0 +1,97 @@
+import { Box, type SxProps, Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
+
+// Styled components
+const StyledTagBox = styled(Box)(({ theme }) => ({
+	padding: theme.spacing(0, 1.5),
+	border: "solid 1px",
+	borderRadius: 4,
+	alignContent: "center",
+	maxWidth: "fit-content",
+	maxHeight: "fit-content",
+}));
+const StyledTag = styled(Typography)(() => ({
+	fontWeight: "bold",
+}));
+
+type Status = "info" | "success" | "warning" | "error" | "unavailable";
+
+interface Props {
+	type: Status;
+	text: string;
+	sx?: SxProps;
+}
+
+export default function StatusTag(props: Props) {
+	const statusTagMap: { [key in Status]: React.ReactNode } = {
+		info: (
+			<StyledTagBox
+				sx={{
+					backgroundColor: "info.100",
+					borderColor: "info.main",
+					...props.sx,
+				}}
+			>
+				<StyledTag color="info" variant="caption">
+					{props.text}
+				</StyledTag>
+			</StyledTagBox>
+		),
+		success: (
+			<StyledTagBox
+				sx={{
+					backgroundColor: "success.100",
+					borderColor: "success.main",
+					...props.sx,
+				}}
+			>
+				<StyledTag color="success" variant="caption">
+					{props.text}
+				</StyledTag>
+			</StyledTagBox>
+		),
+		warning: (
+			<StyledTagBox
+				sx={{
+					backgroundColor: "warning.100",
+					borderColor: "orange.700",
+					color: "orange.700",
+					...props.sx,
+				}}
+			>
+				<StyledTag color="inherit" variant="caption">
+					{props.text}
+				</StyledTag>
+			</StyledTagBox>
+		),
+		error: (
+			<StyledTagBox
+				sx={{
+					backgroundColor: "error.100",
+					borderColor: "error.main",
+					...props.sx,
+				}}
+			>
+				<StyledTag color="error" variant="caption">
+					{props.text}
+				</StyledTag>
+			</StyledTagBox>
+		),
+		unavailable: (
+			<StyledTagBox
+				sx={{
+					backgroundColor: "grey.300",
+					borderColor: "grey.700",
+					color: "grey.700",
+					...props.sx,
+				}}
+			>
+				<StyledTag color="inherit" variant="caption">
+					{props.text}
+				</StyledTag>
+			</StyledTagBox>
+		),
+	};
+
+	return statusTagMap[props.type] || statusTagMap["unavailable" as Status];
+}