feat: Add Russian i18n translations and fix CORS + API endpoint issues

- Implemented full Russian translation (ru) for 8 major pages - Added LanguageSwitcher component with language detection - Translated: Navigation, Settings, Workflows, Credentials, Banner, Examples - Fixed API endpoint path: changed to use sans-api-v1 client for /v1/ endpoints - Fixed CORS: added http://localhost:8081 to ALLOWED_ORIGINS - Added locales infrastructure with i18next and react-i18next - Created bilingual JSON files (en/ru) for 4 namespaces - 220+ translation keys implemented - Backend CORS configuration updated in .env - Documentation: I18N implementation guides and installation docs
2026-02-21 08:29:21 +03:00
parent b56d724ed8
commit 6b69159550
34 changed files with 3715 additions and 217 deletions
--- a/I18N-ANALYSIS.md
+++ b/I18N-ANALYSIS.md
@@ -0,0 +1,391 @@
+# Skyvern Frontend - Анализ интернационализации
+
+**Дата**: 20 февраля 2026  
+**Статус**: ❌ i18n НЕ реализован
+
+## Текущее состояние
+
+### ❌ Система переводов отсутствует
+
+1. **Нет библиотек i18n**:
+   - ❌ react-i18next
+   - ❌ react-intl
+   - ❌ i18next
+   - ❌ Любых других библиотек интернационализации
+
+2. **Все тексты хардкодные**:
+   ```tsx
+   // Пример из src/routes/root/SideNav.tsx
+   {
+     label: "Discover",
+     to: "/discover",
+     icon: <CompassIcon className="size-6" />,
+   },
+   {
+     label: "Workflows",
+     to: "/workflows",
+     icon: <LightningBoltIcon className="size-6" />,
+   },
+   {
+     label: "Settings",
+     to: "/settings",
+     icon: <GearIcon className="size-6" />,
+   }
+   ```
+
+3. **Прямые английские строки в JSX**:
+   ```tsx
+   // src/routes/settings/Settings.tsx
+   <CardTitle className="text-lg">Settings</CardTitle>
+   <CardDescription>
+     You can select environment and organization here
+   </CardDescription>
+   ```
+
+## Объем работы для русификации
+
+### Статистика:
+- **487 файлов** (.tsx, .ts)
+- **~200+ компонентов** с текстовым контентом
+- **~1000+ строк** для перевода (примерная оценка)
+
+### Основные файлы с текстами:
+
+#### Навигация:
+- `src/routes/root/SideNav.tsx` - меню (Build, Discover, Workflows, Settings)
+- `src/routes/root/TopNav.tsx` - верхнее меню
+
+#### Страницы:
+- `src/routes/settings/Settings.tsx` - настройки
+- `src/routes/workflows/` - вся система workflows
+- `src/routes/tasks/` - задачи
+- `src/routes/credentials/` - учетные данные
+- `src/routes/browserSessions/` - браузерные сессии
+
+#### Компоненты UI:
+- `src/components/` - все компоненты (~150 файлов)
+
+## Как добавить русский язык
+
+### Вариант 1: react-i18next (рекомендуется)
+
+**Преимущества:**
+- ✅ Самая популярная библиотека для React
+- ✅ Поддержка плюрализации (1 задача, 2 задачи, 5 задач)
+- ✅ Lazy loading переводов
+- ✅ TypeScript support
+- ✅ Легкая интеграция с существующим кодом
+
+**Этапы внедрения:**
+
+#### 1. Установить зависимости
+```bash
+cd /home/vodorod/dorod/skyvern/skyvern-frontend
+npm install react-i18next i18next i18next-http-backend i18next-browser-languagedetector
+```
+
+#### 2. Создать структуру переводов
+```
+src/
+  i18n/
+    config.ts           # конфигурация i18next
+    locales/
+      en/
+        common.json     # общие тексты
+        settings.json   # настройки
+        workflows.json  # workflows
+        tasks.json      # задачи
+      ru/
+        common.json
+        settings.json
+        workflows.json
+        tasks.json
+```
+
+#### 3. Пример конфигурации (`src/i18n/config.ts`)
+```typescript
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+// Import translations
+import enCommon from './locales/en/common.json';
+import enSettings from './locales/en/settings.json';
+import ruCommon from './locales/ru/common.json';
+import ruSettings from './locales/ru/settings.json';
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: {
+        common: enCommon,
+        settings: enSettings,
+      },
+      ru: {
+        common: ruCommon,
+        settings: ruSettings,
+      },
+    },
+    fallbackLng: 'en',
+    defaultNS: 'common',
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+export default i18n;
+```
+
+#### 4. Подключить в `src/main.tsx`
+```tsx
+import './i18n/config';  // добавить ПЕРЕД другими импортами
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+```
+
+#### 5. Пример использования в компонентах
+
+**Было:**
+```tsx
+function SideNav() {
+  return (
+    <NavLinkGroup
+      title="Build"
+      links={[
+        {
+          label: "Discover",
+          to: "/discover",
+        },
+        {
+          label: "Workflows",
+          to: "/workflows",
+        },
+      ]}
+    />
+  );
+}
+```
+
+**Стало:**
+```tsx
+import { useTranslation } from 'react-i18next';
+
+function SideNav() {
+  const { t } = useTranslation('common');
+  
+  return (
+    <NavLinkGroup
+      title={t('nav.build')}
+      links={[
+        {
+          label: t('nav.discover'),
+          to: "/discover",
+        },
+        {
+          label: t('nav.workflows'),
+          to: "/workflows",
+        },
+      ]}
+    />
+  );
+}
+```
+
+**Файл `/src/i18n/locales/en/common.json`:**
+```json
+{
+  "nav": {
+    "build": "Build",
+    "discover": "Discover",
+    "workflows": "Workflows",
+    "runs": "Runs",
+    "browsers": "Browsers",
+    "general": "General",
+    "settings": "Settings",
+    "credentials": "Credentials"
+  }
+}
+```
+
+**Файл `/src/i18n/locales/ru/common.json`:**
+```json
+{
+  "nav": {
+    "build": "Созда<D0B4><D0B0>ие",
+    "discover": "Обзор",
+    "workflows": "Рабочие процессы",
+    "runs": "Запуски",
+    "browsers": "Браузеры",
+    "general": "Общее",
+    "settings": "Настройки",
+    "credentials": "Учетные данные"
+  }
+}
+```
+
+#### 6. Добавить переключатель языка
+
+```tsx
+import { useTranslation } from 'react-i18next';
+import { Select } from '@/components/ui/select';
+
+function LanguageSwitcher() {
+  const { i18n } = useTranslation();
+  
+  return (
+    <Select
+      value={i18n.language}
+      onValueChange={(lang) => i18n.changeLanguage(lang)}
+    >
+      <SelectItem value="en">English</SelectItem>
+      <SelectItem value="ru">Русский</SelectItem>
+    </Select>
+  );
+}
+```
+
+### Вариант 2: react-intl (альтернатива)
+
+**Преимущества:**
+- ✅ От Facebook/Meta
+- ✅ Встроенная поддержка форматирования (даты, числа, валюта)
+- ✅ ICU Message syntax
+
+**Минусы:**
+- ❌ Более сложная настройка
+- ❌ Менее популярна чем react-i18next
+
+### Вариант 3: Кастомное решение (НЕ рекомендуется)
+
+Можно сделать собственную систему с `React.Context`, но это излишне при наличии готовых решений.
+
+## Оценка времени для полной русификации
+
+### Этап 1: Настройка инфраструктуры (2-4 часа)
+- Установка react-i18next
+- Создание конфигурации
+- Настройка структуры файлов
+- Добавление переключателя языка
+
+### Этап 2: Извлечение и перевод строк (20-40 часов)
+- Извлечь все строки из ~200 компонентов
+- Создать JSON файлы с переводами
+- Перевести на русский (~1000+ строк)
+- Заменить хардкод на `t()` вызовы
+
+### Этап 3: Тестирование (4-8 часов)
+- Проверка работы переводов
+- Тестирование переключения языков
+- Проверка плюрализации
+- Исправление багов с длиной строк (русские тексты длиннее)
+
+**ИТОГО: 26-52 часа работы**
+
+## Альтернативный подход: Постепенная русификация
+
+Можно русифицировать постепенно, начиная с самых важных частей:
+
+### Фаза 1: Навигация и меню (2-3 часа)
+- ✅ Левое меню (SideNav)
+- ✅ Верхнее меню (TopNav)
+- ✅ Переключатель языка
+
+### Фаза 2: Страница настроек (3-4 часа)
+- ✅ Settings page
+- ✅ Формы
+
+### Фаза 3: Workflows (8-12 часов)
+- ✅ Список workflows
+- ✅ Редактор workflows
+- ✅ Блоки и узлы
+
+### Фаза 4: Остальные страницы (12-20 часов)
+- ✅ Tasks
+- ✅ Credentials
+- ✅ Browser Sessions
+
+## Рекомендации
+
+### ✅ Стоит делать если:
+1. Проект будет использоваться русскоязычными пользователями
+2. Есть время на поддержку двух языков
+3. Планируется добавление и других языков в будущем
+4. Нужен профессиональный вид для русских клиентов
+
+### ❌ НЕ стоит делать если:
+1. Проект только для внутреннего использования англоязычной команды
+2. Нет времени на поддержку переводов при обновлениях
+3. Планируется переход на официальный SaaS Skyvern
+
+## Пример быстрого старта
+
+Если хотите попробовать - вот minimal пример для начала:
+
+```bash
+# 1. Установить зависимости
+cd /home/vodorod/dorod/skyvern/skyvern-frontend
+npm install react-i18next i18next
+
+# 2. Создать структуру
+mkdir -p src/i18n/locales/{en,ru}
+
+# 3. Создать базовые переводы
+cat > src/i18n/locales/en/common.json << 'EOF'
+{
+  "nav": {
+    "discover": "Discover",
+    "workflows": "Workflows",
+    "runs": "Runs",
+    "browsers": "Browsers",
+    "settings": "Settings",
+    "credentials": "Credentials"
+  }
+}
+EOF
+
+cat > src/i18n/locales/ru/common.json << 'EOF'
+{
+  "nav": {
+    "discover": "Обзор",
+    "workflows": "Рабочие процессы",
+    "runs": "Запуски",
+    "browsers": "Браузеры",
+    "settings": "Настройки",
+    "credentials": "Учетные данные"
+  }
+}
+EOF
+
+# 4. Создать конфиг i18n
+# ... (см. пример выше)
+
+# 5. Обновить один компонент для теста
+# ... (см. пример SideNav выше)
+```
+
+## Заключение
+
+**Текущее состояние:**
+- ❌ i18n НЕ реализован
+- ❌ Все тексты хардкодные английские
+- ❌ 1 язык - английский
+
+**Возможность добавления русского:**
+- ✅ Технически ВОЗМОЖНО
+- ⚠️ Требует 26-52 часа работы для полной русификации
+- ✅ Можно делать постепенно (2-3 часа для начала)
+
+**Рекомендация:**
+Если нужен русский интерфейс - начните с навигации (2-3 часа), а остальное добавляйте по мере необходимости.
+
+---
+
+**Автор**: GitHub Copilot  
+**Проект**: DOROD / Skyvern Integration  
+**Обновлено**: 2026-02-20