RI-8272 i18n: migrate settings pages

redisinsight/ui/src/components/consents-settings/ConsentsNotifications/ConsentsNotifications.tsx

@@ -10,6 +10,7 @@ import {
 } from 'uiSrc/slices/user/user-settings'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { Title } from 'uiSrc/components/base/text/Title'
+import { useTranslation } from 'uiSrc/i18n'
 import ConsentOption from '../ConsentOption'
 import { IConsent, ConsentCategories } from '../ConsentsSettings'
 
@@ -20,6 +21,7 @@ export interface Props {
 }
 
 const ConsentsNotifications = () => {
+  const { t } = useTranslation()
   const [consents, setConsents] = useState<IConsent[]>([])
   const [notificationConsents, setNotificationConsents] = useState<IConsent[]>(
     [],
@@ -90,7 +92,7 @@ const ConsentsNotifications = () => {
   return (
     <form onSubmit={formik.handleSubmit} data-testid="consents-settings-form">
       <div className={styles.consentsWrapper}>
-        <Title size="XS">Notifications</Title>
+        <Title size="XS">{t('settings.general.notifications.title')}</Title>
         {notificationConsents.map((consent: IConsent) => (
           <ConsentOption
             consent={consent}

redisinsight/ui/src/components/consents-settings/ConsentsPrivacy/ConsentsPrivacy.tsx

@@ -11,12 +11,14 @@ import {
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { Title } from 'uiSrc/components/base/text/Title'
 import { Text } from 'uiSrc/components/base/text'
+import { useTranslation } from 'uiSrc/i18n'
 import ConsentOption from '../ConsentOption'
 import { ConsentCategories, IConsent } from '../ConsentsSettings'
 
 import styles from '../styles.module.scss'
 
 const ConsentsPrivacy = () => {
+  const { t } = useTranslation()
   const [consents, setConsents] = useState<IConsent[]>([])
   const [privacyConsents, setPrivacyConsents] = useState<IConsent[]>([])
   const [initialValues, setInitialValues] = useState<any>({})
@@ -81,10 +83,10 @@ const ConsentsPrivacy = () => {
     <form onSubmit={formik.handleSubmit} data-testid="consents-settings-form">
       <div className={styles.consentsWrapper}>
         <Text size="M" color="primary">
-          To optimize your experience, Redis Insight uses third-party tools.
+          {t('settings.privacy.description')}
         </Text>
         <Spacer size="m" />
-        <Title size="M">Usage Data</Title>
+        <Title size="M">{t('settings.privacy.usageData.title')}</Title>
         <Spacer size="m" />
         {privacyConsents.map((consent: IConsent) => (
           <ConsentOption

redisinsight/ui/src/components/notifications/success-messages.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import i18n, { Trans } from 'uiSrc/i18n'
+import i18n, { escapeTrans, Trans } from 'uiSrc/i18n'
 import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
 import {
   IBulkActionOverview,
@@ -35,12 +35,6 @@ const bold = (
   </Text>
 )
 
-// <Trans> parses interpolated values as markup (escapeValue is off), so a
-// user-provided name containing e.g. "<br/>" would be rendered as a tag.
-// Escape such values before passing them to <Trans>.
-const escapeTrans = (value: string) =>
-  value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-
 export default {
   ADDED_NEW_INSTANCE: (instanceName: string) => ({
     title: i18n.t('notification.success.addedInstance.title'),

redisinsight/ui/src/i18n/escapeTrans.ts

@@ -0,0 +1,5 @@
+// <Trans> parses interpolated values as markup (escapeValue is off), so a
+// user-provided value containing e.g. "<br/>" would be rendered as a tag.
+// Escape such values before passing them to <Trans> via `values`.
+export const escapeTrans = (value: string) =>
+  value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')

redisinsight/ui/src/i18n/index.ts

@@ -2,6 +2,7 @@ import i18n from './i18n'
 
 export default i18n
 export { useTranslation, Trans } from './useTranslation'
+export { escapeTrans } from './escapeTrans'
 export {
   SUPPORTED_LANGUAGES,
   DEFAULT_LANGUAGE,

redisinsight/ui/src/i18n/locales/bg.json

@@ -158,14 +158,61 @@
   "notification.success.uploadDataBulk.success": "Успешни",
   "notification.success.uploadDataBulk.timeTaken": "Изразходвано време",
   "notification.success.uploadDataBulk.title": "Действието завърши",
+  "settings.advanced.keysToScan.label": "Ключове за сканиране:",
+  "settings.advanced.keysToScan.summary": "Задава броя ключове, сканирани на една итерация. Филтрирането по шаблон при голям брой ключове може да намали производителността.",
+  "settings.advanced.keysToScan.title": "Ключове за сканиране в изглед Списък",
   "settings.advancedWarning": "Разширените настройки трябва да се променят само ако разбирате тяхното въздействие.",
+  "settings.appVersion": "Redis Insight v{{version}}",
+  "settings.cloud.button.removeAll": "Премахни всички API ключове",
+  "settings.cloud.delete.header": "{{name}} <lineBreak/> ще бъде премахнат от Redis Insight.",
+  "settings.cloud.delete.text": "За да изтриете този API ключ от Redis Cloud, <cloudLink>влезте в Redis Cloud</cloudLink> и го изтрийте ръчно.",
+  "settings.cloud.description.access": "API потребителските ключове осигуряват програмен достъп до Redis Cloud.",
+  "settings.cloud.description.delete": "За да изтриете API ключове от Redis Cloud, <cloudLink>влезте в Redis Cloud</cloudLink> и ги изтрийте ръчно.",
+  "settings.cloud.description.stored": "Списъкът с API потребителски ключове, съхранявани локално в Redis Insight.",
+  "settings.cloud.empty.autodiscover": "Автоматично откриване",
+  "settings.cloud.empty.create": "Създай Redis Cloud база данни",
+  "settings.cloud.empty.description": "Cloud API ключове ще бъдат създадени и съхранени, когато се свържете с Redis Cloud, за да създадете безплатна Redis Cloud база данни или автоматично да откриете вашата Cloud база данни.",
+  "settings.cloud.empty.title": "Идеалната отправна точка за Redis",
+  "settings.cloud.removeAll.title": "Всички API потребителски ключове ще бъдат премахнати от Redis Insight.",
+  "settings.cloud.table.copy.label": "Копирай API ключа",
+  "settings.cloud.table.copy.tooltip": "Копирай името на API ключа",
+  "settings.cloud.table.created": "Създаден",
+  "settings.cloud.table.invalidTooltip": "Този API ключ е невалиден. Премахнете го от Redis Cloud и създайте нов.",
+  "settings.cloud.table.lastUsed": "Последно използван",
+  "settings.cloud.table.name": "Име на API ключ",
+  "settings.cloud.table.never": "Никога",
+  "settings.cloud.title": "API потребителски ключове",
   "settings.copyDiagnostics": "Копиране на системна информация",
-  "settings.language.label": "Изберете езика, използван в Redis Insight:",
-  "settings.language.title": "Език",
+  "settings.general.datetime.button.save": "Запази",
+  "settings.general.datetime.error.tooLong": "Форматът не трябва да надвишава 50 знака",
+  "settings.general.datetime.error.unsupported": "Този формат не се поддържа.",
+  "settings.general.datetime.formatLabel": "Изберете формата за дата и час, използван в Redis Insight:",
+  "settings.general.datetime.invalidPreview": "Невалиден формат",
+  "settings.general.datetime.option.common": "Предварително зададени формати",
+  "settings.general.datetime.option.custom": "Персонализиран",
+  "settings.general.datetime.preview": "Преглед:",
+  "settings.general.datetime.timezone.local": "Същата като системната",
+  "settings.general.datetime.timezoneLabel": "Изберете часовата зона, използвана в Redis Insight:",
+  "settings.general.datetime.title": "Формат за дата и час",
+  "settings.general.language.label": "Изберете езика на интерфейса:",
+  "settings.general.language.title": "Език",
+  "settings.general.notifications.title": "Известия",
+  "settings.general.theme.label": "Изберете цветовата тема, използвана в Redis Insight:",
+  "settings.general.theme.option.dark": "Тъмна тема",
+  "settings.general.theme.option.light": "Светла тема",
+  "settings.general.theme.option.system": "Същата като системната",
+  "settings.general.theme.title": "Цветова тема",
+  "settings.privacy.description": "За да оптимизира работата Ви, Redis Insight използва инструменти на трети страни.",
+  "settings.privacy.usageData.title": "Данни за употреба",
   "settings.section.advanced": "Разширени",
   "settings.section.cloud": "Redis Cloud",
   "settings.section.general": "Общи",
   "settings.section.privacy": "Поверителност",
   "settings.section.workbench": "Работна среда",
-  "settings.title": "Настройки"
+  "settings.title": "Настройки",
+  "settings.workbench.cleanup.label": "Изчистване на редактора след изпълнение на команди",
+  "settings.workbench.cleanup.title": "Изчистване на редактора",
+  "settings.workbench.pipeline.label": "Команди в pipeline:",
+  "settings.workbench.pipeline.summary": "Задава размера на пакета от команди за <pipelineLink>pipeline</pipelineLink> режима в Работна среда. 0 или 1 изпраща всяка команда поотделно.",
+  "settings.workbench.pipeline.title": "Pipeline режим"
 }

redisinsight/ui/src/i18n/locales/en.json

@@ -158,14 +158,61 @@
   "notification.success.uploadDataBulk.success": "Success",
   "notification.success.uploadDataBulk.timeTaken": "Time Taken",
   "notification.success.uploadDataBulk.title": "Action completed",
+  "settings.advanced.keysToScan.label": "Keys to Scan:",
+  "settings.advanced.keysToScan.summary": "Sets the amount of keys to scan per one iteration. Filtering by pattern per a large number of keys may decrease performance.",
+  "settings.advanced.keysToScan.title": "Keys to Scan in List view",
   "settings.advancedWarning": "Advanced settings should only be changed if you understand their impact.",
+  "settings.appVersion": "Redis Insight v{{version}}",
+  "settings.cloud.button.removeAll": "Remove all API keys",
+  "settings.cloud.delete.header": "{{name}} <lineBreak/> will be removed from Redis Insight.",
+  "settings.cloud.delete.text": "To delete this API key from Redis Cloud, <cloudLink>sign in to Redis Cloud</cloudLink> and delete it manually.",
+  "settings.cloud.description.access": "API user keys grant programmatic access to Redis Cloud.",
+  "settings.cloud.description.delete": "To delete API keys from Redis Cloud, <cloudLink>sign in to Redis Cloud</cloudLink> and delete them manually.",
+  "settings.cloud.description.stored": "The list of API user keys that are stored locally in Redis Insight.",
+  "settings.cloud.empty.autodiscover": "Autodiscover",
+  "settings.cloud.empty.create": "Create Redis Cloud database",
+  "settings.cloud.empty.description": "Cloud API keys will be created and stored when you connect to Redis Cloud to create a free Redis Cloud database or autodiscover your Cloud database.",
+  "settings.cloud.empty.title": "The ultimate Redis starting point",
+  "settings.cloud.removeAll.title": "All API user keys will be removed from Redis Insight.",
+  "settings.cloud.table.copy.label": "Copy API key",
+  "settings.cloud.table.copy.tooltip": "Copy API Key Name",
+  "settings.cloud.table.created": "Created",
+  "settings.cloud.table.invalidTooltip": "This API key is invalid. Remove it from Redis Cloud and create a new one instead.",
+  "settings.cloud.table.lastUsed": "Last used",
+  "settings.cloud.table.name": "API Key Name",
+  "settings.cloud.table.never": "Never",
+  "settings.cloud.title": "API user keys",
   "settings.copyDiagnostics": "Copy system info",
-  "settings.language.label": "Specifies the language used in Redis Insight:",
-  "settings.language.title": "Language",
+  "settings.general.datetime.button.save": "Save",
+  "settings.general.datetime.error.tooLong": "Format should not exceed 50 characters",
+  "settings.general.datetime.error.unsupported": "This format is not supported.",
+  "settings.general.datetime.formatLabel": "Specifies the date and time format to be used in Redis Insight:",
+  "settings.general.datetime.invalidPreview": "Invalid Format",
+  "settings.general.datetime.option.common": "Pre-selected formats",
+  "settings.general.datetime.option.custom": "Custom",
+  "settings.general.datetime.preview": "Preview:",
+  "settings.general.datetime.timezone.local": "Match System",
+  "settings.general.datetime.timezoneLabel": "Specifies the time zone to be used in Redis Insight:",
+  "settings.general.datetime.title": "Date and Time Format",
+  "settings.general.language.label": "Specifies the display language:",
+  "settings.general.language.title": "Language",
+  "settings.general.notifications.title": "Notifications",
+  "settings.general.theme.label": "Specifies the color theme to be used in Redis Insight:",
+  "settings.general.theme.option.dark": "Dark Theme",
+  "settings.general.theme.option.light": "Light Theme",
+  "settings.general.theme.option.system": "Match System",
+  "settings.general.theme.title": "Color Theme",
+  "settings.privacy.description": "To optimize your experience, Redis Insight uses third-party tools.",
+  "settings.privacy.usageData.title": "Usage Data",
   "settings.section.advanced": "Advanced",
   "settings.section.cloud": "Redis Cloud",
   "settings.section.general": "General",
   "settings.section.privacy": "Privacy",
   "settings.section.workbench": "Workbench",
-  "settings.title": "Settings"
+  "settings.title": "Settings",
+  "settings.workbench.cleanup.label": "Clear the Editor after running commands",
+  "settings.workbench.cleanup.title": "Editor Cleanup",
+  "settings.workbench.pipeline.label": "Commands in pipeline:",
+  "settings.workbench.pipeline.summary": "Sets the size of a command batch for the <pipelineLink>pipeline</pipelineLink> mode in Workbench. 0 or 1 pipelines every command.",
+  "settings.workbench.pipeline.title": "Pipeline Mode"
 }

redisinsight/ui/src/pages/settings/components/advanced-settings/AdvancedSettings.tsx

@@ -9,8 +9,10 @@ import {
   userSettingsConfigSelector,
 } from 'uiSrc/slices/user/user-settings'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
+import { useTranslation } from 'uiSrc/i18n'
 
 const AdvancedSettings = () => {
+  const { t } = useTranslation()
   const { scanThreshold = '' } =
     useAppSelector(userSettingsConfigSelector) ?? {}
 
@@ -33,11 +35,11 @@ const AdvancedSettings = () => {
         initValue={scanThreshold.toString()}
         onApply={handleApplyKeysToScanChanges}
         validation={validateCountNumber}
-        title="Keys to Scan in List view"
-        summary="Sets the amount of keys to scan per one iteration. Filtering by pattern per a large number of keys may decrease performance."
+        title={t('settings.advanced.keysToScan.title')}
+        summary={t('settings.advanced.keysToScan.summary')}
         testid="keys-to-scan"
         placeholder="10 000"
-        label="Keys to Scan:"
+        label={t('settings.advanced.keysToScan.label')}
       />
       <Spacer size="m" />
     </>

redisinsight/ui/src/pages/settings/components/app-version/AppVersion.tsx

@@ -4,10 +4,12 @@ import { useAppSelector } from 'uiSrc/slices/hooks'
 import { appServerInfoSelector } from 'uiSrc/slices/app/info'
 import { Text } from 'uiSrc/components/base/text'
 import { getConfig } from 'uiSrc/config'
+import { useTranslation } from 'uiSrc/i18n'
 
 const BUILD_COMMIT_SHA_DISPLAY_LENGTH = 7
 
 const AppVersion = () => {
+  const { t } = useTranslation()
   const server = useAppSelector(appServerInfoSelector)
 
   if (!server?.appVersion) return null
@@ -24,7 +26,7 @@ const AppVersion = () => {
       data-testid="settings-app-version"
       style={{ marginTop: 16, textAlign: 'left' }}
     >
-      Redis Insight v{server.appVersion}
+      {t('settings.appVersion', { version: server.appVersion })}
       {buildCommitSha ? ` (${buildCommitSha})` : ''}
     </Text>
   )