refactor: extract shared createSafeTranslationHook to reduce duplication

Copilot · hotlong · Copilot · commit ef4453f0c82d · 2026-03-02T08:51:44.000Z
- Create useDetailTranslation.ts with shared DETAIL_DEFAULT_TRANSLATIONS
  and createSafeTranslationHook utility
- DetailView, DetailSection, and RelatedList all use the shared hook
- Remove duplicate translation constants and hook implementations
- Export useDetailTranslation, DETAIL_DEFAULT_TRANSLATIONS, and
  createSafeTranslationHook from plugin-detail index

Co-authored-by: hotlong &lt;50353452+hotlong@users.noreply.github.com&gt;
diff --git a/packages/plugin-detail/src/DetailSection.tsx b/packages/plugin-detail/src/DetailSection.tsx
@@ -24,28 +24,11 @@ import {
   TooltipTrigger,
 } from '@object-ui/components';
 import { ChevronDown, ChevronRight, Copy, Check } from 'lucide-react';
-import { SchemaRenderer, useObjectTranslation } from '@object-ui/react';
+import { SchemaRenderer } from '@object-ui/react';
 import { getCellRenderer } from '@object-ui/fields';
 import type { DetailViewSection as DetailViewSectionType, DetailViewField, FieldMetadata } from '@object-ui/types';
 import { applyDetailAutoLayout } from './autoLayout';
-
-const SECTION_TRANSLATIONS: Record<string, string> = {
-  'detail.copyToClipboard': 'Copy to clipboard',
-  'detail.copied': 'Copied!',
-};
-
-function useSectionTranslation() {
-  try {
-    const result = useObjectTranslation();
-    const testValue = result.t('detail.copyToClipboard');
-    if (testValue === 'detail.copyToClipboard') {
-      return { t: (key: string) => SECTION_TRANSLATIONS[key] || key };
-    }
-    return { t: result.t };
-  } catch {
-    return { t: (key: string) => SECTION_TRANSLATIONS[key] || key };
-  }
-}
+import { useDetailTranslation } from './useDetailTranslation';
 
 export interface DetailSectionProps {
   section: DetailViewSectionType;
@@ -69,7 +52,7 @@ export const DetailSection: React.FC<DetailSectionProps> = ({
 }) => {
   const [isCollapsed, setIsCollapsed] = React.useState(section.defaultCollapsed ?? false);
   const [copiedField, setCopiedField] = React.useState<string | null>(null);
-  const { t } = useSectionTranslation();
+  const { t } = useDetailTranslation();
 
   const handleCopyField = React.useCallback((fieldName: string, value: any) => {
     const textValue = value !== null && value !== undefined ? String(value) : '';
diff --git a/packages/plugin-detail/src/DetailView.tsx b/packages/plugin-detail/src/DetailView.tsx
@@ -42,86 +42,10 @@ import { DetailTabs } from './DetailTabs';
 import { RelatedList } from './RelatedList';
 import { RecordComments } from './RecordComments';
 import { ActivityTimeline } from './ActivityTimeline';
-import { SchemaRenderer, useObjectTranslation } from '@object-ui/react';
+import { SchemaRenderer } from '@object-ui/react';
 import { buildExpandFields } from '@object-ui/core';
 import type { DetailViewSchema, DataSource } from '@object-ui/types';
-
-/**
- * Default English translations for the detail view.
- * Used as fallback when no I18nProvider is available.
- */
-const DETAIL_DEFAULT_TRANSLATIONS: Record<string, string> = {
-  'detail.back': 'Back',
-  'detail.edit': 'Edit',
-  'detail.editInline': 'Edit inline',
-  'detail.save': 'Save',
-  'detail.saveChanges': 'Save changes',
-  'detail.editFieldsInline': 'Edit fields inline',
-  'detail.share': 'Share',
-  'detail.duplicate': 'Duplicate',
-  'detail.export': 'Export',
-  'detail.viewHistory': 'View history',
-  'detail.delete': 'Delete',
-  'detail.moreActions': 'More actions',
-  'detail.addToFavorites': 'Add to favorites',
-  'detail.removeFromFavorites': 'Remove from favorites',
-  'detail.previousRecord': 'Previous record',
-  'detail.nextRecord': 'Next record',
-  'detail.recordOf': '{{current}} of {{total}}',
-  'detail.recordNotFound': 'Record not found',
-  'detail.recordNotFoundDescription': 'The record you are looking for does not exist or may have been deleted.',
-  'detail.goBack': 'Go back',
-  'detail.details': 'Details',
-  'detail.related': 'Related',
-  'detail.relatedRecords': '{{count}} records',
-  'detail.relatedRecordOne': '{{count}} record',
-  'detail.noRelatedRecords': 'No related records found',
-  'detail.loading': 'Loading...',
-  'detail.copyToClipboard': 'Copy to clipboard',
-  'detail.copied': 'Copied!',
-  'detail.deleteConfirmation': 'Are you sure you want to delete this record?',
-  'detail.editRecord': 'Edit record',
-  'detail.viewAll': 'View All',
-  'detail.new': 'New',
-  'detail.emptyValue': '—',
-};
-
-/**
- * Safe wrapper for useObjectTranslation that falls back to English defaults
- * when I18nProvider is not available (e.g., standalone usage).
- */
-function useDetailTranslation() {
-  try {
-    const result = useObjectTranslation();
-    const testValue = result.t('detail.back');
-    if (testValue === 'detail.back') {
-      return {
-        t: (key: string, options?: Record<string, unknown>) => {
-          let value = DETAIL_DEFAULT_TRANSLATIONS[key] || key;
-          if (options) {
-            for (const [k, v] of Object.entries(options)) {
-              value = value.replace(`{{${k}}}`, String(v));
-            }
-          }
-          return value;
-        },
-      };
-    }
-    return { t: result.t };
-  } catch {
-    return {
-      t: (key: string, options?: Record<string, unknown>) => {
-        let value = DETAIL_DEFAULT_TRANSLATIONS[key] || key;
-        if (options) {
-          for (const [k, v] of Object.entries(options)) {
-            value = value.replace(`{{${k}}}`, String(v));
-          }
-        }
-        return value;
-      },
-    };
-  }
-}
+import { useDetailTranslation } from './useDetailTranslation';
 
 export interface DetailViewProps {
   schema: DetailViewSchema;
diff --git a/packages/plugin-detail/src/RelatedList.tsx b/packages/plugin-detail/src/RelatedList.tsx
@@ -8,51 +8,10 @@
 
 import * as React from 'react';
 import { Card, CardHeader, CardTitle, CardContent, Button } from '@object-ui/components';
-import { SchemaRenderer, useObjectTranslation } from '@object-ui/react';
+import { SchemaRenderer } from '@object-ui/react';
 import { Plus, ExternalLink } from 'lucide-react';
 import type { DataSource } from '@object-ui/types';
-
-const RELATED_TRANSLATIONS: Record<string, string> = {
-  'detail.relatedRecords': '{{count}} records',
-  'detail.relatedRecordOne': '{{count}} record',
-  'detail.noRelatedRecords': 'No related records found',
-  'detail.loading': 'Loading...',
-  'detail.viewAll': 'View All',
-  'detail.new': 'New',
-};
-
-function useRelatedTranslation() {
-  try {
-    const result = useObjectTranslation();
-    const testValue = result.t('detail.loading');
-    if (testValue === 'detail.loading') {
-      return {
-        t: (key: string, options?: Record<string, unknown>) => {
-          let value = RELATED_TRANSLATIONS[key] || key;
-          if (options) {
-            for (const [k, v] of Object.entries(options)) {
-              value = value.replace(`{{${k}}}`, String(v));
-            }
-          }
-          return value;
-        },
-      };
-    }
-    return { t: result.t };
-  } catch {
-    return {
-      t: (key: string, options?: Record<string, unknown>) => {
-        let value = RELATED_TRANSLATIONS[key] || key;
-        if (options) {
-          for (const [k, v] of Object.entries(options)) {
-            value = value.replace(`{{${k}}}`, String(v));
-          }
-        }
-        return value;
-      },
-    };
-  }
-}
+import { useDetailTranslation } from './useDetailTranslation';
 
 export interface RelatedListProps {
   title: string;
@@ -83,7 +42,7 @@ export const RelatedList: React.FC<RelatedListProps> = ({
 }) => {
   const [relatedData, setRelatedData] = React.useState(data);
   const [loading, setLoading] = React.useState(false);
-  const { t } = useRelatedTranslation();
+  const { t } = useDetailTranslation();
 
   React.useEffect(() => {
     if (api && !data.length) {
diff --git a/packages/plugin-detail/src/index.tsx b/packages/plugin-detail/src/index.tsx
@@ -15,6 +15,7 @@ import type { DetailViewSchema } from '@object-ui/types';
 
 export { DetailView, DetailSection, DetailTabs, RelatedList };
 export { inferDetailColumns, isWideFieldType, applyAutoSpan, applyDetailAutoLayout } from './autoLayout';
+export { useDetailTranslation, DETAIL_DEFAULT_TRANSLATIONS, createSafeTranslationHook } from './useDetailTranslation';
 export { RecordComments } from './RecordComments';
 export { ActivityTimeline } from './ActivityTimeline';
 export { InlineCreateRelated } from './InlineCreateRelated';
diff --git a/packages/plugin-detail/src/useDetailTranslation.ts b/packages/plugin-detail/src/useDetailTranslation.ts
@@ -0,0 +1,103 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useObjectTranslation } from '@object-ui/react';
+
+/**
+ * Create a safe translation hook with fallback to defaults.
+ * Follows the same pattern as useGridTranslation / useListViewTranslation.
+ *
+ * @param defaults - Fallback English translations keyed by i18n key
+ * @param testKey - A key to test if i18n is properly configured
+ */
+export function createSafeTranslationHook(
+  defaults: Record<string, string>,
+  testKey: string,
+) {
+  return function useSafeTranslation() {
+    try {
+      const result = useObjectTranslation();
+      const testValue = result.t(testKey);
+      if (testValue === testKey) {
+        return {
+          t: (key: string, options?: Record<string, unknown>) => {
+            let value = defaults[key] || key;
+            if (options) {
+              for (const [k, v] of Object.entries(options)) {
+                value = value.replace(`{{${k}}}`, String(v));
+              }
+            }
+            return value;
+          },
+        };
+      }
+      return { t: result.t };
+    } catch {
+      return {
+        t: (key: string, options?: Record<string, unknown>) => {
+          let value = defaults[key] || key;
+          if (options) {
+            for (const [k, v] of Object.entries(options)) {
+              value = value.replace(`{{${k}}}`, String(v));
+            }
+          }
+          return value;
+        },
+      };
+    }
+  };
+}
+
+/**
+ * Default English translations for detail view components.
+ * Used as fallback when no I18nProvider is available.
+ */
+export const DETAIL_DEFAULT_TRANSLATIONS: Record<string, string> = {
+  'detail.back': 'Back',
+  'detail.edit': 'Edit',
+  'detail.editInline': 'Edit inline',
+  'detail.save': 'Save',
+  'detail.saveChanges': 'Save changes',
+  'detail.editFieldsInline': 'Edit fields inline',
+  'detail.share': 'Share',
+  'detail.duplicate': 'Duplicate',
+  'detail.export': 'Export',
+  'detail.viewHistory': 'View history',
+  'detail.delete': 'Delete',
+  'detail.moreActions': 'More actions',
+  'detail.addToFavorites': 'Add to favorites',
+  'detail.removeFromFavorites': 'Remove from favorites',
+  'detail.previousRecord': 'Previous record',
+  'detail.nextRecord': 'Next record',
+  'detail.recordOf': '{{current}} of {{total}}',
+  'detail.recordNotFound': 'Record not found',
+  'detail.recordNotFoundDescription': 'The record you are looking for does not exist or may have been deleted.',
+  'detail.goBack': 'Go back',
+  'detail.details': 'Details',
+  'detail.related': 'Related',
+  'detail.relatedRecords': '{{count}} records',
+  'detail.relatedRecordOne': '{{count}} record',
+  'detail.noRelatedRecords': 'No related records found',
+  'detail.loading': 'Loading...',
+  'detail.copyToClipboard': 'Copy to clipboard',
+  'detail.copied': 'Copied!',
+  'detail.deleteConfirmation': 'Are you sure you want to delete this record?',
+  'detail.editRecord': 'Edit record',
+  'detail.viewAll': 'View All',
+  'detail.new': 'New',
+  'detail.emptyValue': '—',
+};
+
+/**
+ * Translation hook for detail view components.
+ * Falls back to DETAIL_DEFAULT_TRANSLATIONS when no I18nProvider is available.
+ */
+export const useDetailTranslation = createSafeTranslationHook(
+  DETAIL_DEFAULT_TRANSLATIONS,
+  'detail.back',
+);
