From 93462d7ba662c6aea1424decead23f15ded8f45b Mon Sep 17 00:00:00 2001 From: Skorpios Date: Sat, 8 Mar 2025 17:57:27 -0800 Subject: [PATCH] Changed all user facing strings to use the i18n implementation. --- .../NotificationIntegrationModal.jsx | 37 +++++++++++++++++-- .../TabComponent.jsx | 7 +++- src/locales/gb.json | 35 +++++++++++++++++- 3 files changed, 72 insertions(+), 7 deletions(-) diff --git a/src/Components/NotificationIntegrationModal/NotificationIntegrationModal.jsx b/src/Components/NotificationIntegrationModal/NotificationIntegrationModal.jsx index 81f2baec0..cd5a96aa2 100644 --- a/src/Components/NotificationIntegrationModal/NotificationIntegrationModal.jsx +++ b/src/Components/NotificationIntegrationModal/NotificationIntegrationModal.jsx @@ -1,4 +1,5 @@ import { useState, useMemo } from "react"; +import { useTranslation } from "react-i18next"; import { Dialog, DialogContent, @@ -18,12 +19,16 @@ const NOTIFICATION_TYPES = [ { id: 'slack', label: 'Slack', + labelKey: 'notifications.slack.label', description: 'To enable Slack notifications, create a Slack app and enable incoming webhooks. After that, simply provide the webhook URL here.', + descriptionKey: 'notifications.slack.description', fields: [ { id: 'webhook', label: 'Webhook URL', + labelKey: 'notifications.slack.webhookLabel', placeholder: 'https://hooks.slack.com/services/...', + placeholderKey: 'notifications.slack.webhookPlaceholder', type: 'text' } ] @@ -31,12 +36,16 @@ const NOTIFICATION_TYPES = [ { id: 'discord', label: 'Discord', + labelKey: 'notifications.discord.label', description: 'To send data to a Discord channel from Checkmate via Discord notifications using webhooks, you can use Discord\'s incoming Webhooks feature.', + descriptionKey: 'notifications.discord.description', fields: [ { id: 'webhook', label: 'Discord Webhook URL', + labelKey: 'notifications.discord.webhookLabel', placeholder: 'https://discord.com/api/webhooks/...', + placeholderKey: 'notifications.discord.webhookPlaceholder', type: 'text' } ] @@ -44,18 +53,24 @@ const NOTIFICATION_TYPES = [ { id: 'telegram', label: 'Telegram', + labelKey: 'notifications.telegram.label', description: 'To enable Telegram notifications, create a Telegram bot using BotFather, an official bot for creating and managing Telegram bots. Then, get the API token and chat ID and write them down here.', + descriptionKey: 'notifications.telegram.description', fields: [ { id: 'token', label: 'Your bot token', + labelKey: 'notifications.telegram.tokenLabel', placeholder: '123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11', + placeholderKey: 'notifications.telegram.tokenPlaceholder', type: 'text' }, { id: 'chatId', label: 'Your Chat ID', + labelKey: 'notifications.telegram.chatIdLabel', placeholder: '-1001234567890', + placeholderKey: 'notifications.telegram.chatIdPlaceholder', type: 'text' } ] @@ -63,12 +78,16 @@ const NOTIFICATION_TYPES = [ { id: 'webhook', label: 'Webhooks', + labelKey: 'notifications.webhook.label', description: 'You can set up a custom webhook to receive notifications when incidents occur.', + descriptionKey: 'notifications.webhook.description', fields: [ { id: 'url', label: 'Webhook URL', + labelKey: 'notifications.webhook.urlLabel', placeholder: 'https://your-server.com/webhook', + placeholderKey: 'notifications.webhook.urlPlaceholder', type: 'text' } ] @@ -83,6 +102,7 @@ const NotificationIntegrationModal = ({ // Optional prop to configure available notification types notificationTypes = NOTIFICATION_TYPES }) => { + const { t } = useTranslation(); const theme = useTheme(); const [tabValue, setTabValue] = useState(0); @@ -200,7 +220,7 @@ const NotificationIntegrationModal = ({ color: theme.palette.primary.contrastTextSecondary, pl: theme.spacing(4) }}> - Add or edit notifications + {t('notifications.addOrEditNotifications', 'Add or edit notifications')} ( @@ -230,7 +250,16 @@ const NotificationIntegrationModal = ({ {notificationTypes.map((type, index) => ( ({ + ...field, + label: t(field.labelKey, field.label), + placeholder: t(field.placeholderKey, field.placeholder) + })) + }} integrations={integrations} handleIntegrationChange={handleIntegrationChange} handleInputChange={handleInputChange} @@ -258,7 +287,7 @@ const NotificationIntegrationModal = ({ px: theme.spacing(8) }} > - Save + {t('common.save', 'Save')} diff --git a/src/Components/NotificationIntegrationModal/TabComponent.jsx b/src/Components/NotificationIntegrationModal/TabComponent.jsx index f9cf6ab53..89216a8c1 100644 --- a/src/Components/NotificationIntegrationModal/TabComponent.jsx +++ b/src/Components/NotificationIntegrationModal/TabComponent.jsx @@ -4,9 +4,11 @@ import { Box, Button } from "@mui/material"; +import { useTranslation } from "react-i18next"; import { useTheme } from "@emotion/react"; import TextInput from "../../../src/Components/Inputs/TextInput"; import Checkbox from "../../../src/Components/Inputs/Checkbox"; + const TabComponent = ({ type, integrations, @@ -15,6 +17,7 @@ const TabComponent = ({ handleTestNotification }) => { const theme = useTheme(); + const { t } = useTranslation(); // Helper to get the field state key (e.g., slackWebhook, telegramToken) const getFieldKey = (typeId, fieldId) => { @@ -49,7 +52,7 @@ const TabComponent = ({ handleIntegrationChange(type.id, e.target.checked)} /> @@ -87,7 +90,7 @@ const TabComponent = ({ onClick={() => handleTestNotification(type.id)} disabled={!integrations[type.id] || !areAllFieldsFilled()} > - Test notification + {t('notifications.testNotification')} diff --git a/src/locales/gb.json b/src/locales/gb.json index cf7711fa8..9756f8a9d 100644 --- a/src/locales/gb.json +++ b/src/locales/gb.json @@ -107,5 +107,38 @@ "settingsDemoMonitorsAdded": "Successfully added demo monitors", "settingsFailedToAddDemoMonitors": "Failed to add demo monitors", "settingsMonitorsDeleted": "Successfully deleted all monitors", - "settingsFailedToDeleteMonitors": "Failed to delete all monitors" + "settingsFailedToDeleteMonitors": "Failed to delete all monitors", + + "notifications": { + "enableNotifications": "Enable {{platform}} notifications", + "testNotification": "Test notification", + "addOrEditNotifications": "Add or edit notifications", + "slack": { + "label": "Slack", + "description": "To enable Slack notifications, create a Slack app and enable incoming webhooks. After that, simply provide the webhook URL here.", + "webhookLabel": "Webhook URL", + "webhookPlaceholder": "https://hooks.slack.com/services/..." + }, + "discord": { + "label": "Discord", + "description": "To send data to a Discord channel from Checkmate via Discord notifications using webhooks, you can use Discord's incoming Webhooks feature.", + "webhookLabel": "Discord Webhook URL", + "webhookPlaceholder": "https://discord.com/api/webhooks/..." + }, + "telegram": { + "label": "Telegram", + "description": "To enable Telegram notifications, create a Telegram bot using BotFather, an official bot for creating and managing Telegram bots. Then, get the API token and chat ID and write them down here.", + "tokenLabel": "Your bot token", + "tokenPlaceholder": "123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11", + "chatIdLabel": "Your Chat ID", + "chatIdPlaceholder": "-1001234567890" + }, + "webhook": { + "label": "Webhooks", + "description": "You can set up a custom webhook to receive notifications when incidents occur.", + "urlLabel": "Webhook URL", + "urlPlaceholder": "https://your-server.com/webhook" + } + } + }