fix(admin): add copy action for Original translations on translations edit page

packages/admin/dashboard/src/routes/translations/translations-edit/components/translations-edit-form/translations-edit-form.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { AdminStoreLocale, HttpTypes } from "@medusajs/types"
-import { Button, Prompt, Select, toast, Text } from "@medusajs/ui"
+import { Button, Copy, Prompt, Select, toast, Text } from "@medusajs/ui"
 import { ColumnDef } from "@tanstack/react-table"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useForm } from "react-hook-form"
@@ -22,12 +22,12 @@ const EntityTranslationsSchema = z.object({
   id: z.string().nullish(),
   fields: z.record(z.string().optional()),
 })
-export type EntityTranslationsSchema = z.infer<typeof EntityTranslationsSchema>
+export type EntityTranslations = z.infer<typeof EntityTranslationsSchema>
 
 export const TranslationsFormSchema = z.object({
   entities: z.record(EntityTranslationsSchema),
 })
-export type TranslationsFormSchema = z.infer<typeof TranslationsFormSchema>
+export type TranslationsForm = z.infer<typeof TranslationsFormSchema>
 
 export type TranslationRow = EntityRow | FieldRow
 
@@ -53,12 +53,17 @@ export function isFieldRow(row: TranslationRow): row is FieldRow {
 
 type LocaleSnapshot = {
   localeCode: string
-  entities: Record<string, EntityTranslationsSchema>
+  entities: Record<string, EntityTranslations>
+}
+
+type TranslationReference = {
+  id: string
+  [key: string]: unknown
 }
 
 function buildLocaleSnapshot(
   translations: HttpTypes.AdminTranslation[],
-  references: { id: string; [key: string]: string }[],
+  references: TranslationReference[],
   localeCode: string,
   translatableFields: string[]
 ): LocaleSnapshot {
@@ -69,7 +74,7 @@ function buildLocaleSnapshot(
     }
   }
 
-  const entities: Record<string, EntityTranslationsSchema> = {}
+  const entities: Record<string, EntityTranslations> = {}
   for (const ref of references) {
     const existing = referenceTranslations.get(ref.id)
     const fields: Record<string, string> = {}
@@ -90,7 +95,7 @@ function buildLocaleSnapshot(
 function extendSnapshot(
   snapshot: LocaleSnapshot,
   translations: HttpTypes.AdminTranslation[],
-  newReferences: { id: string; [key: string]: string }[],
+  newReferences: TranslationReference[],
   translatableFields: string[]
 ): LocaleSnapshot {
   const referenceTranslations = new Map<string, HttpTypes.AdminTranslation>()
@@ -122,9 +127,7 @@ function extendSnapshot(
   return { ...snapshot, entities: extendedEntities }
 }
 
-function snapshotToFormValues(
-  snapshot: LocaleSnapshot
-): TranslationsFormSchema {
+function snapshotToFormValues(snapshot: LocaleSnapshot): TranslationsForm {
   return { entities: snapshot.entities }
 }
 
@@ -134,7 +137,7 @@ type ChangeDetectionResult = {
 }
 
 function computeChanges(
-  currentState: TranslationsFormSchema,
+  currentState: TranslationsForm,
   snapshot: LocaleSnapshot,
   entityType: string,
   localeCode: string
@@ -185,15 +188,12 @@ function computeChanges(
   return { hasChanges, payload }
 }
 
-const columnHelper = createDataGridHelper<
-  TranslationRow,
-  TranslationsFormSchema
->()
+const columnHelper = createDataGridHelper<TranslationRow, TranslationsForm>()
 
 const FIELD_COLUMN_WIDTH = 350
 
 function buildTranslationRows(
-  references: { id: string; [key: string]: string }[],
+  references: TranslationReference[],
   translatableFields: string[]
 ): TranslationRow[] {
   return references.map((reference) => ({
@@ -213,7 +213,7 @@ function useTranslationsGridColumns({
   selectedLocale,
   dynamicColumnWidth,
 }: {
-  entities: { id: string; [key: string]: string }[]
+  entities: TranslationReference[]
   availableLocales: AdminStoreLocale[]
   selectedLocale: string
   dynamicColumnWidth: number
@@ -278,11 +278,24 @@ function useTranslationsGridColumns({
             return null
           }
 
+          const rawOriginalValue = entity[row.field_name]
+          const originalValue =
+            typeof rawOriginalValue === "string" ? rawOriginalValue : ""
+
           return (
             <DataGrid.ReadonlyCell color="normal" context={context} isMultiLine>
-              <Text className="text-ui-fg-subtle" weight="plus" size="small">
-                {entity[row.field_name]}
-              </Text>
+              <div className="flex w-full items-start justify-between gap-x-2">
+                <Text className="text-ui-fg-subtle" weight="plus" size="small">
+                  {originalValue}
+                </Text>
+                {originalValue.trim() && (
+                  <Copy
+                    content={originalValue}
+                    variant="mini"
+                    className="cursor-pointer"
+                  />
+                )}
+              </div>
             </DataGrid.ReadonlyCell>
           )
         },
@@ -329,7 +342,7 @@ function useTranslationsGridColumns({
 
 type TranslationsEditFormProps = {
   translations: HttpTypes.AdminTranslation[]
-  references: { id: string; [key: string]: string }[]
+  references: TranslationReference[]
   entityType: string
   availableLocales: AdminStoreLocale[]
   translatableFields: string[]
@@ -401,7 +414,7 @@ export const TranslationsEditForm = ({
     latestPropsRef.current = { translations, references }
   }, [translations, references])
 
-  const form = useForm<TranslationsFormSchema>({
+  const form = useForm<TranslationsForm>({
     resolver: zodResolver(TranslationsFormSchema),
     defaultValues: snapshotToFormValues(snapshotRef.current),
   })
@@ -425,7 +438,7 @@ export const TranslationsEditForm = ({
     )
 
     const currentValues = form.getValues()
-    const newFormValues: TranslationsFormSchema = {
+    const newFormValues: TranslationsForm = {
       entities: { ...currentValues.entities },
     }