improvement(tables): restore sidebar column configuration

Author: j15z

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

@@ -51,11 +51,7 @@ vi.mock('@sim/emcn', () => ({
   },
   ChipInput: (props: React.InputHTMLAttributes<HTMLInputElement>) => <input {...props} />,
   FieldDivider: () => <hr />,
-  Label: ({ children, ...props }: React.LabelHTMLAttributes<HTMLLabelElement>) => (
-    <label htmlFor={props.htmlFor ?? 'test-field'} {...props}>
-      {children}
-    </label>
-  ),
+  Label: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
   Switch: ({ checked }: { checked?: boolean }) => (
     <button type='button' aria-pressed={checked}>
       Toggle

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

@@ -22,12 +22,16 @@ interface ColumnHeaderMenuProps {
   isRenaming: boolean
   isColumnSelected: boolean
   renameValue: string
+  /** Marks a refused inline rename until the user changes or cancels it. */
+  renameError?: boolean
   onRenameValueChange: (value: string) => void
   onRenameSubmit: () => void
   onRenameCancel: () => void
   onColumnSelect: (colIndex: number, shiftKey: boolean) => void
   onInsertLeft: (columnName: string) => void
   onInsertRight: (columnName: string) => void
+  /** Starts inline renaming for a plain or enrichment column. */
+  onRenameColumn?: (columnName: string) => void
   /** Opens the table targeted by a Reference column. */
   onGoToReferenceTable?: (tableId: string) => void
   onDeleteColumn: (columnName: string) => void
@@ -76,12 +80,14 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
   isRenaming,
   isColumnSelected,
   renameValue,
+  renameError,
   onRenameValueChange,
   onRenameSubmit,
   onRenameCancel,
   onColumnSelect,
   onInsertLeft,
   onInsertRight,
+  onRenameColumn,
   onGoToReferenceTable,
   onDeleteColumn,
   onResizeStart,
@@ -124,6 +130,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
       ? 'Hide column'
       : 'Delete column'
     : undefined
+  const isWorkflowOutput = Boolean(column.workflowGroupId && ownGroup?.type !== 'enrichment')
   useEffect(() => {
     if (isRenaming && renameInputRef.current) {
       renameInputRef.current.focus()
@@ -305,7 +312,11 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
               if (e.key === 'Escape') onRenameCancel()
             }}
             onBlur={onRenameSubmit}
-            className='ml-1.5 min-w-0 flex-1 border-0 bg-transparent p-0 text-[var(--text-primary)] text-small outline-hidden focus:outline-hidden focus:ring-0'
+            aria-invalid={renameError || undefined}
+            className={cn(
+              'ml-1.5 min-w-0 flex-1 border-0 bg-transparent p-0 text-small outline-hidden focus:outline-hidden focus:ring-0',
+              renameError ? 'text-[var(--text-error)]' : 'text-[var(--text-primary)]'
+            )}
           />
         </div>
       ) : readOnly ? (
@@ -370,6 +381,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
             onOpenConfig={onOpenConfig}
             schemaLockedReason={schemaLockedReason}
             deleteLockedReason={deleteLockedReason}
+            onRenameColumn={isWorkflowOutput ? undefined : onRenameColumn}
             onGoToReferenceTable={onGoToReferenceTable}
             onInsertLeft={onInsertLeft}
             onInsertRight={onInsertRight}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.test.tsx

@@ -84,7 +84,11 @@ afterEach(() => {
   container.remove()
 })
 
-function renderMenu(column: ColumnDefinition, onGoToReferenceTable: (tableId: string) => void) {
+function renderMenu(
+  column: ColumnDefinition,
+  onGoToReferenceTable: (tableId: string) => void,
+  onRenameColumn?: (columnName: string) => void
+) {
   act(() => {
     root.render(
       <ColumnOptionsMenu
@@ -102,7 +106,9 @@ function renderMenu(column: ColumnDefinition, onGoToReferenceTable: (tableId: st
         onInsertLeft={vi.fn()}
         onInsertRight={vi.fn()}
         onDeleteColumn={vi.fn()}
+        onOpenConfig={vi.fn()}
         onGoToReferenceTable={onGoToReferenceTable}
+        onRenameColumn={onRenameColumn}
       />
     )
   })
@@ -196,3 +202,14 @@ describe('ColumnHeaderMenu read-only Reference navigation', () => {
     expect(container.querySelector('button[aria-label="Column options"]')).toBeNull()
   })
 })
+
+describe('ColumnOptionsMenu editing', () => {
+  it('starts inline rename from the column menu', () => {
+    const onRenameColumn = vi.fn()
+    renderMenu({ id: 'col-name', name: 'Name', type: 'string' }, vi.fn(), onRenameColumn)
+
+    act(() => findButton('Rename column')?.click())
+
+    expect(onRenameColumn).toHaveBeenCalledWith('col-name')
+  })
+})

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx

@@ -76,6 +76,8 @@ interface ColumnOptionsMenuProps {
   schemaLockedReason?: string
   /** Why deleting is unavailable; disables the destructive column row. */
   deleteLockedReason?: string
+  /** Starts inline renaming for a plain or enrichment column. */
+  onRenameColumn?: (columnName: string) => void
   /** Opens the table targeted by a Reference column. */
   onGoToReferenceTable?: (tableId: string) => void
   onInsertLeft: (columnName: string) => void
@@ -137,9 +139,9 @@ function MenuRow({ reason, children }: { reason?: string; children: React.ReactE
 /**
  * Shared column-options dropdown rendered next to the column header chevron
  * AND on right-click of the workflow group meta cell. Anchors to a fixed
- * position passed in (so callers can place it under the chevron, or at the
- * cursor for context-menu use). Rename / change type / unique live in the
- * column sidebar (opened by Edit column).
+ * position passed in so callers can place it under the chevron or at the
+ * cursor. Rename starts in the header; type, uniqueness, and type-specific
+ * configuration live in the sidebar opened by Edit column.
  */
 export function ColumnOptionsMenu({
   open,
@@ -150,6 +152,7 @@ export function ColumnOptionsMenu({
   onOpenConfig,
   schemaLockedReason,
   deleteLockedReason,
+  onRenameColumn,
   onGoToReferenceTable,
   onInsertLeft,
   onInsertRight,
@@ -276,6 +279,17 @@ export function ColumnOptionsMenu({
             Edit column
           </DropdownMenuItem>
         </MenuRow>
+        {onRenameColumn && (
+          <MenuRow reason={schemaLockedReason}>
+            <DropdownMenuItem
+              disabled={Boolean(schemaLockedReason)}
+              onSelect={() => onRenameColumn(column.key)}
+            >
+              <Pencil />
+              Rename column
+            </DropdownMenuItem>
+          </MenuRow>
+        )}
         {onPinToggle && (
           <DropdownMenuItem onSelect={() => onPinToggle(column.key)}>
             {isPinned ? <PinOff /> : <Pin />}

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

@@ -11,6 +11,7 @@ import { assessTextPaste, formatPasteLimit, PASTE_LIMITS } from '@sim/utils/past
 import { useVirtualizer } from '@tanstack/react-virtual'
 import { useParams, useRouter } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
+import { extractValidationIssues, isValidationError } from '@/lib/api/client/errors'
 import type { RunLimit, RunMode, TableFindMatch } from '@/lib/api/contracts/tables'
 import { attachSelectionContextToClipboard } from '@/lib/copilot/chat/selection-clipboard'
 import { captureEvent } from '@/lib/posthog/client'
@@ -93,6 +94,7 @@ import {
   chipRowCount,
   classifyExecStatusMix,
   collectRowSnapshots,
+  columnNameIssue,
   computeNormalizedSelection,
   drainTargetForChip,
   type ExecStatusMix,
@@ -1583,16 +1585,60 @@ export function TableGrid({
   const handleFindCloseRef = useRef(handleFindClose)
   handleFindCloseRef.current = handleFindClose
 
+  const [renameError, setRenameError] = useState(false)
+
   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) => {
       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 } })
+      return updateColumnMutation
+        .mutateAsync({ columnName, updates: { name: newName } })
+        .catch((error: unknown) => {
+          if (isValidationError(error)) {
+            toast.error(extractValidationIssues(error)[0]?.message ?? getErrorMessage(error))
+          }
+          setRenameError(true)
+          throw error
+        })
     },
   })
+  const columnRenameRef = useRef(columnRename)
+  columnRenameRef.current = columnRename
+
+  const handleRenameValueChange = useCallback((value: string) => {
+    setRenameError(false)
+    columnRenameRef.current.setEditValue(value)
+  }, [])
+
+  /** Keeps invalid names in the header so the user can correct them in place. */
+  const handleRenameSubmit = useCallback(() => {
+    const { editingId, editValue, submitRename } = columnRenameRef.current
+    const trimmedName = editValue.trim()
+    const currentColumn = columnsRef.current.find((column) => column.key === editingId)
+    if (trimmedName && currentColumn && trimmedName !== currentColumn.name) {
+      const issue = columnNameIssue(
+        trimmedName,
+        schemaColumnsRef.current
+          .filter((column) => getColumnId(column) !== editingId)
+          .map((column) => column.name)
+      )
+      if (issue) {
+        toast.error(issue)
+        setRenameError(true)
+        return
+      }
+    }
+    setRenameError(false)
+    void submitRename()
+  }, [])
+
+  const handleRenameCancel = useCallback(() => {
+    setRenameError(false)
+    columnRenameRef.current.cancelRename()
+  }, [])
 
   const toggleBooleanCell = useCallback(
     (rowId: string, columnName: string, currentValue: unknown) => {
@@ -4125,6 +4171,15 @@ export function TableGrid({
     [onOpenColumnConfig, onOpenWorkflowConfig, workflowGroupById]
   )
 
+  const handleRenameColumn = useCallback(
+    (columnName: string) => {
+      setRenameError(false)
+      const column = columnsRef.current.find((candidate) => candidate.key === columnName)
+      columnRename.startRename(columnName, column?.name ?? columnName)
+    },
+    [columnRename.startRename]
+  )
+
   const handleConfigureWorkflowGroup = useCallback(
     (groupId: string) => {
       const group = workflowGroupById.get(groupId)
@@ -5021,9 +5076,10 @@ export function TableGrid({
                             renameValue={
                               columnRename.editingId === column.key ? columnRename.editValue : ''
                             }
-                            onRenameValueChange={columnRename.setEditValue}
-                            onRenameSubmit={columnRename.submitRename}
-                            onRenameCancel={columnRename.cancelRename}
+                            renameError={renameError && columnRename.editingId === column.key}
+                            onRenameValueChange={handleRenameValueChange}
+                            onRenameSubmit={handleRenameSubmit}
+                            onRenameCancel={handleRenameCancel}
                             onColumnSelect={handleColumnSelect}
                             // Required props here, and the menu is already
                             // suppressed for non-editors by `readOnly`.
@@ -5054,6 +5110,9 @@ export function TableGrid({
                             deleteLockedReason={
                               locks?.deleteLocked ? LOCK_TOOLTIPS.delete : undefined
                             }
+                            onRenameColumn={
+                              userPermissions.canEdit ? handleRenameColumn : undefined
+                            }
                             onGoToReferenceTable={
                               referenceColumnsEnabled ? handleGoToReferenceTable : undefined
                             }

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

@@ -12,6 +12,7 @@ import {
   buildTableSelectionContext,
   canWriteRowsWithChip,
   chipRowCount,
+  columnNameIssue,
   drainTargetForChip,
   expandToDisplayColumns,
   horizontalEdgeScrollVelocity,
@@ -235,3 +236,23 @@ describe('drainTargetForChip', () => {
     expect(drainTargetForChip(0)).toBe(MAX_TABLE_SELECTION_ROWS)
   })
 })
+
+describe('columnNameIssue', () => {
+  it('accepts a pattern-safe, unused name', () => {
+    expect(columnNameIssue('email_address', ['name', 'status'])).toBeNull()
+  })
+
+  it('refuses invalid patterns and names that begin with a digit', () => {
+    expect(columnNameIssue('New Text', [])).toMatch(/letter or underscore/)
+    expect(columnNameIssue('1st', [])).toMatch(/letter or underscore/)
+  })
+
+  it('refuses a name longer than the column-name limit', () => {
+    const longName = 'a'.repeat(TABLE_LIMITS.MAX_COLUMN_NAME_LENGTH + 1)
+    expect(columnNameIssue(longName, [])).toMatch(/characters or less/)
+  })
+
+  it('refuses an existing name case-insensitively', () => {
+    expect(columnNameIssue('EMAIL', ['email'])).toBe('A column named "email" already exists')
+  })
+})

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

@@ -13,7 +13,7 @@ import type {
 } from '@/lib/table'
 import { getColumnId } from '@/lib/table/column-keys'
 import { columnReferencedTableIds } from '@/lib/table/column-types'
-import { TABLE_LIMITS } from '@/lib/table/constants'
+import { NAME_PATTERN, TABLE_LIMITS } from '@/lib/table/constants'
 import { areGroupDepsSatisfied, areOutputsFilled } from '@/lib/table/deps'
 import type {
   DisplayColumn,
@@ -513,3 +513,25 @@ export function canWriteRowsWithChip(opts: {
   if (!opts.hasContext || !opts.complete) return false
   return opts.rowCount > 0 && opts.rowCount <= TABLE_LIMITS.MAX_COPY_ROWS
 }
+
+/**
+ * Returns a user-facing reason that a proposed column name cannot be saved,
+ * or `null` when the name is valid and unused.
+ *
+ * @param takenNames Names of every other column in the table.
+ */
+export function columnNameIssue(name: string, takenNames: Iterable<string>): string | null {
+  if (name.length > TABLE_LIMITS.MAX_COLUMN_NAME_LENGTH) {
+    return `Column names must be ${TABLE_LIMITS.MAX_COLUMN_NAME_LENGTH} characters or less`
+  }
+  if (!NAME_PATTERN.test(name)) {
+    return 'Column names must start with a letter or underscore and use only letters, numbers, and underscores'
+  }
+  const lowerName = name.toLowerCase()
+  for (const takenName of takenNames) {
+    if (takenName.toLowerCase() === lowerName) {
+      return `A column named "${takenName}" already exists`
+    }
+  }
+  return null
+}