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

@@ -103,12 +103,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')
@@ -196,8 +190,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
@@ -213,27 +206,21 @@ describe('ColumnConfigSidebar', () => {
           tableRowTtlEnabled={false}
           workspaceId='workspace-1'
           tableId='table-current'
-          onColumnRename={onColumnRename}
           referenceColumnsEnabled
         />
       )
     })
 
-    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 an existing Reference column visible but not retargetable when disabled', async () => {

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

@@ -77,9 +77,6 @@ interface ColumnConfigSidebarProps {
   readOnly?: boolean
   /** Why saving is unavailable; surfaced on the disabled Save button. */
   readOnlyReason?: 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
 }
 
 /**
@@ -132,7 +129,6 @@ function ColumnConfigBody({
   tableId,
   readOnly,
   readOnlyReason,
-  onColumnRename,
 }: ColumnConfigBodyProps) {
   const updateColumn = useUpdateColumn({ workspaceId, tableId })
   const addColumn = useAddTableColumn({ workspaceId, tableId })
@@ -210,7 +206,7 @@ function ColumnConfigBody({
   async function handleSave() {
     // Belt and braces: the button is disabled, and the server refuses too.
     if (readOnly) return
-    if (!trimmedName) {
+    if (config.mode === 'create' && !trimmedName) {
       setShowValidation(true)
       return
     }
@@ -242,7 +238,6 @@ function ColumnConfigBody({
         return
       }
 
-      const renamed = trimmedName !== (existingColumn?.name ?? config.columnName)
       const typeChanged = !!existingColumn && existingColumn.type !== typeInput
       const uniqueChanged =
         supportsUnique && !!existingColumn && !!existingColumn.unique !== uniqueInput
@@ -256,15 +251,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 } : {}),
@@ -283,8 +276,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)) {
@@ -321,23 +313,25 @@ function ColumnConfigBody({
             including the comboboxes' trigger buttons; `contents` keeps the
             existing layout. Values stay readable and selectable. */}
         <fieldset disabled={readOnly} className='contents'>
-          <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

@@ -328,9 +328,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) => {
@@ -1737,7 +1737,6 @@ export function Table({
             ? LOCK_TOOLTIPS.schema
             : 'You don’t have permission to change columns.'
         }
-        onColumnRename={onColumnRename}
       />
       <EnrichmentsSidebar
         open={slideout.kind === 'enrichments'}