@evenicanpm/admin-integrate 1.1.0 → 1.2.0

package/src/components/core/loading.tsx

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

package/src/components/core/title-edit.tsx

@@ -0,0 +1,122 @@
+import { useState } from "react";
+
+import { Theme, useTheme } from "@mui/material";
+import {
+	Box,
+	Stack,
+	Typography,
+	TextField,
+	IconButton,
+	TypographyOwnProps,
+} from "@mui/material";
+import { EditOutlined, Clear, Check } from "@mui/icons-material";
+
+import { OutlinedIconButton } from "@evenicanpm/admin-integrate/components/button";
+
+interface Props {
+	title: string;
+	onConfirm: (input: string) => void; // update source of props.title
+	readOnly?: boolean;
+	fullWidth?: boolean;
+	variant?: TypographyOwnProps["variant"];
+}
+
+export default function TitleEdit(props: Props) {
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const [editMode, setEditMode] = useState(false);
+	const [input, setInput] = useState(props.title);
+
+	const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		setInput(event.target.value);
+	};
+
+	const handleClickEdit = () => {
+		setEditMode(true);
+	};
+
+	const handleClose = () => {
+		setInput(props.title);
+		setEditMode(false);
+	};
+
+	const handleConfirm = () => {
+		props.onConfirm(input);
+		setEditMode(false);
+	};
+
+	const handleKeyDown = (event: React.KeyboardEvent) => {
+		if (event.key === "Enter" && input !== "") {
+			handleConfirm();
+		}
+	};
+
+	return (
+		<>
+			<Box
+				sx={{
+					width: props.fullWidth ? "100%" : "fit-content",
+					overflowX: "auto",
+				}}
+				display="flex"
+				justifyContent="flex-start"
+				alignItems="center"
+			>
+				{!editMode ? (
+					<Typography sx={styles.name} variant={props.variant || "h6"}>
+						{props.title}
+					</Typography>
+				) : (
+					<TextField
+						sx={styles.input}
+						fullWidth={props.fullWidth}
+						autoFocus
+						color="info"
+						value={input}
+						onChange={handleChange}
+						onKeyDown={handleKeyDown}
+					/>
+				)}
+			</Box>
+			{!props.readOnly && (
+				<Box display="flex" justifyContent="flex-end" alignItems="center">
+					{!editMode ? (
+						<IconButton onClick={handleClickEdit}>
+							<EditOutlined />
+						</IconButton>
+					) : (
+						<Stack direction="row" spacing={1}>
+							<OutlinedIconButton color="error" onClick={handleClose}>
+								<Clear />
+							</OutlinedIconButton>
+							<OutlinedIconButton
+								color="success"
+								onClick={handleConfirm}
+								disabled={input === ""}
+							>
+								<Check />
+							</OutlinedIconButton>
+						</Stack>
+					)}
+				</Box>
+			)}
+		</>
+	);
+}
+
+const getStyles = (theme: Theme) => {
+	return {
+		name: {
+			overflowX: "auto",
+			whiteSpace: "nowrap",
+			fontWeight: "medium",
+		},
+		input: {
+			minWidth: theme.spacing(30),
+			"& .MuiInputBase-input": {
+				padding: theme.spacing(1, 1),
+			},
+		},
+	};
+};

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

@@ -8,9 +8,9 @@ import { RemoveRedEye } from "@mui/icons-material";
 
 // Custom components
 import {
-  StyledTableCell,
-  StyledTableRow,
-  StyledIconButton,
+	StyledTableCell,
+	StyledTableRow,
+	StyledIconButton,
 } from "@evenicanpm/admin-integrate/components/data-table/table-row";
 import { ExecutionStatusIcon } from "@evenicanpm/admin-integrate/components/execution";
 
@@ -20,126 +20,125 @@ 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";
+import { TableCellProps, SxProps } from "@mui/material";
 
 interface Props {
-  item: Item;
-  heading: Head[]; // for alignment
-  enableBgColor?: boolean;
-  sx?: SxProps;
+	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 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 = () => {
+		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),
-    },
-  };
+	return {
+		timeCell: {
+			cursor: "default",
+		},
+		popover: {
+			padding: theme.spacing(1),
+		},
+	};
 };
 
 export default DashboardListRow;

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

@@ -21,137 +21,137 @@ 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;
-  };
+	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;
+	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 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?.processExecutions?.nodes) {
+			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),
-    },
-  };
+	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;