@medusajs/dashboard 2.12.3-preview-20251217123836 → 2.12.3-snapshot-20251216185234

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

@@ -18,17 +18,38 @@ import {
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useBatchTranslations } from "../../../../../hooks/api/translations"
 
-const EntityTranslationsSchema = z.object({
+/**
+ * Schema for a single locale translation.
+ */
+const LocaleTranslationSchema = z.object({
   id: z.string().nullish(),
+  locale_code: z.string(),
   fields: z.record(z.string().optional()),
 })
+export type LocaleTranslationSchema = z.infer<typeof LocaleTranslationSchema>
+
+/**
+ * Schema for an entity's translations (parent row in DataGrid).
+ * Contains all locale translations for that entity.
+ */
+const EntityTranslationsSchema = z.object({
+  locales: z.record(LocaleTranslationSchema),
+})
 export type EntityTranslationsSchema = z.infer<typeof EntityTranslationsSchema>
 
+/**
+ * Form schema
+ * Maps each reference_id to their corresponding translations for each locale
+ */
 export const TranslationsFormSchema = z.object({
   entities: z.record(EntityTranslationsSchema),
 })
 export type TranslationsFormSchema = z.infer<typeof TranslationsFormSchema>
 
+/**
+ * Row types for the DataGrid.
+ * Parent rows are entities, subrows are translatable fields.
+ */
 export type TranslationRow = EntityRow | FieldRow
 
 export type EntityRow = {
@@ -51,94 +72,150 @@ export function isFieldRow(row: TranslationRow): row is FieldRow {
   return row._type === "field"
 }
 
-type LocaleSnapshot = {
-  localeCode: string
-  entities: Record<string, EntityTranslationsSchema>
-}
-
-function buildLocaleSnapshot(
+function initTranslationsFormState(
   translations: HttpTypes.AdminTranslation[],
   references: { id: string; [key: string]: string }[],
-  localeCode: string,
+  availableLocales: AdminStoreLocale[],
   translatableFields: string[]
-): LocaleSnapshot {
-  const referenceTranslations = new Map<string, HttpTypes.AdminTranslation>()
+): TranslationsFormSchema {
+  const existingMap = new Map<string, HttpTypes.AdminTranslation>()
   for (const t of translations) {
-    if (t.locale_code === localeCode) {
-      referenceTranslations.set(t.reference_id, t)
-    }
+    existingMap.set(`${t.reference_id}:${t.locale_code}`, t)
   }
 
-  const entities: Record<string, EntityTranslationsSchema> = {}
-  for (const ref of references) {
-    const existing = referenceTranslations.get(ref.id)
-    const fields: Record<string, string> = {}
+  const entitiesTranslationState: Record<string, EntityTranslationsSchema> = {}
 
-    for (const fieldName of translatableFields) {
-      fields[fieldName] = (existing?.translations?.[fieldName] as string) ?? ""
-    }
+  for (const reference of references) {
+    const locales: Record<string, LocaleTranslationSchema> = {}
+
+    for (const locale of availableLocales) {
+      const key = `${reference.id}:${locale.locale_code}`
+      const existing = existingMap.get(key)
+
+      const fields: Record<string, string> = {}
+      for (const fieldName of translatableFields) {
+        const fieldValue = (existing?.translations?.[fieldName] as string) ?? ""
+        fields[fieldName] = fieldValue
+      }
 
-    entities[ref.id] = {
-      id: existing?.id ?? null,
-      fields,
+      locales[locale.locale_code] = {
+        id: existing?.id ?? null,
+        locale_code: locale.locale_code,
+        fields,
+      }
     }
+
+    entitiesTranslationState[reference.id] = { locales }
   }
 
-  return { localeCode, entities }
+  return {
+    entities: entitiesTranslationState,
+  }
 }
 
-function extendSnapshot(
-  snapshot: LocaleSnapshot,
-  translations: HttpTypes.AdminTranslation[],
-  newReferences: { id: string; [key: string]: string }[],
+function buildTranslationRows(
+  references: { id: string; [key: string]: string }[],
   translatableFields: string[]
-): LocaleSnapshot {
-  const referenceTranslations = new Map<string, HttpTypes.AdminTranslation>()
-  for (const t of translations) {
-    if (t.locale_code === snapshot.localeCode) {
-      referenceTranslations.set(t.reference_id, t)
-    }
-  }
-
-  const extendedEntities = { ...snapshot.entities }
+): TranslationRow[] {
+  return references.map((reference) => ({
+    _type: "entity" as const,
+    reference_id: reference.id,
+    subRows: translatableFields.map((fieldName) => ({
+      _type: "field" as const,
+      reference_id: reference.id,
+      field_name: fieldName,
+    })),
+  }))
+}
 
-  for (const ref of newReferences) {
-    if (!extendedEntities[ref.id]) {
-      const existing = referenceTranslations.get(ref.id)
-      const fields: Record<string, string> = {}
+function transformToBatchPayload(
+  currentState: TranslationsFormSchema,
+  initialState: TranslationsFormSchema,
+  entityType: string
+): Required<HttpTypes.AdminBatchTranslations> {
+  const payload: Required<HttpTypes.AdminBatchTranslations> = {
+    create: [],
+    update: [],
+    delete: [],
+  }
 
-      for (const fieldName of translatableFields) {
-        fields[fieldName] =
-          (existing?.translations?.[fieldName] as string) ?? ""
-      }
+  for (const [entityId, entityData] of Object.entries(currentState.entities)) {
+    for (const [localeCode, localeTranslations] of Object.entries(
+      entityData.locales
+    )) {
+      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() !== ""
+        )
 
-      extendedEntities[ref.id] = {
-        id: existing?.id ?? null,
-        fields,
+      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) {
+        // UPDATE: Has ID and has content - check if changed
+        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 { ...snapshot, entities: extendedEntities }
+  return payload
 }
 
-function snapshotToFormValues(
-  snapshot: LocaleSnapshot
-): TranslationsFormSchema {
-  return { entities: snapshot.entities }
-}
+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 ?? ""
 
-type ChangeDetectionResult = {
-  hasChanges: boolean
-  payload: Required<HttpTypes.AdminBatchTranslations>
+      if (currentValue !== initialValue) {
+        return true
+      }
+    }
+  }
+
+  return false
 }
 
-function computeChanges(
+function transformSingleLocaleToBatchPayload(
   currentState: TranslationsFormSchema,
-  snapshot: LocaleSnapshot,
+  initialState: TranslationsFormSchema,
   entityType: string,
   localeCode: string
-): ChangeDetectionResult {
+): Required<HttpTypes.AdminBatchTranslations> {
   const payload: Required<HttpTypes.AdminBatchTranslations> = {
     create: [],
     update: [],
@@ -146,43 +223,44 @@ function computeChanges(
   }
 
   for (const [entityId, entityData] of Object.entries(currentState.entities)) {
-    const baseline = snapshot.entities[entityId]
-    if (!baseline) {
-      continue
-    }
+    const localeTranslations = entityData.locales[localeCode]
+    if (!localeTranslations) continue
 
-    const hasContent = Object.values(entityData.fields).some(
-      (v) => v !== undefined && v.trim() !== ""
-    )
-    const hadContent = Object.values(baseline.fields).some(
+    const initial = initialState.entities[entityId]?.locales[localeCode]
+    const hasContent = Object.values(localeTranslations.fields).some(
       (v) => v !== undefined && v.trim() !== ""
     )
-    const hasChanged =
-      JSON.stringify(entityData.fields) !== JSON.stringify(baseline.fields)
+    const hadContent =
+      initial &&
+      Object.values(initial.fields).some(
+        (v) => v !== undefined && v.trim() !== ""
+      )
 
-    if (!entityData.id && hasContent) {
+    if (!localeTranslations.id && hasContent) {
       payload.create.push({
         reference_id: entityId,
         reference: entityType,
-        locale_code: localeCode,
-        translations: entityData.fields,
+        locale_code: localeTranslations.locale_code,
+        translations: localeTranslations.fields,
       })
-    } else if (entityData.id && hasContent && hasChanged) {
-      payload.update.push({
-        id: entityData.id,
-        translations: entityData.fields,
-      })
-    } else if (entityData.id && !hasContent && hadContent) {
-      payload.delete.push(entityData.id)
+    } 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)
     }
   }
 
-  const hasChanges =
-    payload.create.length > 0 ||
-    payload.update.length > 0 ||
-    payload.delete.length > 0
-
-  return { hasChanges, payload }
+  return payload
 }
 
 const columnHelper = createDataGridHelper<
@@ -190,42 +268,29 @@ const columnHelper = createDataGridHelper<
   TranslationsFormSchema
 >()
 
-const FIELD_COLUMN_WIDTH = 350
-
-function buildTranslationRows(
-  references: { id: string; [key: string]: string }[],
-  translatableFields: string[]
-): TranslationRow[] {
-  return references.map((reference) => ({
-    _type: "entity" as const,
-    reference_id: reference.id,
-    subRows: translatableFields.map((fieldName) => ({
-      _type: "field" as const,
-      reference_id: reference.id,
-      field_name: fieldName,
-    })),
-  }))
-}
+const FIELD_COLUMN_WIDTH = 150
 
 function useTranslationsGridColumns({
   entities,
+  translatableFields,
   availableLocales,
   selectedLocale,
   dynamicColumnWidth,
 }: {
   entities: { id: string; [key: string]: string }[]
+  translatableFields: string[]
   availableLocales: AdminStoreLocale[]
   selectedLocale: string
   dynamicColumnWidth: number
 }) {
   const { t } = useTranslation()
 
-  return useMemo(() => {
+  const columns: ColumnDef<TranslationRow>[] = useMemo(() => {
     const selectedLocaleData = availableLocales.find(
       (l) => l.locale_code === selectedLocale
     )
 
-    const columns: ColumnDef<TranslationRow>[] = [
+    const baseColumns = [
       columnHelper.column({
         id: "field",
         name: "field",
@@ -235,7 +300,9 @@ function useTranslationsGridColumns({
           const row = context.row.original
 
           if (isEntityRow(row)) {
-            return <DataGrid.ReadonlyCell context={context} />
+            return (
+              <DataGrid.ReadonlyCell context={context}></DataGrid.ReadonlyCell>
+            )
           }
 
           return (
@@ -270,10 +337,14 @@ function useTranslationsGridColumns({
           const row = context.row.original
 
           if (isEntityRow(row)) {
-            return <DataGrid.ReadonlyCell context={context} />
+            return (
+              <DataGrid.ReadonlyCell context={context}></DataGrid.ReadonlyCell>
+            )
           }
 
-          const entity = entities.find((e) => e.id === row.reference_id)
+          const entity = entities.find(
+            (entity) => entity.id === row.reference_id
+          )
           if (!entity) {
             return null
           }
@@ -290,7 +361,7 @@ function useTranslationsGridColumns({
     ]
 
     if (selectedLocaleData) {
-      columns.push(
+      baseColumns.push(
         columnHelper.column({
           id: selectedLocaleData.locale_code,
           name: selectedLocaleData.locale.name,
@@ -316,15 +387,24 @@ function useTranslationsGridColumns({
               return null
             }
 
-            return `entities.${row.reference_id}.fields.${row.field_name}`
+            return `entities.${row.reference_id}.locales.${selectedLocaleData.locale_code}.fields.${row.field_name}`
           },
           type: "multiline-text",
         })
       )
     }
 
-    return columns
-  }, [t, availableLocales, selectedLocale, entities, dynamicColumnWidth])
+    return baseColumns
+  }, [
+    t,
+    translatableFields,
+    availableLocales,
+    selectedLocale,
+    entities,
+    dynamicColumnWidth,
+  ])
+
+  return columns
 }
 
 type TranslationsEditFormProps = {
@@ -379,105 +459,74 @@ export const TranslationsEditForm = ({
   const [selectedLocale, setSelectedLocale] = useState<string>(
     availableLocales[0]?.locale_code ?? ""
   )
+
   const [showUnsavedPrompt, setShowUnsavedPrompt] = useState(false)
   const [pendingLocale, setPendingLocale] = useState<string | null>(null)
-  const [isSwitchingLocale, setIsSwitchingLocale] = useState(false)
 
-  const snapshotRef = useRef<LocaleSnapshot>(
-    buildLocaleSnapshot(
+  const entities = useMemo(() => references, [references])
+  const totalCount = useMemo(
+    () => referenceCount * (translatableFields.length + 1),
+    [referenceCount, translatableFields]
+  )
+
+  const initialState = useRef(
+    initTranslationsFormState(
       translations,
-      references,
-      selectedLocale,
+      entities,
+      availableLocales,
       translatableFields
     )
   )
 
-  const knownEntityIdsRef = useRef<Set<string>>(
-    new Set(references.map((r) => r.id))
-  )
-
-  const latestPropsRef = useRef({ translations, references })
-  useEffect(() => {
-    latestPropsRef.current = { translations, references }
-  }, [translations, references])
-
   const form = useForm<TranslationsFormSchema>({
     resolver: zodResolver(TranslationsFormSchema),
-    defaultValues: snapshotToFormValues(snapshotRef.current),
+    defaultValues: initialState.current,
   })
 
-  useEffect(() => {
-    const currentIds = new Set(references.map((r) => r.id))
-    const newReferences = references.filter(
-      (r) => !knownEntityIdsRef.current.has(r.id)
-    )
-
-    if (newReferences.length === 0) {
-      return
-    }
-
-    knownEntityIdsRef.current = currentIds
-    snapshotRef.current = extendSnapshot(
-      snapshotRef.current,
-      translations,
-      newReferences,
-      translatableFields
-    )
-
-    const currentValues = form.getValues()
-    const newFormValues: TranslationsFormSchema = {
-      entities: { ...currentValues.entities },
-    }
-
-    for (const ref of newReferences) {
-      if (!newFormValues.entities[ref.id]) {
-        newFormValues.entities[ref.id] = snapshotRef.current.entities[ref.id]
-      }
-    }
-
-    form.reset(newFormValues, {
-      keepDirty: true,
-      keepDirtyValues: true,
-    })
-  }, [references, translations, translatableFields, form])
-
   const rows = useMemo(
-    () => buildTranslationRows(references, translatableFields),
-    [references, translatableFields]
+    () => buildTranslationRows(entities, translatableFields),
+    [entities, translatableFields]
   )
 
-  const totalRowCount = useMemo(
-    () => referenceCount * (translatableFields.length + 1),
-    [referenceCount, translatableFields]
-  )
+  const { mutateAsync, isPending } = useBatchTranslations(entityType)
 
-  const selectedLocaleDisplay = useMemo(
-    () =>
-      availableLocales.find((l) => l.locale_code === selectedLocale)?.locale
-        .name,
-    [availableLocales, selectedLocale]
-  )
+  const handleLocaleChange = useCallback(
+    (newLocale: string) => {
+      if (newLocale === selectedLocale) {
+        return
+      }
 
-  const columns = useTranslationsGridColumns({
-    entities: references,
-    availableLocales,
-    selectedLocale,
-    dynamicColumnWidth,
-  })
+      const currentValues = form.getValues()
+      const hasChanges = hasLocaleChanges(
+        currentValues,
+        initialState.current,
+        selectedLocale
+      )
 
-  const { mutateAsync, isPending, invalidateQueries } =
-    useBatchTranslations(entityType)
+      if (hasChanges) {
+        setPendingLocale(newLocale)
+        setShowUnsavedPrompt(true)
+      } else {
+        setSelectedLocale(newLocale)
+      }
+    },
+    [selectedLocale, form]
+  )
 
   const saveCurrentLocale = useCallback(async () => {
     const currentValues = form.getValues()
-    const { hasChanges, payload } = computeChanges(
+    const payload = transformSingleLocaleToBatchPayload(
       currentValues,
-      snapshotRef.current,
+      initialState.current,
       entityType,
       selectedLocale
     )
 
-    if (!hasChanges) {
+    if (
+      payload.create.length === 0 &&
+      payload.update.length === 0 &&
+      payload.delete.length === 0
+    ) {
       return true
     }
 
@@ -489,13 +538,11 @@ export const TranslationsEditForm = ({
 
       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
@@ -506,36 +553,22 @@ export const TranslationsEditForm = ({
         }
         if (payload.delete.length > 0) {
           currentBatch.delete = payload.delete.splice(0, currentBatchAvailable)
+          currentBatchAvailable -= currentBatch.delete.length
         }
 
-        const response = await mutateAsync(currentBatch, {
-          onError: (error) => {
-            toast.error(error.message)
-          },
-        })
-
-        if (response.created) {
-          for (const created of response.created) {
-            form.setValue(`entities.${created.reference_id}.id`, created.id, {
-              shouldDirty: false,
-            })
-            if (snapshotRef.current.entities[created.reference_id]) {
-              snapshotRef.current.entities[created.reference_id].id = created.id
-            }
-          }
-        }
+        await mutateAsync(currentBatch)
       }
 
-      const savedValues = form.getValues()
-      for (const entityId of Object.keys(savedValues.entities)) {
-        if (snapshotRef.current.entities[entityId]) {
-          snapshotRef.current.entities[entityId] = {
-            ...savedValues.entities[entityId],
+      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],
           }
         }
       }
-
-      form.reset(savedValues)
+      initialState.current = updatedInitialState
+      form.reset(currentValues)
 
       return true
     } catch (error) {
@@ -546,70 +579,19 @@ export const TranslationsEditForm = ({
     }
   }, [form, entityType, selectedLocale, mutateAsync])
 
-  const switchToLocale = useCallback(
-    async (newLocale: string) => {
-      setIsSwitchingLocale(true)
-
-      try {
-        await invalidateQueries()
-
-        await new Promise((resolve) => requestAnimationFrame(resolve))
-
-        const { translations, references } = latestPropsRef.current
-
-        const newSnapshot = buildLocaleSnapshot(
-          translations,
-          references,
-          newLocale,
-          translatableFields
-        )
-
-        snapshotRef.current = newSnapshot
-        knownEntityIdsRef.current = new Set(references.map((r) => r.id))
-
-        form.reset(snapshotToFormValues(newSnapshot))
-
-        setSelectedLocale(newLocale)
-      } finally {
-        setIsSwitchingLocale(false)
-      }
-    },
-    [translatableFields, form, invalidateQueries]
-  )
-
-  const handleLocaleChange = useCallback(
-    (newLocale: string) => {
-      if (newLocale === selectedLocale) {
-        return
-      }
-
-      const currentValues = form.getValues()
-      const { hasChanges } = computeChanges(
-        currentValues,
-        snapshotRef.current,
-        entityType,
-        selectedLocale
-      )
-
-      if (hasChanges) {
-        setPendingLocale(newLocale)
-        setShowUnsavedPrompt(true)
-      } else {
-        switchToLocale(newLocale)
-      }
-    },
-    [selectedLocale, form, entityType, switchToLocale]
-  )
-
   const handleSaveAndSwitch = useCallback(async () => {
     const success = await saveCurrentLocale()
     if (success && pendingLocale) {
-      toast.success(t("translations.edit.successToast"))
-      await switchToLocale(pendingLocale)
+      toast.success(
+        t("translations.edit.localeChangesSaved", {
+          defaultValue: "Changes saved successfully",
+        })
+      )
+      setSelectedLocale(pendingLocale)
     }
     setShowUnsavedPrompt(false)
     setPendingLocale(null)
-  }, [saveCurrentLocale, pendingLocale, t, switchToLocale])
+  }, [saveCurrentLocale, pendingLocale, t])
 
   const handleCancelSwitch = useCallback(() => {
     setShowUnsavedPrompt(false)
@@ -629,19 +611,83 @@ export const TranslationsEditForm = ({
     [saveCurrentLocale, t, handleSuccess]
   )
 
-  const handleClose = useCallback(() => {
-    invalidateQueries()
-  }, [invalidateQueries])
+  const handleSubmit = form.handleSubmit(async (values) => {
+    const payload = transformToBatchPayload(
+      values,
+      initialState.current,
+      entityType
+    )
 
-  const isLoading = isPending || isSwitchingLocale
+    if (
+      payload.create.length === 0 &&
+      payload.update.length === 0 &&
+      payload.delete.length === 0
+    ) {
+      return
+    }
+
+    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,
+    selectedLocale,
+    dynamicColumnWidth,
+  })
+
+  const selectedLocaleDisplay = availableLocales.find(
+    (l) => l.locale_code === selectedLocale
+  )?.locale.name
 
   return (
-    <RouteFocusModal.Form form={form} onClose={handleClose}>
+    <RouteFocusModal.Form form={form}>
       <KeyboundForm
-        onSubmit={() => handleSave(true)}
+        onSubmit={handleSubmit}
         className="flex h-full flex-col overflow-hidden"
       >
-        <RouteFocusModal.Header />
+        <RouteFocusModal.Header></RouteFocusModal.Header>
         <RouteFocusModal.Body className="size-full overflow-hidden">
           <div ref={containerRef} className="size-full">
             <DataGrid
@@ -655,13 +701,12 @@ export const TranslationsEditForm = ({
               }}
               state={form}
               onEditingChange={(editing) => setCloseOnEscape(!editing)}
-              totalRowCount={totalRowCount}
+              totalRowCount={totalCount}
               onFetchMore={fetchNextPage}
               isFetchingMore={isFetchingNextPage}
               hasNextPage={hasNextPage}
               headerContent={
                 <Select
-                  disabled={isLoading}
                   value={selectedLocale}
                   onValueChange={handleLocaleChange}
                   size="small"
@@ -687,12 +732,7 @@ export const TranslationsEditForm = ({
         <RouteFocusModal.Footer>
           <div className="flex items-center justify-end gap-x-2">
             <RouteFocusModal.Close asChild>
-              <Button
-                type="button"
-                size="small"
-                variant="secondary"
-                isLoading={isLoading}
-              >
+              <Button size="small" variant="secondary">
                 {t("actions.cancel")}
               </Button>
             </RouteFocusModal.Close>
@@ -701,11 +741,16 @@ export const TranslationsEditForm = ({
               type="button"
               variant="secondary"
               onClick={() => handleSave(false)}
-              isLoading={isLoading}
+              isLoading={isPending}
             >
               {t("actions.saveChanges")}
             </Button>
-            <Button size="small" type="submit" isLoading={isLoading}>
+            <Button
+              size="small"
+              type="button"
+              onClick={() => handleSave(true)}
+              isLoading={isPending}
+            >
               {t("actions.saveAndClose")}
             </Button>
           </div>
@@ -735,7 +780,7 @@ export const TranslationsEditForm = ({
               size="small"
               onClick={handleSaveAndSwitch}
               type="button"
-              isLoading={isLoading}
+              isLoading={isPending}
             >
               {t("actions.saveChanges")}
             </Button>