Merge branch 'develop' of https://github.com/nbgslv/Checkmate into feat/statuspages-breadcrumbs

CONTRIBUTING.md

@@ -107,7 +107,7 @@ Follow the [pull request checklist](#pull-request-checklist). Your PR should:
 
 Before submitting your pull request, please confirm the following:
 
-- You have tested the app locally and confirmed your changes work.
+- **You have tested the app locally and confirmed your changes work.**
 - You reviewed your code and removed debug logs or leftover code.
 - The GitHub issue is assigned to you.
 - You included the related issue number in the PR description (e.g. `Fixes #123`).

src/Components/Fallback/index.jsx

@@ -1,12 +1,14 @@
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
-import { Box, Button, Stack, Typography } from "@mui/material";
+import { Box, Button, Stack, Typography, Link } from "@mui/material";
 import Skeleton from "../../assets/Images/create-placeholder.svg?react";
 import SkeletonDark from "../../assets/Images/create-placeholder-dark.svg?react";
 import Background from "../../assets/Images/background-grid.svg?react";
 import Check from "../Check/Check";
 import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
+import Alert from "../Alert";
+import { useTranslation } from "react-i18next";
 import "./index.css";
 
 /**
@@ -17,13 +19,40 @@ import "./index.css";
  * @param {Array<string>} props.checks - An array of strings representing the checks to display.
  * @param {string} [props.link="/"] - The link to navigate to.
  * @param {boolean} [props.vowelStart=false] - Whether the title starts with a vowel.
+ * @param {boolean} [props.showPageSpeedWarning=false] - Whether to show the PageSpeed API warning.
  * @returns {JSX.Element} The rendered fallback UI.
  */
 
-const Fallback = ({ title, checks, link = "/", isAdmin, vowelStart = false }) => {
+const Fallback = ({ title, checks, link = "/", isAdmin, vowelStart = false, showPageSpeedWarning = false }) => {
 	const theme = useTheme();
 	const navigate = useNavigate();
 	const mode = useSelector((state) => state.ui.mode);
+	const { t } = useTranslation();
+
+	// Custom warning message with clickable link
+	const renderWarningMessage = () => {
+		return (
+			<>
+				{t("pageSpeedWarning")} {" "}
+				<Link 
+					href="https://docs.checkmate.so/users-guide/quickstart#env-vars-server"
+					target="_blank"
+					rel="noopener noreferrer"
+					sx={{ 
+						textDecoration: "underline",
+						color: "inherit",
+						fontWeight: "inherit",
+						"&:hover": {
+							textDecoration: "underline",
+						}
+					}}
+				>
+					{t("pageSpeedLearnMoreLink")}
+				</Link>
+				{" "}{t("pageSpeedAddApiKey")}
+			</>
+		);
+	};
 
 	return (
 		<Box
@@ -80,14 +109,40 @@ const Fallback = ({ title, checks, link = "/", isAdmin, vowelStart = false }) =>
 				</Stack>
 				{/* TODO - display a different fallback if user is not an admin*/}
 				{isAdmin && (
-					<Button
-						variant="contained"
-						color="accent"
-						sx={{ alignSelf: "center" }}
-						onClick={() => navigate(link)}
-					>
-						Let's create your first {title}
-					</Button>
+					<>
+						<Button
+							variant="contained"
+							color="accent"
+							sx={{ alignSelf: "center" }}
+							onClick={() => navigate(link)}
+						>
+							Let's create your first {title}
+						</Button>
+						
+						{/* Warning box for PageSpeed monitor */}
+						{(title === "pagespeed monitor" && showPageSpeedWarning) && (
+							<Box sx={{ width: "80%", maxWidth: "600px", zIndex: 1 }}>
+								<Box sx={{
+									'& .alert.row-stack': {
+										backgroundColor: theme.palette.warningSecondary.main,
+										borderColor: theme.palette.warningSecondary.lowContrast,
+										'& .MuiTypography-root': {
+											color: theme.palette.warningSecondary.contrastText
+										},
+										'& .MuiBox-root > svg': {
+											color: theme.palette.warningSecondary.contrastText
+										}
+									}
+								}}>
+									<Alert
+										variant="warning"
+										hasIcon={true}
+										body={renderWarningMessage()}
+									/>
+								</Box>
+							</Box>
+						)}
+					</>
 				)}
 			</Stack>
 		</Box>
@@ -100,6 +155,7 @@ Fallback.propTypes = {
 	link: PropTypes.string,
 	isAdmin: PropTypes.bool,
 	vowelStart: PropTypes.bool,
+	showPageSpeedWarning: PropTypes.bool,
 };
 
 export default Fallback;

src/Components/FilterHeader/index.jsx

@@ -42,7 +42,7 @@ const FilterHeader = ({ header, options, value, onChange, multiple = true }) =>
 						return header;
 					}
 
-					return selected
+					return header + " | " + selected
 						.map((value) => options.find((option) => option.value === value)?.label)
 						.filter(Boolean)
 						.join(", ");

src/Pages/PageSpeed/Monitors/index.jsx

@@ -52,6 +52,7 @@ const PageSpeed = () => {
 				]}
 				link="/pagespeed/create"
 				isAdmin={isAdmin}
+				showPageSpeedWarning={true}
 			/>
 		);
 	}

src/Pages/Uptime/Create/index.jsx

@@ -208,10 +208,6 @@ const CreateMonitor = () => {
 		}));
 	};
 
-	const handleAddNotification = () => {
-		console.log("Add notification clicked");
-	};
-
 	useEffect(() => {
 		const fetchMonitor = async () => {
 			if (monitorId) {
@@ -415,7 +411,7 @@ const CreateMonitor = () => {
 							onChange={(event) => handleNotifications(event, "email")}
 						/>
 
-						{/* <Box mt={theme.spacing(2)}>
+						<Box mt={theme.spacing(2)}>
 							<Button
 								variant="contained"
 								color="accent"
@@ -423,7 +419,7 @@ const CreateMonitor = () => {
 							>
 								{t("notifications.integrationButton")}
 							</Button>
-						</Box> */}
+						</Box>
 					</Stack>
 				</ConfigBox>
 				<ConfigBox>

src/Utils/Theme/constants.js

@@ -63,6 +63,7 @@ const paletteColors = {
 	orange500: "#E88C30",
 	orange600: "#DC6803",
 	orange800: "#624711",
+
 };
 
 const semanticColors = {
@@ -234,6 +235,21 @@ const newSemanticColors = {
 			dark: newColors.orange600,
 		},
 	},
+	/* Custom palette for PageSpeed warning box */
+	warningSecondary: {
+		main: {
+			light: paletteColors.orange50,
+			dark: paletteColors.orange800,
+		},
+		contrastText: {
+			light: paletteColors.orange600,
+			dark: paletteColors.orange100,
+		},
+		lowContrast: {
+			light: paletteColors.orange300,
+			dark: paletteColors.orange400,
+		},
+	},
 	error: {
 		main: {
 			light: newColors.red700,
@@ -248,6 +264,7 @@ const newSemanticColors = {
 			dark: newColors.red600,
 		},
 	},
+	
 	/* These are temporary, just for everything not to break */
 	gradient: {
 		color1: {

src/locales/gb.json

@@ -376,6 +376,9 @@
   "errorInvalidTypeId": "Invalid notification type provided",
   "errorInvalidFieldId": "Invalid field ID provided",
   "inviteNoTokenFound": "No invite token found",
+  "pageSpeedWarning": "Warning: You haven't added a Google PageSpeed API key. Without it, the PageSpeed monitor won't function.",
+  "pageSpeedLearnMoreLink": "Click here to learn",
+  "pageSpeedAddApiKey": "how to add your API key.",
   "statusBredCrumbsDetails": "Details",
   "statusBredCrumbsCreate": "Create",
   "statusBredCrumbsStatusPages": "Status Pages"

src/locales/ru.json

@@ -360,5 +360,8 @@
   "uptimeCreate": "",
   "uptimeCreateJsonPath": "",
   "uptimeCreateJsonPathQuery": "",
-  "maintenanceTableActionMenuDialogTitle": ""
+  "maintenanceTableActionMenuDialogTitle": "",
+  "pageSpeedWarning": "Предупреждение: Вы не добавили ключ API Google PageSpeed. Без него монитор PageSpeed не будет работать.",
+  "pageSpeedLearnMoreLink": "Нажмите здесь, чтобы узнать",
+  "pageSpeedAddApiKey": "как добавить ваш ключ API."
 }

src/locales/tr.json

@@ -375,5 +375,8 @@
   "infrastructureMonitorUpdated": "",
   "errorInvalidTypeId": "",
   "errorInvalidFieldId": "",
-  "inviteNoTokenFound": ""
+  "inviteNoTokenFound": "",
+  "pageSpeedWarning": "Uyarı: Google PageSpeed API anahtarı eklemediniz. Bu olmadan, PageSpeed monitörü çalışmayacaktır.",
+  "pageSpeedLearnMoreLink": "API anahtarınızı nasıl ekleyeceğinizi",
+  "pageSpeedAddApiKey": "öğrenmek için buraya tıklayın."
 }