@evenicanpm/admin-integrate 1.1.0 → 1.2.2

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;

package/src/components/data-table/table-header.tsx

@@ -10,100 +10,104 @@ import { ExpandLess, ExpandMore } from "@mui/icons-material";
 
 // STYLED COMPONENTS
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
-  fontWeight: 500,
-  padding: "16px 20px",
-  color: theme.palette.grey[900],
+	fontWeight: 500,
+	padding: "16px 20px",
+	color: theme.palette.grey[900],
 }));
 
 // ==============================================================
 export type Head = {
-  id: string;
-  label: string;
-  align: string;
-  width: string;
-  sortable?: boolean;
+	id: string;
+	label: string;
+	align: string;
+	width?: string;
+	sortable?: boolean;
 };
 interface Props {
-  heading: Head[];
-  orderBy: string;
-  order: "asc" | "desc";
-  onRequestSort?: (id: string) => void; // if provided, make list sortable by column
-  rowSx?: SxProps;
+	heading: Head[];
+	orderBy: string;
+	order: "asc" | "desc";
+	onRequestSort?: (id: string) => void; // if provided, make list sortable by column
+	rowSx?: SxProps;
 }
 // ==============================================================
 
 export default function TableHeader({
-  order,
-  heading,
-  orderBy,
-  onRequestSort,
-  rowSx,
+	order,
+	heading,
+	orderBy,
+	onRequestSort,
+	rowSx,
 }: Props) {
-  const theme = useTheme();
-  const styles = getStyles(theme);
+	const theme = useTheme();
+	const styles = getStyles(theme);
 
-  return (
-    <TableHead sx={{ backgroundColor: "grey.200" }}>
-      <TableRow sx={rowSx}>
-        {heading.map((headCell) => (
-          <StyledTableCell
-            key={headCell.id}
-            align={headCell.align as TableCellProps["align"]}
-            sortDirection={orderBy === headCell.id ? order : false}
-            width={headCell.width}
-          >
-            {onRequestSort && headCell.sortable ? (
-              <TableSortLabel
-                active={orderBy === headCell.id}
-                onClick={() => onRequestSort(headCell.id)}
-                direction={orderBy === headCell.id ? order : "asc"}
-                sx={styles.sortLabel}
-                IconComponent={() =>
-                  order === "desc" && orderBy === headCell.id ? (
-                    <ExpandMore
-                      sx={{
-                        ...styles.sortIcon,
-                        visibility:
-                          orderBy === headCell.id ? "visible" : "hidden",
-                      }}
-                    />
-                  ) : (
-                    <ExpandLess
-                      sx={{
-                        ...styles.sortIcon,
-                        visibility:
-                          orderBy === headCell.id ? "visible" : "hidden",
-                      }}
-                    />
-                  )
-                }
-              >
-                {headCell.label}
-              </TableSortLabel>
-            ) : (
-              headCell.label
-            )}
-          </StyledTableCell>
-        ))}
-      </TableRow>
-    </TableHead>
-  );
+	return (
+		<TableHead sx={{ backgroundColor: "grey.200" }}>
+			<TableRow sx={rowSx}>
+				{heading.map((headCell) => (
+					<StyledTableCell
+						key={headCell.id}
+						align={headCell.align as TableCellProps["align"]}
+						sortDirection={orderBy === headCell.id ? order : false}
+						width={headCell.width}
+						sx={styles.cell}
+					>
+						{onRequestSort && headCell.sortable ? (
+							<TableSortLabel
+								active={orderBy === headCell.id}
+								onClick={() => onRequestSort(headCell.id)}
+								direction={orderBy === headCell.id ? order : "asc"}
+								sx={styles.sortLabel}
+								IconComponent={() =>
+									order === "desc" && orderBy === headCell.id ? (
+										<ExpandMore
+											sx={{
+												...styles.sortIcon,
+												visibility:
+													orderBy === headCell.id ? "visible" : "hidden",
+											}}
+										/>
+									) : (
+										<ExpandLess
+											sx={{
+												...styles.sortIcon,
+												visibility:
+													orderBy === headCell.id ? "visible" : "hidden",
+											}}
+										/>
+									)
+								}
+							>
+								{headCell.label}
+							</TableSortLabel>
+						) : (
+							headCell.label
+						)}
+					</StyledTableCell>
+				))}
+			</TableRow>
+		</TableHead>
+	);
 }
 
 const getStyles = (theme: Theme) => {
-  return {
-    sortLabel: {
-      "&:hover": {
-        color: "info.main",
-        "& .MuiSvgIcon-root": {
-          color: "info.main",
-          visibility: "visible",
-        },
-      },
-    },
-    sortIcon: {
-      marginLeft: theme.spacing(1),
-      color: "grey.800",
-    },
-  };
+	return {
+		sortLabel: {
+			"&:hover": {
+				color: "info.main",
+				"& .MuiSvgIcon-root": {
+					color: "info.main",
+					visibility: "visible",
+				},
+			},
+		},
+		sortIcon: {
+			marginLeft: theme.spacing(1),
+			color: "grey.800",
+		},
+		cell: {
+			borderWidth: theme.spacing(0),
+		},
+	};
 };

package/src/components/data-table/table-pagination.tsx

@@ -3,34 +3,34 @@ import styled from "@mui/material/styles/styled";
 
 // STYLED COMPONENT
 const StyledPagination = styled(Pagination)(({ theme }) => ({
-  "& .MuiPaginationItem-root": {
-    fontSize: 14,
-    fontWeight: 500,
-    color: theme.palette.grey[900],
-    border: `1px solid transparent`,
-  },
-  "& .MuiPaginationItem-page:hover": {
-    borderRadius: 20,
-    backgroundColor: "transparent",
-    color: theme.palette.info.main,
-    border: `1px solid ${theme.palette.info.main}`,
-  },
-  "& .MuiPaginationItem-page.Mui-selected": {
-    borderRadius: 20,
-    backgroundColor: "transparent",
-    color: theme.palette.info.main,
-    border: `1px solid ${theme.palette.info.main}`,
-    ":hover": { backgroundColor: "transparent" },
-  },
-  "& .MuiPaginationItem-previousNext": {
-    margin: 10,
-    borderRadius: 20,
-    color: theme.palette.info.main,
-    border: `1px solid ${theme.palette.info.main}`,
-    "&:hover": { backgroundColor: "transparent" },
-  },
+	"& .MuiPaginationItem-root": {
+		fontSize: 14,
+		fontWeight: 500,
+		color: theme.palette.grey[900],
+		border: `1px solid transparent`,
+	},
+	"& .MuiPaginationItem-page:hover": {
+		borderRadius: 20,
+		backgroundColor: "transparent",
+		color: theme.palette.info.main,
+		border: `1px solid ${theme.palette.info.main}`,
+	},
+	"& .MuiPaginationItem-page.Mui-selected": {
+		borderRadius: 20,
+		backgroundColor: "transparent",
+		color: theme.palette.info.main,
+		border: `1px solid ${theme.palette.info.main}`,
+		":hover": { backgroundColor: "transparent" },
+	},
+	"& .MuiPaginationItem-previousNext": {
+		margin: 10,
+		borderRadius: 20,
+		color: theme.palette.info.main,
+		border: `1px solid ${theme.palette.info.main}`,
+		"&:hover": { backgroundColor: "transparent" },
+	},
 }));
 
 export default function TablePagination(props: PaginationProps) {
-  return <StyledPagination {...props} />;
+	return <StyledPagination {...props} />;
 }

package/src/components/data-table/table-row.tsx

@@ -2,26 +2,26 @@ import styled from "@mui/material/styles/styled";
 import { TableRow, TableCell, IconButton } from "@mui/material";
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
-  fontSize: 14,
-  paddingTop: 10,
-  fontWeight: 500,
-  paddingBottom: 10,
-  color: theme.palette.grey[900],
-  borderBottom: `1px solid ${theme.palette.grey[300]}`,
+	fontSize: 14,
+	paddingTop: 10,
+	fontWeight: 500,
+	paddingBottom: 10,
+	color: theme.palette.grey[900],
+	borderBottom: `1px solid ${theme.palette.grey[300]}`,
 }));
 
 const StyledTableRow = styled(TableRow)({
-  ":last-child .MuiTableCell-root": { border: 0 },
-  "&.Mui-selected": {
-    backgroundColor: "transparent",
-    ":hover": { backgroundColor: "transparent" },
-  },
+	":last-child .MuiTableCell-root": { border: 0 },
+	"&.Mui-selected": {
+		backgroundColor: "transparent",
+		":hover": { backgroundColor: "transparent" },
+	},
 });
 
 const StyledIconButton = styled(IconButton)(({ theme }) => ({
-  color: theme.palette.grey[600],
-  "& .MuiSvgIcon-root": { fontSize: 19 },
-  ":hover": { color: theme.palette.info.main },
+	color: theme.palette.grey[600],
+	"& .MuiSvgIcon-root": { fontSize: 19 },
+	":hover": { color: theme.palette.info.main },
 }));
 
 export { StyledTableCell, StyledTableRow, StyledIconButton };

package/src/components/data-table/table-skeleton.tsx

@@ -5,41 +5,41 @@ import TableHeader, { Head } from "./table-header";
 import { StyledTableRow, StyledTableCell } from "./table-row";
 
 interface Props {
-  heading: Head[];
-  perPage: number;
-  sx?: SxProps;
-  rowSx?: SxProps;
+	heading: Head[];
+	perPage: number;
+	sx?: SxProps;
+	rowSx?: SxProps;
 }
 
 export default function TableSkeleton(props: Props) {
-  const rangeArray: number[] = Array.from(
-    { length: props.perPage },
-    (_, i) => i,
-  );
-  return (
-    <TableContainer sx={props.sx}>
-      <Table>
-        <TableHeader
-          heading={props.heading}
-          order="asc"
-          orderBy=""
-          onRequestSort={() => {
-            // do nothing
-          }}
-          rowSx={props.rowSx}
-        />
-        <TableBody>
-          {rangeArray.map((i: number) => (
-            <StyledTableRow key={i} sx={props.rowSx}>
-              {props.heading.map((heading: Head) => (
-                <StyledTableCell key={`${i}_${heading.id}`}>
-                  <Skeleton />
-                </StyledTableCell>
-              ))}
-            </StyledTableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
+	const rangeArray: number[] = Array.from(
+		{ length: props.perPage },
+		(_, i) => i,
+	);
+	return (
+		<TableContainer sx={props.sx}>
+			<Table>
+				<TableHeader
+					heading={props.heading}
+					order="asc"
+					orderBy=""
+					onRequestSort={() => {
+						// do nothing
+					}}
+					rowSx={props.rowSx}
+				/>
+				<TableBody>
+					{rangeArray.map((i: number) => (
+						<StyledTableRow key={i} sx={props.rowSx}>
+							{props.heading.map((heading: Head) => (
+								<StyledTableCell key={`${i}_${heading.id}`}>
+									<Skeleton />
+								</StyledTableCell>
+							))}
+						</StyledTableRow>
+					))}
+				</TableBody>
+			</Table>
+		</TableContainer>
+	);
 }