fix(review): serialize inline column renames

Author: j15z

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/column-rename.test.tsx

@@ -0,0 +1,101 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  persistColumnRename,
+  tryStartColumnRename,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/column-rename'
+import { useInlineRename } from '@/hooks/use-inline-rename'
+
+interface Deferred {
+  promise: Promise<void>
+  resolve: () => void
+}
+
+function createDeferred(): Deferred {
+  let resolve = () => {}
+  const promise = new Promise<void>((settle) => {
+    resolve = settle
+  })
+  return { promise, resolve }
+}
+
+describe('column rename persistence', () => {
+  it('does not register undo history when persistence rejects', async () => {
+    const error = new Error('rename rejected')
+    const pushUndo = vi.fn()
+    const onRenamed = vi.fn()
+
+    await expect(
+      persistColumnRename({
+        columnId: 'column-1',
+        oldName: 'Original',
+        newName: 'Updated',
+        persist: () => Promise.reject(error),
+        pushUndo,
+        onRenamed,
+      })
+    ).rejects.toBe(error)
+
+    expect(pushUndo).not.toHaveBeenCalled()
+    expect(onRenamed).not.toHaveBeenCalled()
+  })
+})
+
+describe('column rename sessions', () => {
+  let container: HTMLDivElement
+  let root: Root
+  let rename: ReturnType<typeof useInlineRename>
+
+  beforeEach(() => {
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    root = createRoot(container)
+  })
+
+  afterEach(() => {
+    act(() => root.unmount())
+    container.remove()
+  })
+
+  it('refuses a second session until the pending rename settles', async () => {
+    const deferred = createDeferred()
+
+    function Harness() {
+      rename = useInlineRename({ onSave: () => deferred.promise })
+      return null
+    }
+
+    act(() => root.render(<Harness />))
+    act(() => {
+      expect(tryStartColumnRename(rename, 'column-1', 'First')).toBe(true)
+    })
+    act(() => rename.setEditValue('Renamed first'))
+
+    let pendingRename: Promise<void>
+    act(() => {
+      pendingRename = rename.submitRename()
+    })
+
+    expect(rename.isSaving).toBe(true)
+    act(() => {
+      expect(tryStartColumnRename(rename, 'column-2', 'Second')).toBe(false)
+    })
+    expect(rename.editingId).toBe('column-1')
+
+    await act(async () => {
+      deferred.resolve()
+      await pendingRename
+    })
+
+    expect(rename.isSaving).toBe(false)
+    act(() => {
+      expect(tryStartColumnRename(rename, 'column-2', 'Second')).toBe(true)
+    })
+    expect(rename.editingId).toBe('column-2')
+  })
+})

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/column-rename.ts

@@ -0,0 +1,40 @@
+import type { TableUndoAction } from '@/stores/table/types'
+
+type RenameColumnUndoAction = Extract<TableUndoAction, { type: 'rename-column' }>
+
+interface PersistColumnRenameOptions {
+  columnId: string
+  oldName: string
+  newName: string
+  persist: () => Promise<unknown>
+  pushUndo: (action: RenameColumnUndoAction) => void
+  onRenamed: () => void
+}
+
+export async function persistColumnRename({
+  columnId,
+  oldName,
+  newName,
+  persist,
+  pushUndo,
+  onRenamed,
+}: PersistColumnRenameOptions): Promise<void> {
+  await persist()
+  pushUndo({ type: 'rename-column', oldName, newName, columnId })
+  onRenamed()
+}
+
+interface InlineRenameSession {
+  isSaving: boolean
+  startRename: (id: string, currentName: string) => void
+}
+
+export function tryStartColumnRename(
+  session: InlineRenameSession,
+  columnId: string,
+  currentName: string
+): boolean {
+  if (session.isSaving) return false
+  session.startRename(columnId, currentName)
+  return true
+}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx

@@ -32,6 +32,10 @@ import { cellValueFilterConditions } from '@/lib/table/query-builder/cell-filter
 import { SEARCH_DEBOUNCE_MS } from '@/lib/url-state'
 import { FindBar } from '@/app/workspace/[workspaceId]/components'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
+import {
+  persistColumnRename,
+  tryStartColumnRename,
+} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/column-rename'
 import { getTimezoneEditBlockedMessage } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/timezone-editing'
 import type { RemoteTableSelection } from '@/app/workspace/[workspaceId]/tables/[tableId]/hooks/use-table-room'
 import type { BlockedTableAction } from '@/app/workspace/[workspaceId]/tables/[tableId]/lock-copy'
@@ -1511,22 +1515,28 @@ export function TableGrid({
   const columnRename = useInlineRename({
     // `columnName` is the column id; record the prior display name + id so undo
     // restores the label (not the id) and targets the right column.
-    onSave: (columnName, newName) => {
+    onSave: async (columnName, newName) => {
       const oldName = columnsRef.current.find((c) => c.key === columnName)?.name ?? columnName
-      pushUndoRef.current({ type: 'rename-column', oldName, newName, columnId: columnName })
-      handleColumnRename(columnName, newName)
-      return updateColumnMutation
-        .mutateAsync({ columnName, updates: { name: newName } })
-        .catch((error: unknown) => {
-          if (isValidationError(error)) {
-            toast.error(extractValidationIssues(error)[0]?.message ?? getErrorMessage(error))
-          }
-          setRenameErrorColumnId(columnName)
-          throw error
+      try {
+        await persistColumnRename({
+          columnId: columnName,
+          oldName,
+          newName,
+          persist: () =>
+            updateColumnMutation.mutateAsync({ columnName, updates: { name: newName } }),
+          pushUndo: pushUndoRef.current,
+          onRenamed: () => handleColumnRename(columnName, newName),
         })
+      } catch (error) {
+        if (isValidationError(error)) {
+          toast.error(extractValidationIssues(error)[0]?.message ?? getErrorMessage(error))
+        }
+        setRenameErrorColumnId(columnName)
+        throw error
+      }
     },
   })
-  const columnRenameRef = useRef(columnRename)
+  const columnRenameRef = useRef<ReturnType<typeof useInlineRename>>(columnRename)
   columnRenameRef.current = columnRename
 
   const handleRenameValueChange = useCallback((value: string) => {
@@ -4035,14 +4045,13 @@ export function TableGrid({
     [onOpenColumnConfig, onOpenWorkflowConfig, workflowGroupById]
   )
 
-  const handleRenameColumn = useCallback(
-    (columnName: string) => {
-      setRenameErrorColumnId(null)
-      const column = columnsRef.current.find((candidate) => candidate.key === columnName)
-      columnRename.startRename(columnName, column?.name ?? columnName)
-    },
-    [columnRename.startRename]
-  )
+  const handleRenameColumn = useCallback((columnName: string) => {
+    const column = columnsRef.current.find((candidate) => candidate.key === columnName)
+    if (!tryStartColumnRename(columnRenameRef.current, columnName, column?.name ?? columnName)) {
+      return
+    }
+    setRenameErrorColumnId(null)
+  }, [])
 
   const handleConfigureWorkflowGroup = useCallback(
     (groupId: string) => {