improvement(tables): restore sidebar column configuration

Author: j15z

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

@@ -48,9 +48,7 @@ vi.mock('@sim/emcn', () => ({
   },
   ChipInput: (props: React.InputHTMLAttributes<HTMLInputElement>) => <input {...props} />,
   FieldDivider: () => <hr />,
-  Label: ({ children, ...props }: React.LabelHTMLAttributes<HTMLLabelElement>) => (
-    <label {...props}>{children}</label>
-  ),
+  Label: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
   Switch: ({ checked }: { checked?: boolean }) => (
     <button type='button' aria-pressed={checked}>
       Toggle
@@ -71,7 +69,7 @@ vi.mock('@/lib/table/column-types', () => ({
     { id: 'select', label: 'Select', icon: () => null },
     { id: 'reference', label: 'Reference', icon: () => null },
   ],
-  columnTypeOf: (type: string) => ({ supportsUnique: type !== 'select' }),
+  columnTypeById: (type: string) => ({ supportsUnique: type !== 'select' }),
 }))
 
 vi.mock('@/hooks/queries/tables', () => ({

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

@@ -6,6 +6,7 @@ import { X } from '@sim/emcn/icons'
 import { toError } from '@sim/utils/errors'
 import { findValidationIssue, isValidationError } from '@/lib/api/client/errors'
 import type { ColumnDefinition, SelectOption } from '@/lib/table'
+import { columnTypeById } from '@/lib/table/column-types'
 import {
   DEFAULT_CURRENCY_CODE,
   getCurrencyOptions,
@@ -16,7 +17,6 @@ import {
   RequiredLabel,
 } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/sidebar-fields'
 import { useAddTableColumn, useTablesList, useUpdateColumn } from '@/hooks/queries/tables'
-import { columnTypeOf } from '@/lib/table/column-types'
 import { SelectOptionsEditor } from '../select-field'
 import { PLAIN_COLUMN_TYPE_OPTIONS } from './column-types'
 
@@ -139,7 +139,7 @@ function ColumnConfigBody({
   const wantsOptions = isSelectType(typeInput)
   const wantsCurrency = typeInput === 'currency'
   const wantsReference = typeInput === 'reference'
-  const supportsUnique = columnTypeOf(typeInput).supportsUnique
+  const supportsUnique = columnTypeById(typeInput).supportsUnique
   const { data: workspaceTables = [] } = useTablesList(workspaceId, 'active', {
     enabled: wantsReference,
   })

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

@@ -1,4 +1,4 @@
-export type { ColumnConfig, ColumnConfigurationMetadata } from './column-config-sidebar'
+export type { ColumnConfig } from './column-config-sidebar'
 export { ColumnConfigSidebar } from './column-config-sidebar'
 export {
   COLUMN_TYPE_OPTIONS,

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

@@ -18,12 +18,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
@@ -70,12 +74,14 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
   isRenaming,
   isColumnSelected,
   renameValue,
+  renameError,
   onRenameValueChange,
   onRenameSubmit,
   onRenameCancel,
   onColumnSelect,
   onInsertLeft,
   onInsertRight,
+  onRenameColumn,
   onGoToReferenceTable,
   onDeleteColumn,
   onResizeStart,
@@ -118,6 +124,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()
@@ -298,7 +305,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-none focus:outline-none 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-none focus:outline-none focus:ring-0',
+              renameError ? 'text-[var(--text-error)]' : 'text-[var(--text-primary)]'
+            )}
           />
         </div>
       ) : readOnly ? (
@@ -349,6 +360,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
             column={column}
             deleteLabel={deleteLabel}
             onOpenConfig={onOpenConfig}
+            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

@@ -75,7 +75,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
@@ -93,7 +97,9 @@ function renderMenu(column: ColumnDefinition, onGoToReferenceTable: (tableId: st
         onInsertLeft={vi.fn()}
         onInsertRight={vi.fn()}
         onDeleteColumn={vi.fn()}
+        onOpenConfig={vi.fn()}
         onGoToReferenceTable={onGoToReferenceTable}
+        onRenameColumn={onRenameColumn}
       />
     )
   })
@@ -135,3 +141,14 @@ describe('ColumnOptionsMenu Reference navigation', () => {
     expect(findButton('Go to Reference Table')).toBeUndefined()
   })
 })
+
+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

@@ -67,10 +67,12 @@ interface ColumnOptionsMenuProps {
   column: DisplayColumn
   /** Override for the destructive item's label. Defaults to "Delete column"
    *  for both plain columns and workflow groups. Use "Hide column" when the
-  *  destructive action is non-lossy (workflow-output column where removing
-  *  it leaves the group with siblings). */
+   *  destructive action is non-lossy (workflow-output column where removing
+   *  it leaves the group with siblings). */
   deleteLabel?: string
   onOpenConfig: (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
   onInsertLeft: (columnName: string) => void
@@ -114,9 +116,9 @@ interface ColumnOptionsMenuProps {
 /**
  * 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,
@@ -125,6 +127,7 @@ export function ColumnOptionsMenu({
   column,
   deleteLabel,
   onOpenConfig,
+  onRenameColumn,
   onGoToReferenceTable,
   onInsertLeft,
   onInsertRight,
@@ -243,6 +246,12 @@ export function ColumnOptionsMenu({
           <Pencil />
           Edit column
         </DropdownMenuItem>
+        {onRenameColumn && (
+          <DropdownMenuItem onSelect={() => onRenameColumn(column.key)}>
+            <Pencil />
+            Rename column
+          </DropdownMenuItem>
+        )}
         {onPinToggle && (
           <DropdownMenuItem onSelect={() => onPinToggle(column.key)}>
             {isPinned ? <PinOff /> : <Pin />}

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

@@ -10,6 +10,7 @@ import { getErrorMessage } from '@sim/utils/errors'
 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'
@@ -75,6 +76,7 @@ import {
   chipRowCount,
   classifyExecStatusMix,
   collectRowSnapshots,
+  columnNameIssue,
   computeNormalizedSelection,
   drainTargetForChip,
   type ExecStatusMix,
@@ -1481,16 +1483,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) => {
@@ -3922,6 +3968,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)
@@ -4801,9 +4856,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`.
@@ -4828,6 +4884,9 @@ export function TableGrid({
                             workflowGroups={tableWorkflowGroups}
                             sourceInfo={columnSourceInfo.get(column.key)}
                             onOpenConfig={handleConfigureColumn}
+                            onRenameColumn={
+                              userPermissions.canEdit ? handleRenameColumn : undefined
+                            }
                             onGoToReferenceTable={handleGoToReferenceTable}
                             onViewWorkflow={handleViewWorkflow}
                             onSortColumn={onSortColumn}

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

@@ -12,6 +12,7 @@ import {
   buildTableSelectionContext,
   canWriteRowsWithChip,
   chipRowCount,
+  columnNameIssue,
   drainTargetForChip,
   horizontalEdgeScrollVelocity,
   selectedColumnIds,
@@ -197,3 +198,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

@@ -12,7 +12,7 @@ import type {
   WorkflowGroup,
 } from '@/lib/table'
 import { getColumnId } from '@/lib/table/column-keys'
-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 { ChatContext } from '@/stores/panel'
 import type { DeletedRowSnapshot } from '@/stores/table/types'
@@ -486,3 +486,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
+}