@medusajs/dashboard 3.0.0-snapshot-20251214110905 → 3.0.0-snapshot-20251215162333

package/src/routes/translations/translation-list/components/translations-completion-section/translations-completion-section.tsx

@@ -1,16 +1,22 @@
+import { AdminTranslationEntityStatistics } from "@medusajs/types"
 import { Container, Heading, Text } from "@medusajs/ui"
 import { useTranslation } from "react-i18next"
 
 type TranslationsCompletionSectionProps = {
-  translatedCount?: number
-  totalCount?: number
+  statistics: Record<string, AdminTranslationEntityStatistics>
 }
 
 export const TranslationsCompletionSection = ({
-  translatedCount = 0,
-  totalCount = 0,
+  statistics,
 }: TranslationsCompletionSectionProps) => {
   const { t } = useTranslation()
+  const { translatedCount, totalCount } = Object.values(statistics).reduce(
+    (acc, curr) => ({
+      translatedCount: acc.translatedCount + curr.translated,
+      totalCount: acc.totalCount + curr.expected,
+    }),
+    { totalCount: 0, translatedCount: 0 }
+  )
 
   const percentage = totalCount > 0 ? (translatedCount / totalCount) * 100 : 0
   const remaining = Math.max(0, totalCount - translatedCount)

package/src/routes/translations/translation-list/translation-list.tsx

@@ -2,96 +2,92 @@ import { Container, Heading, Text } from "@medusajs/ui"
 import { TwoColumnPage } from "../../../components/layout/pages"
 import { useTranslation } from "react-i18next"
 import { Buildings } from "@medusajs/icons"
-import { useStore } from "../../../hooks/api"
+import {
+  useStore,
+  useTranslationSettings,
+  useTranslationStatistics,
+} from "../../../hooks/api"
 import { ActiveLocalesSection } from "./components/active-locales-section/active-locales-section"
 import { TranslationListSection } from "./components/translation-list-section/translation-list-section"
 import { TranslationsCompletionSection } from "./components/translations-completion-section/translations-completion-section"
 import { TwoColumnPageSkeleton } from "../../../components/common/skeleton"
+import { useMemo } from "react"
 
 export type TranslatableEntity = {
-  icon: React.ReactNode
   label: string
   reference: string
+  translatableFields: string[]
   translatedCount?: number
   totalCount?: number
 }
 
-const TRANSLATABLE_ENTITIES: TranslatableEntity[] = [
-  {
-    icon: <Buildings />,
-    label: "Product",
-    reference: "product",
-    translatedCount: 4,
-    totalCount: 96,
-  },
-  {
-    icon: <Buildings />,
-    label: "Product Variants",
-    reference: "product_variant",
-    translatedCount: 4,
-    totalCount: 200000,
-  },
-  {
-    icon: <Buildings />,
-    label: "Product Categories",
-    reference: "product_category",
-    translatedCount: 96,
-    totalCount: 96,
-  },
-  {
-    icon: <Buildings />,
-    label: "Product Collections",
-    reference: "product_collection",
-    translatedCount: 4,
-    totalCount: 96,
-  },
-  {
-    icon: <Buildings />,
-    label: "Product Types",
-    reference: "product_type",
-    translatedCount: 4,
-    totalCount: 96,
-  },
-  {
-    icon: <Buildings />,
-    label: "Product Tags",
-    reference: "product_tag",
-    translatedCount: 96,
-    totalCount: 96,
-  },
-  {
-    icon: <Buildings />,
-    label: "Product Options",
-    reference: "product_option",
-    translatedCount: 96,
-    totalCount: 96,
-  },
-  {
-    icon: <Buildings />,
-    label: "Product Option Values",
-    reference: "product_option_value",
-    translatedCount: 96,
-    totalCount: 96,
-  },
-]
-
 export const TranslationList = () => {
   const { t } = useTranslation()
 
   const { store, isPending, isError, error } = useStore()
+  const {
+    translatable_fields,
+    isPending: isTranslationSettingsPending,
+    isError: isTranslationSettingsError,
+    error: translationSettingsError,
+  } = useTranslationSettings()
+  const {
+    statistics,
+    isPending: isTranslationStatisticsPending,
+    isError: isTranslationStatisticsError,
+    error: translationStatisticsError,
+  } = useTranslationStatistics(
+    {
+      locales:
+        store?.supported_locales?.map(
+          (suportedLocale) => suportedLocale.locale_code
+        ) ?? [],
+      entity_types: Object.keys(translatable_fields ?? {}),
+    },
+    {
+      enabled: !!translatable_fields && !!store,
+    }
+  )
 
-  if (isError) {
-    throw error
+  if (isError || isTranslationSettingsError || isTranslationStatisticsError) {
+    throw error || translationSettingsError || translationStatisticsError
   }
 
-  const isReady = !!store && !isPending
+  const hasLocales = (store?.supported_locales ?? []).length > 0
+
+  const translatableEntities: TranslatableEntity[] = useMemo(() => {
+    if (!translatable_fields || !statistics) {
+      return []
+    }
+
+    return Object.entries(translatable_fields).map(([entity, fields]) => {
+      const entityStatistics = statistics[entity]
+
+      return {
+        label: entity
+          .split("_")
+          .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+          .join(" "),
+        reference: entity,
+        translatableFields: fields,
+        translatedCount: entityStatistics.translated,
+        totalCount: entityStatistics.expected,
+      }
+    })
+  }, [translatable_fields, statistics])
+
+  const isReady =
+    !!store &&
+    !isPending &&
+    !isTranslationSettingsPending &&
+    !isTranslationStatisticsPending &&
+    !!translatable_fields &&
+    !!statistics
 
   if (!isReady) {
     return <TwoColumnPageSkeleton sidebarSections={2} />
   }
 
-  const hasLocales = (store?.supported_locales ?? []).length > 0
-
   return (
     <TwoColumnPage
       widgets={{
@@ -109,7 +105,7 @@ export const TranslationList = () => {
           </Text>
         </Container>
         <TranslationListSection
-          entities={TRANSLATABLE_ENTITIES}
+          entities={translatableEntities}
           hasLocales={hasLocales}
         />
       </TwoColumnPage.Main>
@@ -121,7 +117,9 @@ export const TranslationList = () => {
             ) ?? []
           }
         ></ActiveLocalesSection>
-        <TranslationsCompletionSection />
+        {statistics && (
+          <TranslationsCompletionSection statistics={statistics} />
+        )}
       </TwoColumnPage.Sidebar>
     </TwoColumnPage>
   )

package/src/routes/translations/translations-edit/components/translations-edit-form/translations-edit-form.tsx

@@ -18,10 +18,9 @@ import {
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useBatchTranslations } from "../../../../../hooks/api/translations"
 import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
-import { REFERENCE_LABEL_MAP } from "../../utils"
 
 /**
- * Schema for a single locale translation (subrow in DataGrid).
+ * Schema for a single locale translation.
  */
 const LocaleTranslationSchema = z.object({
   id: z.string().nullish(),
@@ -50,30 +49,28 @@ export type TranslationsFormSchema = z.infer<typeof TranslationsFormSchema>
 
 /**
  * Row types for the DataGrid.
- * Parent rows are entities, subrows are locale translations.
+ * Parent rows are entities, subrows are translatable fields.
  */
-export type TranslationRow = EntityRow | LocaleRow
+export type TranslationRow = EntityRow | FieldRow
 
 export type EntityRow = {
   _type: "entity"
   reference_id: string
-  subRows: LocaleRow[]
+  subRows: FieldRow[]
 }
 
-export type LocaleRow = {
-  _type: "locale"
+export type FieldRow = {
+  _type: "field"
   reference_id: string
-  locale_code: string
-  locale_name: string
-  id?: string
+  field_name: string
 }
 
 export function isEntityRow(row: TranslationRow): row is EntityRow {
   return row._type === "entity"
 }
 
-export function isLocaleRow(row: TranslationRow): row is LocaleRow {
-  return row._type === "locale"
+export function isFieldRow(row: TranslationRow): row is FieldRow {
+  return row._type === "field"
 }
 
 function initTranslationsFormState(
@@ -95,14 +92,10 @@ function initTranslationsFormState(
     for (const locale of availableLocales) {
       const key = `${reference.id}:${locale.locale_code}`
       const existing = existingMap.get(key)
-      const isDefaultLocale = locale.is_default
 
       const fields: Record<string, string> = {}
       for (const fieldName of translatableFields) {
-        const fieldValue = isDefaultLocale
-          ? (existing?.translations?.[fieldName] as string) ??
-            reference[fieldName]
-          : (existing?.translations?.[fieldName] as string) ?? ""
+        const fieldValue = (existing?.translations?.[fieldName] as string) ?? ""
         fields[fieldName] = fieldValue
       }
 
@@ -123,29 +116,16 @@ function initTranslationsFormState(
 
 function buildTranslationRows(
   references: { id: string; [key: string]: string }[],
-  availableLocales: AdminStoreLocale[],
-  translations: HttpTypes.AdminTranslation[]
+  translatableFields: string[]
 ): TranslationRow[] {
-  // Index existing translations by reference_id:locale_code
-  const existingMap = new Map<string, HttpTypes.AdminTranslation>()
-  for (const t of translations) {
-    existingMap.set(`${t.reference_id}:${t.locale_code}`, t)
-  }
-
   return references.map((reference) => ({
     _type: "entity" as const,
     reference_id: reference.id,
-    subRows: availableLocales.map((locale) => {
-      const key = `${reference.id}:${locale.locale_code}`
-      const existing = existingMap.get(key)
-      return {
-        _type: "locale" as const,
-        reference_id: reference.id,
-        locale_code: locale.locale_code,
-        locale_name: locale.locale.name,
-        id: existing?.id,
-      }
-    }),
+    subRows: translatableFields.map((fieldName) => ({
+      _type: "field" as const,
+      reference_id: reference.id,
+      field_name: fieldName,
+    })),
   }))
 }
 
@@ -209,10 +189,14 @@ const columnHelper = createDataGridHelper<
 >()
 
 function useTranslationsGridColumns({
+  entities,
   translatableFields,
+  availableLocales,
   modalFields = [],
 }: {
+  entities: { id: string; [key: string]: string }[]
   translatableFields: string[]
+  availableLocales: AdminStoreLocale[]
   modalFields?: string[]
 }) {
   const { t } = useTranslation()
@@ -220,8 +204,9 @@ function useTranslationsGridColumns({
   const columns: ColumnDef<TranslationRow>[] = useMemo(() => {
     return [
       columnHelper.column({
-        id: "locale",
-        header: t("translations.bulk.mainColumn"),
+        id: "field",
+        name: "field",
+        header: undefined,
         cell: (context) => {
           const row = context.row.original
 
@@ -234,35 +219,67 @@ function useTranslationsGridColumns({
           return (
             <DataGrid.ReadonlyCell context={context} color="normal">
               <div className="flex h-full w-full items-center gap-x-2 overflow-hidden">
-                <span className="truncate">{row.locale_name}</span>
+                <span className="truncate">
+                  {t(`fields.${row.field_name}`, {
+                    defaultValue: row.field_name,
+                  })}
+                </span>
               </div>
             </DataGrid.ReadonlyCell>
           )
         },
         disableHiding: true,
       }),
-      ...translatableFields.map((fieldName) => {
-        const useModal = modalFields.includes(fieldName)
+      columnHelper.column({
+        id: "original",
+        name: "original",
+        header: t("general.original"),
+        cell: (context) => {
+          const row = context.row.original
+
+          if (isEntityRow(row)) {
+            return (
+              <DataGrid.ReadonlyCell context={context}></DataGrid.ReadonlyCell>
+            )
+          }
 
+          const entity = entities.find(
+            (entity) => entity.id === row.reference_id
+          )
+          if (!entity) {
+            return null
+          }
+
+          return (
+            <DataGrid.ReadonlyCell context={context}>
+              {entity[row.field_name]}
+            </DataGrid.ReadonlyCell>
+          )
+        },
+      }),
+      ...availableLocales.map((locale) => {
         return columnHelper.column({
-          id: fieldName,
-          header: t(`fields.${fieldName}`, { defaultValue: fieldName }),
+          id: locale.locale_code,
+          name: locale.locale.name,
+          header: () => locale.locale.name,
           cell: (context) => {
             const row = context.row.original
 
             if (isEntityRow(row)) {
               return (
-                <DataGrid.ReadonlyCell context={context}>
-                  <span className="text-ui-fg-muted">—</span>
-                </DataGrid.ReadonlyCell>
+                <DataGrid.ReadonlyCell
+                  context={context}
+                ></DataGrid.ReadonlyCell>
               )
             }
 
+            const useModal = modalFields.includes(row.field_name)
+
             if (useModal) {
               return (
                 <DataGrid.ExpandableTextCell
                   context={context}
-                  fieldLabel={fieldName}
+                  fieldLabel={row.field_name}
                 />
               )
             }
@@ -276,13 +293,13 @@ function useTranslationsGridColumns({
               return null
             }
 
-            return `entities.${row.reference_id}.locales.${row.locale_code}.fields.${fieldName}`
+            return `entities.${row.reference_id}.locales.${locale.locale_code}.fields.${row.field_name}`
           },
           type: "text",
         })
       }),
     ]
-  }, [t, translatableFields, modalFields])
+  }, [t, translatableFields, availableLocales, modalFields])
 
   return columns
 }
@@ -294,6 +311,10 @@ type TranslationsEditFormProps = {
   availableLocales: AdminStoreLocale[]
   translatableFields: string[]
   modalFields?: string[]
+  fetchNextPage: () => void
+  hasNextPage: boolean
+  isFetchingNextPage: boolean
+  referenceCount: number
 }
 
 export const TranslationsEditForm = ({
@@ -303,12 +324,20 @@ export const TranslationsEditForm = ({
   availableLocales,
   translatableFields,
   modalFields = [],
+  fetchNextPage,
+  hasNextPage,
+  isFetchingNextPage,
+  referenceCount,
 }: TranslationsEditFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess, setCloseOnEscape } = useRouteModal()
   const direction = useDocumentDirection()
 
   const entities = useMemo(() => references, [references])
+  const totalCount = useMemo(
+    () => referenceCount * (translatableFields.length + 1),
+    [referenceCount, translatableFields]
+  )
 
   const initialState = useRef(
     initTranslationsFormState(
@@ -325,8 +354,8 @@ export const TranslationsEditForm = ({
   })
 
   const rows = useMemo(
-    () => buildTranslationRows(entities, availableLocales, translations),
-    [entities, availableLocales, translations]
+    () => buildTranslationRows(entities, translatableFields),
+    [entities, translatableFields]
   )
 
   const { mutateAsync, isPending } = useBatchTranslations(entityType)
@@ -349,23 +378,53 @@ export const TranslationsEditForm = ({
       return
     }
 
-    await mutateAsync(payload, {
-      onSuccess: () => {
-        toast.success(
-          t("translations.edit.successToast", {
-            defaultValue: "Translations updated successfully",
-          })
-        )
-        handleSuccess()
-      },
-      onError: (error) => {
-        toast.error(error.message)
-      },
-    })
+    const BATCH_SIZE = 150
+    const totalItems =
+      payload.create.length + payload.update.length + payload.delete.length
+    const batchCount = Math.ceil(totalItems / BATCH_SIZE)
+
+    for (let i = 0; i < batchCount; i++) {
+      let currentBatchAvailable = BATCH_SIZE
+      const currentBatch: HttpTypes.AdminBatchTranslations = {
+        create: [],
+        update: [],
+        delete: [],
+      }
+      if (payload.create.length > 0) {
+        currentBatch.create = payload.create.splice(0, currentBatchAvailable)
+        currentBatchAvailable -= currentBatch.create.length
+      }
+      if (payload.update.length > 0) {
+        currentBatch.update = payload.update.splice(0, currentBatchAvailable)
+        currentBatchAvailable -= currentBatch.update.length
+      }
+      if (payload.delete.length > 0) {
+        currentBatch.delete = payload.delete.splice(0, currentBatchAvailable)
+        currentBatchAvailable -= currentBatch.delete.length
+      }
+
+      await mutateAsync(currentBatch, {
+        onSuccess: () => {
+          if (i === batchCount - 1) {
+            toast.success(
+              t("translations.edit.successToast", {
+                defaultValue: "Translations updated successfully",
+              })
+            )
+            handleSuccess()
+          }
+        },
+        onError: (error) => {
+          toast.error(error.message)
+        },
+      })
+    }
   })
 
   const columns = useTranslationsGridColumns({
+    entities,
     translatableFields,
+    availableLocales,
     modalFields,
   })
 
@@ -381,7 +440,10 @@ export const TranslationsEditForm = ({
             <div className="-my-2 w-full border-l">
               <ProgressTabs.List className="justify-start-start flex w-full items-center">
                 <ProgressTabs.Trigger value={entityType}>
-                  {REFERENCE_LABEL_MAP[entityType]}
+                  {entityType
+                    .split("_")
+                    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                    .join(" ")}
                 </ProgressTabs.Trigger>
               </ProgressTabs.List>
             </div>
@@ -401,6 +463,10 @@ export const TranslationsEditForm = ({
                 }}
                 state={form}
                 onEditingChange={(editing) => setCloseOnEscape(!editing)}
+                totalRowCount={totalCount}
+                onFetchMore={fetchNextPage}
+                isFetchingMore={isFetchingNextPage}
+                hasNextPage={hasNextPage}
               />
             </ProgressTabs.Content>
           </RouteFocusModal.Body>

package/src/routes/translations/translations-edit/translations-edit.tsx

@@ -1,9 +1,14 @@
 import { useNavigate, useSearchParams } from "react-router-dom"
-import { useReferenceTranslations, useStore } from "../../../hooks/api"
+import {
+  useReferenceTranslations,
+  useStore,
+  useTranslationSettings,
+} from "../../../hooks/api"
 import { TranslationsEditForm } from "./components/translations-edit-form"
 import { useEffect } from "react"
 import { RouteFocusModal } from "../../../components/modals"
 import { useFeatureFlag } from "../../../providers/feature-flag-provider"
+import { keepPreviousData } from "@tanstack/react-query"
 
 export const TranslationsEdit = () => {
   const isTranslationsEnabled = useFeatureFlag("translation")
@@ -19,17 +24,32 @@ export const TranslationsEdit = () => {
     }
   }, [reference, navigate, isTranslationsEnabled])
 
+  const {
+    translatable_fields,
+    isPending: isTranslationSettingsPending,
+    isError: isTranslationSettingsError,
+    error: translationSettingsError,
+  } = useTranslationSettings({ entity_type: reference! })
+
   const {
     translations,
     references,
-    translatableFields,
+    fetchNextPage,
+    count,
+    isFetchingNextPage,
+    hasNextPage,
     isPending,
     isError,
     error,
-  } = useReferenceTranslations(reference!, referenceIdParam, {
-    enabled: !!reference,
-  })
-
+  } = useReferenceTranslations(
+    reference!,
+    translatable_fields?.[reference!] ?? [],
+    referenceIdParam,
+    {
+      enabled: !!translatable_fields && !!reference,
+      placeholderData: keepPreviousData,
+    }
+  )
   const {
     store,
     isPending: isStorePending,
@@ -40,13 +60,14 @@ export const TranslationsEdit = () => {
   const ready =
     !isPending &&
     !!translations &&
-    !!translatableFields &&
+    !!translatable_fields &&
+    !isTranslationSettingsPending &&
     !!references &&
     !isStorePending &&
     !!store
 
-  if (isError || isStoreError) {
-    throw error || storeError
+  if (isError || isStoreError || isTranslationSettingsError) {
+    throw error || storeError || translationSettingsError
   }
 
   return (
@@ -57,9 +78,12 @@ export const TranslationsEdit = () => {
           references={references}
           entityType={reference!}
           availableLocales={store?.supported_locales ?? []}
-          // TODO: change this to get it from the entity translation config when we have it
-          translatableFields={translatableFields}
-          modalFields={translatableFields}
+          translatableFields={translatable_fields[reference!]}
+          modalFields={translatable_fields[reference!]}
+          fetchNextPage={fetchNextPage}
+          hasNextPage={hasNextPage}
+          isFetchingNextPage={isFetchingNextPage}
+          referenceCount={count}
         />
       )}
     </RouteFocusModal>

package/src/routes/translations/translations-edit/utils/index.ts

@@ -1 +0,0 @@
-export * from "./reference-label-map"

package/src/routes/translations/translations-edit/utils/reference-label-map.ts

@@ -1,10 +0,0 @@
-export const REFERENCE_LABEL_MAP: Record<string, string> = {
-  product: "Products",
-  product_variant: "Product Variants",
-  product_category: "Product Categories",
-  product_collection: "Product Collections",
-  product_type: "Product Types",
-  product_tag: "Product Tags",
-  product_option: "Product Options",
-  product_option_value: "Product Option Values",
-}