Skip to content

Commit 8cf1434

Browse files
arseniy-glarseniy-gl
committed
fix(web): localize design-system import errors (#2686)
The daemon returns English error messages for design-system import failures, and the Settings form rendered them raw — so every non-English locale saw English text in an otherwise localized UI. The fix routes the error envelope through `designSystemImportErrorKey`, which maps `code` (`BAD_REQUEST` / `INTERNAL_ERROR`) to a new i18n key. The localized summary replaces the raw English as the user-facing message, while the raw daemon detail (paths, URLs) remains accessible under a <details> disclosure for diagnostics. - New runtime helper: `apps/web/src/runtime/design-system-import-error.ts` - 3 new i18n keys across all 19 locales - Component change: `DesignSystemsSection.tsx` stores the full error envelope (with `code`) instead of just the message string - Red spec: `DesignSystemsSection.test.tsx` proves the raw English is no longer the primary visible text in zh-CN - Unit tests for the code-to-key mapping Fixes #2686
1 parent edae76a commit 8cf1434

24 files changed

Lines changed: 130 additions & 7 deletions

‎apps/web/src/components/DesignSystemsSection.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@ import { Dialog, DialogFooter, DialogTitle } from '@open-design/components';
22
import { useEffect, useId, useMemo, useRef, useState } from 'react';
33
import type { Dispatch, FormEvent, SetStateAction } from 'react';
44
import { useT } from '../i18n';
5+
import { designSystemImportErrorKey } from '../runtime/design-system-import-error';
56
import type { AppConfig, DesignSystemGenerationJob, DesignSystemSummary } from '../types';
67
import {
78
fetchDesignSystems,
89
importGitHubDesignSystem,
910
importLocalDesignSystem,
1011
importShadcnDesignSystem,
1112
updateDesignSystemDraft,
13+
type SkillImportError,
1214
} from '../providers/registry';
1315
import { DesignSystemPreviewModal } from './DesignSystemPreviewModal';
1416
import { Icon } from './Icon';
@@ -71,7 +73,7 @@ export function DesignSystemsSection({
7173
const [importMessage, setImportMessage] = useState<string | null>(null);
7274
const [importedDesignSystem, setImportedDesignSystem] = useState<DesignSystemSummary | null>(null);
7375
const [highlightedDesignSystemId, setHighlightedDesignSystemId] = useState<string | null>(null);
74-
const [importError, setImportError] = useState<string | null>(null);
76+
const [importError, setImportError] = useState<SkillImportError | null>(null);
7577

7678
useEffect(() => {
7779
fetchDesignSystems().then(setDesignSystems);
@@ -239,7 +241,7 @@ export function DesignSystemsSection({
239241
: await importLocalDesignSystem({ baseDir: importTarget, ...importOptions });
240242
setImporting(false);
241243
if ('error' in result) {
242-
setImportError(result.error.message);
244+
setImportError(result.error);
243245
return;
244246
}
245247
setDesignSystems((current) => {
@@ -276,6 +278,8 @@ export function DesignSystemsSection({
276278
});
277279
}
278280

281+
const importErrorKey = importError ? designSystemImportErrorKey(importError) : null;
282+
279283
return (
280284
<section className="settings-section settings-design-systems">
281285
<div className="library-section-header">
@@ -451,7 +455,15 @@ export function DesignSystemsSection({
451455
</div>
452456
</div>
453457
</div>
454-
{importError ? <p className="library-install-error">{importError}</p> : null}
458+
{importError ? (
459+
<p className="library-install-error">
460+
{importErrorKey ? t(importErrorKey) : importError.message}
461+
<details className="library-install-error-detail">
462+
<summary>{t('settings.designSystemsImportErrorDetails')}</summary>
463+
<code>{importError.message}</code>
464+
</details>
465+
</p>
466+
) : null}
455467
{importMessage ? (
456468
<p className="library-install-status">
457469
<span>{t('settings.designSystemsImportedStatus', { title: importMessage })}</span>

‎apps/web/src/i18n/locales/ar.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3457,6 +3457,9 @@ export const ar: Dict = {
34573457
'settings.designSystemsImportProject': 'استيراد من المشروع',
34583458
'settings.designSystemsImportedStatus': 'تم استيراد {title}',
34593459
'settings.designSystemsViewImported': 'عرض نظام التصميم المستورد',
3460+
'settings.designSystemsImportErrorInvalid': 'تعذر استيراد نظام التصميم. تحقق من المسار أو عنوان URL وحاول مرة أخرى.',
3461+
'settings.designSystemsImportErrorInternal': 'تعذر استيراد نظام التصميم بسبب خطأ داخلي. حاول مرة أخرى.',
3462+
'settings.designSystemsImportErrorDetails': 'التفاصيل',
34603463
'settings.designSystemsCategory': 'الفئة',
34613464
'settings.designSystemsAllCategories': 'كل الفئات',
34623465
'settings.designSystemsShowInHomeGallery': 'إظهار في معرض الصفحة الرئيسية',

‎apps/web/src/i18n/locales/de.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3457,6 +3457,9 @@ export const de: Dict = {
34573457
'settings.designSystemsImportProject': 'Aus Projekt importieren',
34583458
'settings.designSystemsImportedStatus': '{title} importiert',
34593459
'settings.designSystemsViewImported': 'Importiertes Design-System anzeigen',
3460+
'settings.designSystemsImportErrorInvalid': 'Design-System konnte nicht importiert werden. Überprüfen Sie den Pfad oder die URL und versuchen Sie es erneut.',
3461+
'settings.designSystemsImportErrorInternal': 'Das Design-System konnte aufgrund eines internen Fehlers nicht importiert werden. Bitte versuchen Sie es erneut.',
3462+
'settings.designSystemsImportErrorDetails': 'Details',
34603463
'settings.designSystemsCategory': 'Kategorie',
34613464
'settings.designSystemsAllCategories': 'Alle Kategorien',
34623465
'settings.designSystemsShowInHomeGallery': 'In Home-Galerie anzeigen',

‎apps/web/src/i18n/locales/en.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3495,6 +3495,9 @@ export const en: Dict = {
34953495
'settings.designSystemsImportProject': 'Import from project',
34963496
'settings.designSystemsImportedStatus': 'Imported {title}',
34973497
'settings.designSystemsViewImported': 'View imported design system',
3498+
'settings.designSystemsImportErrorInvalid': 'Couldn\'t import design system. Check the path or URL and try again.',
3499+
'settings.designSystemsImportErrorInternal': 'Couldn\'t import design system due to an internal error. Please try again.',
3500+
'settings.designSystemsImportErrorDetails': 'Details',
34983501
'settings.designSystemsCategory': 'Category',
34993502
'settings.designSystemsAllCategories': 'All categories',
35003503
'settings.designSystemsShowInHomeGallery': 'Show in home gallery',

‎apps/web/src/i18n/locales/es-ES.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3457,6 +3457,9 @@ export const esES: Dict = {
34573457
'settings.designSystemsImportProject': 'Importar desde proyecto',
34583458
'settings.designSystemsImportedStatus': '{title} importado',
34593459
'settings.designSystemsViewImported': 'Ver sistema de diseño importado',
3460+
'settings.designSystemsImportErrorInvalid': 'No se pudo importar el sistema de diseño. Compruebe la ruta o la URL e inténtelo de nuevo.',
3461+
'settings.designSystemsImportErrorInternal': 'No se pudo importar el sistema de diseño debido a un error interno. Inténtelo de nuevo.',
3462+
'settings.designSystemsImportErrorDetails': 'Detalles',
34603463
'settings.designSystemsCategory': 'Categoría',
34613464
'settings.designSystemsAllCategories': 'Todas las categorías',
34623465
'settings.designSystemsShowInHomeGallery': 'Mostrar en la galería de inicio',

‎apps/web/src/i18n/locales/fa.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3457,6 +3457,9 @@ export const fa: Dict = {
34573457
'settings.designSystemsImportProject': 'درون‌ریزی از پروژه',
34583458
'settings.designSystemsImportedStatus': '{title} درون‌ریزی شد',
34593459
'settings.designSystemsViewImported': 'مشاهده سیستم طراحی درون‌ریزی‌شده',
3460+
'settings.designSystemsImportErrorInvalid': 'سیستم طراحی وارد نشد. مسیر یا URL را بررسی کرده و دوباره امتحان کنید.',
3461+
'settings.designSystemsImportErrorInternal': 'به دلیل خطای داخلی، سیستم طراحی وارد نشد. لطفاً دوباره امتحان کنید.',
3462+
'settings.designSystemsImportErrorDetails': 'جزئیات',
34603463
'settings.designSystemsCategory': 'دسته‌بندی',
34613464
'settings.designSystemsAllCategories': 'همه دسته‌بندی‌ها',
34623465
'settings.designSystemsShowInHomeGallery': 'نمایش در گالری خانه',

‎apps/web/src/i18n/locales/fr.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3457,6 +3457,9 @@ export const fr: Dict = {
34573457
'settings.designSystemsImportProject': 'Importer depuis le projet',
34583458
'settings.designSystemsImportedStatus': '{title} importé',
34593459
'settings.designSystemsViewImported': 'Voir le système de design importé',
3460+
'settings.designSystemsImportErrorInvalid': 'Impossible d’importer le design system. Vérifiez le chemin ou l’URL et réessayez.',
3461+
'settings.designSystemsImportErrorInternal': 'Impossible d’importer le design system en raison d’une erreur interne. Veuillez réessayer.',
3462+
'settings.designSystemsImportErrorDetails': 'Détails',
34603463
'settings.designSystemsCategory': 'Catégorie',
34613464
'settings.designSystemsAllCategories': 'Toutes les catégories',
34623465
'settings.designSystemsShowInHomeGallery': 'Afficher dans la galerie d’accueil',

‎apps/web/src/i18n/locales/hu.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3457,6 +3457,9 @@ export const hu: Dict = {
34573457
'settings.designSystemsImportProject': 'Importálás projektből',
34583458
'settings.designSystemsImportedStatus': '{title} importálva',
34593459
'settings.designSystemsViewImported': 'Importált designrendszer megtekintése',
3460+
'settings.designSystemsImportErrorInvalid': 'A designrendszer importálása nem sikerült. Ellenőrizze az elérési utat vagy az URL-t, és próbálja újra.',
3461+
'settings.designSystemsImportErrorInternal': 'A designrendszer importálása belső hiba miatt nem sikerült. Kérjük, próbálja újra.',
3462+
'settings.designSystemsImportErrorDetails': 'Részletek',
34603463
'settings.designSystemsCategory': 'Kategória',
34613464
'settings.designSystemsAllCategories': 'Minden kategória',
34623465
'settings.designSystemsShowInHomeGallery': 'Megjelenítés a kezdő galériában',

‎apps/web/src/i18n/locales/id.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3457,6 +3457,9 @@ export const id: Dict = {
34573457
'settings.designSystemsImportProject': 'Impor dari proyek',
34583458
'settings.designSystemsImportedStatus': '{title} diimpor',
34593459
'settings.designSystemsViewImported': 'Lihat sistem desain yang diimpor',
3460+
'settings.designSystemsImportErrorInvalid': 'Tidak dapat mengimpor sistem desain. Periksa jalur atau URL dan coba lagi.',
3461+
'settings.designSystemsImportErrorInternal': 'Tidak dapat mengimpor sistem desain karena kesalahan internal. Silakan coba lagi.',
3462+
'settings.designSystemsImportErrorDetails': 'Detail',
34603463
'settings.designSystemsCategory': 'Kategori',
34613464
'settings.designSystemsAllCategories': 'Semua kategori',
34623465
'settings.designSystemsShowInHomeGallery': 'Tampilkan di galeri beranda',

‎apps/web/src/i18n/locales/it.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3457,6 +3457,9 @@ export const it: Dict = {
34573457
'settings.designSystemsImportProject': 'Importa dal progetto',
34583458
'settings.designSystemsImportedStatus': '{title} importato',
34593459
'settings.designSystemsViewImported': 'Vedi design system importato',
3460+
'settings.designSystemsImportErrorInvalid': 'Impossibile importare il design system. Controlla il percorso o l’URL e riprova.',
3461+
'settings.designSystemsImportErrorInternal': 'Impossibile importare il design system a causa di un errore interno. Riprova.',
3462+
'settings.designSystemsImportErrorDetails': 'Dettagli',
34603463
'settings.designSystemsCategory': 'Categoria',
34613464
'settings.designSystemsAllCategories': 'Tutte le categorie',
34623465
'settings.designSystemsShowInHomeGallery': 'Mostra nella galleria iniziale',

0 commit comments

Comments
 (0)