@medusajs/dashboard 3.0.0-snapshot-20251215083939 → 3.0.0-snapshot-20251216103925

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

@@ -1,13 +1,7 @@
 import { Button, Container, Text } from "@medusajs/ui"
 import { Link } from "react-router-dom"
-
-type TranslatableEntity = {
-  icon: React.ReactNode
-  label: string
-  reference: string
-  translatedCount?: number
-  totalCount?: number
-}
+import { TranslatableEntity } from "../../translation-list"
+import { useTranslation } from "react-i18next"
 
 type TranslationListSectionProps = {
   entities: TranslatableEntity[]
@@ -18,6 +12,8 @@ export const TranslationListSection = ({
   entities,
   hasLocales = false,
 }: TranslationListSectionProps) => {
+  const { t } = useTranslation()
+
   return (
     <Container className="divide-y p-0">
       {entities.map((entity) => (
@@ -29,8 +25,10 @@ export const TranslationListSection = ({
             {entity.label}
           </Text>
           <Text size="small" className="text-ui-fg-subtle">
-            {(entity.translatedCount ?? 0).toLocaleString()} of{" "}
-            {(entity.totalCount ?? 0).toLocaleString()} fields translated
+            {t("translations.list.metrics", {
+              translated: (entity.translatedCount ?? 0).toLocaleString(),
+              total: (entity.totalCount ?? 0).toLocaleString(),
+            })}
           </Text>
           <Link
             to={`/settings/translations/edit?reference=${entity.reference}`}

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)
@@ -19,24 +25,24 @@ export const TranslationsCompletionSection = ({
     <Container className="flex flex-col gap-y-3 px-6 py-4">
       <div className="flex items-center justify-between">
         <Heading>{t("translations.completion.heading")}</Heading>
-        <Text size="small" className="text-ui-fg-subtle">
+        <Text size="small" weight="plus" className="text-ui-fg-subtle">
           {translatedCount.toLocaleString()} {t("general.of")}{" "}
           {totalCount.toLocaleString()}
         </Text>
       </div>
 
-      <div className="flex h-2 w-full overflow-hidden rounded-full">
+      <div className="flex h-3 w-full overflow-hidden">
         {percentage > 0 ? (
           <>
             <div
-              className="mr-0.5 h-full rounded-l-full transition-all"
+              className="mr-0.5 h-full rounded-sm transition-all"
               style={{
                 width: `${percentage}%`,
                 backgroundColor: "var(--bg-interactive)",
               }}
             />
             <div
-              className="h-full flex-1 rounded-r-full"
+              className="h-full flex-1 rounded-sm"
               style={{
                 backgroundColor: "var(--bg-interactive)",
                 opacity: 0.3,
@@ -55,10 +61,10 @@ export const TranslationsCompletionSection = ({
       </div>
 
       <div className="flex items-center justify-between">
-        <Text size="small" className="text-ui-fg-subtle">
+        <Text size="small" weight="plus" className="text-ui-fg-subtle">
           {percentage.toFixed(1)}%
         </Text>
-        <Text size="small" className="text-ui-fg-subtle">
+        <Text size="small" weight="plus" className="text-ui-fg-subtle">
           {remaining.toLocaleString()} {t("general.remaining").toLowerCase()}
         </Text>
       </div>

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

@@ -2,96 +2,97 @@ 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)
+      .filter(
+        ([entity]) =>
+          !["product_option", "product_option_value"].includes(entity)
+      )
+      .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 +110,7 @@ export const TranslationList = () => {
           </Text>
         </Container>
         <TranslationListSection
-          entities={TRANSLATABLE_ENTITIES}
+          entities={translatableEntities}
           hasLocales={hasLocales}
         />
       </TwoColumnPage.Main>
@@ -121,7 +122,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,7 +18,6 @@ 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.
@@ -234,7 +233,9 @@ function useTranslationsGridColumns({
       columnHelper.column({
         id: "original",
         name: "original",
+        size: 300,
         header: t("general.original"),
+        disableHiding: true,
         cell: (context) => {
           const row = context.row.original
 
@@ -262,6 +263,7 @@ function useTranslationsGridColumns({
         return columnHelper.column({
           id: locale.locale_code,
           name: locale.locale.name,
+          size: 300,
           header: () => locale.locale.name,
           cell: (context) => {
             const row = context.row.original
@@ -441,7 +443,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>

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

@@ -1,5 +1,9 @@
 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"
@@ -20,10 +24,16 @@ 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,
@@ -31,10 +41,15 @@ export const TranslationsEdit = () => {
     isPending,
     isError,
     error,
-  } = useReferenceTranslations(reference!, referenceIdParam, {
-    placeholderData: keepPreviousData,
-  })
-
+  } = useReferenceTranslations(
+    reference!,
+    translatable_fields?.[reference!] ?? [],
+    referenceIdParam,
+    {
+      enabled: !!translatable_fields && !!reference,
+      placeholderData: keepPreviousData,
+    }
+  )
   const {
     store,
     isPending: isStorePending,
@@ -45,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 (
@@ -62,9 +78,8 @@ 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}

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",
-}