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

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

@@ -45,7 +45,8 @@ export const TranslationList = () => {
       entity_types: Object.keys(translatable_fields ?? {}),
     },
     {
-      enabled: !!translatable_fields && !!store,
+      enabled:
+        !!translatable_fields && !!store && store.supported_locales?.length > 0,
     }
   )
 
@@ -56,7 +57,7 @@ export const TranslationList = () => {
   const hasLocales = (store?.supported_locales ?? []).length > 0
 
   const translatableEntities: TranslatableEntity[] = useMemo(() => {
-    if (!translatable_fields || !statistics) {
+    if (!translatable_fields) {
       return []
     }
 
@@ -66,7 +67,10 @@ export const TranslationList = () => {
           !["product_option", "product_option_value"].includes(entity)
       )
       .map(([entity, fields]) => {
-        const entityStatistics = statistics[entity]
+        const entityStatistics = statistics?.[entity] ?? {
+          translated: 0,
+          expected: 0,
+        }
 
         return {
           label: entity
@@ -85,9 +89,8 @@ export const TranslationList = () => {
     !!store &&
     !isPending &&
     !isTranslationSettingsPending &&
-    !isTranslationStatisticsPending &&
     !!translatable_fields &&
-    !!statistics
+    ((!!statistics && !isTranslationStatisticsPending) || !hasLocales)
 
   if (!isReady) {
     return <TwoColumnPageSkeleton sidebarSections={2} />
@@ -122,9 +125,7 @@ export const TranslationList = () => {
             ) ?? []
           }
         ></ActiveLocalesSection>
-        {statistics && (
-          <TranslationsCompletionSection statistics={statistics} />
-        )}
+        <TranslationsCompletionSection statistics={statistics ?? {}} />
       </TwoColumnPage.Sidebar>
     </TwoColumnPage>
   )

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

@@ -1,8 +1,8 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { AdminStoreLocale, HttpTypes } from "@medusajs/types"
-import { Button, ProgressTabs, toast } from "@medusajs/ui"
+import { Button, Prompt, Select, toast } from "@medusajs/ui"
 import { ColumnDef } from "@tanstack/react-table"
-import { useMemo, useRef } from "react"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { z } from "zod"
@@ -17,7 +17,6 @@ import {
 } from "../../../../../components/modals"
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useBatchTranslations } from "../../../../../hooks/api/translations"
-import { useDocumentDirection } from "../../../../../hooks/use-document-direction"
 
 /**
  * Schema for a single locale translation.
@@ -183,29 +182,119 @@ function transformToBatchPayload(
   return payload
 }
 
+function hasLocaleChanges(
+  currentState: TranslationsFormSchema,
+  initialState: TranslationsFormSchema,
+  localeCode: string
+): boolean {
+  for (const [entityId, entityData] of Object.entries(currentState.entities)) {
+    const currentLocale = entityData.locales[localeCode]
+    const initialLocale = initialState.entities[entityId]?.locales[localeCode]
+
+    if (!currentLocale || !initialLocale) {
+      continue
+    }
+
+    for (const [fieldName, fieldValue] of Object.entries(
+      currentLocale.fields
+    )) {
+      const initialValue = initialLocale.fields[fieldName] ?? ""
+      const currentValue = fieldValue ?? ""
+
+      if (currentValue !== initialValue) {
+        return true
+      }
+    }
+  }
+
+  return false
+}
+
+function transformSingleLocaleToBatchPayload(
+  currentState: TranslationsFormSchema,
+  initialState: TranslationsFormSchema,
+  entityType: string,
+  localeCode: string
+): Required<HttpTypes.AdminBatchTranslations> {
+  const payload: Required<HttpTypes.AdminBatchTranslations> = {
+    create: [],
+    update: [],
+    delete: [],
+  }
+
+  for (const [entityId, entityData] of Object.entries(currentState.entities)) {
+    const localeTranslations = entityData.locales[localeCode]
+    if (!localeTranslations) continue
+
+    const initial = initialState.entities[entityId]?.locales[localeCode]
+    const hasContent = Object.values(localeTranslations.fields).some(
+      (v) => v !== undefined && v.trim() !== ""
+    )
+    const hadContent =
+      initial &&
+      Object.values(initial.fields).some(
+        (v) => v !== undefined && v.trim() !== ""
+      )
+
+    if (!localeTranslations.id && hasContent) {
+      payload.create.push({
+        reference_id: entityId,
+        reference: entityType,
+        locale_code: localeTranslations.locale_code,
+        translations: localeTranslations.fields,
+      })
+    } else if (localeTranslations.id && hasContent) {
+      const hasChanged =
+        !initial ||
+        JSON.stringify(localeTranslations.fields) !==
+          JSON.stringify(initial.fields)
+
+      if (hasChanged) {
+        payload.update.push({
+          id: localeTranslations.id,
+          translations: localeTranslations.fields,
+        })
+      }
+    } else if (localeTranslations.id && !hasContent && hadContent) {
+      payload.delete.push(localeTranslations.id)
+    }
+  }
+
+  return payload
+}
+
 const columnHelper = createDataGridHelper<
   TranslationRow,
   TranslationsFormSchema
 >()
 
+const FIELD_COLUMN_WIDTH = 150
+
 function useTranslationsGridColumns({
   entities,
   translatableFields,
   availableLocales,
-  modalFields = [],
+  selectedLocale,
+  dynamicColumnWidth,
 }: {
   entities: { id: string; [key: string]: string }[]
   translatableFields: string[]
   availableLocales: AdminStoreLocale[]
-  modalFields?: string[]
+  selectedLocale: string
+  dynamicColumnWidth: number
 }) {
   const { t } = useTranslation()
 
   const columns: ColumnDef<TranslationRow>[] = useMemo(() => {
-    return [
+    const selectedLocaleData = availableLocales.find(
+      (l) => l.locale_code === selectedLocale
+    )
+
+    const baseColumns = [
       columnHelper.column({
         id: "field",
         name: "field",
+        size: FIELD_COLUMN_WIDTH,
         header: undefined,
         cell: (context) => {
           const row = context.row.original
@@ -233,7 +322,7 @@ function useTranslationsGridColumns({
       columnHelper.column({
         id: "original",
         name: "original",
-        size: 300,
+        size: dynamicColumnWidth,
         header: t("general.original"),
         disableHiding: true,
         cell: (context) => {
@@ -253,41 +342,29 @@ function useTranslationsGridColumns({
           }
 
           return (
-            <DataGrid.ReadonlyCell context={context}>
+            <DataGrid.ReadonlyCell context={context} isMultiLine>
               {entity[row.field_name]}
             </DataGrid.ReadonlyCell>
           )
         },
       }),
-      ...availableLocales.map((locale) => {
-        return columnHelper.column({
-          id: locale.locale_code,
-          name: locale.locale.name,
-          size: 300,
-          header: () => locale.locale.name,
+    ]
+
+    if (selectedLocaleData) {
+      baseColumns.push(
+        columnHelper.column({
+          id: selectedLocaleData.locale_code,
+          name: selectedLocaleData.locale.name,
+          size: dynamicColumnWidth,
+          header: () => selectedLocaleData.locale.name,
           cell: (context) => {
             const row = context.row.original
 
             if (isEntityRow(row)) {
-              return (
-                <DataGrid.ReadonlyCell
-                  context={context}
-                ></DataGrid.ReadonlyCell>
-              )
+              return <DataGrid.ReadonlyCell context={context} isMultiLine />
             }
 
-            const useModal = modalFields.includes(row.field_name)
-
-            if (useModal) {
-              return (
-                <DataGrid.ExpandableTextCell
-                  context={context}
-                  fieldLabel={row.field_name}
-                />
-              )
-            }
-
-            return <DataGrid.TextCell context={context} />
+            return <DataGrid.TextCell context={context} isMultiLine />
           },
           field: (context) => {
             const row = context.row.original
@@ -296,13 +373,22 @@ function useTranslationsGridColumns({
               return null
             }
 
-            return `entities.${row.reference_id}.locales.${locale.locale_code}.fields.${row.field_name}`
+            return `entities.${row.reference_id}.locales.${selectedLocaleData.locale_code}.fields.${row.field_name}`
           },
           type: "text",
         })
-      }),
-    ]
-  }, [t, translatableFields, availableLocales, modalFields])
+      )
+    }
+
+    return baseColumns
+  }, [
+    t,
+    translatableFields,
+    availableLocales,
+    selectedLocale,
+    entities,
+    dynamicColumnWidth,
+  ])
 
   return columns
 }
@@ -313,7 +399,6 @@ type TranslationsEditFormProps = {
   entityType: string
   availableLocales: AdminStoreLocale[]
   translatableFields: string[]
-  modalFields?: string[]
   fetchNextPage: () => void
   hasNextPage: boolean
   isFetchingNextPage: boolean
@@ -326,7 +411,6 @@ export const TranslationsEditForm = ({
   entityType,
   availableLocales,
   translatableFields,
-  modalFields = [],
   fetchNextPage,
   hasNextPage,
   isFetchingNextPage,
@@ -334,7 +418,36 @@ export const TranslationsEditForm = ({
 }: TranslationsEditFormProps) => {
   const { t } = useTranslation()
   const { handleSuccess, setCloseOnEscape } = useRouteModal()
-  const direction = useDocumentDirection()
+
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [dynamicColumnWidth, setDynamicColumnWidth] = useState(400)
+
+  useEffect(() => {
+    const calculateColumnWidth = () => {
+      if (containerRef.current) {
+        const containerWidth = containerRef.current.offsetWidth
+        const availableWidth = containerWidth - FIELD_COLUMN_WIDTH - 12
+        const columnWidth = Math.max(300, Math.floor(availableWidth / 2))
+        setDynamicColumnWidth(columnWidth)
+      }
+    }
+
+    calculateColumnWidth()
+
+    const resizeObserver = new ResizeObserver(calculateColumnWidth)
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current)
+    }
+
+    return () => resizeObserver.disconnect()
+  }, [])
+
+  const [selectedLocale, setSelectedLocale] = useState<string>(
+    availableLocales[0]?.locale_code ?? ""
+  )
+
+  const [showUnsavedPrompt, setShowUnsavedPrompt] = useState(false)
+  const [pendingLocale, setPendingLocale] = useState<string | null>(null)
 
   const entities = useMemo(() => references, [references])
   const totalCount = useMemo(
@@ -363,6 +476,131 @@ export const TranslationsEditForm = ({
 
   const { mutateAsync, isPending } = useBatchTranslations(entityType)
 
+  const handleLocaleChange = useCallback(
+    (newLocale: string) => {
+      if (newLocale === selectedLocale) {
+        return
+      }
+
+      const currentValues = form.getValues()
+      const hasChanges = hasLocaleChanges(
+        currentValues,
+        initialState.current,
+        selectedLocale
+      )
+
+      if (hasChanges) {
+        setPendingLocale(newLocale)
+        setShowUnsavedPrompt(true)
+      } else {
+        setSelectedLocale(newLocale)
+      }
+    },
+    [selectedLocale, form]
+  )
+
+  const saveCurrentLocale = useCallback(async () => {
+    const currentValues = form.getValues()
+    const payload = transformSingleLocaleToBatchPayload(
+      currentValues,
+      initialState.current,
+      entityType,
+      selectedLocale
+    )
+
+    if (
+      payload.create.length === 0 &&
+      payload.update.length === 0 &&
+      payload.delete.length === 0
+    ) {
+      return true
+    }
+
+    try {
+      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)
+      }
+
+      const updatedInitialState = { ...initialState.current }
+      for (const entityId of Object.keys(currentValues.entities)) {
+        if (updatedInitialState.entities[entityId]?.locales[selectedLocale]) {
+          updatedInitialState.entities[entityId].locales[selectedLocale] = {
+            ...currentValues.entities[entityId].locales[selectedLocale],
+          }
+        }
+      }
+      initialState.current = updatedInitialState
+      form.reset(currentValues)
+
+      return true
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to save translations"
+      )
+      return false
+    }
+  }, [form, entityType, selectedLocale, mutateAsync])
+
+  const handleSaveAndSwitch = useCallback(async () => {
+    const success = await saveCurrentLocale()
+    if (success && pendingLocale) {
+      toast.success(
+        t("translations.edit.localeChangesSaved", {
+          defaultValue: "Changes saved successfully",
+        })
+      )
+      setSelectedLocale(pendingLocale)
+    }
+    setShowUnsavedPrompt(false)
+    setPendingLocale(null)
+  }, [saveCurrentLocale, pendingLocale, t])
+
+  const handleCancelSwitch = useCallback(() => {
+    setShowUnsavedPrompt(false)
+    setPendingLocale(null)
+  }, [])
+
+  const handleSave = useCallback(
+    async (closeOnSuccess: boolean = false) => {
+      const success = await saveCurrentLocale()
+      if (success) {
+        toast.success(
+          t("translations.edit.successToast", {
+            defaultValue: "Translations updated successfully",
+          })
+        )
+        if (closeOnSuccess) {
+          handleSuccess()
+        }
+      }
+    },
+    [saveCurrentLocale, t, handleSuccess]
+  )
+
   const handleSubmit = form.handleSubmit(async (values) => {
     const payload = transformToBatchPayload(
       values,
@@ -428,65 +666,125 @@ export const TranslationsEditForm = ({
     entities,
     translatableFields,
     availableLocales,
-    modalFields,
+    selectedLocale,
+    dynamicColumnWidth,
   })
 
+  const selectedLocaleDisplay = availableLocales.find(
+    (l) => l.locale_code === selectedLocale
+  )?.locale.name
+
   return (
     <RouteFocusModal.Form form={form}>
-      <KeyboundForm onSubmit={handleSubmit} className="flex h-full flex-col">
-        <ProgressTabs
-          dir={direction}
-          defaultValue={entityType}
-          className="flex h-full flex-col overflow-hidden"
-        >
-          <RouteFocusModal.Header>
-            <div className="-my-2 w-full border-l">
-              <ProgressTabs.List className="justify-start-start flex w-full items-center">
-                <ProgressTabs.Trigger value={entityType}>
-                  {entityType
-                    .split("_")
-                    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-                    .join(" ")}
-                </ProgressTabs.Trigger>
-              </ProgressTabs.List>
-            </div>
-          </RouteFocusModal.Header>
-          <RouteFocusModal.Body className="size-full overflow-hidden">
-            <ProgressTabs.Content
-              value={entityType}
-              className="size-full overflow-y-auto"
+      <KeyboundForm
+        onSubmit={handleSubmit}
+        className="flex h-full flex-col overflow-hidden"
+      >
+        <RouteFocusModal.Header>
+          <div className="-my-2 flex w-full items-center justify-between border-l px-4">
+            <Select
+              value={selectedLocale}
+              onValueChange={handleLocaleChange}
+              size="small"
             >
-              <DataGrid
-                columns={columns}
-                data={rows}
-                getSubRows={(row) => {
-                  if (isEntityRow(row)) {
-                    return row.subRows
-                  }
-                }}
-                state={form}
-                onEditingChange={(editing) => setCloseOnEscape(!editing)}
-                totalRowCount={totalCount}
-                onFetchMore={fetchNextPage}
-                isFetchingMore={isFetchingNextPage}
-                hasNextPage={hasNextPage}
-              />
-            </ProgressTabs.Content>
-          </RouteFocusModal.Body>
-          <RouteFocusModal.Footer>
-            <div className="flex items-center justify-end gap-x-2">
-              <RouteFocusModal.Close asChild>
-                <Button size="small" variant="secondary">
-                  {t("actions.cancel")}
-                </Button>
-              </RouteFocusModal.Close>
-              <Button size="small" type="submit" isLoading={isPending}>
-                {t("actions.save")}
+              <Select.Trigger className="bg-ui-bg-base w-[200px]">
+                <Select.Value>{selectedLocaleDisplay}</Select.Value>
+              </Select.Trigger>
+              <Select.Content>
+                {availableLocales.map((locale) => (
+                  <Select.Item
+                    key={locale.locale_code}
+                    value={locale.locale_code}
+                  >
+                    {locale.locale.name}
+                  </Select.Item>
+                ))}
+              </Select.Content>
+            </Select>
+          </div>
+        </RouteFocusModal.Header>
+        <RouteFocusModal.Body className="size-full overflow-hidden">
+          <div ref={containerRef} className="size-full">
+            <DataGrid
+              columns={columns}
+              data={rows}
+              getSubRows={(row) => {
+                if (isEntityRow(row)) {
+                  return row.subRows
+                }
+              }}
+              state={form}
+              onEditingChange={(editing) => setCloseOnEscape(!editing)}
+              totalRowCount={totalCount}
+              onFetchMore={fetchNextPage}
+              isFetchingMore={isFetchingNextPage}
+              hasNextPage={hasNextPage}
+            />
+          </div>
+        </RouteFocusModal.Body>
+        <RouteFocusModal.Footer>
+          <div className="flex items-center justify-end gap-x-2">
+            <RouteFocusModal.Close asChild>
+              <Button size="small" variant="secondary">
+                {t("actions.cancel")}
               </Button>
-            </div>
-          </RouteFocusModal.Footer>
-        </ProgressTabs>
+            </RouteFocusModal.Close>
+            <Button
+              size="small"
+              type="button"
+              variant="secondary"
+              onClick={() => handleSave(false)}
+              isLoading={isPending}
+            >
+              {t("actions.saveChanges", { defaultValue: "Save changes" })}
+            </Button>
+            <Button
+              size="small"
+              type="button"
+              onClick={() => handleSave(true)}
+              isLoading={isPending}
+            >
+              {t("actions.saveAndClose", { defaultValue: "Save and close" })}
+            </Button>
+          </div>
+        </RouteFocusModal.Footer>
       </KeyboundForm>
+
+      <Prompt open={showUnsavedPrompt} variant="confirmation">
+        <Prompt.Content>
+          <Prompt.Header>
+            <Prompt.Title>
+              {t("translations.unsavedChanges.title", {
+                defaultValue: "Unsaved changes",
+              })}
+            </Prompt.Title>
+            <Prompt.Description>
+              {t("translations.unsavedChanges.description", {
+                defaultValue:
+                  "You have unsaved changes for this locale. Save them before switching?",
+              })}
+            </Prompt.Description>
+          </Prompt.Header>
+          <Prompt.Footer>
+            <Button
+              size="small"
+              variant="secondary"
+              onClick={handleCancelSwitch}
+              type="button"
+            >
+              {t("actions.close")}
+            </Button>
+            <Button
+              size="small"
+              onClick={handleSaveAndSwitch}
+              type="button"
+              isLoading={isPending}
+            >
+              {t("actions.saveChanges", { defaultValue: "Save changes" })}
+            </Button>
+          </Prompt.Footer>
+        </Prompt.Content>
+      </Prompt>
     </RouteFocusModal.Form>
   )
 }

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

@@ -79,7 +79,6 @@ export const TranslationsEdit = () => {
           entityType={reference!}
           availableLocales={store?.supported_locales ?? []}
           translatableFields={translatable_fields[reference!]}
-          modalFields={translatable_fields[reference!]}
           fetchNextPage={fetchNextPage}
           hasNextPage={hasNextPage}
           isFetchingNextPage={isFetchingNextPage}