fix(plugin-form,i18n): form edit saves send If-Match and surface 409 conflicts instead of silently overwriting (#3060)

baozhoutao · claude · web-flow · commit 6e6f5efae7ac · 2026-07-30T08:06:13.000-07:00
Every form variant (ObjectForm/ModalForm/DrawerForm/TabbedForm/SplitForm/
WizardForm) wrote records back with an unguarded dataSource.update — two
racing editors both got a 200 and the later save silently erased the
earlier one. The server already honours If-Match (409 CONCURRENT_UPDATE)
and the DataSource contract forwards opts.ifMatch; the forms were the only
link not sending it.

New shared useOccSave (occSave.tsx): the edit save carries ifMatch = the
updated_at the form read via findOne; a 409 opens a conflict dialog whose
exits are "Keep editing" (nothing written, form and draft stay open) and
"Overwrite" (retry re-keyed to the server's currentVersion). Records
without a string updated_at degrade to the old unguarded write.

Dialog copy added to all ten locales under form.conflict*.

Co-authored-by: Claude Fable 5 &lt;noreply@anthropic.com&gt;
diff --git a/packages/i18n/src/locales/ar.ts b/packages/i18n/src/locales/ar.ts
@@ -113,6 +113,10 @@ const ar = {
     discardMessage: "لديك تغييرات غير محفوظة. إذا أغلقت هذا النموذج الآن، ستفقد تعديلاتك.",
     keepEditing: "متابعة التحرير",
     discard: "تجاهل",
+    conflictTitle: "تعارض في الحفظ",
+    conflictMessage: "قام شخص آخر بتغيير هذا السجل أثناء تحريرك. الكتابة فوقه ستستبدل تغييراته بتغييراتك.",
+    conflictLatestVersion: "وقت حفظه: {{time}}",
+    conflictOverwrite: "الكتابة فوقه",
     addItem: "إضافة عنصر",
     removeItem: "إزالة عنصر",
     fieldRequired: "هذا الحقل مطلوب",
diff --git a/packages/i18n/src/locales/de.ts b/packages/i18n/src/locales/de.ts
@@ -113,6 +113,10 @@ const de = {
     discardMessage: "Sie haben ungespeicherte Änderungen. Wenn Sie dieses Formular jetzt schließen, gehen Ihre Bearbeitungen verloren.",
     keepEditing: "Weiter bearbeiten",
     discard: "Verwerfen",
+    conflictTitle: "Speicherkonflikt",
+    conflictMessage: "Dieser Datensatz wurde während Ihrer Bearbeitung von jemand anderem geändert. Beim Überschreiben werden dessen Änderungen durch Ihre ersetzt.",
+    conflictLatestVersion: "Deren Speicherung: {{time}}",
+    conflictOverwrite: "Überschreiben",
     addItem: "Element hinzufügen",
     removeItem: "Element entfernen",
     fieldRequired: "Dieses Feld ist erforderlich",
diff --git a/packages/i18n/src/locales/en.ts b/packages/i18n/src/locales/en.ts
@@ -126,6 +126,10 @@ const en = {
     discardMessage: 'You have unsaved changes. If you close this form now, your edits will be lost.',
     keepEditing: 'Keep editing',
     discard: 'Discard',
+    conflictTitle: 'Save conflict',
+    conflictMessage: 'This record was changed by someone else while you were editing. Overwriting will replace their changes with yours.',
+    conflictLatestVersion: 'Their save: {{time}}',
+    conflictOverwrite: 'Overwrite',
     stepOf: 'Step {{current}} of {{total}}',
     createTitle: 'Create {{object}}',
     editTitle: 'Edit {{object}}',
diff --git a/packages/i18n/src/locales/es.ts b/packages/i18n/src/locales/es.ts
@@ -113,6 +113,10 @@ const es = {
     discardMessage: "Tiene cambios sin guardar. Si cierra este formulario ahora, sus ediciones se perderán.",
     keepEditing: "Seguir editando",
     discard: "Descartar",
+    conflictTitle: "Conflicto al guardar",
+    conflictMessage: "Otra persona modificó este registro mientras lo editaba. Sobrescribir reemplazará sus cambios por los suyos.",
+    conflictLatestVersion: "Su guardado: {{time}}",
+    conflictOverwrite: "Sobrescribir",
     addItem: "Añadir elemento",
     removeItem: "Eliminar elemento",
     fieldRequired: "Este campo es obligatorio",
diff --git a/packages/i18n/src/locales/fr.ts b/packages/i18n/src/locales/fr.ts
@@ -113,6 +113,10 @@ const fr = {
     discardMessage: "Vous avez des modifications non enregistrées. Si vous fermez ce formulaire maintenant, vos modifications seront perdues.",
     keepEditing: "Continuer l'édition",
     discard: "Abandonner",
+    conflictTitle: "Conflit d'enregistrement",
+    conflictMessage: "Cet enregistrement a été modifié par quelqu'un d'autre pendant votre édition. L'écrasement remplacera ses modifications par les vôtres.",
+    conflictLatestVersion: "Son enregistrement : {{time}}",
+    conflictOverwrite: "Écraser",
     addItem: "Ajouter un élément",
     removeItem: "Supprimer un élément",
     fieldRequired: "Ce champ est obligatoire",
diff --git a/packages/i18n/src/locales/ja.ts b/packages/i18n/src/locales/ja.ts
@@ -113,6 +113,10 @@ const ja = {
     discardMessage: "保存されていない変更があります。このままフォームを閉じると編集内容は失われます。",
     keepEditing: "編集を続ける",
     discard: "破棄",
+    conflictTitle: "保存の競合",
+    conflictMessage: "編集中にこのレコードが他のユーザーによって変更されました。上書きすると、相手の変更はあなたの内容で置き換えられます。",
+    conflictLatestVersion: "相手の保存時刻: {{time}}",
+    conflictOverwrite: "上書き",
     addItem: "項目を追加",
     removeItem: "項目を削除",
     fieldRequired: "この項目は必須です",
diff --git a/packages/i18n/src/locales/ko.ts b/packages/i18n/src/locales/ko.ts
@@ -113,6 +113,10 @@ const ko = {
     discardMessage: "저장하지 않은 변경 내용이 있습니다. 지금 이 양식을 닫으면 편집 내용이 사라집니다.",
     keepEditing: "계속 편집",
     discard: "버리기",
+    conflictTitle: "저장 충돌",
+    conflictMessage: "편집하는 동안 다른 사용자가 이 레코드를 변경했습니다. 덮어쓰면 상대방의 변경 내용이 내 내용으로 대체됩니다.",
+    conflictLatestVersion: "상대방 저장 시각: {{time}}",
+    conflictOverwrite: "덮어쓰기",
     addItem: "항목 추가",
     removeItem: "항목 제거",
     fieldRequired: "이 필드는 필수입니다",
diff --git a/packages/i18n/src/locales/pt.ts b/packages/i18n/src/locales/pt.ts
@@ -113,6 +113,10 @@ const pt = {
     discardMessage: "Você tem alterações não salvas. Se fechar este formulário agora, suas edições serão perdidas.",
     keepEditing: "Continuar editando",
     discard: "Descartar",
+    conflictTitle: "Conflito ao salvar",
+    conflictMessage: "Outra pessoa alterou este registro enquanto você editava. Sobrescrever substituirá as alterações dela pelas suas.",
+    conflictLatestVersion: "Salvamento dela: {{time}}",
+    conflictOverwrite: "Sobrescrever",
     addItem: "Adicionar item",
     removeItem: "Remover item",
     fieldRequired: "Este campo é obrigatório",
diff --git a/packages/i18n/src/locales/ru.ts b/packages/i18n/src/locales/ru.ts
@@ -113,6 +113,10 @@ const ru = {
     discardMessage: "Есть несохранённые изменения. Если закрыть форму сейчас, правки будут потеряны.",
     keepEditing: "Продолжить редактирование",
     discard: "Отменить",
+    conflictTitle: "Конфликт сохранения",
+    conflictMessage: "Пока вы редактировали, эту запись изменил другой пользователь. Перезапись заменит его изменения вашими.",
+    conflictLatestVersion: "Его сохранение: {{time}}",
+    conflictOverwrite: "Перезаписать",
     addItem: "Добавить элемент",
     removeItem: "Удалить элемент",
     fieldRequired: "Это поле обязательно",
diff --git a/packages/i18n/src/locales/zh.ts b/packages/i18n/src/locales/zh.ts
@@ -125,6 +125,10 @@ const zh = {
     discardMessage: '您有未保存的更改。如果现在关闭此表单，您的编辑将会丢失。',
     keepEditing: '继续编辑',
     discard: '放弃',
+    conflictTitle: '保存冲突',
+    conflictMessage: '您编辑期间，这条记录已被其他人修改。覆盖保存将用您的内容替换对方的修改。',
+    conflictLatestVersion: '对方保存时间：{{time}}',
+    conflictOverwrite: '覆盖保存',
     stepOf: '第{{current}}步，共{{total}}步',
     createTitle: '新建{{object}}',
     editTitle: '编辑{{object}}',
diff --git a/packages/plugin-form/src/DrawerForm.tsx b/packages/plugin-form/src/DrawerForm.tsx
@@ -41,6 +41,7 @@ import { mapFieldTypeToFormType, buildValidationRules } from '@object-ui/fields'
 import { buildSectionFields as buildSectionFieldsShared } from './sectionFields';
 import { applyAutoLayout } from './autoLayout';
 import { sanitizeFormData } from './sanitize';
+import { useOccSave } from './occSave';
 
 /**
  * Container-query-based grid classes for form field layout.
@@ -177,6 +178,8 @@ export const DrawerForm: React.FC<DrawerFormProps> = ({
   // dialog shown when the user tries to close a dirty form.
   const [isDirty, setIsDirty] = useState(false);
   const [discardOpen, setDiscardOpen] = useState(false);
+  // OCC-guarded edit save + its conflict dialog (see occSave.tsx).
+  const { saveWithOcc, conflictDialog } = useOccSave();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const cancelIntentRef = useRef(false);
   const confirmOnDiscard = schema.confirmOnDiscard !== false;
@@ -353,7 +356,17 @@ export const DrawerForm: React.FC<DrawerFormProps> = ({
       if (schema.mode === 'create') {
         result = await dataSource.create(schema.objectName, payload);
       } else if (schema.mode === 'edit' && schema.recordId) {
-        result = await dataSource.update(schema.objectName, schema.recordId, payload);
+        // OCC-guarded: sends `ifMatch` from the record we read; a 409 asks the
+        // user to keep editing (drawer stays open, draft intact) or overwrite.
+        const outcome = await saveWithOcc({
+          dataSource,
+          objectName: schema.objectName,
+          recordId: schema.recordId,
+          payload,
+          baseRecord: formData,
+        });
+        if (outcome.status === 'cancelled') return;
+        result = outcome.result;
       }
       if (schema.onSuccess) {
         await schema.onSuccess(result);
@@ -369,7 +382,7 @@ export const DrawerForm: React.FC<DrawerFormProps> = ({
     } finally {
       setIsSubmitting(false);
     }
-  }, [schema, dataSource, objectSchema]);
+  }, [schema, dataSource, objectSchema, saveWithOcc, formData]);
 
   // Actually close the drawer, firing onCancel only when the close originated
   // from the explicit Cancel button.
@@ -668,6 +681,10 @@ export const DrawerForm: React.FC<DrawerFormProps> = ({
             </AlertDialogFooter>
           </AlertDialogContent>
         </AlertDialog>
+        {/* Same nesting rationale as the discard guard above: inside
+            SheetContent the conflict alert stacks as the topmost Radix layer,
+            so its buttons receive clicks while the drawer stays open. */}
+        {conflictDialog}
       </SheetContent>
     </Sheet>
   );
diff --git a/packages/plugin-form/src/ModalForm.tsx b/packages/plugin-form/src/ModalForm.tsx
@@ -51,6 +51,7 @@ import {
 import { deriveFieldGroupSections } from './fieldGroups';
 import { sanitizeFormData } from './sanitize';
 import { usePermissions } from '@object-ui/permissions';
+import { useOccSave } from './occSave';
 
 // Localized strings for the unsaved-changes guard. Falls back to English when
 // no i18n provider is mounted (createSafeTranslation handles that).
@@ -219,6 +220,8 @@ export const ModalForm: React.FC<ModalFormProps> = ({
   // tries to close a dirty form.
   const [isDirty, setIsDirty] = useState(false);
   const [discardOpen, setDiscardOpen] = useState(false);
+  // OCC-guarded edit save + its conflict dialog (see occSave.tsx).
+  const { saveWithOcc, conflictDialog } = useOccSave();
   // Whether the pending close came from the explicit Cancel button (so we fire
   // schema.onCancel) versus a backdrop/Escape/X dismissal (which historically
   // did not). Kept in a ref so it survives the confirm round-trip.
@@ -444,7 +447,17 @@ export const ModalForm: React.FC<ModalFormProps> = ({
       if (schema.mode === 'create') {
         result = await dataSource.create(schema.objectName, payload);
       } else if (schema.mode === 'edit' && schema.recordId) {
-        result = await dataSource.update(schema.objectName, schema.recordId, payload);
+        // OCC-guarded: sends `ifMatch` from the record we read; a 409 asks the
+        // user to keep editing (modal stays open, draft intact) or overwrite.
+        const outcome = await saveWithOcc({
+          dataSource,
+          objectName: schema.objectName,
+          recordId: schema.recordId,
+          payload,
+          baseRecord: formData,
+        });
+        if (outcome.status === 'cancelled') return;
+        result = outcome.result;
       }
       if (schema.onSuccess) {
         await schema.onSuccess(result);
@@ -460,7 +473,7 @@ export const ModalForm: React.FC<ModalFormProps> = ({
     } finally {
       setIsSubmitting(false);
     }
-  }, [schema, dataSource, objectSchema, perms]);
+  }, [schema, dataSource, objectSchema, perms, saveWithOcc, formData]);
 
   // Actually close the modal, firing onCancel only when the close originated
   // from the explicit Cancel button.
@@ -861,6 +874,10 @@ export const ModalForm: React.FC<ModalFormProps> = ({
             </AlertDialogFooter>
           </AlertDialogContent>
         </AlertDialog>
+        {/* Same nesting rationale as the discard guard above: as a child of
+            the Dialog content the conflict alert stacks as the topmost Radix
+            layer, so its buttons receive clicks while the modal stays open. */}
+        {conflictDialog}
       </MobileDialogContent>
     </Dialog>
   );
diff --git a/packages/plugin-form/src/ObjectForm.tsx b/packages/plugin-form/src/ObjectForm.tsx
@@ -37,6 +37,7 @@ import {
 } from './autoLayout';
 import { deriveFieldGroupSections } from './fieldGroups';
 import { sanitizeFormData } from './sanitize';
+import { useOccSave } from './occSave';
 
 export interface ObjectFormProps {
   /**
@@ -397,6 +398,9 @@ const SimpleObjectForm: React.FC<ObjectFormProps> = ({
   // second record).
   const [submitted, setSubmitted] = useState<{ title?: string; message?: string } | null>(null);
 
+  // OCC-guarded edit save + its conflict dialog (see occSave.tsx).
+  const { saveWithOcc, conflictDialog } = useOccSave();
+
   // Check if using inline fields (fields defined as objects, not just names)
   const hasInlineFields = schema.customFields && schema.customFields.length > 0;
 
@@ -734,7 +738,17 @@ const SimpleObjectForm: React.FC<ObjectFormProps> = ({
       } else if (schema.mode === 'create') {
         result = await dataSource.create(schema.objectName, payload);
       } else if (schema.mode === 'edit' && schema.recordId) {
-        result = await dataSource.update(schema.objectName, schema.recordId, payload);
+        // OCC-guarded: sends `ifMatch` from the record we read; a 409 asks the
+        // user to keep editing (skip the success path) or overwrite.
+        const outcome = await saveWithOcc({
+          dataSource,
+          objectName: schema.objectName,
+          recordId: schema.recordId,
+          payload,
+          baseRecord: initialData,
+        });
+        if (outcome.status === 'cancelled') return;
+        result = outcome.result;
       } else {
         throw new Error('Invalid form mode or missing record ID');
       }
@@ -789,7 +803,7 @@ const SimpleObjectForm: React.FC<ObjectFormProps> = ({
       
       throw err;
     }
-  }, [schema, dataSource, hasInlineFields, perms, objectSchema]);
+  }, [schema, dataSource, hasInlineFields, perms, objectSchema, saveWithOcc, initialData]);
 
   // Handle form cancellation
   const handleCancel = useCallback(() => {
@@ -1007,6 +1021,7 @@ const SimpleObjectForm: React.FC<ObjectFormProps> = ({
             onCancel: handleCancel,
           } as FormSchema}
         />
+        {conflictDialog}
       </div>
     );
   }
@@ -1098,6 +1113,7 @@ const SimpleObjectForm: React.FC<ObjectFormProps> = ({
       data-mobile-form={mobileOpts ? 'true' : undefined}
     >
       <SchemaRenderer schema={formSchema} />
+      {conflictDialog}
     </div>
   );
 };
diff --git a/packages/plugin-form/src/SplitForm.tsx b/packages/plugin-form/src/SplitForm.tsx
@@ -29,6 +29,7 @@ import { cn } from '@object-ui/components';
 import { SchemaRenderer, useSafeFieldLabel } from '@object-ui/react';
 import { buildSectionFields as buildSectionFieldsShared } from './sectionFields';
 import { applyAutoColSpan, containerGridColsFor } from './autoLayout';
+import { useOccSave } from './occSave';
 
 export interface SplitFormSectionConfig {
   name?: string;
@@ -116,6 +117,8 @@ export const SplitForm: React.FC<SplitFormProps> = ({
   const { fieldLabel } = useSafeFieldLabel();
   const [objectSchema, setObjectSchema] = useState<any>(null);
   const [formData, setFormData] = useState<Record<string, any>>({});
+  // OCC-guarded edit save + its conflict dialog (see occSave.tsx).
+  const { saveWithOcc, conflictDialog } = useOccSave();
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
 
@@ -217,7 +220,17 @@ export const SplitForm: React.FC<SplitFormProps> = ({
       if (schema.mode === 'create') {
         result = await dataSource.create(schema.objectName, data);
       } else if (schema.mode === 'edit' && schema.recordId) {
-        result = await dataSource.update(schema.objectName, schema.recordId, data);
+        // OCC-guarded: sends `ifMatch` from the record we read; a 409 asks the
+        // user to keep editing (skip the success path) or overwrite.
+        const outcome = await saveWithOcc({
+          dataSource,
+          objectName: schema.objectName,
+          recordId: schema.recordId,
+          payload: data,
+          baseRecord: formData,
+        });
+        if (outcome.status === 'cancelled') return;
+        result = outcome.result;
       }
       if (schema.onSuccess) {
         await schema.onSuccess(result);
@@ -229,7 +242,7 @@ export const SplitForm: React.FC<SplitFormProps> = ({
       }
       throw err;
     }
-  }, [schema, dataSource]);
+  }, [schema, dataSource, saveWithOcc, formData]);
 
   // Handle cancel
   const handleCancel = useCallback(() => {
@@ -368,6 +381,7 @@ export const SplitForm: React.FC<SplitFormProps> = ({
           fieldPanesResizable: schema.splitResizable !== false,
         }}
       />
+      {conflictDialog}
     </div>
   );
 };
diff --git a/packages/plugin-form/src/TabbedForm.tsx b/packages/plugin-form/src/TabbedForm.tsx
@@ -19,6 +19,7 @@ import { cn } from '@object-ui/components';
 import { SchemaRenderer, useSafeFieldLabel } from '@object-ui/react';
 import { buildSectionFields as buildSectionFieldsShared } from './sectionFields';
 import { applyAutoColSpan, containerGridColsFor } from './autoLayout';
+import { useOccSave } from './occSave';
 
 export interface FormSectionConfig {
   /**
@@ -191,6 +192,8 @@ export const TabbedForm: React.FC<TabbedFormProps> = ({
   const { fieldLabel } = useSafeFieldLabel();
   const [objectSchema, setObjectSchema] = useState<any>(null);
   const [formData, setFormData] = useState<Record<string, any>>({});
+  // OCC-guarded edit save + its conflict dialog (see occSave.tsx).
+  const { saveWithOcc, conflictDialog } = useOccSave();
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
   // Which tab opens first. The live tab state belongs to the form renderer from
@@ -293,21 +296,31 @@ export const TabbedForm: React.FC<TabbedFormProps> = ({
       if (schema.mode === 'create') {
         result = await dataSource.create(schema.objectName, data);
       } else if (schema.mode === 'edit' && schema.recordId) {
-        result = await dataSource.update(schema.objectName, schema.recordId, data);
+        // OCC-guarded: sends `ifMatch` from the record we read; a 409 asks the
+        // user to keep editing (skip the success path) or overwrite.
+        const outcome = await saveWithOcc({
+          dataSource,
+          objectName: schema.objectName,
+          recordId: schema.recordId,
+          payload: data,
+          baseRecord: formData,
+        });
+        if (outcome.status === 'cancelled') return;
+        result = outcome.result;
       }
-      
+
       if (schema.onSuccess) {
         await schema.onSuccess(result);
       }
-      
+
       return result;
     } catch (err) {
       if (schema.onError) {
         schema.onError(err as Error);
       }
       throw err;
     }
-  }, [schema, dataSource]);
+  }, [schema, dataSource, saveWithOcc, formData]);
 
   // Handle cancel
   const handleCancel = useCallback(() => {
@@ -405,6 +418,7 @@ export const TabbedForm: React.FC<TabbedFormProps> = ({
           fieldTabsPosition: schema.tabPosition || 'top',
         }}
       />
+      {conflictDialog}
     </div>
   );
 };
diff --git a/packages/plugin-form/src/WizardForm.tsx b/packages/plugin-form/src/WizardForm.tsx
diff --git a/packages/plugin-form/src/occSave.test.tsx b/packages/plugin-form/src/occSave.test.tsx
diff --git a/packages/plugin-form/src/occSave.tsx b/packages/plugin-form/src/occSave.tsx
