fix(tables): keep column rename migration atomic

Author: j15z

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.test.tsx

@@ -100,12 +100,6 @@ function findButton(label: string): HTMLButtonElement | undefined {
   )
 }
 
-function setInputValue(input: HTMLInputElement, value: string): void {
-  const valueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set
-  valueSetter?.call(input, value)
-  input.dispatchEvent(new Event('input', { bubbles: true }))
-}
-
 beforeEach(() => {
   globalThis.IS_REACT_ACT_ENVIRONMENT = true
   container = document.createElement('div')
@@ -186,8 +180,7 @@ describe('ColumnConfigSidebar', () => {
     expect(mockUpdateColumn).not.toHaveBeenCalled()
   })
 
-  it('edits a Reference column name and target table together', async () => {
-    const onColumnRename = vi.fn()
+  it('edits Reference configuration without exposing column renaming', async () => {
     await act(async () => {
       root.render(
         <ColumnConfigSidebar
@@ -201,26 +194,20 @@ describe('ColumnConfigSidebar', () => {
           }}
           workspaceId='workspace-1'
           tableId='table-current'
-          onColumnRename={onColumnRename}
         />
       )
     })
 
-    const nameInput = container.querySelector<HTMLInputElement>('#column-sidebar-name')
-    expect(nameInput?.value).toBe('Related row')
+    expect(container).not.toHaveTextContent('Column name')
+    expect(container.querySelector('#column-sidebar-name')).toBeNull()
 
-    act(() => setInputValue(nameInput!, 'Renamed relation'))
     act(() => findCombobox('Select table')?.onChange?.('table-customers'))
     await act(async () => findButton('Save')?.click())
 
     expect(mockUpdateColumn).toHaveBeenCalledWith({
       columnName: 'col-reference',
-      updates: {
-        name: 'Renamed relation',
-        referenceTableId: 'table-customers',
-      },
+      updates: { referenceTableId: 'table-customers' },
     })
-    expect(onColumnRename).toHaveBeenCalledWith('col-reference', 'Renamed relation')
   })
 
   it('keeps Select options in the edit sidebar', async () => {

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx

@@ -57,9 +57,6 @@ interface ColumnConfigSidebarProps {
   tableRowTtlEnabled: boolean
   workspaceId: string
   tableId: string
-  /** Notify parent of a rename so it can rewrite local `columnOrder` /
-   *  `columnWidths` keys that reference the old name. */
-  onColumnRename?: (oldName: string, newName: string) => void
 }
 
 /**
@@ -109,7 +106,6 @@ function ColumnConfigBody({
   tableRowTtlEnabled,
   workspaceId,
   tableId,
-  onColumnRename,
 }: ColumnConfigBodyProps) {
   const updateColumn = useUpdateColumn({ workspaceId, tableId })
   const addColumn = useAddTableColumn({ workspaceId, tableId })
@@ -170,7 +166,7 @@ function ColumnConfigBody({
   }
 
   async function handleSave() {
-    if (!trimmedName) {
+    if (config.mode === 'create' && !trimmedName) {
       setShowValidation(true)
       return
     }
@@ -202,7 +198,6 @@ function ColumnConfigBody({
         return
       }
 
-      const renamed = trimmedName !== (existingColumn?.name ?? config.columnName)
       const typeChanged = !!existingColumn && existingColumn.type !== typeInput
       const uniqueChanged =
         supportsUnique && !!existingColumn && !!existingColumn.unique !== uniqueInput
@@ -216,15 +211,13 @@ function ColumnConfigBody({
         wantsReference && existingColumn?.referenceTableId !== referenceTableInput
 
       const updates: {
-        name?: string
         type?: ColumnDefinition['type']
         unique?: boolean
         options?: SelectOption[]
         multiple?: boolean
         currencyCode?: string
         referenceTableId?: string
       } = {
-        ...(renamed ? { name: trimmedName } : {}),
         ...(typeChanged ? { type: typeInput } : {}),
         ...(uniqueChanged ? { unique: uniqueInput } : {}),
         ...(uniqueCleared ? { unique: false } : {}),
@@ -243,8 +236,7 @@ function ColumnConfigBody({
       }
 
       await updateColumn.mutateAsync({ columnName: config.columnName, updates })
-      if (renamed) onColumnRename?.(config.columnName, trimmedName)
-      toast.success(`Saved "${trimmedName}"`)
+      toast.success(`Saved "${existingColumn?.name ?? config.columnName}"`)
       onClose()
     } catch (err) {
       if (isValidationError(err)) {
@@ -277,23 +269,25 @@ function ColumnConfigBody({
       </div>
 
       <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
-        <div className='flex flex-col gap-[9.5px]'>
-          <RequiredLabel htmlFor='column-sidebar-name'>Column name</RequiredLabel>
-          <ChipInput
-            id='column-sidebar-name'
-            value={nameInput}
-            onChange={(e) => {
-              setNameInput(e.target.value)
-              if (nameError) setNameError(null)
-            }}
-            spellCheck={false}
-            autoComplete='off'
-            error={Boolean((showValidation && !trimmedName) || nameError)}
-            aria-invalid={(showValidation && !trimmedName) || nameError ? true : undefined}
-          />
-          {showValidation && !trimmedName && <FieldError message='Column name is required' />}
-          {nameError && !(showValidation && !trimmedName) && <FieldError message={nameError} />}
-        </div>
+        {config.mode === 'create' && (
+          <div className='flex flex-col gap-[9.5px]'>
+            <RequiredLabel htmlFor='column-sidebar-name'>Column name</RequiredLabel>
+            <ChipInput
+              id='column-sidebar-name'
+              value={nameInput}
+              onChange={(e) => {
+                setNameInput(e.target.value)
+                if (nameError) setNameError(null)
+              }}
+              spellCheck={false}
+              autoComplete='off'
+              error={Boolean((showValidation && !trimmedName) || nameError)}
+              aria-invalid={(showValidation && !trimmedName) || nameError ? true : undefined}
+            />
+            {showValidation && !trimmedName && <FieldError message='Column name is required' />}
+            {nameError && !(showValidation && !trimmedName) && <FieldError message={nameError} />}
+          </div>
+        )}
 
         {config.mode === 'edit' && (
           <>

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

@@ -313,9 +313,9 @@ export function Table({
   }, [])
 
   /**
-   * Sink populated by the grid: invoked from sidebar `onColumnRename` so the
-   * grid can rewrite its local `columnWidths` / `columnOrder` keys after a
-   * rename. The grid's render assigns to `current`; the wrapper forwards calls.
+   * Sink populated by the grid: invoked from the workflow sidebar after a
+   * rename so the grid can rewrite its local `columnWidths` / `columnOrder`
+   * keys. The grid's render assigns to `current`; the wrapper forwards calls.
    */
   const columnRenameSinkRef = useRef<((oldName: string, newName: string) => void) | null>(null)
   const onColumnRename = (oldName: string, newName: string) => {
@@ -1659,7 +1659,6 @@ export function Table({
         }
         workspaceId={workspaceId}
         tableId={tableId}
-        onColumnRename={onColumnRename}
       />
       <EnrichmentsSidebar
         open={slideout.kind === 'enrichments'}