@evenicanpm/admin-integrate 1.1.0 → 1.2.2

package/src/components/execution/execution-filter.ts

@@ -1,30 +1,30 @@
 import {
-  DateRangeFilter,
-  Filters,
-  MultiSelectFilter,
+	DateRangeFilter,
+	Filters,
+	MultiSelectFilter,
 } from "@evenicanpm/admin-integrate/components/list-filter/list-filter-types";
 
 export interface ExecutionsListFilters extends Filters {
-  dateRange: DateRangeFilter;
-  multiSelectFilter: MultiSelectFilter;
+	dateRange: DateRangeFilter;
+	multiSelectFilter: MultiSelectFilter;
 }
 
 export const executionListFilters: ExecutionsListFilters = {
-  dateRange: {
-    type: "dateRange",
-    label: "Date Range",
-    value: null,
-  },
-  multiSelectFilter: {
-    type: "multiSelect",
-    label: "Execution Status",
-    value: null,
-    options: [
-      { id: 300, value: "Executions.inProgress" },
-      { id: 400, value: "Executions.complete" },
-      { id: 450, value: "Executions.warning" },
-      { id: 500, value: "Executions.failed" },
-      { id: 999, value: "Executions.unavailable" },
-    ],
-  },
+	dateRange: {
+		type: "dateRange",
+		label: "Executions.dateRange",
+		value: null,
+	},
+	multiSelectFilter: {
+		type: "multiSelect",
+		label: "Executions.executionStatus",
+		value: null,
+		options: [
+			{ id: 300, value: "Executions.inProgress" },
+			{ id: 400, value: "Executions.complete" },
+			{ id: 450, value: "Executions.warning" },
+			{ id: 500, value: "Executions.failed" },
+			{ id: 999, value: "Executions.unavailable" },
+		],
+	},
 };

package/src/components/execution/execution-status-icon.tsx

@@ -1,30 +1,29 @@
 import React from "react";
 
-import { Box, Typography, SxProps } from "@mui/material";
+import { SxProps } from "@mui/material";
 import {
-  RemoveRedEye,
-  Loop,
-  CheckCircleOutline,
-  WarningAmber,
-  ErrorOutline,
-  Clear,
+	Loop,
+	CheckCircleOutline,
+	WarningAmber,
+	ErrorOutline,
+	Clear,
 } from "@mui/icons-material";
 
 interface Props {
-  executionStatusId: string;
-  sx?: SxProps;
+	executionStatusId: string;
+	sx?: SxProps;
 }
 
 const ExecutionStatusIcon: React.FC<Props> = (props: Props) => {
-  const statusIconMap = {
-    300: <Loop color="info" />,
-    400: <CheckCircleOutline color="success" />,
-    450: <WarningAmber color="warning" />,
-    500: <ErrorOutline color="error" />,
-    999: <Clear sx={{ color: "grey.600" }} />,
-  };
+	const statusIconMap: { [key: string]: any } = {
+		"300": <Loop color="info" />,
+		"400": <CheckCircleOutline color="success" />,
+		"450": <WarningAmber color="warning" />,
+		"500": <ErrorOutline color="error" />,
+		"999": <Clear sx={{ color: "grey.600" }} />,
+	};
 
-  return statusIconMap[props.executionStatusId] || statusIconMap[999];
+	return statusIconMap[props.executionStatusId] || statusIconMap["999"];
 };
 
 export default ExecutionStatusIcon;

package/src/components/execution/execution-tag.tsx

@@ -6,95 +6,96 @@ import { Box, Typography, SxProps } from "@mui/material";
 
 // Styled components
 const StyledTagBox = styled(Box)(({ theme }) => ({
-  padding: theme.spacing(0, 1.5),
-  border: "solid 1px",
-  borderRadius: 4,
-  alignContent: "center",
-  maxWidth: "fit-content",
+	padding: theme.spacing(0, 1.5),
+	border: "solid 1px",
+	borderRadius: 4,
+	alignContent: "center",
+	maxWidth: "fit-content",
+	maxHeight: "fit-content",
 }));
-const StyledTag = styled(Typography)(({ theme }) => ({
-  fontWeight: "bold",
+const StyledTag = styled(Typography)(() => ({
+	fontWeight: "bold",
 }));
 
 interface Props {
-  executionStatusId: string;
-  sx?: SxProps;
+	executionStatusId: string;
+	sx?: SxProps;
 }
 
 const ExecutionTag: React.FC<Props> = (props: Props) => {
-  const t = useTranslations("Integrate");
+	const t = useTranslations("Integrate");
 
-  const statusTagMap = {
-    300: (
-      <StyledTagBox
-        sx={{
-          backgroundColor: "info.100",
-          borderColor: "info.main",
-          ...props.sx,
-        }}
-      >
-        <StyledTag color="info" variant="caption">
-          {t("Executions.inProgress")}
-        </StyledTag>
-      </StyledTagBox>
-    ),
-    400: (
-      <StyledTagBox
-        sx={{
-          backgroundColor: "success.100",
-          borderColor: "success.main",
-          ...props.sx,
-        }}
-      >
-        <StyledTag color="success" variant="caption">
-          {t("Executions.complete")}
-        </StyledTag>
-      </StyledTagBox>
-    ),
-    450: (
-      <StyledTagBox
-        sx={{
-          backgroundColor: "warning.100",
-          borderColor: "orange.700",
-          color: "orange.700",
-          ...props.sx,
-        }}
-      >
-        <StyledTag color="inherit" variant="caption">
-          {t("Executions.warning")}
-        </StyledTag>
-      </StyledTagBox>
-    ),
-    500: (
-      <StyledTagBox
-        sx={{
-          backgroundColor: "error.100",
-          borderColor: "error.main",
-          ...props.sx,
-        }}
-      >
-        <StyledTag color="error" variant="caption">
-          {t("Executions.failed")}
-        </StyledTag>
-      </StyledTagBox>
-    ),
-    999: (
-      <StyledTagBox
-        sx={{
-          backgroundColor: "grey.300",
-          borderColor: "grey.600",
-          color: "grey.600",
-          ...props.sx,
-        }}
-      >
-        <StyledTag color="inherit" variant="caption">
-          {t("Executions.unavailable")}
-        </StyledTag>
-      </StyledTagBox>
-    ),
-  };
+	const statusTagMap: { [key: string]: any } = {
+		300: (
+			<StyledTagBox
+				sx={{
+					backgroundColor: "info.100",
+					borderColor: "info.main",
+					...props.sx,
+				}}
+			>
+				<StyledTag color="info" variant="caption">
+					{t("Executions.inProgress")}
+				</StyledTag>
+			</StyledTagBox>
+		),
+		400: (
+			<StyledTagBox
+				sx={{
+					backgroundColor: "success.100",
+					borderColor: "success.main",
+					...props.sx,
+				}}
+			>
+				<StyledTag color="success" variant="caption">
+					{t("Executions.complete")}
+				</StyledTag>
+			</StyledTagBox>
+		),
+		450: (
+			<StyledTagBox
+				sx={{
+					backgroundColor: "warning.100",
+					borderColor: "orange.700",
+					color: "orange.700",
+					...props.sx,
+				}}
+			>
+				<StyledTag color="inherit" variant="caption">
+					{t("Executions.warning")}
+				</StyledTag>
+			</StyledTagBox>
+		),
+		500: (
+			<StyledTagBox
+				sx={{
+					backgroundColor: "error.100",
+					borderColor: "error.main",
+					...props.sx,
+				}}
+			>
+				<StyledTag color="error" variant="caption">
+					{t("Executions.failed")}
+				</StyledTag>
+			</StyledTagBox>
+		),
+		999: (
+			<StyledTagBox
+				sx={{
+					backgroundColor: "grey.300",
+					borderColor: "grey.600",
+					color: "grey.600",
+					...props.sx,
+				}}
+			>
+				<StyledTag color="inherit" variant="caption">
+					{t("Executions.unavailable")}
+				</StyledTag>
+			</StyledTagBox>
+		),
+	};
 
-  return statusTagMap[props.executionStatusId] || statusTagMap[999];
+	return statusTagMap[props.executionStatusId] || statusTagMap[999];
 };
 
 export default ExecutionTag;

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;