@evenicanpm/admin-integrate 1.1.0

package/README.md

@@ -0,0 +1,29 @@
+# @evenicanpm/admin-core
+
+## Overview
+
+- this package should contain the internals of the admin
+- the admin should be a shell that implements all of the code in this package
+- there should be an exstensibility layer on the key components
+  - api
+  - components
+  - etc
+
+## Build and Dependencies
+
+- this package is consumed and built by webpack as part of admin build
+- it does not have it's own compile/build step
+- must have this package listed under `transpilePackages` in the admin next.config.mjs
+- using `transpilePackages` keeps the @evenicanpm packages very lightweight and portable
+- during product dev this package is installed via local file url (symlink)
+- this means this packages dependencies are NOT installed, everything should be a peerDep
+  and then added to the admin package.json as a dependency
+- there is a step in the `init.sh` script that will symlink the admin node_modules to
+  the top-level of client packages - this ensures that the same versions of packages are used
+- this is required for packages such as `@tanstack/react-query` that require the same package
+  location to be used across the entire codebase
+
+## Misc
+
+- if at some point we want to start installing packages in this repo we will have to run an npm
+  install step in the `init.sh` of admin

package/documents/ProcessExecution/fragments.ts

@@ -0,0 +1,16 @@
+import { gql } from "graphql-request";
+
+export const PROCESS_EXECUTION_FRAGMENT_SM = gql`
+  fragment e4ProcessExecutionFragmentSM on ProcessExecution {
+    id
+    name
+    startDate
+    executionStatus {
+      id
+    }
+    process {
+      id
+    }
+    modified
+  }
+`;

package/documents/ProcessExecution/list.ts

@@ -0,0 +1,31 @@
+import { gql } from "graphql-request";
+
+import { PROCESS_EXECUTION_FRAGMENT_SM } from "./fragments";
+
+const GET_PROCESS_EXECUTIONS = gql`
+  ${PROCESS_EXECUTION_FRAGMENT_SM}
+  query GetProcessExecutions($input: ProcessExecutionInput) {
+    processExecutions(input: $input) {
+      nodes {
+        ...e4ProcessExecutionFragmentSM
+      }
+      pageInfo {
+        resultsReturned
+        currentPage
+        hasNextPage
+        hasPreviousPage
+        skip
+        top
+        sort
+        sortDesc
+        search
+        executionStatusIds
+        dateRange {
+          startDate
+          endDate
+        }
+      }
+      recordCount
+    }
+  }
+`;

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@evenicanpm/admin-integrate",
+  "version": "1.1.0",
+  "description": "e4Integrate Admin Panel",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "exports": {
+    ".": "./index.js",
+    "./*": "./*"
+  },
+  "author": "Evenica",
+  "license": "ISC",
+  "peerDependencies": {
+    "@xyflow/react": "^12.8.4",
+    "elkjs": "^0.10.0"
+  },
+  "gitHead": "0c9180f24435b0361dfc05ccba4a1f0e7ad19a7a"
+}

package/src/api/dashboard/queries/get-process-executions.query.ts

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

package/src/api/dashboard/queries/get-process-executions.server.ts

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

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

@@ -0,0 +1 @@
+export { getProcessExecutions } from "./get-process-executions.query";

package/src/components/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import Link from "next/link";
+
+// MUI
+import styled from "@mui/material/styles/styled";
+import { Breadcrumbs, Typography } from "@mui/material";
+
+// STYLED COMPONENTS
+export const Wrapper = styled("div")(({ theme }) => ({
+  padding: theme.spacing(0, 1, 3),
+}));
+
+export interface Crumb {
+  name: string;
+  url?: string;
+}
+
+type Props = {
+  breadcrumbs: Crumb[];
+};
+
+export default function IntegrateBreadcrumbs({ breadcrumbs }: Props) {
+  return (
+    <Wrapper>
+      <Breadcrumbs>
+        {breadcrumbs.map((bc) =>
+          bc.url ? (
+            <Link href={bc.url} key={bc.name}>
+              <Typography variant="body1" color="info.main">
+                {bc.name}
+              </Typography>
+            </Link>
+          ) : (
+            <Typography variant="body1" key={bc.name} color="info.main">
+              {bc.name}
+            </Typography>
+          ),
+        )}
+      </Breadcrumbs>
+    </Wrapper>
+  );
+}

package/src/components/breadcrumbs/index.ts

@@ -0,0 +1,2 @@
+export { default as IntegrateBreadcrumbs } from "./breadcrumbs";
+export { Crumb } from "./breadcrumbs";

package/src/components/button/index.ts

@@ -0,0 +1 @@
+export { default as OutlinedIconButton } from "./outlined-icon-button";

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

@@ -0,0 +1,47 @@
+import React from "react";
+import { IconButton, SxProps } from "@mui/material";
+
+interface Props {
+  color?:
+    | "inherit"
+    | "default"
+    | "primary"
+    | "secondary"
+    | "error"
+    | "info"
+    | "success"
+    | "warning";
+  onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  children: React.ReactNode;
+  sx?: SxProps;
+}
+
+const OutlinedIconButton: React.FC<Props> = (props: Props) => {
+  const sx = {
+    // Default style
+    borderWidth: "2px",
+    borderStyle: "solid",
+    borderColor: `${props.color}.light`,
+    "&:hover": {
+      backgroundColor: "action.hover",
+      borderColor: `${props.color}.main`,
+    },
+    borderRadius: "8px",
+
+    // Override style
+    ...props.sx,
+  };
+
+  return (
+    <IconButton
+      centerRipple={false}
+      color={props.color || "inherit"}
+      sx={sx}
+      onClick={props.onClick}
+    >
+      {props.children}
+    </IconButton>
+  );
+};
+
+export default OutlinedIconButton;

package/src/components/core/index.ts

@@ -0,0 +1 @@
+export { default as Loading } from "./loading";

package/src/components/core/loading.tsx

@@ -0,0 +1,15 @@
+import CircularProgress from "@mui/material/CircularProgress";
+import FlexRowCenter from "@evenicanpm/admin-core/components/flex-box/flex-row-center";
+import { useTheme } from "@mui/material";
+
+const Loading = () => {
+  const theme = useTheme();
+
+  return (
+    <FlexRowCenter sx={{ margin: theme.spacing(1) }}>
+      <CircularProgress color="info" />
+    </FlexRowCenter>
+  );
+};
+
+export default Loading;

package/src/components/dashboard-list/dashboard-list-row.tsx

@@ -0,0 +1,145 @@
+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";
+
+// Custom components
+import {
+  StyledTableCell,
+  StyledTableRow,
+  StyledIconButton,
+} from "@evenicanpm/admin-integrate/components/data-table/table-row";
+import { ExecutionStatusIcon } from "@evenicanpm/admin-integrate/components/execution";
+
+// Hooks
+import useTimestamp from "@evenicanpm/admin-integrate/hooks/use-timestamp";
+
+// Types
+import { Item } from "./dashboard-list";
+import { Head } from "../data-table/table-header";
+import { TableCellProps } from "@mui/material";
+
+interface Props {
+  item: Item;
+  heading: Head[]; // for alignment
+  enableBgColor?: boolean;
+  sx?: SxProps;
+}
+
+const DashboardListRow: 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,
+    // );
+  };
+
+  // only relevant for execution status 450 & 500 (i.e. Notifications list)
+  let bgColor = "";
+  if (props.enableBgColor) {
+    switch (props.item.executionStatus.id) {
+      case "450":
+        bgColor = "warning.100";
+        break;
+      case "500":
+        bgColor = "error.100";
+        break;
+    }
+  }
+
+  const sx = props.sx || {};
+
+  return (
+    <StyledTableRow sx={{ ...sx, backgroundColor: bgColor }}>
+      <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}
+        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[2].align as TableCellProps["align"]}
+        width={props.heading[2].width}
+      >
+        <StyledIconButton onClick={handleRedirect}>
+          <RemoveRedEye />
+        </StyledIconButton>
+      </StyledTableCell>
+    </StyledTableRow>
+  );
+};
+
+const getStyles = (theme: Theme) => {
+  return {
+    timeCell: {
+      cursor: "default",
+    },
+    popover: {
+      padding: theme.spacing(1),
+    },
+  };
+};
+
+export default DashboardListRow;

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

@@ -0,0 +1,157 @@
+import React, { useState, useEffect } from "react";
+import { useTranslations } from "next-intl";
+
+// API
+import { GetProcessExecutionsQuery } from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
+
+// MUI
+import { Card, Table, TableContainer, TableBody, Box } from "@mui/material";
+import { Theme, useTheme } from "@mui/material";
+
+// Custom components
+import { FlexBox } from "@evenicanpm/admin-core/components/flex-box";
+
+import { TableHeader, TableSkeleton } from "../data-table";
+import DashboardListRow from "./dashboard-list-row";
+import { DashboardListHeader } from "../header/";
+
+// Types
+import { Head } from "../data-table/table-header";
+import { Typography, Stack } from "@mui/material";
+
+// Returned from processExecutions query
+export interface Item {
+  id: string;
+  name: string;
+  startDate: string;
+  executionStatus: {
+    id: string;
+  };
+  process: {
+    id: string;
+  };
+}
+
+interface Props {
+  title: string;
+  heading: Head[];
+  data: GetProcessExecutionsQuery;
+  loading: boolean;
+  url: string;
+  handleRefresh?: () => void;
+  enableBgColor?: boolean;
+}
+
+// Row height in terms of multiples of theme.spacing(1) (e.g. theme.spacing(7.5 & rows per page))
+const rowHeight = 7.5;
+
+const DashboardList: React.FC<Props> = (props: Props) => {
+  const t = useTranslations("Integrate.Dashboard");
+
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  const [items, setItems] = useState<Item[]>([]);
+  const [fetched, setFetched] = useState<boolean>(false); // prevents "empty list" msg from showing for split second
+
+  useEffect(() => {
+    if (props.data) {
+      setItems(props.data.processExecutions.nodes as Item[]);
+      setFetched(true);
+    }
+  }, [props.data]);
+
+  return (
+    <Card sx={styles.card}>
+      <Box mr={2} ml={2}>
+        <DashboardListHeader
+          title={props.title}
+          url={props.url}
+          handleRefresh={props.handleRefresh}
+        />
+      </Box>
+
+      {props.loading && (
+        <TableSkeleton
+          heading={props.heading}
+          perPage={5}
+          rowSx={styles.rowSx}
+          sx={styles.tableContainer}
+        />
+      )}
+
+      {!props.loading && props.data && fetched && items.length > 0 ? (
+        <TableContainer sx={styles.tableContainer}>
+          <Table>
+            <TableHeader
+              heading={props.heading}
+              orderBy={"startDate"}
+              order={"desc"}
+            />
+            <TableBody>
+              {items.map((item, index) => (
+                <DashboardListRow
+                  key={index}
+                  item={item}
+                  heading={props.heading}
+                  enableBgColor={props.enableBgColor}
+                  sx={styles.rowSx}
+                />
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      ) : null}
+
+      {!props.loading && !(props.data && fetched && items.length > 0) ? (
+        <FlexBox
+          justifyContent="center"
+          alignItems="center"
+          sx={{
+            minHeight: "335px",
+            marginBottom: theme.spacing(2),
+          }}
+        >
+          <Stack spacing={1} justifyContent="center" alignItems="center">
+            <Typography variant="h6" color="info">
+              {t("ListEmpty.title")}
+            </Typography>
+            <Typography variant="body1">{t("ListEmpty.body")}</Typography>
+          </Stack>
+        </FlexBox>
+      ) : null}
+    </Card>
+  );
+};
+
+const getStyles = (theme: Theme) => {
+  return {
+    card: {
+      paddingTop: theme.spacing(2),
+    },
+    title: {
+      display: "flex",
+      alignItems: "center",
+      height: "100%",
+    },
+    typography: {
+      fontWeight: "medium",
+    },
+    button: {
+      borderWidth: 2,
+      borderRadius: 1,
+      marginRight: theme.spacing(1),
+    },
+    iconButton: {
+      borderRadius: 1,
+    },
+    tableContainer: {
+      paddingTop: theme.spacing(2),
+    },
+    rowSx: {
+      height: theme.spacing(rowHeight),
+    },
+  };
+};
+
+export default DashboardList;

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

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

package/src/components/data-table/index.ts

@@ -0,0 +1,3 @@
+export { default as TableHeader } from "./table-header";
+export { default as TablePagination } from "./table-pagination";
+export { default as TableSkeleton } from "./table-skeleton";