@evenicanpm/admin-integrate 1.1.0 → 1.2.0

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

@@ -3,147 +3,152 @@ import { useTranslations } from "next-intl";
 
 // API
 import { getProcessExecutions } from "@evenicanpm/admin-integrate/api/dashboard/queries";
-import { ProcessExecutionInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+import {
+	ProcessExecutionInput,
+	GetProcessExecutionsQuery,
+} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
 
 // Custom components
 import SnackbarAlert, {
-  iSnackbarAlert,
+	iSnackbarAlert,
 } from "@evenicanpm/admin-core/components/snackbar-alert";
 
 import DashboardList from "@evenicanpm/admin-integrate/components/dashboard-list";
 
 const defaultInput: ProcessExecutionInput = {
-  sort: "startDate",
-  sortDesc: true,
-  top: 5,
-  skip: 0,
+	sort: "startDate",
+	sortDesc: true,
+	top: 5,
+	skip: 0,
 };
 
 export default function DashboardListSections() {
-  const t = useTranslations("Integrate.Dashboard");
-  const m = useTranslations("Integrate.Message");
+	const t = useTranslations("Integrate.Dashboard");
+	const m = useTranslations("Integrate.Message");
 
-  const [refreshed, setRefreshed] = useState<boolean>(false);
-  const [message, setMessage] = useState<iSnackbarAlert>({ open: false });
+	const [refreshed, setRefreshed] = useState<boolean>(false);
+	const [message, setMessage] = useState<iSnackbarAlert>({ open: false });
 
-  const {
-    data: recent,
-    isLoading: recentLoading,
-    refetch: recentRefetch,
-    isRefetchError: recentRefetchError,
-    isRefetching: recentRefetching,
-  } = getProcessExecutions.useData({ input: defaultInput });
+	const {
+		data: recent,
+		isLoading: recentLoading,
+		refetch: recentRefetch,
+		isRefetchError: recentRefetchError,
+		isRefetching: recentRefetching,
+	} = getProcessExecutions.useData({ input: defaultInput });
 
-  const {
-    data: notifications,
-    isLoading: notificationsLoading,
-    refetch: notificationsRefetch,
-    isRefetchError: notificationsRefetchError,
-    isRefetching: notificationsRefetching,
-  } = getProcessExecutions.useData({
-    input: { ...defaultInput, executionStatusIds: [450, 500, 999] },
-  });
+	const {
+		data: notifications,
+		isLoading: notificationsLoading,
+		refetch: notificationsRefetch,
+		isRefetchError: notificationsRefetchError,
+		isRefetching: notificationsRefetching,
+	} = getProcessExecutions.useData({
+		input: { ...defaultInput, executionStatusIds: [450, 500, 999] },
+	});
 
-  useEffect(() => {
-    if (refreshed && !recentRefetching && !notificationsRefetching) {
-      if (recentRefetchError || notificationsRefetchError) {
-        setMessage({
-          open: true,
-          severity: "error",
-          message: m("Refresh.error"),
-        });
-      } else {
-        setMessage({
-          open: true,
-          severity: "success",
-          message: m("Refresh.success"),
-        });
-      }
-      setRefreshed(false);
-    }
-  }, [
-    refreshed,
-    recentRefetchError,
-    notificationsRefetchError,
-    recentRefetching,
-    notificationsRefetching,
-  ]);
+	useEffect(() => {
+		if (refreshed && !recentRefetching && !notificationsRefetching) {
+			if (recentRefetchError || notificationsRefetchError) {
+				setMessage({
+					open: true,
+					severity: "error",
+					message: m("Refresh.error"),
+				});
+			} else {
+				setMessage({
+					open: true,
+					severity: "success",
+					message: m("Refresh.success"),
+				});
+			}
+			setRefreshed(false);
+		}
+	}, [
+		refreshed,
+		recentRefetchError,
+		notificationsRefetchError,
+		recentRefetching,
+		notificationsRefetching,
+	]);
 
-  const handleRecentRefresh = () => {
-    setRefreshed(true);
-    recentRefetch();
-  };
-  const handleNotifRefresh = () => {
-    setRefreshed(true);
-    notificationsRefetch();
-  };
+	const handleRecentRefresh = () => {
+		setRefreshed(true);
+		recentRefetch();
+	};
+	const handleNotifRefresh = () => {
+		setRefreshed(true);
+		notificationsRefetch();
+	};
 
-  const recentExecutionsHeading = [
-    {
-      id: "name",
-      label: t("ListHeader.integration"),
-      align: "left",
-      width: "70%",
-    },
-    {
-      id: "startDate",
-      label: t("ListHeader.lastRun"),
-      align: "center",
-      width: "15%",
-    },
-    {
-      id: "view",
-      label: t("ListHeader.actions"),
-      align: "center",
-      width: "5%",
-    },
-  ];
-  const notificationsHeading = [
-    {
-      id: "name",
-      label: t("ListHeader.message"),
-      align: "left",
-      width: "70%",
-    },
-    {
-      id: "startDate",
-      label: t("ListHeader.time"),
-      align: "center",
-      width: "15%",
-    },
-    {
-      id: "view",
-      label: t("ListHeader.actions"),
-      align: "center",
-      width: "5%",
-    },
-  ];
+	const recentExecutionsHeading = [
+		{
+			id: "name",
+			label: t("ListHeader.integration"),
+			align: "left",
+			width: "70%",
+		},
+		{
+			id: "startDate",
+			label: t("ListHeader.lastRun"),
+			align: "center",
+			width: "15%",
+		},
+		{
+			id: "view",
+			label: t("ListHeader.actions"),
+			align: "center",
+			width: "5%",
+		},
+	];
+	const notificationsHeading = [
+		{
+			id: "name",
+			label: t("ListHeader.message"),
+			align: "left",
+			width: "70%",
+		},
+		{
+			id: "startDate",
+			label: t("ListHeader.time"),
+			align: "center",
+			width: "15%",
+		},
+		{
+			id: "view",
+			label: t("ListHeader.actions"),
+			align: "center",
+			width: "5%",
+		},
+	];
 
-  return (
-    <>
-      <DashboardList
-        title={t("recentExecutions")}
-        heading={recentExecutionsHeading}
-        data={recent}
-        loading={recentLoading || recentRefetching}
-        url="/e4integrate/executions"
-        handleRefresh={handleRecentRefresh}
-      />
-      <DashboardList
-        title={t("notifications")}
-        heading={notificationsHeading}
-        data={notifications}
-        loading={notificationsLoading || notificationsRefetching}
-        url="/e4Integrate/executions?$filter=executionStatusId%20eq%20450%20or%20executionStatusId%20eq%20500%20or%20executionStatusId%20eq%20999"
-        handleRefresh={handleNotifRefresh}
-        enableBgColor
-      />
-      <SnackbarAlert
-        open={message.open}
-        severity={message.severity}
-        message={message.message}
-        handleClose={() => setMessage({ ...message, open: false })}
-      />
-    </>
-  );
+	return (
+		<>
+			<DashboardList
+				title={t("recentExecutions")}
+				heading={recentExecutionsHeading}
+				data={recent as GetProcessExecutionsQuery}
+				loading={recentLoading || recentRefetching}
+				url="/e4integrate/executions"
+				handleRefresh={handleRecentRefresh}
+			/>
+			<DashboardList
+				title={t("notifications")}
+				heading={notificationsHeading}
+				data={notifications as GetProcessExecutionsQuery}
+				loading={notificationsLoading || notificationsRefetching}
+				//temporarily commented out until filter logic is implemented
+				//url="/e4Integrate/executions?$filter=executionStatusId%20eq%20450%20or%20executionStatusId%20eq%20500%20or%20executionStatusId%20eq%20999"
+				url="/e4integrate/executions"
+				handleRefresh={handleNotifRefresh}
+				enableBgColor
+			/>
+			<SnackbarAlert
+				open={message.open}
+				severity={message.severity}
+				message={message.message}
+				handleClose={() => setMessage({ ...message, open: false })}
+			/>
+		</>
+	);
 }

package/src/pages/dashboard/dashboard.tsx

@@ -5,10 +5,10 @@ import DashboardLinkCards from "@evenicanpm/admin-integrate/pages/dashboard/dash
 import DashboardListSections from "@evenicanpm/admin-integrate/pages/dashboard/dashboard-list-sections";
 
 export default function IntegrateDashboard() {
-  return (
-    <>
-      <DashboardLinkCards />
-      <DashboardListSections />
-    </>
-  );
+	return (
+		<>
+			<DashboardLinkCards />
+			<DashboardListSections />
+		</>
+	);
 }

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

@@ -2,42 +2,36 @@ import React from "react";
 import { useTranslations } from "next-intl";
 
 // MUI
-import { Theme, useTheme } from "@mui/material";
 import { Box } from "@mui/material";
 
 // Custom components
 import {
-  IntegrateBreadcrumbs,
-  Crumb,
+	IntegrateBreadcrumbs,
+	Crumb,
 } from "@evenicanpm/admin-integrate/components/breadcrumbs";
+import IntegrationView from "@evenicanpm/admin-integrate/components/integration-view/integration-view";
 
 export default function ExecutionDetails() {
-  const t = useTranslations("Integrate");
+	const t = useTranslations("Integrate");
 
-  const theme = useTheme();
-  const styles = getStyles(theme);
+	const breadcrumbs: Crumb[] = [
+		{
+			name: t("Header.dashboard"),
+			url: "/e4integrate",
+		},
+		{
+			name: t("Header.executions"),
+			url: "/e4integrate/executions",
+		},
+		{
+			name: "TODO: dynamic title",
+		},
+	];
 
-  const breadcrumbs: Crumb[] = [
-    {
-      name: t("Header.dashboard"),
-      url: "/e4integrate",
-    },
-    {
-      name: t("Header.executions"),
-      url: "/e4integrate/executions",
-    },
-    {
-      name: "TODO: dynamic title",
-    },
-  ];
-
-  return (
-    <Box>
-      <IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
-    </Box>
-  );
+	return (
+		<Box>
+			<IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
+			<IntegrationView />
+		</Box>
+	);
 }
-
-const getStyles = (theme: Theme) => {
-  return {};
-};

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

@@ -3,20 +3,21 @@ import { redirect, RedirectType } from "next/navigation";
 
 // MUI
 import { Theme, useTheme } from "@mui/material";
-import { Box, Stack, Typography, Popover } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import { RemoveRedEye } from "@mui/icons-material";
 import { SxProps } from "@mui/material";
 
 // Custom components
 import {
-  StyledTableCell,
-  StyledTableRow,
-  StyledIconButton,
+	StyledTableCell,
+	StyledTableRow,
+	StyledIconButton,
 } from "@evenicanpm/admin-integrate/components/data-table/table-row";
 import {
-  ExecutionTag,
-  ExecutionStatusIcon,
+	ExecutionTag,
+	ExecutionStatusIcon,
 } from "@evenicanpm/admin-integrate/components/execution";
+import { DateTimePopover } from "@evenicanpm/admin-integrate/components/core";
 
 // Hooks
 import useTimestamp from "@evenicanpm/admin-integrate/hooks/use-timestamp";
@@ -27,116 +28,112 @@ import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-he
 import { TableCellProps } from "@mui/material";
 
 interface Props {
-  item: Item;
-  heading: Head[]; // for alignment
-  sx?: SxProps;
+	item: Item;
+	heading: Head[]; // for alignment
+	sx?: SxProps;
 }
 
 const ExecutionsListRow: React.FC<Props> = (props: Props) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
+	const theme = useTheme();
+	const styles = getStyles(theme);
 
-  // e.g. "xx days ago"
-  const time = useTimestamp(props.item.startDate);
-  const localTime = new Date(props.item.startDate).toString();
+	// e.g. "xx days ago"
+	const time = useTimestamp(props.item.startDate);
+	const localTime = new Date(props.item.startDate).toString();
 
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-  const open = Boolean(anchorEl);
+	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+	const open = Boolean(anchorEl);
 
-  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
+	const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+		setAnchorEl(event.currentTarget);
+	};
 
-  const handlePopoverClose = () => {
-    setAnchorEl(null);
-  };
+	const handlePopoverClose = () => {
+		setAnchorEl(null);
+	};
 
-  const handleRedirect = () => {
-    //Temporarily commented out until executions detail page is implemented
-    // redirect(
-    //   `/e4integrate/executions/${props.item.process.id}?ExecutionId=${props.item.id}`,
-    //   RedirectType.push,
-    // );
-  };
+	const handleRedirect = () => {
+		redirect(
+			`/e4integrate/executions/${props.item.process.id}?ExecutionId=${props.item.id}`,
+			RedirectType.push,
+		);
+	};
 
-  return (
-    <StyledTableRow sx={props.sx}>
-      <StyledTableCell
-        align={props.heading[0].align as TableCellProps["align"]}
-        width={props.heading[0].width}
-      >
-        <Stack spacing={1} direction="row">
-          <Box display="flex" justifyContent="flex-end" alignItems="center">
-            <ExecutionStatusIcon
-              executionStatusId={props.item.executionStatus.id}
-            />
-          </Box>
-          <Box display="flex" justifyContent="flex-end" alignItems="center">
-            <Typography>{props.item.name}</Typography>
-          </Box>
-        </Stack>
-      </StyledTableCell>
-      <StyledTableCell
-        align={props.heading[1].align as TableCellProps["align"]}
-        width={props.heading[1].width}
-      >
-        <ExecutionTag
-          executionStatusId={props.item.executionStatus.id}
-          sx={{ margin: "auto" }}
-        />
-      </StyledTableCell>
-      <StyledTableCell
-        align={props.heading[2].align as TableCellProps["align"]}
-        width={props.heading[2].width}
-        sx={styles.timeCell}
-      >
-        <Typography
-          onMouseEnter={handlePopoverOpen}
-          onMouseLeave={handlePopoverClose}
-        >
-          {time}
-        </Typography>
-        <Popover
-          sx={{ pointerEvents: "none" }}
-          open={open}
-          anchorEl={anchorEl}
-          anchorOrigin={{
-            vertical: "bottom",
-            horizontal: "center",
-          }}
-          transformOrigin={{
-            vertical: "top",
-            horizontal: "center",
-          }}
-          onClose={handlePopoverClose}
-          disableRestoreFocus
-        >
-          <Box sx={styles.popover}>
-            <Typography>{localTime}</Typography>
-          </Box>
-        </Popover>
-      </StyledTableCell>
-      <StyledTableCell
-        align={props.heading[3].align as TableCellProps["align"]}
-        width={props.heading[3].width}
-      >
-        <StyledIconButton onClick={handleRedirect}>
-          <RemoveRedEye />
-        </StyledIconButton>
-      </StyledTableCell>
-    </StyledTableRow>
-  );
+	return (
+		<StyledTableRow sx={props.sx}>
+			<StyledTableCell
+				align={props.heading[0].align as TableCellProps["align"]}
+				width={props.heading[0].width}
+			>
+				<Stack spacing={1} direction="row">
+					<Box display="flex" justifyContent="flex-end" alignItems="center">
+						<ExecutionStatusIcon
+							executionStatusId={props.item.executionStatus.id}
+						/>
+					</Box>
+					<Box display="flex" justifyContent="flex-end" alignItems="center">
+						<Typography>{props.item.name}</Typography>
+					</Box>
+				</Stack>
+			</StyledTableCell>
+			<StyledTableCell
+				align={props.heading[1].align as TableCellProps["align"]}
+				width={props.heading[1].width}
+			>
+				<ExecutionTag
+					executionStatusId={props.item.executionStatus.id}
+					sx={{ margin: "auto" }}
+				/>
+			</StyledTableCell>
+			<StyledTableCell
+				align={props.heading[2].align as TableCellProps["align"]}
+				width={props.heading[2].width}
+				sx={styles.timeCell}
+			>
+				<Typography
+					onMouseEnter={handlePopoverOpen}
+					onMouseLeave={handlePopoverClose}
+				>
+					{time}
+				</Typography>
+				<DateTimePopover
+					dateIsoString={localTime}
+					sx={{ pointerEvents: "none" }}
+					open={open}
+					anchorEl={anchorEl}
+					anchorOrigin={{
+						vertical: "bottom",
+						horizontal: "center",
+					}}
+					transformOrigin={{
+						vertical: "top",
+						horizontal: "center",
+					}}
+					onClose={handlePopoverClose}
+					disableRestoreFocus
+				/>
+			</StyledTableCell>
+			<StyledTableCell
+				align={props.heading[3].align as TableCellProps["align"]}
+				width={props.heading[3].width}
+			>
+				<StyledIconButton onClick={handleRedirect}>
+					<RemoveRedEye />
+				</StyledIconButton>
+			</StyledTableCell>
+		</StyledTableRow>
+	);
 };
 
 const getStyles = (theme: Theme) => {
-  return {
-    timeCell: {
-      cursor: "default",
-    },
-    popover: {
-      padding: theme.spacing(1),
-    },
-  };
+	return {
+		timeCell: {
+			cursor: "default",
+		},
+		popover: {
+			padding: theme.spacing(1),
+		},
+	};
 };
 
 export default ExecutionsListRow;