diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7a116e578..bfa8aae7e 100644 --- a/CONTRIBUTING.md +++ b/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`). diff --git a/src/Components/Fallback/index.jsx b/src/Components/Fallback/index.jsx index bdee376c5..1b6ee93c7 100644 --- a/src/Components/Fallback/index.jsx +++ b/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} 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")} {" "} + + {t("pageSpeedLearnMoreLink")} + + {" "}{t("pageSpeedAddApiKey")} + + ); + }; return ( {/* TODO - display a different fallback if user is not an admin*/} {isAdmin && ( - + <> + + + {/* Warning box for PageSpeed monitor */} + {(title === "pagespeed monitor" && showPageSpeedWarning) && ( + + svg': { + color: theme.palette.warningSecondary.contrastText + } + } + }}> + + + + )} + )} @@ -100,6 +155,7 @@ Fallback.propTypes = { link: PropTypes.string, isAdmin: PropTypes.bool, vowelStart: PropTypes.bool, + showPageSpeedWarning: PropTypes.bool, }; export default Fallback; diff --git a/src/Components/FilterHeader/index.jsx b/src/Components/FilterHeader/index.jsx index 4bb27646f..284170a8c 100644 --- a/src/Components/FilterHeader/index.jsx +++ b/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(", "); diff --git a/src/Pages/PageSpeed/Monitors/index.jsx b/src/Pages/PageSpeed/Monitors/index.jsx index 68cc12c48..f10ba73d0 100644 --- a/src/Pages/PageSpeed/Monitors/index.jsx +++ b/src/Pages/PageSpeed/Monitors/index.jsx @@ -52,6 +52,7 @@ const PageSpeed = () => { ]} link="/pagespeed/create" isAdmin={isAdmin} + showPageSpeedWarning={true} /> ); } diff --git a/src/Pages/Uptime/Create/index.jsx b/src/Pages/Uptime/Create/index.jsx index 7422cda37..0a1762887 100644 --- a/src/Pages/Uptime/Create/index.jsx +++ b/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")} /> - {/* + - */} + diff --git a/src/Utils/Theme/constants.js b/src/Utils/Theme/constants.js index 239d36e36..8c4127c3d 100644 --- a/src/Utils/Theme/constants.js +++ b/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: { diff --git a/src/locales/gb.json b/src/locales/gb.json index e912ef05e..545b55e51 100644 --- a/src/locales/gb.json +++ b/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" diff --git a/src/locales/ru.json b/src/locales/ru.json index 1bb3fdf24..5d0f649de 100644 --- a/src/locales/ru.json +++ b/src/locales/ru.json @@ -360,5 +360,8 @@ "uptimeCreate": "", "uptimeCreateJsonPath": "", "uptimeCreateJsonPathQuery": "", - "maintenanceTableActionMenuDialogTitle": "" + "maintenanceTableActionMenuDialogTitle": "", + "pageSpeedWarning": "Предупреждение: Вы не добавили ключ API Google PageSpeed. Без него монитор PageSpeed не будет работать.", + "pageSpeedLearnMoreLink": "Нажмите здесь, чтобы узнать", + "pageSpeedAddApiKey": "как добавить ваш ключ API." } diff --git a/src/locales/tr.json b/src/locales/tr.json index 3dd4f168a..455b64cfe 100644 --- a/src/locales/tr.json +++ b/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." }