Feat: Migrate Hardcoded Strings

src/Pages/Maintenance/CreateMaintenance/index.jsx

@@ -28,6 +28,7 @@ import {
 } from "../../../Utils/timeUtils";
 import { useNavigate, useParams } from "react-router-dom";
 import { buildErrors, hasValidationErrors } from "../../../Validation/error";
+import { useTranslation } from "react-i18next";
 
 const getDurationAndUnit = (durationInMs) => {
 	if (durationInMs % MS_PER_DAY === 0) {
@@ -113,6 +114,7 @@ const CreateMaintenance = () => {
 	const { maintenanceWindowId } = useParams();
 	const navigate = useNavigate();
 	const theme = useTheme();
+	const { t } = useTranslation();
 	const { user } = useSelector((state) => state.auth);
 	const [monitors, setMonitors] = useState([]);
 	const [search, setSearch] = useState("");
@@ -293,29 +295,29 @@ const CreateMaintenance = () => {
 							component="span"
 							fontSize="inherit"
 						>
-							{`${maintenanceWindowId === undefined ? "Create a" : "Edit"}`}{" "}
+							{`${maintenanceWindowId === undefined ? t("createA") : t("edit")}`}{" "}
 						</Typography>
 						<Typography
 							component="span"
 							variant="h2"
 							fontSize="inherit"
 							fontWeight="inherit"
 						>
-							maintenance{" "}
+							{t("maintenance")}{" "}
 						</Typography>
 						<Typography
 							component="span"
 							fontSize="inherit"
 						>
-							window
+							{t("window")}
 						</Typography>
 					</Typography>
 					<Typography
 						component="h2"
 						variant="body2"
 						fontSize={14}
 					>
-						Your pings won&apos;t be sent during this time frame
+						{t("maintenanceWindowDescription")}
 					</Typography>
 				</Box>
 				<ConfigBox>
@@ -324,14 +326,14 @@ const CreateMaintenance = () => {
 							component="h2"
 							variant="h2"
 						>
-							General Settings
+							{t("settingsGeneralSettings")}
 						</Typography>
 					</Box>
 					<Stack gap={theme.spacing(15)}>
 						<TextInput
 							id="name"
-							label="Friendly name"
-							placeholder="Maintenance at __ : __ for ___ minutes"
+							label={t("friendlyNameInput")}
+							placeholder={t("friendlyNamePlaceholder")}
 							value={form.name}
 							onChange={(event) => {
 								handleFormChange("name", event.target.value);
@@ -342,7 +344,7 @@ const CreateMaintenance = () => {
 						<Select
 							id="repeat"
 							name="maintenance-repeat"
-							label="Maintenance Repeat"
+							label={t("maintenanceRepeat")}
 							value={getIdByValue(repeatConfig, form.repeat)}
 							onChange={(event) => {
 								handleFormChange(
@@ -437,15 +439,15 @@ const CreateMaintenance = () => {
 							component="h2"
 							variant="h2"
 						>
-							Start time
+							{t("startTime")}
 						</Typography>
-						<Typography>All dates and times are in GMT+0 time zone.</Typography>
+						<Typography>{t("timeZoneInfo")}</Typography>
 					</Box>
 					<Stack gap={theme.spacing(15)}>
 						<LocalizationProvider dateAdapter={AdapterDayjs}>
 							<MobileTimePicker
 								id="startTime"
-								label="Start time"
+								label={t("startTime")}
 								value={form.startTime}
 								onChange={(newTime) => {
 									handleTimeChange("startTime", newTime);
@@ -486,7 +488,7 @@ const CreateMaintenance = () => {
 							<TextInput
 								type="number"
 								id="duration"
-								label="Duration"
+								label={t("duration")}
 								value={form.duration}
 								onChange={(event) => {
 									handleFormChange("duration", event.target.value);
@@ -516,13 +518,13 @@ const CreateMaintenance = () => {
 							component="h2"
 							variant="h2"
 						>
-							Monitors to apply maintenance window to
+							{t("monitorsToApply")}
 						</Typography>
 					</Box>
 					<Stack gap={theme.spacing(15)}>
 						<Search
 							id={"monitors"}
-							label="Add monitors"
+							label={t("addMonitors")}
 							multiple={true}
 							isAdorned={false}
 							options={monitors ? monitors : []}
@@ -547,7 +549,7 @@ const CreateMaintenance = () => {
 						onClick={() => navigate("/maintenance")}
 						sx={{ mr: theme.spacing(6) }}
 					>
-						Cancel
+						{t("cancel")}
 					</Button>
 					<Button
 						loading={isLoading}
@@ -558,8 +560,8 @@ const CreateMaintenance = () => {
 					>
 						{`${
 							maintenanceWindowId === undefined
-								? "Create maintenance"
-								: "Edit maintenance"
+								? t("createMaintenance")
+								: t("editMaintenance")
 						}`}
 					</Button>
 				</Box>

src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx

@@ -8,6 +8,7 @@ import Settings from "../../../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
 import { networkService } from "../../../../main";
 import { createToast } from "../../../../Utils/toastUtils";
+import { useTranslation } from "react-i18next";
 
 import Dialog from "../../../../Components/Dialog";
 
@@ -18,6 +19,7 @@ const ActionsMenu = ({ /* isAdmin, */ maintenanceWindow, updateCallback }) => {
 	const [isLoading, setIsLoading] = useState(false);
 
 	const theme = useTheme();
+	const { t } = useTranslation();
 
 	const handleRemove = async (event) => {
 		event.preventDefault();
@@ -124,7 +126,7 @@ const ActionsMenu = ({ /* isAdmin, */ maintenanceWindow, updateCallback }) => {
 						handleEdit();
 					}}
 				>
-					Edit
+					{t("edit")}
 				</MenuItem>
 				<MenuItem
 					onClick={(e) => {
@@ -142,7 +144,7 @@ const ActionsMenu = ({ /* isAdmin, */ maintenanceWindow, updateCallback }) => {
 						openRemove(e);
 					}}
 				>
-					Remove
+					{t("remove")}
 				</MenuItem>
 			</Menu>
 			<Dialog

src/Pages/Maintenance/MaintenanceTable/index.jsx

@@ -10,6 +10,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { formatDurationRounded } from "../../../Utils/timeUtils";
 import { StatusLabel } from "../../../Components/Label";
 import { setRowsPerPage } from "../../../Features/UI/uiSlice";
+import { useTranslation } from "react-i18next";
 import dayjs from "dayjs";
 /**
  * Component for pagination actions (first, previous, next, last).
@@ -49,13 +50,15 @@ const MaintenanceTable = ({
 		);
 		setPage(0);
 	};
+
+	const { t } = useTranslation();
 
 	const headers = [
 		{
 			id: "name",
 			content: (
 				<Box onClick={() => handleSort("name")}>
-					Maintenance Window Name
+					{t("maintenanceWindowName")}
 					<span
 						style={{
 							visibility: sort.field === "name" ? "visible" : "hidden",
@@ -76,7 +79,7 @@ const MaintenanceTable = ({
 			content: (
 				<Box onClick={() => handleSort("status")}>
 					{" "}
-					Status
+					{t("status")}
 					<span
 						style={{
 							visibility: sort.field === "active" ? "visible" : "hidden",
@@ -105,21 +108,21 @@ const MaintenanceTable = ({
 		},
 		{
 			id: "nextWindow",
-			content: "Next window",
+			content: t("nextWindow"),
 			render: (row) => {
 				return getTimeToNextWindow(row.start, row.end, row.repeat);
 			},
 		},
 		{
 			id: "repeat",
-			content: "Repeat",
+			content: t("repeat"),
 			render: (row) => {
 				return row.repeat === 0 ? "N/A" : formatDurationRounded(row.repeat);
 			},
 		},
 		{
 			id: "actions",
-			content: "Actions",
+			content: t("actions"),
 			render: (row) => (
 				<ActionsMenu
 					maintenanceWindow={row}

src/Pages/Maintenance/index.jsx

@@ -9,9 +9,11 @@ import { networkService } from "../../main";
 import Breadcrumbs from "../../Components/Breadcrumbs";
 import { useNavigate } from "react-router-dom";
 import { useIsAdmin } from "../../Hooks/useIsAdmin";
+import { useTranslation } from "react-i18next";
 
 const Maintenance = () => {
 	const theme = useTheme();
+	const { t } = useTranslation();
 	const navigate = useNavigate();
 	const { rowsPerPage } = useSelector((state) => state.ui.maintenance);
 	const isAdmin = useIsAdmin();
@@ -74,7 +76,7 @@ const Maintenance = () => {
 					}}
 					sx={{ fontWeight: 500 }}
 				>
-					Create maintenance window
+					{t("createMaintenanceWindow")}
 				</Button>
 			</Stack>
 			<MaintenanceTable

src/Pages/NotFound/index.jsx

@@ -4,6 +4,7 @@ import NotFoundSvg from "../../../src/assets/Images/sushi_404.svg";
 import { Button, Stack, Typography } from "@mui/material";
 import { useNavigate } from "react-router";
 import { useTheme } from "@emotion/react";
+import { useTranslation } from "react-i18next";
 
 /**
  * Support for defaultProps will be removed from function components in a future major release
@@ -33,6 +34,7 @@ const DefaultValue = {
 const NotFound = ({ title = DefaultValue.title, desc = DefaultValue.desc }) => {
 	const navigate = useNavigate();
 	const theme = useTheme();
+	const { t } = useTranslation();
 
 	return (
 		<Stack
@@ -62,7 +64,7 @@ const NotFound = ({ title = DefaultValue.title, desc = DefaultValue.desc }) => {
 					sx={{ mt: theme.spacing(10) }}
 					onClick={() => navigate("/")}
 				>
-					Go to the main dashboard
+					{t("notFoundButton")}
 				</Button>
 			</Stack>
 		</Stack>