@medusajs/dashboard 3.0.0-snapshot-20251216145629 → 3.0.0-snapshot-20260102125810

package/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 } from "@medusajs/ui"
+import { Button, 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"
@@ -18,38 +18,17 @@ import {
 import { KeyboundForm } from "../../../../../components/utilities/keybound-form"
 import { useBatchTranslations } from "../../../../../hooks/api/translations"
 
-/**
- * Schema for a single locale translation.
- */
-const LocaleTranslationSchema = z.object({
+const EntityTranslationsSchema = 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 = {
@@ -72,150 +51,94 @@ export function isFieldRow(row: TranslationRow): row is FieldRow {
   return row._type === "field"
 }
 
-function initTranslationsFormState(
+type LocaleSnapshot = {
+  localeCode: string
+  entities: Record<string, EntityTranslationsSchema>
+}
+
+function buildLocaleSnapshot(
   translations: HttpTypes.AdminTranslation[],
   references: { id: string; [key: string]: string }[],
-  availableLocales: AdminStoreLocale[],
+  localeCode: string,
   translatableFields: string[]
-): TranslationsFormSchema {
-  const existingMap = new Map<string, HttpTypes.AdminTranslation>()
+): LocaleSnapshot {
+  const referenceTranslations = new Map<string, HttpTypes.AdminTranslation>()
   for (const t of translations) {
-    existingMap.set(`${t.reference_id}:${t.locale_code}`, t)
+    if (t.locale_code === localeCode) {
+      referenceTranslations.set(t.reference_id, t)
+    }
   }
 
-  const entitiesTranslationState: Record<string, EntityTranslationsSchema> = {}
-
-  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
-      }
+  const entities: Record<string, EntityTranslationsSchema> = {}
+  for (const ref of references) {
+    const existing = referenceTranslations.get(ref.id)
+    const fields: Record<string, string> = {}
 
-      locales[locale.locale_code] = {
-        id: existing?.id ?? null,
-        locale_code: locale.locale_code,
-        fields,
-      }
+    for (const fieldName of translatableFields) {
+      fields[fieldName] = (existing?.translations?.[fieldName] as string) ?? ""
     }
 
-    entitiesTranslationState[reference.id] = { locales }
+    entities[ref.id] = {
+      id: existing?.id ?? null,
+      fields,
+    }
   }
 
-  return {
-    entities: entitiesTranslationState,
-  }
+  return { localeCode, entities }
 }
 
-function buildTranslationRows(
-  references: { id: string; [key: string]: string }[],
+function extendSnapshot(
+  snapshot: LocaleSnapshot,
+  translations: HttpTypes.AdminTranslation[],
+  newReferences: { 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,
-    })),
-  }))
-}
-
-function transformToBatchPayload(
-  currentState: TranslationsFormSchema,
-  initialState: TranslationsFormSchema,
-  entityType: string
-): Required<HttpTypes.AdminBatchTranslations> {
-  const payload: Required<HttpTypes.AdminBatchTranslations> = {
-    create: [],
-    update: [],
-    delete: [],
-  }
-
-  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() !== ""
-        )
-
-      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)
-      }
+): 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)
     }
   }
 
-  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]
+  const extendedEntities = { ...snapshot.entities }
 
-    if (!currentLocale || !initialLocale) {
-      continue
-    }
+  for (const ref of newReferences) {
+    if (!extendedEntities[ref.id]) {
+      const existing = referenceTranslations.get(ref.id)
+      const fields: Record<string, string> = {}
 
-    for (const [fieldName, fieldValue] of Object.entries(
-      currentLocale.fields
-    )) {
-      const initialValue = initialLocale.fields[fieldName] ?? ""
-      const currentValue = fieldValue ?? ""
+      for (const fieldName of translatableFields) {
+        fields[fieldName] =
+          (existing?.translations?.[fieldName] as string) ?? ""
+      }
 
-      if (currentValue !== initialValue) {
-        return true
+      extendedEntities[ref.id] = {
+        id: existing?.id ?? null,
+        fields,
       }
     }
   }
 
-  return false
+  return { ...snapshot, entities: extendedEntities }
 }
 
-function transformSingleLocaleToBatchPayload(
+function snapshotToFormValues(
+  snapshot: LocaleSnapshot
+): TranslationsFormSchema {
+  return { entities: snapshot.entities }
+}
+
+type ChangeDetectionResult = {
+  hasChanges: boolean
+  payload: Required<HttpTypes.AdminBatchTranslations>
+}
+
+function computeChanges(
   currentState: TranslationsFormSchema,
-  initialState: TranslationsFormSchema,
+  snapshot: LocaleSnapshot,
   entityType: string,
   localeCode: string
-): Required<HttpTypes.AdminBatchTranslations> {
+): ChangeDetectionResult {
   const payload: Required<HttpTypes.AdminBatchTranslations> = {
     create: [],
     update: [],
@@ -223,44 +146,43 @@ function transformSingleLocaleToBatchPayload(
   }
 
   for (const [entityId, entityData] of Object.entries(currentState.entities)) {
-    const localeTranslations = entityData.locales[localeCode]
-    if (!localeTranslations) continue
+    const baseline = snapshot.entities[entityId]
+    if (!baseline) {
+      continue
+    }
 
-    const initial = initialState.entities[entityId]?.locales[localeCode]
-    const hasContent = Object.values(localeTranslations.fields).some(
+    const hasContent = Object.values(entityData.fields).some(
       (v) => v !== undefined && v.trim() !== ""
     )
-    const hadContent =
-      initial &&
-      Object.values(initial.fields).some(
-        (v) => v !== undefined && v.trim() !== ""
-      )
+    const hadContent = Object.values(baseline.fields).some(
+      (v) => v !== undefined && v.trim() !== ""
+    )
+    const hasChanged =
+      JSON.stringify(entityData.fields) !== JSON.stringify(baseline.fields)
 
-    if (!localeTranslations.id && hasContent) {
+    if (!entityData.id && hasContent) {
       payload.create.push({
         reference_id: entityId,
         reference: entityType,
-        locale_code: localeTranslations.locale_code,
-        translations: localeTranslations.fields,
+        locale_code: localeCode,
+        translations: entityData.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)
+    } 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)
     }
   }
 
-  return payload
+  const hasChanges =
+    payload.create.length > 0 ||
+    payload.update.length > 0 ||
+    payload.delete.length > 0
+
+  return { hasChanges, payload }
 }
 
 const columnHelper = createDataGridHelper<
@@ -268,29 +190,42 @@ const columnHelper = createDataGridHelper<
   TranslationsFormSchema
 >()
 
-const FIELD_COLUMN_WIDTH = 150
+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,
+    })),
+  }))
+}
 
 function useTranslationsGridColumns({
   entities,
-  translatableFields,
   availableLocales,
   selectedLocale,
   dynamicColumnWidth,
 }: {
   entities: { id: string; [key: string]: string }[]
-  translatableFields: string[]
   availableLocales: AdminStoreLocale[]
   selectedLocale: string
   dynamicColumnWidth: number
 }) {
   const { t } = useTranslation()
 
-  const columns: ColumnDef<TranslationRow>[] = useMemo(() => {
+  return useMemo(() => {
     const selectedLocaleData = availableLocales.find(
       (l) => l.locale_code === selectedLocale
     )
 
-    const baseColumns = [
+    const columns: ColumnDef<TranslationRow>[] = [
       columnHelper.column({
         id: "field",
         name: "field",
@@ -300,19 +235,21 @@ function useTranslationsGridColumns({
           const row = context.row.original
 
           if (isEntityRow(row)) {
-            return (
-              <DataGrid.ReadonlyCell context={context}></DataGrid.ReadonlyCell>
-            )
+            return <DataGrid.ReadonlyCell context={context} />
           }
 
           return (
             <DataGrid.ReadonlyCell context={context} color="normal">
               <div className="flex h-full w-full items-center gap-x-2 overflow-hidden">
-                <span className="truncate">
+                <Text
+                  className="text-ui-fg-subtle truncate"
+                  weight="plus"
+                  size="small"
+                >
                   {t(`fields.${row.field_name}`, {
                     defaultValue: row.field_name,
                   })}
-                </span>
+                </Text>
               </div>
             </DataGrid.ReadonlyCell>
           )
@@ -323,27 +260,29 @@ function useTranslationsGridColumns({
         id: "original",
         name: "original",
         size: dynamicColumnWidth,
-        header: t("general.original"),
+        header: () => (
+          <Text className="text-ui-fg-base" weight="plus" size="small">
+            {t("general.original")}
+          </Text>
+        ),
         disableHiding: true,
         cell: (context) => {
           const row = context.row.original
 
           if (isEntityRow(row)) {
-            return (
-              <DataGrid.ReadonlyCell context={context}></DataGrid.ReadonlyCell>
-            )
+            return <DataGrid.ReadonlyCell context={context} />
           }
 
-          const entity = entities.find(
-            (entity) => entity.id === row.reference_id
-          )
+          const entity = entities.find((e) => e.id === row.reference_id)
           if (!entity) {
             return null
           }
 
           return (
-            <DataGrid.ReadonlyCell context={context} isMultiLine>
-              {entity[row.field_name]}
+            <DataGrid.ReadonlyCell color="normal" context={context} isMultiLine>
+              <Text className="text-ui-fg-subtle" weight="plus" size="small">
+                {entity[row.field_name]}
+              </Text>
             </DataGrid.ReadonlyCell>
           )
         },
@@ -351,12 +290,16 @@ function useTranslationsGridColumns({
     ]
 
     if (selectedLocaleData) {
-      baseColumns.push(
+      columns.push(
         columnHelper.column({
           id: selectedLocaleData.locale_code,
           name: selectedLocaleData.locale.name,
           size: dynamicColumnWidth,
-          header: () => selectedLocaleData.locale.name,
+          header: () => (
+            <Text className="text-ui-fg-base" weight="plus" size="small">
+              {selectedLocaleData.locale.name}
+            </Text>
+          ),
           cell: (context) => {
             const row = context.row.original
 
@@ -364,7 +307,7 @@ function useTranslationsGridColumns({
               return <DataGrid.ReadonlyCell context={context} isMultiLine />
             }
 
-            return <DataGrid.TextCell context={context} isMultiLine />
+            return <DataGrid.MultilineCell context={context} />
           },
           field: (context) => {
             const row = context.row.original
@@ -373,24 +316,15 @@ function useTranslationsGridColumns({
               return null
             }
 
-            return `entities.${row.reference_id}.locales.${selectedLocaleData.locale_code}.fields.${row.field_name}`
+            return `entities.${row.reference_id}.fields.${row.field_name}`
           },
-          type: "text",
+          type: "multiline-text",
         })
       )
     }
 
-    return baseColumns
-  }, [
-    t,
-    translatableFields,
-    availableLocales,
-    selectedLocale,
-    entities,
-    dynamicColumnWidth,
-  ])
-
-  return columns
+    return columns
+  }, [t, availableLocales, selectedLocale, entities, dynamicColumnWidth])
 }
 
 type TranslationsEditFormProps = {
@@ -445,74 +379,105 @@ 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 entities = useMemo(() => references, [references])
-  const totalCount = useMemo(
-    () => referenceCount * (translatableFields.length + 1),
-    [referenceCount, translatableFields]
-  )
-
-  const initialState = useRef(
-    initTranslationsFormState(
+  const snapshotRef = useRef<LocaleSnapshot>(
+    buildLocaleSnapshot(
       translations,
-      entities,
-      availableLocales,
+      references,
+      selectedLocale,
       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: initialState.current,
+    defaultValues: snapshotToFormValues(snapshotRef.current),
   })
 
-  const rows = useMemo(
-    () => buildTranslationRows(entities, translatableFields),
-    [entities, translatableFields]
-  )
+  useEffect(() => {
+    const currentIds = new Set(references.map((r) => r.id))
+    const newReferences = references.filter(
+      (r) => !knownEntityIdsRef.current.has(r.id)
+    )
 
-  const { mutateAsync, isPending } = useBatchTranslations(entityType)
+    if (newReferences.length === 0) {
+      return
+    }
 
-  const handleLocaleChange = useCallback(
-    (newLocale: string) => {
-      if (newLocale === selectedLocale) {
-        return
-      }
+    knownEntityIdsRef.current = currentIds
+    snapshotRef.current = extendSnapshot(
+      snapshotRef.current,
+      translations,
+      newReferences,
+      translatableFields
+    )
 
-      const currentValues = form.getValues()
-      const hasChanges = hasLocaleChanges(
-        currentValues,
-        initialState.current,
-        selectedLocale
-      )
+    const currentValues = form.getValues()
+    const newFormValues: TranslationsFormSchema = {
+      entities: { ...currentValues.entities },
+    }
 
-      if (hasChanges) {
-        setPendingLocale(newLocale)
-        setShowUnsavedPrompt(true)
-      } else {
-        setSelectedLocale(newLocale)
+    for (const ref of newReferences) {
+      if (!newFormValues.entities[ref.id]) {
+        newFormValues.entities[ref.id] = snapshotRef.current.entities[ref.id]
       }
-    },
-    [selectedLocale, form]
+    }
+
+    form.reset(newFormValues, {
+      keepDirty: true,
+      keepDirtyValues: true,
+    })
+  }, [references, translations, translatableFields, form])
+
+  const rows = useMemo(
+    () => buildTranslationRows(references, translatableFields),
+    [references, translatableFields]
+  )
+
+  const totalRowCount = useMemo(
+    () => referenceCount * (translatableFields.length + 1),
+    [referenceCount, translatableFields]
+  )
+
+  const selectedLocaleDisplay = useMemo(
+    () =>
+      availableLocales.find((l) => l.locale_code === selectedLocale)?.locale
+        .name,
+    [availableLocales, selectedLocale]
   )
 
+  const columns = useTranslationsGridColumns({
+    entities: references,
+    availableLocales,
+    selectedLocale,
+    dynamicColumnWidth,
+  })
+
+  const { mutateAsync, isPending, invalidateQueries } =
+    useBatchTranslations(entityType)
+
   const saveCurrentLocale = useCallback(async () => {
     const currentValues = form.getValues()
-    const payload = transformSingleLocaleToBatchPayload(
+    const { hasChanges, payload } = computeChanges(
       currentValues,
-      initialState.current,
+      snapshotRef.current,
       entityType,
       selectedLocale
     )
 
-    if (
-      payload.create.length === 0 &&
-      payload.update.length === 0 &&
-      payload.delete.length === 0
-    ) {
+    if (!hasChanges) {
       return true
     }
 
@@ -524,11 +489,13 @@ 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
@@ -539,22 +506,36 @@ export const TranslationsEditForm = ({
         }
         if (payload.delete.length > 0) {
           currentBatch.delete = payload.delete.splice(0, currentBatchAvailable)
-          currentBatchAvailable -= currentBatch.delete.length
         }
 
-        await mutateAsync(currentBatch)
+        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
+            }
+          }
+        }
       }
 
-      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],
+      const savedValues = form.getValues()
+      for (const entityId of Object.keys(savedValues.entities)) {
+        if (snapshotRef.current.entities[entityId]) {
+          snapshotRef.current.entities[entityId] = {
+            ...savedValues.entities[entityId],
           }
         }
       }
-      initialState.current = updatedInitialState
-      form.reset(currentValues)
+
+      form.reset(savedValues)
 
       return true
     } catch (error) {
@@ -565,19 +546,70 @@ 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.localeChangesSaved", {
-          defaultValue: "Changes saved successfully",
-        })
-      )
-      setSelectedLocale(pendingLocale)
+      toast.success(t("translations.edit.successToast"))
+      await switchToLocale(pendingLocale)
     }
     setShowUnsavedPrompt(false)
     setPendingLocale(null)
-  }, [saveCurrentLocale, pendingLocale, t])
+  }, [saveCurrentLocale, pendingLocale, t, switchToLocale])
 
   const handleCancelSwitch = useCallback(() => {
     setShowUnsavedPrompt(false)
@@ -597,108 +629,23 @@ export const TranslationsEditForm = ({
     [saveCurrentLocale, t, handleSuccess]
   )
 
-  const handleSubmit = form.handleSubmit(async (values) => {
-    const payload = transformToBatchPayload(
-      values,
-      initialState.current,
-      entityType
-    )
+  const handleClose = useCallback(() => {
+    invalidateQueries()
+  }, [invalidateQueries])
 
-    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
+  const isLoading = isPending || isSwitchingLocale
 
   return (
-    <RouteFocusModal.Form form={form}>
+    <RouteFocusModal.Form form={form} onClose={handleClose}>
       <KeyboundForm
-        onSubmit={handleSubmit}
+        onSubmit={() => handleSave(true)}
         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"
-            >
-              <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.Header />
         <RouteFocusModal.Body className="size-full overflow-hidden">
           <div ref={containerRef} className="size-full">
             <DataGrid
+              showColumnsDropdown={false}
               columns={columns}
               data={rows}
               getSubRows={(row) => {
@@ -708,17 +655,44 @@ export const TranslationsEditForm = ({
               }}
               state={form}
               onEditingChange={(editing) => setCloseOnEscape(!editing)}
-              totalRowCount={totalCount}
+              totalRowCount={totalRowCount}
               onFetchMore={fetchNextPage}
               isFetchingMore={isFetchingNextPage}
               hasNextPage={hasNextPage}
+              headerContent={
+                <Select
+                  disabled={isLoading}
+                  value={selectedLocale}
+                  onValueChange={handleLocaleChange}
+                  size="small"
+                >
+                  <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.Body>
         <RouteFocusModal.Footer>
           <div className="flex items-center justify-end gap-x-2">
             <RouteFocusModal.Close asChild>
-              <Button size="small" variant="secondary">
+              <Button
+                type="button"
+                size="small"
+                variant="secondary"
+                isLoading={isLoading}
+              >
                 {t("actions.cancel")}
               </Button>
             </RouteFocusModal.Close>
@@ -727,16 +701,11 @@ export const TranslationsEditForm = ({
               type="button"
               variant="secondary"
               onClick={() => handleSave(false)}
-              isLoading={isPending}
+              isLoading={isLoading}
             >
               {t("actions.saveChanges")}
             </Button>
-            <Button
-              size="small"
-              type="button"
-              onClick={() => handleSave(true)}
-              isLoading={isPending}
-            >
+            <Button size="small" type="submit" isLoading={isLoading}>
               {t("actions.saveAndClose")}
             </Button>
           </div>
@@ -766,7 +735,7 @@ export const TranslationsEditForm = ({
               size="small"
               onClick={handleSaveAndSwitch}
               type="button"
-              isLoading={isPending}
+              isLoading={isLoading}
             >
               {t("actions.saveChanges")}
             </Button>