Merge pull request #2186 from gmliu56/ui/public-status-page-link

Added Public Link Button on Status Page if published

client/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx

@@ -3,6 +3,7 @@ import { Box, Stack, Typography, Button } from "@mui/material";
 import Image from "../../../../../Components/Image";
 import SettingsIcon from "../../../../../assets/icons/settings-bold.svg?react";
 import ThemeSwitch from "../../../../../Components/ThemeSwitch";
+import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
 //Utils
 import { useTheme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
@@ -86,6 +87,8 @@ const ControlsHeader = ({
 	type = "uptime",
 }) => {
 	const theme = useTheme();
+	const { t } = useTranslation();
+	const publicUrl = `/status/uptime/public/${url}`;
 
 	return (
 		<Stack
@@ -118,6 +121,26 @@ const ControlsHeader = ({
 				>
 					{statusPage?.companyName}
 				</Typography>
+				{statusPage?.isPublished && !isPublic && (
+					<Stack
+						direction="row"
+						alignItems="center"
+						justifyContent="center"
+						onClick={() => {
+							window.open(publicUrl, "_blank", "noopener,noreferrer");
+						}}
+						sx={{
+							display: "inline-flex",
+							":hover": {
+								cursor: "pointer",
+								borderBottom: 1,
+							},
+						}}
+					>
+						<Typography>{t("publicLink")}</Typography>
+						<ArrowOutwardIcon />
+					</Stack>
+				)}
 			</Stack>
 			<Controls
 				isDeleting={isDeleting}

client/src/Pages/StatusPage/Status/index.jsx

@@ -139,6 +139,7 @@ const PublicStatus = () => {
 				isDeleteOpen={isDeleteOpen}
 				setIsDeleteOpen={setIsDeleteOpen}
 				url={url}
+				isPublic={isPublic}
 			/>
 			<Typography variant="h2">{t("statusPageStatusServiceStatus")}</Typography>
 			<StatusBar monitors={monitors} />

client/src/locales/gb.json

@@ -410,5 +410,6 @@
     "validationFailed": "Validation failed",
     "noFileSelected": "No file selected",
     "fallbackPage": "Import a file to upload a list of servers in bulk"
-  }
+  },
+  "publicLink": "Public link"
 }