fix(tables): keep sidebar renaming in reference foundation

Author: j15z

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

@@ -104,6 +104,12 @@ 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')
@@ -184,7 +190,8 @@ describe('ColumnConfigSidebar', () => {
     expect(mockUpdateColumn).not.toHaveBeenCalled()
   })
 
-  it('edits Reference configuration without exposing column renaming', async () => {
+  it('edits a Reference column name and target table together', async () => {
+    const onColumnRename = vi.fn()
     await act(async () => {
       root.render(
         <ColumnConfigSidebar
@@ -198,20 +205,26 @@ describe('ColumnConfigSidebar', () => {
           }}
           workspaceId='workspace-1'
           tableId='table-current'
+          onColumnRename={onColumnRename}
         />
       )
     })
 
-    expect(container).not.toHaveTextContent('Column name')
-    expect(container.querySelector('#column-sidebar-name')).toBeNull()
+    const nameInput = container.querySelector<HTMLInputElement>('#column-sidebar-name')
+    expect(nameInput?.value).toBe('Related row')
 
+    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: { referenceTableId: 'table-customers' },
+      updates: {
+        name: 'Renamed relation',
+        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,6 +57,9 @@ 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
 }
 
 /**
@@ -106,6 +109,7 @@ function ColumnConfigBody({
   tableRowTtlEnabled,
   workspaceId,
   tableId,
+  onColumnRename,
 }: ColumnConfigBodyProps) {
   const updateColumn = useUpdateColumn({ workspaceId, tableId })
   const addColumn = useAddTableColumn({ workspaceId, tableId })
@@ -166,7 +170,7 @@ function ColumnConfigBody({
   }
 
   async function handleSave() {
-    if (config.mode === 'create' && !trimmedName) {
+    if (!trimmedName) {
       setShowValidation(true)
       return
     }
@@ -198,6 +202,7 @@ function ColumnConfigBody({
         return
       }
 
+      const renamed = trimmedName !== (existingColumn?.name ?? config.columnName)
       const typeChanged = !!existingColumn && existingColumn.type !== typeInput
       const uniqueChanged =
         supportsUnique && !!existingColumn && !!existingColumn.unique !== uniqueInput
@@ -211,13 +216,15 @@ 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 } : {}),
@@ -236,7 +243,8 @@ function ColumnConfigBody({
       }
 
       await updateColumn.mutateAsync({ columnName: config.columnName, updates })
-      toast.success(`Saved "${existingColumn?.name ?? config.columnName}"`)
+      if (renamed) onColumnRename?.(config.columnName, trimmedName)
+      toast.success(`Saved "${trimmedName}"`)
       onClose()
     } catch (err) {
       if (isValidationError(err)) {
@@ -269,25 +277,23 @@ function ColumnConfigBody({
       </div>
 
       <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
-        {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>
-        )}
+        <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

@@ -1659,6 +1659,7 @@ export function Table({
         }
         workspaceId={workspaceId}
         tableId={tableId}
+        onColumnRename={onColumnRename}
       />
       <EnrichmentsSidebar
         open={slideout.kind === 'enrichments'}