@evenicanpm/admin-integrate 1.1.0

package/src/pages/dashboard/dashboard-link-cards.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import { useTranslations } from "next-intl";
+
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import { Box, Grid2 as Grid } from "@mui/material";
+import {
+  RocketLaunchOutlined,
+  IntegrationInstructionsOutlined,
+  PlaylistPlayOutlined,
+  AccessTimeOutlined,
+} from "@mui/icons-material";
+
+// Custom components
+import LinkCard from "@evenicanpm/admin-integrate/components/link-cards";
+
+const breakpoints = {
+  xs: 6,
+  md: 3,
+};
+
+export default function DashboardLinkCards() {
+  const t = useTranslations("Integrate.Dashboard.LinkCard");
+
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  const linkcardProps = {
+    quickstart: {
+      title: t("quickstart"),
+      description: t("quickstartDescription"),
+      url: "/e4integrate",
+      children: (
+        <Box
+          sx={{
+            ...styles.iconSquare,
+            backgroundColor: "paste.600",
+          }}
+        >
+          <RocketLaunchOutlined sx={styles.icon} />
+        </Box>
+      ),
+    },
+    integrations: {
+      title: t("integrations"),
+      description: t("integrationsDescription"),
+      url: "/e4integrate/integrations",
+      children: (
+        <Box
+          sx={{
+            ...styles.iconSquare,
+            backgroundColor: "orange.400",
+          }}
+        >
+          <IntegrationInstructionsOutlined sx={styles.icon} />
+        </Box>
+      ),
+    },
+    scheduler: {
+      title: t("scheduler"),
+      description: t("schedulerDescription"),
+      url: "/e4integrate/scheduler",
+      children: (
+        <Box
+          sx={{
+            ...styles.iconSquare,
+            backgroundColor: "marron.600",
+          }}
+        >
+          <AccessTimeOutlined sx={styles.icon} />
+        </Box>
+      ),
+    },
+    executions: {
+      title: t("executions"),
+      description: t("executionsDescription"),
+      url: "/e4integrate/executions",
+      children: (
+        <Box
+          sx={{
+            ...styles.iconSquare,
+            backgroundColor: "info.500",
+          }}
+        >
+          <PlaylistPlayOutlined sx={styles.icon} />
+        </Box>
+      ),
+    },
+  };
+
+  return (
+    <Grid container spacing={4}>
+      <Grid size={breakpoints}>
+        <LinkCard {...linkcardProps.quickstart} />
+      </Grid>
+      <Grid size={breakpoints}>
+        <LinkCard {...linkcardProps.integrations} />
+      </Grid>
+      <Grid size={breakpoints}>
+        <LinkCard {...linkcardProps.executions} />
+      </Grid>
+      <Grid size={breakpoints}>
+        <LinkCard {...linkcardProps.scheduler} />
+      </Grid>
+    </Grid>
+  );
+}
+
+const getStyles = (theme: Theme) => {
+  return {
+    iconSquare: {
+      padding: theme.spacing(1),
+      paddingBottom: theme.spacing(0.5),
+      marginBottom: theme.spacing(1),
+      color: "grey.200",
+      borderRadius: 1,
+    },
+    icon: {
+      fontSize: "h4.fontSize",
+    },
+  };
+};

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

@@ -0,0 +1,149 @@
+import React, { useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
+
+// API
+import { getProcessExecutions } from "@evenicanpm/admin-integrate/api/dashboard/queries";
+import { ProcessExecutionInput } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+
+// Custom components
+import SnackbarAlert, {
+  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,
+};
+
+export default function DashboardListSections() {
+  const t = useTranslations("Integrate.Dashboard");
+  const m = useTranslations("Integrate.Message");
+
+  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: 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,
+  ]);
+
+  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%",
+    },
+  ];
+
+  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 })}
+      />
+    </>
+  );
+}

package/src/pages/dashboard/dashboard.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+// Local page components
+import DashboardLinkCards from "@evenicanpm/admin-integrate/pages/dashboard/dashboard-link-cards";
+import DashboardListSections from "@evenicanpm/admin-integrate/pages/dashboard/dashboard-list-sections";
+
+export default function IntegrateDashboard() {
+  return (
+    <>
+      <DashboardLinkCards />
+      <DashboardListSections />
+    </>
+  );
+}

package/src/pages/dashboard/index.ts

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

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

@@ -0,0 +1,43 @@
+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,
+} from "@evenicanpm/admin-integrate/components/breadcrumbs";
+
+export default function ExecutionDetails() {
+  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",
+    },
+  ];
+
+  return (
+    <Box>
+      <IntegrateBreadcrumbs breadcrumbs={breadcrumbs} />
+    </Box>
+  );
+}
+
+const getStyles = (theme: Theme) => {
+  return {};
+};

package/src/pages/execution-details/index.ts

@@ -0,0 +1 @@
+export { default } from "./execution-details";

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

@@ -0,0 +1,142 @@
+import React, { useState } from "react";
+import { redirect, RedirectType } from "next/navigation";
+
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import { Box, Stack, Typography, Popover } from "@mui/material";
+import { RemoveRedEye } from "@mui/icons-material";
+import { SxProps } from "@mui/material";
+
+// Custom components
+import {
+  StyledTableCell,
+  StyledTableRow,
+  StyledIconButton,
+} from "@evenicanpm/admin-integrate/components/data-table/table-row";
+import {
+  ExecutionTag,
+  ExecutionStatusIcon,
+} from "@evenicanpm/admin-integrate/components/execution";
+
+// Hooks
+import useTimestamp from "@evenicanpm/admin-integrate/hooks/use-timestamp";
+
+// Types
+import { Item } from "./executions-list";
+import { Head } from "@evenicanpm/admin-integrate/components/data-table/table-header";
+import { TableCellProps } from "@mui/material";
+
+interface Props {
+  item: Item;
+  heading: Head[]; // for alignment
+  sx?: SxProps;
+}
+
+const ExecutionsListRow: React.FC<Props> = (props: Props) => {
+  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();
+
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const open = Boolean(anchorEl);
+
+  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  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,
+    // );
+  };
+
+  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>
+  );
+};
+
+const getStyles = (theme: Theme) => {
+  return {
+    timeCell: {
+      cursor: "default",
+    },
+    popover: {
+      padding: theme.spacing(1),
+    },
+  };
+};
+
+export default ExecutionsListRow;

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

@@ -0,0 +1,78 @@
+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 { Theme, useTheme } from "@mui/material";
+import { TableContainer, Table, TableBody } from "@mui/material";
+import { SxProps } from "@mui/material";
+
+// Custom components
+import { TableHeader } from "@evenicanpm/admin-integrate/components/data-table";
+
+// Local components
+import ExecutionsListRow from "./executions-list-row";
+
+interface Props {
+  heading: Head[];
+  items: Item[];
+  input: ProcessExecutionInput;
+  setInput: (newInput: ProcessExecutionInput) => void;
+  rowSx?: SxProps;
+}
+
+export default function ExecutionsListTable(props: Props) {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  const handleRequestSort = (property: string) => {
+    const current = props.input.sort;
+    if (property === current) {
+      props.setInput({
+        ...props.input,
+        sortDesc: !props.input.sortDesc,
+      });
+    } else {
+      props.setInput({
+        ...props.input,
+        sort: property,
+        sortDesc: false,
+      });
+    }
+  };
+
+  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>
+    </>
+  );
+}
+
+const getStyles = (theme: Theme) => {
+  return {};
+};