Merge pull request #1131 from objectstack-ai/copilot/fix-chinese-language-pack-issues

Author: hotlong

CHANGELOG.md

@@ -9,6 +9,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- **Chinese language pack (zh.ts) untranslated key** (`@object-ui/i18n`): Fixed `console.objectView.toolbarEnabledCount` which was still in English (`'{{count}} of {{total}} enabled'`) — now properly translated to `'已启用 {{count}}/{{total}} 项'`. Also fixed the same untranslated key in all other 8 non-English locales (ja, ko, de, fr, es, pt, ru, ar).
+
+- **Hardcoded English strings in platform UI** (`apps/console`, `@object-ui/fields`, `@object-ui/react`, `@object-ui/components`): Replaced hardcoded English strings with i18n `t()` calls:
+  - Console `App.tsx`: Modal dialog title (`"Create/Edit Contact"`), description (`"Add a new ... to your database."`), submitText (`"Save Record"`), and cancelText (`"Cancel"`) now use i18n keys.
+  - `SelectField`: Default placeholder `"Select an option"` now uses `t('common.selectOption')`.
+  - `LookupField`: Default placeholder `"Select..."` and search placeholder `"Search..."` now use i18n keys.
+  - `FieldFactory`: Default select option placeholder now uses `t('common.selectOption')`.
+  - Form renderer: Default select placeholder now uses `t('common.selectOption')`.
+
+### Added
+
+- **New i18n keys for select/form components** (`@object-ui/i18n`): Added new translation keys across all 10 locale packs:
+  - `common.selectOption` — Default select field placeholder (e.g., '请选择' in Chinese)
+  - `common.select` — Short select placeholder (e.g., '选择...' in Chinese)
+  - `form.createTitle` — Form dialog create title with interpolation (e.g., '新建{{object}}' in Chinese)
+  - `form.editTitle` — Form dialog edit title with interpolation
+  - `form.createDescription` — Form dialog create description with interpolation
+  - `form.editDescription` — Form dialog edit description with interpolation
+  - `form.saveRecord` — Save record button text
+
+- **Safe translation hook for field widgets** (`@object-ui/fields`): Added `useFieldTranslation` hook that provides fallback to English defaults when no `I18nProvider` is available, following the same pattern as `useDetailTranslation` in `@object-ui/plugin-detail`.
+
+### Fixed
+
 - **ObjectView ChatterPanel test assertion mismatch** (`apps/console`): Fixed the failing CI test in `ObjectView.test.tsx` where the RecordChatterPanel drawer test used `getByLabelText('Show discussion')` but the actual aria-label rendered by the component is `'Show Discussion (0)'` (from the i18n default translation `detail.showDiscussion` with count parameter). Updated the test assertion to match the correct aria-label.
 
 ### Changed

apps/console/src/App.tsx

@@ -4,6 +4,7 @@ import { ModalForm } from '@object-ui/plugin-form';
 import { Empty, EmptyTitle, EmptyDescription, Button } from '@object-ui/components';
 import { toast } from 'sonner';
 import { SchemaRendererProvider, useActionRunner, useGlobalUndo } from '@object-ui/react';
+import { useObjectTranslation } from '@object-ui/i18n';
 import type { ConnectionState } from './dataSource';
 import { AuthGuard, useAuth, PreviewBanner } from '@object-ui/auth';
 import { MetadataProvider, useMetadata } from './context/MetadataProvider';
@@ -92,6 +93,7 @@ export function AppContent() {
   const location = useLocation();
   const { appName } = useParams();
   const { apps, objects: allObjects, loading: metadataLoading } = useMetadata();
+  const { t } = useObjectTranslation();
 
   // Determine active app based on URL
   const activeApps = apps.filter((a: any) => a.active !== false);
@@ -396,8 +398,12 @@ export function AppContent() {
                   objectName: currentObjectDef.name,
                   mode: editingRecord ? 'edit' : 'create',
                   recordId: editingRecord?.id,
-                  title: `${editingRecord ? 'Edit' : 'Create'} ${currentObjectDef?.label}`,
-                  description: editingRecord ? `Update details for ${currentObjectDef?.label}` : `Add a new ${currentObjectDef?.label} to your database.`,
+                  title: editingRecord
+                      ? t('form.editTitle', { object: currentObjectDef?.label })
+                      : t('form.createTitle', { object: currentObjectDef?.label }),
+                  description: editingRecord
+                      ? t('form.editDescription', { object: currentObjectDef?.label })
+                      : t('form.createDescription', { object: currentObjectDef?.label }),
                   open: isDialogOpen,
                   onOpenChange: setIsDialogOpen,
                   layout: 'vertical',
@@ -417,8 +423,8 @@ export function AppContent() {
                   onCancel: handleDialogCancel,
                   showSubmit: true,
                   showCancel: true,
-                  submitText: 'Save Record',
-                  cancelText: 'Cancel',
+                  submitText: t('form.saveRecord'),
+                  cancelText: t('common.cancel'),
               }}
               dataSource={dataSource}
           />

packages/components/package.json

@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@object-ui/core": "workspace:*",
+    "@object-ui/i18n": "workspace:*",
     "@object-ui/react": "workspace:*",
     "@object-ui/types": "workspace:*",
     "class-variance-authority": "^0.7.1",

packages/components/src/renderers/form/form.tsx

@@ -28,10 +28,17 @@ import { AlertCircle, Loader2 } from 'lucide-react';
 import { cn } from '../../lib/utils';
 import React from 'react';
 import { SchemaRendererContext } from '@object-ui/react';
+import { createSafeTranslation } from '@object-ui/i18n';
+
+const useSafeFormTranslation = createSafeTranslation(
+  { 'common.selectOption': 'Select an option' },
+  'common.selectOption',
+);
 
 // Form renderer component - Airtable-style feature-complete form
 ComponentRegistry.register('form',
   ({ schema, className, onAction, ...props }: { schema: FormSchema; className?: string; onAction?: (action: any) => void; [key: string]: any }) => {
+    const { t } = useSafeFormTranslation();
     const {
       defaultValues = {},
       fields = [],
@@ -317,7 +324,7 @@ ComponentRegistry.register('form',
                             ...formField,
                             inputType: fieldProps.inputType,
                             options: fieldProps.options,
-                            placeholder: fieldProps.placeholder,
+                            placeholder: fieldProps.placeholder ?? (resolvedType === 'select' ? t('common.selectOption') : undefined),
                             disabled: disabled || fieldDisabled || readonly || isSubmitting,
                             dataSource: contextDataSource,
                           })}
@@ -514,7 +521,7 @@ function renderFieldComponent(type: string, props: RenderFieldProps) {
       return (
         <Select value={selectValue} onValueChange={selectOnChange} {...selectProps}>
           <SelectTrigger className="min-h-[44px] sm:min-h-0">
-            <SelectValue placeholder={placeholder ?? 'Select an option'} />
+            <SelectValue placeholder={placeholder || 'Select an option'} />
           </SelectTrigger>
           <SelectContent>
             {options.map((opt: SelectOption) => (

packages/fields/package.json

@@ -31,6 +31,7 @@
   "dependencies": {
     "@object-ui/components": "workspace:*",
     "@object-ui/core": "workspace:*",
+    "@object-ui/i18n": "workspace:*",
     "@object-ui/react": "workspace:*",
     "@object-ui/types": "workspace:*",
     "clsx": "^2.1.1",

packages/fields/src/widgets/LookupField.tsx

@@ -14,6 +14,7 @@ import { RecordPickerDialog } from './RecordPickerDialog';
 import type { RecordPickerFilterColumn } from './RecordPickerDialog';
 import { getCellRendererResolver } from './_cell-renderer-bridge';
 import { SchemaRendererContext as ImportedSchemaRendererContext } from '@object-ui/react';
+import { useFieldTranslation } from './useFieldTranslation';
 
 export interface LookupOption {
   value: string | number;
@@ -79,6 +80,7 @@ function mapFieldTypeToFilterType(
 export function LookupField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<any>) {
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
+  const { t } = useFieldTranslation();
 
   // Dynamic data loading state
   const [fetchedOptions, setFetchedOptions] = useState<LookupOption[]>([]);
@@ -393,8 +395,8 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
           >
             <Search className="mr-2 size-4" />
             {selectedOptions.length === 0 
-              ? lookupField?.placeholder || 'Select...'
-              : multiple ? `${selectedOptions.length} selected` : 'Change selection'
+              ? lookupField?.placeholder || t('common.select')
+              : multiple ? t('table.selected', { count: selectedOptions.length }) : t('common.select')
             }
           </Button>
         </PopoverTrigger>
@@ -404,7 +406,7 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
             <div className="relative">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
               <Input
-                placeholder="Search..."
+                placeholder={t('common.search') + '...'}
                 value={searchQuery}
                 onChange={(e) => handleSearchChange(e.target.value)}
                 onKeyDown={handleSearchKeyDown}

packages/fields/src/widgets/SelectField.tsx

@@ -7,6 +7,7 @@ import {
   SelectValue 
 } from '@object-ui/components';
 import { SelectFieldMetadata } from '@object-ui/types';
+import { useFieldTranslation } from './useFieldTranslation';
 import { FieldWidgetProps } from './types';
 
 /**
@@ -16,6 +17,7 @@ import { FieldWidgetProps } from './types';
 export function SelectField({ value, onChange, field, readonly, ...props }: FieldWidgetProps<string>) {
   const config = (field || (props as any).schema) as SelectFieldMetadata;
   const options = config?.options || [];
+  const { t } = useFieldTranslation();
 
   if (readonly) {
     const option = options.find((o) => o.value === value);
@@ -30,7 +32,7 @@ export function SelectField({ value, onChange, field, readonly, ...props }: Fiel
       disabled={readonly || props.disabled}
     >
       <SelectTrigger className={props.className} id={props.id}>
-        <SelectValue placeholder={config?.placeholder || "Select an option"} />
+        <SelectValue placeholder={config?.placeholder || t('common.selectOption')} />
       </SelectTrigger>
       <SelectContent position="popper">
         {options.map((option) => (

packages/fields/src/widgets/useFieldTranslation.ts

@@ -0,0 +1,17 @@
+/**
+ * Safe translation hook for field widgets.
+ * Falls back to English defaults when no I18nProvider is available.
+ */
+import { createSafeTranslation } from '@object-ui/i18n';
+
+const FIELD_DEFAULTS: Record<string, string> = {
+  'common.selectOption': 'Select an option',
+  'common.select': 'Select...',
+  'common.search': 'Search',
+  'table.selected': '{{count}} selected',
+};
+
+export const useFieldTranslation = createSafeTranslation(
+  FIELD_DEFAULTS,
+  'common.selectOption',
+);

packages/i18n/src/__tests__/i18n.test.ts

@@ -47,6 +47,17 @@ describe('@object-ui/i18n', () => {
       expect(i18n.t('common.cancel')).toBe('Cancel');
       expect(i18n.t('common.delete')).toBe('Delete');
       expect(i18n.t('common.loading')).toBe('Loading...');
+      expect(i18n.t('common.selectOption')).toBe('Select an option');
+      expect(i18n.t('common.select')).toBe('Select...');
+    });
+
+    it('translates new form keys in English', () => {
+      const i18n = createI18n({ defaultLanguage: 'en', detectBrowserLanguage: false });
+      expect(i18n.t('form.createTitle', { object: 'Contact' })).toBe('Create Contact');
+      expect(i18n.t('form.editTitle', { object: 'Contact' })).toBe('Edit Contact');
+      expect(i18n.t('form.createDescription', { object: 'Contact' })).toBe('Add a new Contact to your database.');
+      expect(i18n.t('form.editDescription', { object: 'Contact' })).toBe('Update details for Contact');
+      expect(i18n.t('form.saveRecord')).toBe('Save Record');
     });
 
     it('translates common keys in Chinese', () => {
@@ -55,6 +66,22 @@ describe('@object-ui/i18n', () => {
       expect(i18n.t('common.cancel')).toBe('取消');
       expect(i18n.t('common.delete')).toBe('删除');
       expect(i18n.t('common.loading')).toBe('加载中...');
+      expect(i18n.t('common.selectOption')).toBe('请选择');
+      expect(i18n.t('common.select')).toBe('选择...');
+    });
+
+    it('translates new form keys in Chinese', () => {
+      const i18n = createI18n({ defaultLanguage: 'zh', detectBrowserLanguage: false });
+      expect(i18n.t('form.createTitle', { object: '联系人' })).toBe('新建联系人');
+      expect(i18n.t('form.editTitle', { object: '联系人' })).toBe('编辑联系人');
+      expect(i18n.t('form.createDescription', { object: '联系人' })).toBe('向数据库添加新的联系人。');
+      expect(i18n.t('form.editDescription', { object: '联系人' })).toBe('更新联系人的详情');
+      expect(i18n.t('form.saveRecord')).toBe('保存记录');
+    });
+
+    it('translates toolbarEnabledCount in Chinese (not English fallback)', () => {
+      const i18n = createI18n({ defaultLanguage: 'zh', detectBrowserLanguage: false });
+      expect(i18n.t('console.objectView.toolbarEnabledCount', { count: 3, total: 5 })).toBe('已启用 3/5 项');
     });
 
     it('translates common keys in Japanese', () => {

packages/i18n/src/index.ts

@@ -37,6 +37,9 @@ export { createI18n, getDirection, getAvailableLanguages, type I18nConfig, type
 // React integration
 export { I18nProvider, useObjectTranslation, useI18nContext, type I18nProviderProps } from './provider';
 
+// Safe translation hook factory
+export { createSafeTranslation } from './useSafeTranslation';
+
 // Convention-based object/field label i18n
 export { useObjectLabel, useSafeFieldLabel } from './useObjectLabel';