140 lines
3.2 KiB
React
140 lines
3.2 KiB
React
// Components
|
|
import Stack from "@mui/material/Stack";
|
|
import Typography from "@mui/material/Typography";
|
|
import Breadcrumbs from "../../Components/Breadcrumbs";
|
|
import Button from "@mui/material/Button";
|
|
import DataTable from "../../Components/Table";
|
|
import Fallback from "../../Components/Fallback";
|
|
import ActionMenu from "./components/ActionMenu";
|
|
|
|
// Utils
|
|
import { useIsAdmin } from "../../Hooks/useIsAdmin";
|
|
import { useState } from "react";
|
|
import { useTheme } from "@emotion/react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import {
|
|
useGetNotificationsByTeamId,
|
|
useDeleteNotification,
|
|
} from "../../Hooks/useNotifications";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useParams } from "react-router-dom";
|
|
|
|
const Notifications = () => {
|
|
const navigate = useNavigate();
|
|
const theme = useTheme();
|
|
const BREADCRUMBS = [{ name: "notifications", path: "/notifications" }];
|
|
const [updateTrigger, setUpdateTrigger] = useState(false);
|
|
const isAdmin = useIsAdmin();
|
|
const [notifications, isLoading, error] = useGetNotificationsByTeamId(updateTrigger);
|
|
const [deleteNotification, isDeleting, deleteError] = useDeleteNotification();
|
|
const { t } = useTranslation();
|
|
// Handlers
|
|
const triggerUpdate = () => {
|
|
setUpdateTrigger(!updateTrigger);
|
|
};
|
|
|
|
const onDelete = (id) => {
|
|
deleteNotification(id, triggerUpdate);
|
|
};
|
|
|
|
const headers = [
|
|
{
|
|
id: "name",
|
|
content: "Name",
|
|
render: (row) => {
|
|
return row.notificationName;
|
|
},
|
|
},
|
|
{
|
|
id: "type",
|
|
content: "Type",
|
|
render: (row) => {
|
|
return row.type;
|
|
},
|
|
},
|
|
{
|
|
id: "target",
|
|
content: "Target",
|
|
render: (row) => {
|
|
const type = row.type;
|
|
if (type === "email") {
|
|
return row.address;
|
|
}
|
|
if (type === "webhook") {
|
|
return row.config?.webhookUrl;
|
|
}
|
|
if (type === "pager_duty") {
|
|
return row.config?.routingKey;
|
|
}
|
|
},
|
|
},
|
|
{
|
|
id: "platform",
|
|
content: "Platform",
|
|
render: (row) => {
|
|
return row?.config?.platform || row.type;
|
|
},
|
|
},
|
|
|
|
{
|
|
id: "actions",
|
|
content: "Actions",
|
|
render: (row) => {
|
|
return (
|
|
<ActionMenu
|
|
notification={row}
|
|
onDelete={onDelete}
|
|
/>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
|
|
if (notifications?.length === 0) {
|
|
return (
|
|
<Fallback
|
|
vowelStart={false}
|
|
title={t("notifications.fallback.title")}
|
|
checks={t("notifications.fallback.checks", { returnObjects: true })}
|
|
link="/notifications/create"
|
|
isAdmin={isAdmin}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Stack gap={theme.spacing(10)}>
|
|
<Breadcrumbs list={BREADCRUMBS} />
|
|
<Stack
|
|
direction="row"
|
|
justifyContent="flex-end"
|
|
>
|
|
<Button
|
|
variant="contained"
|
|
color="accent"
|
|
onClick={() => navigate("/notifications/create")}
|
|
>
|
|
{t("notifications.createButton")}
|
|
</Button>
|
|
</Stack>
|
|
<Typography variant="h1">{t("notifications.createTitle")}</Typography>
|
|
<DataTable
|
|
config={{
|
|
onRowClick: (row) => navigate(`/notifications/${row._id}`),
|
|
rowSX: {
|
|
cursor: "pointer",
|
|
"&:hover td": {
|
|
backgroundColor: theme.palette.tertiary.main,
|
|
transition: "background-color .3s ease",
|
|
},
|
|
},
|
|
}}
|
|
headers={headers}
|
|
data={notifications}
|
|
/>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default Notifications;
|