diff --git a/redisinsight/ui/src/components/consents-settings/ConsentsNotifications/ConsentsNotifications.tsx b/redisinsight/ui/src/components/consents-settings/ConsentsNotifications/ConsentsNotifications.tsx index 1e3392f081..7086121ace 100644 --- a/redisinsight/ui/src/components/consents-settings/ConsentsNotifications/ConsentsNotifications.tsx +++ b/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([]) const [notificationConsents, setNotificationConsents] = useState( [], @@ -90,7 +92,7 @@ const ConsentsNotifications = () => { return (
- Notifications + {t('settings.general.notifications.title')} {notificationConsents.map((consent: IConsent) => ( { + const { t } = useTranslation() const [consents, setConsents] = useState([]) const [privacyConsents, setPrivacyConsents] = useState([]) const [initialValues, setInitialValues] = useState({}) @@ -81,10 +83,10 @@ const ConsentsPrivacy = () => {
- To optimize your experience, Redis Insight uses third-party tools. + {t('settings.privacy.description')} - Usage Data + {t('settings.privacy.usageData.title')} {privacyConsents.map((consent: IConsent) => ( ) -// parses interpolated values as markup (escapeValue is off), so a -// user-provided name containing e.g. "
" would be rendered as a tag. -// Escape such values before passing them to . -const escapeTrans = (value: string) => - value.replace(/&/g, '&').replace(//g, '>') - export default { ADDED_NEW_INSTANCE: (instanceName: string) => ({ title: i18n.t('notification.success.addedInstance.title'), diff --git a/redisinsight/ui/src/i18n/escapeTrans.ts b/redisinsight/ui/src/i18n/escapeTrans.ts new file mode 100644 index 0000000000..dd68c28886 --- /dev/null +++ b/redisinsight/ui/src/i18n/escapeTrans.ts @@ -0,0 +1,5 @@ +// parses interpolated values as markup (escapeValue is off), so a +// user-provided value containing e.g. "
" would be rendered as a tag. +// Escape such values before passing them to via `values`. +export const escapeTrans = (value: string) => + value.replace(/&/g, '&').replace(//g, '>') diff --git a/redisinsight/ui/src/i18n/index.ts b/redisinsight/ui/src/i18n/index.ts index 7097b4a2a0..522ff54c99 100644 --- a/redisinsight/ui/src/i18n/index.ts +++ b/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, diff --git a/redisinsight/ui/src/i18n/locales/bg.json b/redisinsight/ui/src/i18n/locales/bg.json index 9c38546672..71a5eb0c76 100644 --- a/redisinsight/ui/src/i18n/locales/bg.json +++ b/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}} ще бъде премахнат от Redis Insight.", + "settings.cloud.delete.text": "За да изтриете този API ключ от Redis Cloud, влезте в Redis Cloud и го изтрийте ръчно.", + "settings.cloud.description.access": "API потребителските ключове осигуряват програмен достъп до Redis Cloud.", + "settings.cloud.description.delete": "За да изтриете API ключове от Redis Cloud, влезте в Redis Cloud и ги изтрийте ръчно.", + "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": "Задава размера на пакета от команди за pipeline режима в Работна среда. 0 или 1 изпраща всяка команда поотделно.", + "settings.workbench.pipeline.title": "Pipeline режим" } diff --git a/redisinsight/ui/src/i18n/locales/en.json b/redisinsight/ui/src/i18n/locales/en.json index 275b5eb2bd..8128845356 100644 --- a/redisinsight/ui/src/i18n/locales/en.json +++ b/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}} will be removed from Redis Insight.", + "settings.cloud.delete.text": "To delete this API key from Redis Cloud, sign in to Redis Cloud 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, sign in to Redis Cloud 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 pipeline mode in Workbench. 0 or 1 pipelines every command.", + "settings.workbench.pipeline.title": "Pipeline Mode" } diff --git a/redisinsight/ui/src/pages/settings/components/advanced-settings/AdvancedSettings.tsx b/redisinsight/ui/src/pages/settings/components/advanced-settings/AdvancedSettings.tsx index 45c71543ad..dfb9757dbe 100644 --- a/redisinsight/ui/src/pages/settings/components/advanced-settings/AdvancedSettings.tsx +++ b/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')} /> diff --git a/redisinsight/ui/src/pages/settings/components/app-version/AppVersion.tsx b/redisinsight/ui/src/pages/settings/components/app-version/AppVersion.tsx index 4830b41f76..4e0949cad9 100644 --- a/redisinsight/ui/src/pages/settings/components/app-version/AppVersion.tsx +++ b/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})` : ''} ) diff --git a/redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.tsx b/redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.tsx index db5b4a4142..0cfcc9d617 100644 --- a/redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.tsx +++ b/redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.tsx @@ -20,11 +20,18 @@ import { Link } from 'uiSrc/components/base/link/Link' import { RiPopover } from 'uiSrc/components/base' import { EXTERNAL_LINKS, UTM_MEDIUMS } from 'uiSrc/constants/links' import { getUtmExternalLink } from 'uiSrc/utils/links' +import { Trans, useTranslation } from 'uiSrc/i18n' import UserApiKeysTable from './components/user-api-keys-table' import styles from './styles.module.scss' +const clearKeysCloudLink = getUtmExternalLink( + EXTERNAL_LINKS.redisEnterpriseCloud, + { medium: UTM_MEDIUMS.Settings, campaign: 'clear_keys' }, +) + const CloudSettings = () => { + const { t } = useTranslation() const { loading, data } = useAppSelector(oauthCapiKeysSelector) const [isDeleteOpen, setIsDeleteOpen] = useState(false) @@ -55,31 +62,31 @@ const CloudSettings = () => { return (
- API user keys + {t('settings.cloud.title')} - The list of API user keys that are stored locally in Redis Insight. + {t('settings.cloud.description.stored')} - API user keys grant programmatic access to Redis Cloud. + {t('settings.cloud.description.access')} - To delete API keys from Redis Cloud, - - sign in to Redis Cloud - - and delete them manually. + + ), + }} + /> @@ -97,24 +104,27 @@ const CloudSettings = () => { disabled={loading || !data?.length} data-testid="delete-key-btn" > - Remove all API keys + {t('settings.cloud.button.removeAll')} } >
-

All API user keys will be removed from Redis Insight.

- {'To delete API keys from Redis Cloud, '} - - sign in to Redis Cloud - - {' and delete them manually.'} +

{t('settings.cloud.removeAll.title')}

+ + ), + }} + />
@@ -125,7 +135,7 @@ const CloudSettings = () => { className={styles.popoverDeleteBtn} data-testid="delete-key-confirm-btn" > - Remove all API keys + {t('settings.cloud.button.removeAll')}
diff --git a/redisinsight/ui/src/pages/settings/components/cloud-settings/components/user-api-keys-table/UserApiKeysTable.tsx b/redisinsight/ui/src/pages/settings/components/cloud-settings/components/user-api-keys-table/UserApiKeysTable.tsx index 160960065b..0935eaebf8 100644 --- a/redisinsight/ui/src/pages/settings/components/cloud-settings/components/user-api-keys-table/UserApiKeysTable.tsx +++ b/redisinsight/ui/src/pages/settings/components/cloud-settings/components/user-api-keys-table/UserApiKeysTable.tsx @@ -23,14 +23,23 @@ import { Title } from 'uiSrc/components/base/text/Title' import { Table, ColumnDef } from 'uiSrc/components/base/layout/table' import { Link } from 'uiSrc/components/base/link/Link' import { Row } from 'uiSrc/components/base/layout/flex' +import { EXTERNAL_LINKS, UTM_MEDIUMS } from 'uiSrc/constants/links' +import { getUtmExternalLink } from 'uiSrc/utils/links' +import { escapeTrans, Trans, useTranslation } from 'uiSrc/i18n' import styles from './styles.module.scss' +const clearKeysCloudLink = getUtmExternalLink( + EXTERNAL_LINKS.redisEnterpriseCloud, + { medium: UTM_MEDIUMS.Settings, campaign: 'clear_keys' }, +) + export interface Props { items: Nullable loading: boolean } const UserApiKeysTable = ({ items, loading }: Props) => { + const { t } = useTranslation() const [deleting, setDeleting] = useState('') const dispatch = useAppDispatch() @@ -69,7 +78,7 @@ const UserApiKeysTable = ({ items, loading }: Props) => { const columns: ColumnDef[] = [ { - header: 'API Key Name', + header: t('settings.cloud.table.name'), id: 'name', accessorKey: 'name', enableSorting: true, @@ -83,7 +92,7 @@ const UserApiKeysTable = ({ items, loading }: Props) => {
{!valid && ( { /> )} - + <>{name}
@@ -101,7 +113,7 @@ const UserApiKeysTable = ({ items, loading }: Props) => { }, }, { - header: 'Created', + header: t('settings.cloud.table.created'), id: 'createdAt', accessorKey: 'createdAt', enableSorting: true, @@ -116,7 +128,7 @@ const UserApiKeysTable = ({ items, loading }: Props) => { ), }, { - header: 'Last used', + header: t('settings.cloud.table.lastUsed'), id: 'lastUsed', accessorKey: 'lastUsed', enableSorting: true, @@ -133,7 +145,7 @@ const UserApiKeysTable = ({ items, loading }: Props) => { <>{format(new Date(lastUsed), 'd MMM yyyy')} ) : ( - 'Never' + t('settings.cloud.table.never') )} ), @@ -156,34 +168,36 @@ const UserApiKeysTable = ({ items, loading }: Props) => { - {formatLongName(name)}
will be removed from Redis - Insight. - + }} + /> } text={ - <> - {'To delete this API key from Redis Cloud, '} - - sign in to Redis Cloud - - {' and delete it manually.'} - + + ), + }} + /> } item={id} suffix="" @@ -212,13 +226,11 @@ const UserApiKeysTable = ({ items, loading }: Props) => { type="StarsIcon" color="attention300" /> - The ultimate Redis starting point + {t('settings.cloud.empty.title')}
- 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. + {t('settings.cloud.empty.description')} @@ -235,7 +247,7 @@ const UserApiKeysTable = ({ items, loading }: Props) => { } data-testid="autodiscover-btn" > - Autodiscover + {t('settings.cloud.empty.autodiscover')} )} @@ -251,7 +263,7 @@ const UserApiKeysTable = ({ items, loading }: Props) => { } data-testid="create-cloud-db-btn" > - Create Redis Cloud database + {t('settings.cloud.empty.create')} )} diff --git a/redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/DateTimeFormatter.tsx b/redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/DateTimeFormatter.tsx index 00ea63a99e..5c0ed0cd4c 100644 --- a/redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/DateTimeFormatter.tsx +++ b/redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/DateTimeFormatter.tsx @@ -10,8 +10,10 @@ import { Text } from 'uiSrc/components/base/text' import TimezoneForm from './components/timezone-form/TimezoneForm' import DatetimeForm from './components/datetime-form/DatetimeForm' import { TextInput } from 'uiSrc/components/base/inputs' +import { useTranslation } from 'uiSrc/i18n' const DateTimeFormatter = () => { + const { t } = useTranslation() const [preview, setPreview] = useState('') const config = useAppSelector(userSettingsConfigSelector) @@ -27,16 +29,14 @@ const DateTimeFormatter = () => { return ( <> - Date and Time Format + {t('settings.general.datetime.title')} - - Specifies the date and time format to be used in Redis Insight: - + {t('settings.general.datetime.formatLabel')} setPreview(newPreview)} /> - Specifies the time zone to be used in Redis Insight: + {t('settings.general.datetime.timezoneLabel')} @@ -45,7 +45,7 @@ const DateTimeFormatter = () => { - Preview: + {t('settings.general.datetime.preview')} { + const { t } = useTranslation() const [error, setError] = useState('') const [saveFormatSucceed, setSaveFormatSucceed] = useState(false) const config = useAppSelector(userSettingsConfigSelector) @@ -86,7 +88,7 @@ const DatetimeForm = ({ onFormatChange }: Props) => { ), ) } else { - setError('This format is not supported.') + setError(t('settings.general.datetime.error.unsupported')) formik.setSubmitting(false) } } @@ -102,10 +104,10 @@ const DatetimeForm = ({ onFormatChange }: Props) => { const handleFormatCheck = (format = formik.values.format) => { const { valid, error: errorMsg } = checkDateTimeFormat(format) if (format.length > 50) { - setError('Format should not exceed 50 characters') + setError(t('settings.general.datetime.error.tooLong')) } else if (!valid) { - setError(errorMsg || 'This format is not supported') - onFormatChange?.('Invalid Format') + setError(errorMsg || t('settings.general.datetime.error.unsupported')) + onFormatChange?.(t('settings.general.datetime.invalidPreview')) } else { setError('') const newPreview = formatTimestamp( @@ -167,11 +169,11 @@ const DatetimeForm = ({ onFormatChange }: Props) => { const dateTimeFormatOptions = [ { value: DatetimeRadioOption.Common, - label: 'Pre-selected formats', + label: t('settings.general.datetime.option.common'), }, { value: DatetimeRadioOption.Custom, - label: 'Custom', + label: t('settings.general.datetime.option.custom'), }, ] @@ -218,18 +220,20 @@ const DatetimeForm = ({ onFormatChange }: Props) => { position="top" anchorClassName="euiToolTip__btn-disabled" content={ - showError ? error || 'This format is not supported' : null + showError + ? error || t('settings.general.datetime.error.unsupported') + : null } > - Save + {t('settings.general.datetime.button.save')} diff --git a/redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/components/timezone-form/TimezoneForm.tsx b/redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/components/timezone-form/TimezoneForm.tsx index 5b41b59c77..bbde997dbb 100644 --- a/redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/components/timezone-form/TimezoneForm.tsx +++ b/redisinsight/ui/src/pages/settings/components/general-settings/datetime-formatter/components/timezone-form/TimezoneForm.tsx @@ -12,12 +12,14 @@ import { defaultValueRender, RiSelect, } from 'uiSrc/components/base/forms/select/RiSelect' +import { useTranslation } from 'uiSrc/i18n' interface InitialValuesType { timezone: TimezoneOption } const TimezoneForm = () => { + const { t } = useTranslation() const config = useAppSelector(userSettingsConfigSelector) const dispatch = useAppDispatch() @@ -66,6 +68,10 @@ const TimezoneForm = () => { style={{ width: 240 }} options={timezoneOptions.map((option) => ({ ...option, + inputDisplay: + option.value === TimezoneOption.Local + ? t('settings.general.datetime.timezone.local') + : option.inputDisplay, 'data-test-subj': `zone-option-${option.value}`, }))} value={formik.values.timezone} diff --git a/redisinsight/ui/src/pages/settings/components/language-settings/LanguageSettings.tsx b/redisinsight/ui/src/pages/settings/components/language-settings/LanguageSettings.tsx index 7b3112b1d5..b43728f5cd 100644 --- a/redisinsight/ui/src/pages/settings/components/language-settings/LanguageSettings.tsx +++ b/redisinsight/ui/src/pages/settings/components/language-settings/LanguageSettings.tsx @@ -9,6 +9,7 @@ import i18n, { DEFAULT_LANGUAGE, LANGUAGE_NAMES, SUPPORTED_LANGUAGES, + useTranslation, } from 'uiSrc/i18n' import { defaultValueRender, @@ -24,6 +25,7 @@ const options: RiSelectOption[] = SUPPORTED_LANGUAGES.map((language) => ({ })) const LanguageSettings = () => { + const { t } = useTranslation() const dispatch = useAppDispatch() const { config } = useAppSelector(userSettingsSelector) const [selectedLanguage, setSelectedLanguage] = useState( @@ -47,9 +49,9 @@ const LanguageSettings = () => { return ( - Language + {t('settings.general.language.title')} - + { + const { t } = useTranslation() const dispatch = useAppDispatch() const [selectedTheme, setSelectedTheme] = useState(DEFAULT_THEME) - const options = THEMES + const options = THEMES.map((option) => ({ + ...option, + inputDisplay: t( + `settings.general.theme.option.${option.value.toLowerCase()}` as never, + ), + })) const themeContext = useContext(ThemeContext) const { theme, changeTheme } = themeContext const { config } = useAppSelector(userSettingsSelector) @@ -50,9 +57,9 @@ const ThemeSettings = () => { return ( - Color Theme + {t('settings.general.theme.title')} - + { + const { t } = useTranslation() const { cleanup } = useAppSelector(userSettingsWBSelector) const { batchSize = PIPELINE_COUNT_DEFAULT } = useAppSelector(userSettingsConfigSelector) ?? {} @@ -41,13 +46,13 @@ const WorkbenchSettings = () => { return ( <> - Editor Cleanup + {t('settings.workbench.cleanup.title')} @@ -56,24 +61,25 @@ const WorkbenchSettings = () => { initValue={batchSize.toString()} onApply={handleApplyPipelineCountChanges} validation={(value) => validateNumber(value)} - title="Pipeline Mode" + title={t('settings.workbench.pipeline.title')} testid="pipeline-bunch" placeholder={`${PIPELINE_COUNT_DEFAULT}`} - label="Commands in pipeline:" + label={t('settings.workbench.pipeline.label')} summary={ - <> - {'Sets the size of a command batch for the '} - - pipeline - - {' mode in Workbench. 0 or 1 pipelines every command.'} - + + ), + }} + /> } />