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

@@ -76,6 +76,9 @@ 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
 }
 
 /**
@@ -127,6 +130,7 @@ function ColumnConfigBody({
   tableId,
   readOnly,
   readOnlyReason,
+  onColumnRename,
 }: ColumnConfigBodyProps) {
   const updateColumn = useUpdateColumn({ workspaceId, tableId })
   const addColumn = useAddTableColumn({ workspaceId, tableId })
@@ -189,7 +193,7 @@ function ColumnConfigBody({
   async function handleSave() {
     // Belt and braces: the button is disabled, and the server refuses too.
     if (readOnly) return
-    if (config.mode === 'create' && !trimmedName) {
+    if (!trimmedName) {
       setShowValidation(true)
       return
     }
@@ -221,6 +225,7 @@ function ColumnConfigBody({
         return
       }
 
+      const renamed = trimmedName !== (existingColumn?.name ?? config.columnName)
       const typeChanged = !!existingColumn && existingColumn.type !== typeInput
       const uniqueChanged =
         supportsUnique && !!existingColumn && !!existingColumn.unique !== uniqueInput
@@ -234,13 +239,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 } : {}),
@@ -259,7 +266,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)) {
@@ -296,25 +304,23 @@ function ColumnConfigBody({
             including the comboboxes' trigger buttons; `contents` keeps the
             existing layout. Values stay readable and selectable. */}
         <fieldset disabled={readOnly} className='contents'>
-          {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

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