fix(tables): write only what the row form changed, and report failures once

The add/edit row form sent every column on every save. An untouched empty
column was written as `null`, so a no-op edit still bumped the row, and an
insert filled in nulls for columns the user never opened. It now sends only
the fields the user touched, and in edit mode only those whose value actually
differs — a save with nothing changed closes without a write. Checkboxes stay
the exception on insert: they always carry a concrete boolean, so a required
one the user never clicked still reaches the server as `false`.

A rejected write also arrived twice: the modal rendered the message inline and
the mutation toasted the same sentence. Row mutations take an opt-in
`suppressErrorToast` so the form owns its own failure; the cache self-heal on
a 423 still runs, only its toast is dropped.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: j15z

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.test.tsx

@@ -389,7 +389,7 @@ describe('RowModal expiration editing', () => {
     container.remove()
   })
 
-  it('keeps unrelated fields editable and omits blocked date values from the update', async () => {
+  it('sends only the edited field and omits blocked date values from the update', async () => {
     mockUseTimezoneState.mockReturnValue({
       timezone: 'America/Los_Angeles',
       savedTimezone: 'Mars/Olympus',
@@ -437,14 +437,87 @@ describe('RowModal expiration editing', () => {
     act(() => changeInput(nameInput as HTMLInputElement, 'Grace'))
     await act(async () => submit?.click())
 
-    expect(mockUpdateRow).toHaveBeenCalledWith({
-      rowId: 'row-1',
-      data: { name: 'Grace', expires_at: row.data.expires_at },
-    })
+    // Only the edited field is sent: the untouched TTL would otherwise be
+    // rewritten with the same value (and re-stamped through the picker), and the
+    // timezone-blocked date is dropped entirely.
+    expect(mockUpdateRow).toHaveBeenCalledWith({ rowId: 'row-1', data: { name: 'Grace' } })
     expect(props.onSuccess).toHaveBeenCalledTimes(1)
     expect(mockToastError).not.toHaveBeenCalled()
 
     act(() => root.unmount())
     container.remove()
   })
 })
+
+describe('RowModal payload', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockCreateRow.mockResolvedValue(undefined)
+    mockUpdateRow.mockResolvedValue(undefined)
+    mockUseTimezoneState.mockReturnValue({ timezone: 'America/Los_Angeles', status: 'ready' })
+  })
+
+  it('closes without a write when the edit changes nothing', async () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    const props = {
+      mode: 'edit' as const,
+      isOpen: true,
+      onClose: vi.fn(),
+      table: {
+        id: 'table-5',
+        name: 'People',
+        schema: { columns: [{ id: 'col_name', name: 'Name', type: 'string' as const }] },
+      },
+      row: { ...row, data: { col_name: 'Ada' } },
+      onSuccess: vi.fn(),
+    }
+
+    act(() => root.render(createElement(RowModal, props)))
+    const submit = container.querySelector<HTMLButtonElement>('[data-testid="submit"]')
+    await act(async () => submit?.click())
+
+    expect(mockUpdateRow).not.toHaveBeenCalled()
+    expect(props.onSuccess).toHaveBeenCalledTimes(1)
+
+    act(() => root.unmount())
+    container.remove()
+  })
+
+  it('omits untouched columns on insert but still sends toggles', async () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    const props = {
+      mode: 'add' as const,
+      isOpen: true,
+      onClose: vi.fn(),
+      table: {
+        id: 'table-6',
+        name: 'People',
+        schema: {
+          columns: [
+            { id: 'col_name', name: 'Name', type: 'string' as const },
+            { id: 'col_notes', name: 'Notes', type: 'string' as const },
+            { id: 'col_done', name: 'Done', type: 'boolean' as const },
+          ],
+        },
+      },
+      onSuccess: vi.fn(),
+    }
+
+    act(() => root.render(createElement(RowModal, props)))
+    const nameInput = container.querySelector<HTMLInputElement>('[data-testid="modal-input"]')
+    act(() => changeInput(nameInput as HTMLInputElement, 'Ada'))
+    const submit = container.querySelector<HTMLButtonElement>('[data-testid="submit"]')
+    await act(async () => submit?.click())
+
+    // `col_notes` was never touched, so it stays absent instead of being written
+    // as null; a checkbox always carries a concrete boolean.
+    expect(mockCreateRow).toHaveBeenCalledWith({ data: { col_name: 'Ada', col_done: false } })
+
+    act(() => root.unmount())
+    container.remove()
+  })
+})

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx

@@ -57,25 +57,53 @@ export interface RowModalProps {
   onSuccess: () => void
 }
 
+/** Structural equality for a cleaned cell value vs what the row already holds. */
+function cellValueUnchanged(next: unknown, previous: unknown): boolean {
+  if (next === previous) return true
+  const nextEmpty = next === null || next === undefined
+  const previousEmpty = previous === null || previous === undefined
+  if (nextEmpty || previousEmpty) return nextEmpty && previousEmpty
+  if (typeof next === 'object' || typeof previous === 'object') {
+    return JSON.stringify(next) === JSON.stringify(previous)
+  }
+  return false
+}
+
+/**
+ * Builds the write payload. Only fields the user actually touched are sent, so
+ * an untouched empty column is left absent instead of being written as `null` —
+ * and in edit mode a field whose value is unchanged is dropped too, leaving a
+ * no-op save with nothing to write. Toggles are the exception on insert: they
+ * always carry a concrete boolean, so a required checkbox the user never
+ * clicked still has to reach the server as `false`.
+ */
 function cleanRowData(
   columns: ColumnDefinition[],
   rowData: Record<string, unknown>,
   timeZone: string,
-  dateEditorsReady: boolean
+  dateEditorsReady: boolean,
+  options: { mode: 'add' | 'edit'; baseline?: Record<string, unknown> }
 ): Record<string, unknown> {
   const cleanData: Record<string, unknown> = {}
 
   columns.forEach((col) => {
     const columnId = getColumnId(col)
-    const value = rowData[columnId]
-    if (columnTypeOf(col).editor === 'date' && !dateEditorsReady) {
+    const definition = columnTypeOf(col)
+    if (definition.editor === 'date' && !dateEditorsReady) {
       return
     }
+    const touched = columnId in rowData
+    const alwaysSend = options.mode === 'add' && definition.editor === 'toggle'
+    if (!touched && !alwaysSend) return
+    const value = rowData[columnId]
+    let cleaned: unknown
     try {
-      cleanData[columnId] = cleanCellValue(value, col, timeZone)
+      cleaned = cleanCellValue(value, col, timeZone)
     } catch {
       throw new Error(`Invalid JSON for field: ${col.name}`)
     }
+    if (options.baseline && cellValueUnchanged(cleaned, options.baseline[columnId])) return
+    cleanData[columnId] = cleaned
   })
 
   return cleanData
@@ -119,10 +147,13 @@ export function RowModal({
     mode === 'edit' && row ? row.data : {}
   )
   const [error, setError] = useState<string | null>(null)
-  const createRowMutation = useCreateTableRow({ workspaceId, tableId })
-  const updateRowMutation = useUpdateTableRow({ workspaceId, tableId })
-  const deleteRowMutation = useDeleteTableRow({ workspaceId, tableId })
-  const deleteRowsMutation = useDeleteTableRows({ workspaceId, tableId })
+  // This modal renders its own failure in `<ChipModalError>`; without the flag
+  // every rejection would also arrive as a toast saying the same sentence.
+  const rowMutationContext = { workspaceId, tableId, suppressErrorToast: true }
+  const createRowMutation = useCreateTableRow(rowMutationContext)
+  const updateRowMutation = useUpdateTableRow(rowMutationContext)
+  const deleteRowMutation = useDeleteTableRow(rowMutationContext)
+  const deleteRowsMutation = useDeleteTableRows(rowMutationContext)
   const isSubmitting =
     createRowMutation.isPending ||
     updateRowMutation.isPending ||
@@ -149,12 +180,18 @@ export function RowModal({
     if (!canSubmit) return
 
     try {
-      const cleanData = cleanRowData(columns, rowData, timeZone, dateEditorsReady)
+      const cleanData = cleanRowData(columns, rowData, timeZone, dateEditorsReady, {
+        mode: isAddMode ? 'add' : 'edit',
+        baseline: isAddMode ? undefined : row?.data,
+      })
 
       if (isAddMode) {
         await createRowMutation.mutateAsync({ data: cleanData, ...insertAt })
       } else if (row) {
-        await updateRowMutation.mutateAsync({ rowId: row.id, data: cleanData })
+        // Nothing changed — close instead of writing an empty patch.
+        if (Object.keys(cleanData).length > 0) {
+          await updateRowMutation.mutateAsync({ rowId: row.id, data: cleanData })
+        }
       }
 
       onSuccess()

apps/sim/hooks/queries/tables.ts

@@ -159,6 +159,12 @@ export type TableRowsResponse = Pick<
 interface RowMutationContext {
   workspaceId: string
   tableId: string
+  /**
+   * Suppresses the error toast for callers that render the failure themselves —
+   * the row modal shows it inline, and two copies of the same sentence read as
+   * two separate failures. The cache self-heal on a 423 still runs.
+   */
+  suppressErrorToast?: boolean
 }
 
 type UpdateTableRowParams = Pick<TableRowParamsInput, 'rowId'> &
@@ -809,16 +815,22 @@ function notifyRowWriteError(error: Error, onUpgrade: () => void): void {
 function handleTableLockRejection(
   error: unknown,
   queryClient: ReturnType<typeof useQueryClient>,
-  tableId: string
+  tableId: string,
+  options?: { silent?: boolean }
 ): boolean {
   if (!isApiClientError(error) || error.status !== 423) return false
   void queryClient.invalidateQueries({ queryKey: tableKeys.detail(tableId), exact: true })
   void queryClient.invalidateQueries({ queryKey: tableKeys.lists() })
-  toast.error(error.message, { duration: 5000 })
+  // `silent` only drops the toast; the refetches above are what un-stale the grid.
+  if (!options?.silent) toast.error(error.message, { duration: 5000 })
   return true
 }
 
-export function useCreateTableRow({ workspaceId, tableId }: RowMutationContext) {
+export function useCreateTableRow({
+  workspaceId,
+  tableId,
+  suppressErrorToast,
+}: RowMutationContext) {
   const queryClient = useQueryClient()
   const router = useRouter()
 
@@ -866,7 +878,9 @@ export function useCreateTableRow({ workspaceId, tableId }: RowMutationContext)
       })
     },
     onError: (error) => {
-      if (handleTableLockRejection(error, queryClient, tableId)) return
+      if (handleTableLockRejection(error, queryClient, tableId, { silent: suppressErrorToast }))
+        return
+      if (suppressErrorToast) return
       notifyRowWriteError(error, () => router.push(buildUpgradeHref(workspaceId, 'tables')))
     },
     onSettled: () => {
@@ -1065,7 +1079,11 @@ export function useBatchCreateTableRows({ workspaceId, tableId }: RowMutationCon
  * Update a single row in a table.
  * Uses optimistic updates for instant UI feedback on inline cell edits.
  */
-export function useUpdateTableRow({ workspaceId, tableId }: RowMutationContext) {
+export function useUpdateTableRow({
+  workspaceId,
+  tableId,
+  suppressErrorToast,
+}: RowMutationContext) {
   const queryClient = useQueryClient()
 
   return useMutation({
@@ -1150,8 +1168,10 @@ export function useUpdateTableRow({ workspaceId, tableId }: RowMutationContext)
       if (context?.didBumpRunState) {
         queryClient.setQueryData(tableKeys.activeDispatches(tableId), context.runStateSnapshot)
       }
-      if (handleTableLockRejection(error, queryClient, tableId)) return
+      if (handleTableLockRejection(error, queryClient, tableId, { silent: suppressErrorToast }))
+        return
       if (isValidationError(error)) return
+      if (suppressErrorToast) return
       toast.error(error.message, { duration: 5000 })
     },
   })
@@ -1234,7 +1254,11 @@ export function useBatchUpdateTableRows({ workspaceId, tableId }: RowMutationCon
 /**
  * Delete a single row from a table.
  */
-export function useDeleteTableRow({ workspaceId, tableId }: RowMutationContext) {
+export function useDeleteTableRow({
+  workspaceId,
+  tableId,
+  suppressErrorToast,
+}: RowMutationContext) {
   const queryClient = useQueryClient()
 
   return useMutation({
@@ -1245,8 +1269,10 @@ export function useDeleteTableRow({ workspaceId, tableId }: RowMutationContext)
       })
     },
     onError: (error) => {
-      if (handleTableLockRejection(error, queryClient, tableId)) return
+      if (handleTableLockRejection(error, queryClient, tableId, { silent: suppressErrorToast }))
+        return
       if (isValidationError(error)) return
+      if (suppressErrorToast) return
       toast.error(error.message, { duration: 5000 })
     },
     onSettled: () => {
@@ -1259,7 +1285,11 @@ export function useDeleteTableRow({ workspaceId, tableId }: RowMutationContext)
  * Delete multiple rows from a table.
  * Returns both deleted ids and failure details for partial-failure UI.
  */
-export function useDeleteTableRows({ workspaceId, tableId }: RowMutationContext) {
+export function useDeleteTableRows({
+  workspaceId,
+  tableId,
+  suppressErrorToast,
+}: RowMutationContext) {
   const queryClient = useQueryClient()
 
   return useMutation({
@@ -1294,8 +1324,10 @@ export function useDeleteTableRows({ workspaceId, tableId }: RowMutationContext)
       return { deletedRowIds }
     },
     onError: (error) => {
-      if (handleTableLockRejection(error, queryClient, tableId)) return
+      if (handleTableLockRejection(error, queryClient, tableId, { silent: suppressErrorToast }))
+        return
       if (isValidationError(error)) return
+      if (suppressErrorToast) return
       toast.error(error.message, { duration: 5000 })
     },
     onSettled: () => {