diff --git a/client/src/Components/MonitorDetailsControlHeader/index.jsx b/client/src/Components/MonitorDetailsControlHeader/index.jsx
index c4dcf1ffc..f0721f173 100644
--- a/client/src/Components/MonitorDetailsControlHeader/index.jsx
+++ b/client/src/Components/MonitorDetailsControlHeader/index.jsx
@@ -5,12 +5,15 @@ import Button from "@mui/material/Button";
import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
import PauseOutlinedIcon from "@mui/icons-material/PauseOutlined";
import PlayArrowOutlinedIcon from "@mui/icons-material/PlayArrowOutlined";
+import EmailIcon from '@mui/icons-material/Email';
// Utils
import PropTypes from "prop-types";
import { useNavigate } from "react-router-dom";
import { useTheme } from "@mui/material/styles";
import { usePauseMonitor } from "../../Hooks/useMonitorControls";
+import { useSendTestEmail } from "../../Hooks/useSendTestEmail";
+import { useTranslation } from "react-i18next";
/**
* MonitorDetailsControlHeader component displays the control header for monitor details.
@@ -34,11 +37,14 @@ const MonitorDetailsControlHeader = ({
}) => {
const navigate = useNavigate();
const theme = useTheme();
+ const { t } = useTranslation();
const [pauseMonitor, isPausing, error] = usePauseMonitor({
monitorId: monitor?._id,
triggerUpdate,
});
+ const [isSending, emailError, sendTestEmail] = useSendTestEmail();
+
if (isLoading) {
return ;
}
@@ -54,6 +60,15 @@ const MonitorDetailsControlHeader = ({
direction="row"
gap={theme.spacing(2)}
>
+ }
+ onClick={sendTestEmail}
+ >
+ {t("sendTestEmail")}
+