feat: disable send test notification when 0 notification configured

client/src/Components/MonitorDetailsControlHeader/index.jsx

@@ -2,6 +2,7 @@ import Stack from "@mui/material/Stack";
 import Status from "./status";
 import Skeleton from "./skeleton";
 import Button from "@mui/material/Button";
+import { Tooltip } from "@mui/material";
 import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
 import PauseOutlinedIcon from "@mui/icons-material/PauseOutlined";
 import PlayArrowOutlinedIcon from "@mui/icons-material/PlayArrowOutlined";
@@ -40,6 +41,8 @@ const MonitorDetailsControlHeader = ({
 	const { t } = useTranslation();
 	const [pauseMonitor, isPausing, error] = usePauseMonitor();
 
+	const isTestNotificationsDisabled = monitor?.notifications?.length === 0;
+
 	// const [isSending, emailError, sendTestEmail] = useSendTestEmail();
 
 	const [testAllNotifications, isSending, errorAllNotifications] =
@@ -60,20 +63,52 @@ const MonitorDetailsControlHeader = ({
 				direction="row"
 				gap={theme.spacing(2)}
 			>
-				<Button
-					variant="contained"
-					color="secondary"
-					loading={isSending}
-					startIcon={<EmailIcon />}
-					onClick={() => {
-						testAllNotifications({ monitorId: monitor?._id });
-					}}
-					sx={{
-						whiteSpace: "nowrap",
-					}}
+				<Tooltip
+					key={monitor?._id}
+					placement="bottom"
+					title={
+						isTestNotificationsDisabled
+							? t(
+									'There are no notifications setup for this monitor. You need to add one by clicking "Configure" button'
+								)
+							: ""
+					}
 				>
-					{t("sendTestNotifications")}
-				</Button>
+					{isTestNotificationsDisabled ? (
+						<span>
+							<Button
+								variant="contained"
+								color="secondary"
+								loading={isSending}
+								startIcon={<EmailIcon />}
+								disabled
+								onClick={() => {
+									testAllNotifications({ monitorId: monitor?._id });
+								}}
+								sx={{
+									whiteSpace: "nowrap",
+								}}
+							>
+								{t("sendTestNotifications")}
+							</Button>
+						</span>
+					) : (
+						<Button
+							variant="contained"
+							color="secondary"
+							loading={isSending}
+							startIcon={<EmailIcon />}
+							onClick={() => {
+								testAllNotifications({ monitorId: monitor?._id });
+							}}
+							sx={{
+								whiteSpace: "nowrap",
+							}}
+						>
+							{t("sendTestNotifications")}
+						</Button>
+					)}
+				</Tooltip>
 				<Button
 					variant="contained"
 					color="secondary"