diff --git a/client/src/Components/Alert/index.jsx b/client/src/Components/Alert/index.jsx index 0b32fe2b1..921d4fd6e 100644 --- a/client/src/Components/Alert/index.jsx +++ b/client/src/Components/Alert/index.jsx @@ -111,7 +111,7 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => { Alert.propTypes = { variant: PropTypes.oneOf(["info", "error", "warning"]).isRequired, title: PropTypes.string, - body: PropTypes.string, + body: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), isToast: PropTypes.bool, hasIcon: PropTypes.bool, onClick: function (props, propName, componentName) { diff --git a/client/src/Components/Fallback/index.jsx b/client/src/Components/Fallback/index.jsx index 5b6da7062..b00ddbecc 100644 --- a/client/src/Components/Fallback/index.jsx +++ b/client/src/Components/Fallback/index.jsx @@ -11,7 +11,8 @@ import { useSelector } from "react-redux"; import Alert from "../Alert"; import { useTranslation } from "react-i18next"; import "./index.css"; - +import { useFetchSettings } from "../../Hooks/useFetchSettings"; +import { useState } from "react"; /** * Fallback component to display a fallback UI with a title, a list of checks, and a navigation button. * @@ -24,32 +25,41 @@ import "./index.css"; * @returns {JSX.Element} The rendered fallback UI. */ -const Fallback = ({ title, checks, link = "/", isAdmin, vowelStart = false, showPageSpeedWarning = 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(); + const [settingsData, setSettingsData] = useState(undefined); + const [isLoading, error] = useFetchSettings({ setSettingsData }); // Custom warning message with clickable link const renderWarningMessage = () => { return ( <> - {t("pageSpeedWarning")} {" "} - {t("pageSpeedLearnMoreLink")} - - {" "}{t("pageSpeedAddApiKey")} + {" "} + {t("pageSpeedAddApiKey")} ); }; @@ -120,7 +130,7 @@ const Fallback = ({ title, checks, link = "/", isAdmin, vowelStart = false, show {/* Bulk create of uptime monitors */} {title === "uptime monitor" && ( -