@evenicanpm/admin-integrate 1.1.0 → 1.2.0

package/src/components/footer/footer.tsx

@@ -8,48 +8,48 @@ import { Typography, Box, Grid2 as Grid } from "@mui/material";
 import { Copyright } from "@mui/icons-material";
 
 // Styled components
-const Footer = styled("footer")(({ theme }) => ({
-  flexShrink: 0,
-  marginTop: "auto",
+const Footer = styled("footer")(() => ({
+	flexShrink: 0,
+	marginTop: "auto",
 }));
 
 const IntegrateFooter: React.FC = () => {
-  const t = useTranslations("Integrate.Footer");
+	const t = useTranslations("Integrate.Footer");
 
-  const theme = useTheme();
-  const styles = getStyles(theme);
+	const theme = useTheme();
+	const styles = getStyles(theme);
 
-  return (
-    <Footer>
-      <Grid container spacing={0.5} sx={styles.container}>
-        <Grid>
-          <Box sx={{ ...styles.centered, color: "grey.500" }}>
-            <Copyright color="inherit" fontSize="small" />
-          </Box>
-        </Grid>
-        <Grid>
-          <Box sx={styles.centered}>
-            <Typography variant="caption" color="grey">
-              {t("copyright")}
-            </Typography>
-          </Box>
-        </Grid>
-      </Grid>
-    </Footer>
-  );
+	return (
+		<Footer>
+			<Grid container spacing={0.5} sx={styles.container}>
+				<Grid>
+					<Box sx={{ ...styles.centered, color: "grey.500" }}>
+						<Copyright color="inherit" fontSize="small" />
+					</Box>
+				</Grid>
+				<Grid>
+					<Box sx={styles.centered}>
+						<Typography variant="caption" color="grey">
+							{t("copyright")}
+						</Typography>
+					</Box>
+				</Grid>
+			</Grid>
+		</Footer>
+	);
 };
 
 const getStyles = (theme: Theme) => {
-  return {
-    container: {
-      justifyContent: "center",
-      padding: theme.spacing(5, 0, 0),
-    },
-    centered: {
-      display: "grid",
-      alignItems: "center",
-    },
-  };
+	return {
+		container: {
+			justifyContent: "center",
+			padding: theme.spacing(5, 0, 0),
+		},
+		centered: {
+			display: "grid",
+			alignItems: "center",
+		},
+	};
 };
 
 export default IntegrateFooter;

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

@@ -11,78 +11,79 @@ import { Refresh, VisibilityOutlined } from "@mui/icons-material";
 import { OutlinedIconButton } from "../button";
 
 interface Props {
-  title: string;
-  url?: string;
-  handleRefresh?: () => void;
+	title: string;
+	url?: string;
+	handleRefresh?: () => void;
 }
 
 const DashboardListHeader: React.FC<Props> = (props: Props) => {
-  const t = useTranslations("Integrate.Dashboard");
+	const t = useTranslations("Integrate.Dashboard");
 
-  const theme = useTheme();
-  const styles = getStyles(theme);
+	const theme = useTheme();
+	const styles = getStyles(theme);
 
-  const handleViewAll = () => {
-    //Temporarily commented out until executions detail page is implemented
-    //redirect(props.url, RedirectType.push);
-  };
+	const handleViewAll = () => {
+		if (props.url) {
+			redirect(props.url, RedirectType.push);
+		}
+	};
 
-  return (
-    <Grid container spacing={0}>
-      <Grid size={8}>
-        <Box sx={styles.title}>
-          <Typography variant="h6" sx={styles.typography}>
-            {props.title}
-          </Typography>
-        </Box>
-      </Grid>
-      <Grid size={4}>
-        <Box display="flex" justifyContent="flex-end">
-          {props.url && (
-            <Button
-              sx={styles.button}
-              variant="outlined"
-              color="info"
-              startIcon={<VisibilityOutlined />}
-              onClick={handleViewAll}
-            >
-              {t("ListHeader.viewAll")}
-            </Button>
-          )}
-          {props.handleRefresh && (
-            <OutlinedIconButton
-              sx={styles.iconButton}
-              color="info"
-              onClick={props.handleRefresh}
-            >
-              <Refresh />
-            </OutlinedIconButton>
-          )}
-        </Box>
-      </Grid>
-    </Grid>
-  );
+	return (
+		<Grid container spacing={0}>
+			<Grid size={8}>
+				<Box sx={styles.title}>
+					<Typography variant="h6" sx={styles.typography}>
+						{props.title}
+					</Typography>
+				</Box>
+			</Grid>
+			<Grid size={4}>
+				<Box display="flex" justifyContent="flex-end">
+					{props.url && (
+						<Button
+							sx={styles.button}
+							variant="outlined"
+							color="info"
+							startIcon={<VisibilityOutlined />}
+							onClick={handleViewAll}
+						>
+							{t("ListHeader.viewAll")}
+						</Button>
+					)}
+					{props.handleRefresh && (
+						<OutlinedIconButton
+							sx={styles.iconButton}
+							color="info"
+							onClick={props.handleRefresh}
+						>
+							<Refresh />
+						</OutlinedIconButton>
+					)}
+				</Box>
+			</Grid>
+		</Grid>
+	);
 };
 
 const getStyles = (theme: Theme) => {
-  return {
-    title: {
-      display: "flex",
-      alignItems: "center",
-      height: "100%",
-    },
-    typography: {
-      fontWeight: "medium",
-    },
-    button: {
-      borderWidth: 2,
-      borderRadius: 1,
-      marginRight: theme.spacing(1),
-    },
-    iconButton: {
-      borderRadius: 1,
-    },
-  };
+	return {
+		title: {
+			display: "flex",
+			alignItems: "center",
+			height: "100%",
+		},
+		typography: {
+			fontWeight: "medium",
+		},
+		button: {
+			borderWidth: 2,
+			borderRadius: 1,
+			marginRight: theme.spacing(1),
+		},
+		iconButton: {
+			borderRadius: 1,
+		},
+	};
 };
 
 export default DashboardListHeader;

package/src/components/header/execution-details-header.tsx

@@ -2,153 +2,126 @@ import React, { useState } from "react";
 
 // MUI
 import { Theme, useTheme } from "@mui/material";
-import {
-  Grid2 as Grid,
-  Box,
-  Typography,
-  Button,
-  Stack,
-  Popover,
-} from "@mui/material";
-import { PlayArrowOutlined } from "@mui/icons-material";
+import { Grid2 as Grid, Typography, Stack } from "@mui/material";
 
 // Custom components
-import ExecutionTag from "../execution/execution-tag";
+import { ExecutionTag } from "@evenicanpm/admin-integrate/components/execution";
+import { DateTimePopover } from "@evenicanpm/admin-integrate/components/core";
 
 interface Execution {
-  name: string;
-  startDate: string;
-  endDate: string;
-  executionStatus: {
-    id: string;
-  };
+	name: string;
+	startDate: string;
+	endDate: string;
+	executionStatus: {
+		id: string;
+	};
 }
 
 interface Props {
-  execution: Execution;
-  handleRun?: () => void;
+	execution: Execution;
+	children?: React.ReactNode; // buttons to go in header, e.g. save, cancel etc.
 }
 
 const ExecutionDetailsHeader: React.FC<Props> = (props: Props) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
+	const theme = useTheme();
+	const styles = getStyles(theme);
 
-  const startDate = new Date(props.execution.startDate);
-  const endDate = new Date(props.execution.endDate);
-  const localTime = startDate.toLocaleString();
-  const duration = (endDate.getTime() - startDate.getTime()) / 1000;
+	const startDate = new Date(props.execution.startDate);
+	const endDate = new Date(props.execution.endDate);
+	const localTime = startDate.toLocaleString();
+	const duration = (endDate.getTime() - startDate.getTime()) / 1000;
 
-  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);
+	};
 
-  return (
-    <Grid container spacing={0}>
-      <Grid size={8}>
-        <Stack spacing={5} direction="row">
-          <Typography variant="h5" sx={styles.typography}>
-            {props.execution.name}
-          </Typography>
-          <ExecutionTag
-            executionStatusId={props.execution.executionStatus.id}
-          />
-        </Stack>
-      </Grid>
-      <Grid size={4}>
-        <Box display="flex" justifyContent="flex-end">
-          {props.handleRun && (
-            <Button
-              sx={styles.button}
-              variant="contained"
-              color="info"
-              startIcon={<PlayArrowOutlined />}
-              onClick={props.handleRun}
-            >
-              Run
-            </Button>
-          )}
-        </Box>
-      </Grid>
-      <Grid size={12}>
-        <Stack
-          spacing={1}
-          direction="row"
-          onMouseEnter={handlePopoverOpen}
-          onMouseLeave={handlePopoverClose}
-        >
-          <Typography color="grey" variant="caption">
-            {localTime}
-          </Typography>
-          <Typography color="grey" variant="caption">
-            Duration: {duration}s
-          </Typography>
-        </Stack>
-      </Grid>
-      <Popover
-        sx={{ pointerEvents: "none" }}
-        open={open}
-        anchorEl={anchorEl}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "left",
-        }}
-        onClose={handlePopoverClose}
-        disableRestoreFocus
-      >
-        <Box sx={styles.popover}>
-          <Typography variant="body2">
-            Uses your browser's local timezone.
-          </Typography>
-          <Box
-            display={
-              Intl.DateTimeFormat().resolvedOptions().timeZone
-                ? "block"
-                : "none"
-            }
-          >
-            <Typography variant="body2" align="center" sx={styles.timezone}>
-              {Intl.DateTimeFormat().resolvedOptions().timeZone}
-            </Typography>
-          </Box>
-        </Box>
-      </Popover>
-    </Grid>
-  );
+	return (
+		<Grid container columnSpacing={1}>
+			<Grid size={8}>
+				<Stack spacing={5} direction="row" alignItems="center">
+					<Typography variant="h5" sx={styles.typography}>
+						{props.execution.name}
+					</Typography>
+					<ExecutionTag
+						executionStatusId={props.execution.executionStatus.id}
+					/>
+				</Stack>
+			</Grid>
+			<Grid size={4}>
+				<Stack
+					spacing={1}
+					direction="row"
+					alignItems="center"
+					justifyContent={{ xs: "flex-start", sm: "flex-end" }}
+				>
+					{/* E.g. run, etc. */}
+					{props.children}
+				</Stack>
+			</Grid>
+			<Grid size={12}>
+				<Stack
+					spacing={1}
+					direction="row"
+					onMouseEnter={handlePopoverOpen}
+					onMouseLeave={handlePopoverClose}
+				>
+					<Typography color="grey" variant="caption">
+						{localTime}
+					</Typography>
+					<Typography color="grey" variant="caption">
+						Duration: {duration}s
+					</Typography>
+				</Stack>
+			</Grid>
+			<DateTimePopover
+				dateIsoString={props.execution.startDate}
+				sx={{ pointerEvents: "none" }}
+				open={open}
+				anchorEl={anchorEl}
+				anchorOrigin={{
+					vertical: "bottom",
+					horizontal: "left",
+				}}
+				transformOrigin={{
+					vertical: "top",
+					horizontal: "left",
+				}}
+				onClose={handlePopoverClose}
+				disableRestoreFocus
+			/>
+		</Grid>
+	);
 };
 
 const getStyles = (theme: Theme) => {
-  return {
-    title: {
-      display: "flex",
-      alignItems: "center",
-      height: "100%",
-    },
-    typography: {
-      fontWeight: "medium",
-    },
-    button: {
-      borderWidth: 2,
-      borderRadius: 1,
-      marginRight: theme.spacing(1),
-    },
-    popover: {
-      padding: theme.spacing(1),
-    },
-    timezone: {
-      color: "info.main",
-    },
-  };
+	return {
+		title: {
+			display: "flex",
+			alignItems: "center",
+			height: "100%",
+		},
+		typography: {
+			fontWeight: "medium",
+		},
+		button: {
+			borderWidth: 2,
+			borderRadius: 1,
+			marginRight: theme.spacing(1),
+		},
+		popover: {
+			padding: theme.spacing(1),
+		},
+		timezone: {
+			color: "info.main",
+		},
+	};
 };
 
 export default ExecutionDetailsHeader;

package/src/components/header/header.tsx

@@ -3,40 +3,40 @@ import { Box, Typography, AppBar, Toolbar, Stack } from "@mui/material";
 import { Theme, useTheme } from "@mui/material";
 
 interface Props {
-  title: string; // e.g. Executions
-  section: string; // e.g. e4Integrate
+	title: string; // e.g. Executions
+	section: string; // e.g. e4Integrate
 }
 
 const IntegrateHeader: React.FC<Props> = (props: Props) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
+	const theme = useTheme();
+	const styles = getStyles(theme);
 
-  return (
-    <Box sx={{ flexGrow: 1 }}>
-      <AppBar position="static" sx={styles.appbar} elevation={2}>
-        <Toolbar sx={styles.toolbar}>
-          <Stack>
-            <Typography variant="body1" color="info.main">
-              {props.section}
-            </Typography>
-            <Typography variant="h4">{props.title}</Typography>
-          </Stack>
-        </Toolbar>
-      </AppBar>
-    </Box>
-  );
+	return (
+		<Box sx={{ flexGrow: 1 }}>
+			<AppBar position="static" sx={styles.appbar} elevation={2}>
+				<Toolbar sx={styles.toolbar}>
+					<Stack>
+						<Typography variant="body1" color="info.main">
+							{props.section}
+						</Typography>
+						<Typography variant="h4">{props.title}</Typography>
+					</Stack>
+				</Toolbar>
+			</AppBar>
+		</Box>
+	);
 };
 
 const getStyles = (theme: Theme) => {
-  return {
-    appbar: {
-      color: "text.primary",
-    },
-    toolbar: {
-      backgroundColor: "white",
-      padding: theme.spacing(2, 0),
-    },
-  };
+	return {
+		appbar: {
+			color: "text.primary",
+		},
+		toolbar: {
+			backgroundColor: "white",
+			padding: theme.spacing(2, 0),
+		},
+	};
 };
 
 export default IntegrateHeader;

package/src/components/header/index.ts

@@ -1,3 +1,4 @@
 export { default as IntegrateHeader } from "./header";
 export { default as DashboardListHeader } from "./dashboard-list-header";
 export { default as ExecutionDetailsHeader } from "./execution-details-header";
+export { default as IntegrationDetailsHeader } from "./integration-details-header";

package/src/components/header/integration-details-header.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { useTranslations } from "next-intl";
+
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import { Grid2 as Grid, Stack, Divider, Button, Box } from "@mui/material";
+import {
+	InfoOutlined,
+	Code,
+	FileUploadOutlined,
+	PlayArrowOutlined,
+} from "@mui/icons-material";
+
+// Custom components
+import { TitleEdit } from "@evenicanpm/admin-integrate/components/core";
+
+// TODO: when applying on page, change to use type of API query result
+type DetailsTemp = {
+	name: string;
+	processIcon: string;
+};
+
+interface Props {
+	details: DetailsTemp;
+	setDetails: (newDetails: DetailsTemp) => void;
+	children?: React.ReactNode; // buttons to go in header, e.g. save, cancel etc.
+}
+
+const IntegrationDetailsHeader: React.FC<Props> = (props: Props) => {
+	const t = useTranslations("Integrate.Integrations.Details");
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const onConfirm = (input: string) => {
+		props.setDetails({ ...props.details, name: input });
+	};
+
+	return (
+		<Grid container rowSpacing={1} columnSpacing={0}>
+			<Grid size={{ xs: 12, sm: 8 }}>
+				<Stack spacing={1} direction="row" alignItems="center">
+					{/* TODO: Apply Process icon component once that is merged. Using temp icon for now */}
+					<InfoOutlined color="info" />
+
+					<TitleEdit
+						title={props.details.name}
+						onConfirm={onConfirm}
+						variant="h5"
+					/>
+				</Stack>
+			</Grid>
+			<Grid size={{ xs: 12, sm: 4 }}>
+				<Stack
+					spacing={1}
+					direction="row"
+					alignItems="center"
+					justifyContent={{ xs: "flex-start", sm: "flex-end" }}
+				>
+					{/* E.g. create, save, cancel buttons, etc. */}
+					{props.children}
+				</Stack>
+			</Grid>
+			<Grid size={12}>
+				<Divider sx={styles.divider} />
+			</Grid>
+			<Grid size={12}>
+				<Stack direction="row">
+					<Box sx={styles.controlsButton}>
+						<Button startIcon={<Code />}>{t("codeView")}</Button>
+					</Box>
+					<Box sx={styles.controlsButton}>
+						<Button startIcon={<FileUploadOutlined />}>{t("import")}</Button>
+					</Box>
+					<Box sx={{ ...styles.controlsButton, border: "none" }}>
+						<Button startIcon={<PlayArrowOutlined />}>{t("executions")}</Button>
+					</Box>
+				</Stack>
+			</Grid>
+		</Grid>
+	);
+};
+
+const getStyles = (theme: Theme) => {
+	return {
+		divider: {
+			border: `1px solid ${theme.palette.grey[500]}`,
+		},
+		controlsButton: {
+			padding: theme.spacing(0, 1),
+			fontSize: theme.typography.body1.fontSize,
+			color: theme.palette.grey[600],
+			borderRadius: 0,
+			borderRight: `${theme.spacing(0.2)} solid ${theme.palette.grey[500]}`,
+		},
+	};
+};
+
+export default IntegrationDetailsHeader;