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)} > +