fix(tables): explain denied actions where the user meets them

Clicking a column header opened the full column editor on a schema-locked
table: every field was editable and Save only failed once the server refused
it. The header click is the primary way into that panel, so it now opens
read-only — values stay readable and selectable, a disabled `<fieldset>` makes
the controls inert, and Save carries the lock reason. Clicking a checkbox cell
on an update-locked table did nothing at all, while the keyboard paths
explained themselves; it now raises the same notice.

The column menu disabled only "Edit column" while "Insert column left/right"
and "Delete column" stayed live and explained the lock after the click. All
four are disabled now, each with a tooltip. A disabled `DropdownMenuItem` sets
`pointer-events: none`, so the tooltip wraps the row rather than the item.
"Hide column" is untouched: hiding a workflow output is a metadata change no
lock covers.

Notices now speak the modal's Allow/Deny vocabulary and name the row that
denies the action, and the tooltip strings live in `lock-copy` instead of
being written out at each call site. Drops the "This table is append-only"
copy, which no path could reach once New row and Shift+Enter started opening
the add-row form.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: j15z

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

@@ -1,7 +1,17 @@
 'use client'
 
 import { useState } from 'react'
-import { Button, ChipCombobox, ChipInput, cn, FieldDivider, Label, Switch, toast } from '@sim/emcn'
+import {
+  Button,
+  ChipCombobox,
+  ChipInput,
+  cn,
+  FieldDivider,
+  Label,
+  Switch,
+  Tooltip,
+  toast,
+} from '@sim/emcn'
 import { X } from '@sim/emcn/icons'
 import { toError } from '@sim/utils/errors'
 import { findValidationIssue, isValidationError } from '@/lib/api/client/errors'
@@ -59,6 +69,15 @@ interface ColumnConfigSidebarProps {
   /** Notify parent of a rename so it can rewrite local `columnOrder` /
    *  `columnWidths` keys that reference the old name. */
   onColumnRename?: (oldName: string, newName: string) => void
+  /**
+   * Opens the panel for reading only — every field is inert and Save is
+   * disabled behind {@link readOnlyReason}. The header click that opens this
+   * sidebar is a primary affordance, so a schema-locked (or read-only) table
+   * shows the column's settings rather than swallowing the click.
+   */
+  readOnly?: boolean
+  /** Why saving is unavailable; surfaced on the disabled Save button. */
+  readOnlyReason?: string
 }
 
 /**
@@ -109,6 +128,8 @@ function ColumnConfigBody({
   workspaceId,
   tableId,
   onColumnRename,
+  readOnly,
+  readOnlyReason,
 }: ColumnConfigBodyProps) {
   const updateColumn = useUpdateColumn({ workspaceId, tableId })
   const addColumn = useAddTableColumn({ workspaceId, tableId })
@@ -154,6 +175,8 @@ function ColumnConfigBody({
   }
 
   async function handleSave() {
+    // Belt and braces: the button is disabled, and the server refuses too.
+    if (readOnly) return
     if (!trimmedName) {
       setShowValidation(true)
       return
@@ -254,118 +277,136 @@ function ColumnConfigBody({
       </div>
 
       <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
-        <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' && (
-          <>
-            <FieldDivider />
-            <div className='flex flex-col gap-[9.5px]'>
-              <RequiredLabel>Type</RequiredLabel>
-              <ChipCombobox
-                options={columnTypeOptionsForTable(allColumns, existingColumn, {
-                  tableRowTtlEnabled,
-                })
-                  .filter((option) => option.type !== 'workflow')
-                  .map((option) => ({
-                    label: option.label,
-                    value: option.type,
-                    icon: option.icon,
-                    disabled: option.disabledReason !== undefined,
-                  }))}
-                value={typeInput}
-                onChange={(v) => setTypeInput(v as ColumnDefinition['type'])}
-                placeholder='Select type'
-                maxHeight={300}
-              />
-            </div>
-          </>
-        )}
+        {/* `disabled` on the fieldset reaches every native control inside,
+            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>
 
-        {wantsCurrency && (
-          <>
-            <FieldDivider />
-            <div className='flex flex-col gap-[9.5px]'>
-              <RequiredLabel>Currency</RequiredLabel>
-              <ChipCombobox
-                options={CURRENCY_COMBOBOX_OPTIONS}
-                value={currencyInput}
-                onChange={setCurrencyInput}
-                placeholder='Select currency'
-                searchable
-                searchPlaceholder='Search currencies'
-                maxHeight={260}
-              />
-            </div>
-          </>
-        )}
+          {config.mode === 'edit' && (
+            <>
+              <FieldDivider />
+              <div className='flex flex-col gap-[9.5px]'>
+                <RequiredLabel>Type</RequiredLabel>
+                <ChipCombobox
+                  options={columnTypeOptionsForTable(allColumns, existingColumn, {
+                    tableRowTtlEnabled,
+                  })
+                    .filter((option) => option.type !== 'workflow')
+                    .map((option) => ({
+                      label: option.label,
+                      value: option.type,
+                      icon: option.icon,
+                      disabled: option.disabledReason !== undefined,
+                    }))}
+                  value={typeInput}
+                  onChange={(v) => setTypeInput(v as ColumnDefinition['type'])}
+                  placeholder='Select type'
+                  maxHeight={300}
+                />
+              </div>
+            </>
+          )}
 
-        {wantsOptions && (
-          <>
-            <FieldDivider />
-            <div className='flex flex-col gap-[9.5px]'>
-              <RequiredLabel>Options</RequiredLabel>
-              <SelectOptionsEditor
-                options={optionsInput}
-                onChange={(next) => {
-                  setOptionsInput(next)
-                  if (optionsError) setOptionsError(null)
-                }}
-              />
-              {optionsError && <FieldError message={optionsError} />}
-            </div>
-            <FieldDivider />
-            <div className='flex items-center justify-between pl-0.5'>
-              <Label htmlFor='column-sidebar-multiple'>Multiselect</Label>
-              <Switch
-                id='column-sidebar-multiple'
-                checked={multipleInput}
-                onCheckedChange={(v) => setMultipleInput(!!v)}
-              />
-            </div>
-          </>
-        )}
+          {wantsCurrency && (
+            <>
+              <FieldDivider />
+              <div className='flex flex-col gap-[9.5px]'>
+                <RequiredLabel>Currency</RequiredLabel>
+                <ChipCombobox
+                  options={CURRENCY_COMBOBOX_OPTIONS}
+                  value={currencyInput}
+                  onChange={setCurrencyInput}
+                  placeholder='Select currency'
+                  searchable
+                  searchPlaceholder='Search currencies'
+                  maxHeight={260}
+                />
+              </div>
+            </>
+          )}
 
-        {/* Select columns don't expose a unique constraint. */}
-        {!wantsOptions && (
-          <>
-            <FieldDivider />
-            <div className='flex flex-col gap-[9.5px]'>
+          {wantsOptions && (
+            <>
+              <FieldDivider />
+              <div className='flex flex-col gap-[9.5px]'>
+                <RequiredLabel>Options</RequiredLabel>
+                <SelectOptionsEditor
+                  options={optionsInput}
+                  onChange={(next) => {
+                    setOptionsInput(next)
+                    if (optionsError) setOptionsError(null)
+                  }}
+                />
+                {optionsError && <FieldError message={optionsError} />}
+              </div>
+              <FieldDivider />
               <div className='flex items-center justify-between pl-0.5'>
-                <Label htmlFor='column-sidebar-unique'>Unique</Label>
+                <Label htmlFor='column-sidebar-multiple'>Multiselect</Label>
                 <Switch
-                  id='column-sidebar-unique'
-                  checked={uniqueInput}
-                  onCheckedChange={(v) => setUniqueInput(!!v)}
+                  id='column-sidebar-multiple'
+                  checked={multipleInput}
+                  onCheckedChange={(v) => setMultipleInput(!!v)}
                 />
               </div>
-            </div>
-          </>
-        )}
+            </>
+          )}
+
+          {/* Select columns don't expose a unique constraint. */}
+          {!wantsOptions && (
+            <>
+              <FieldDivider />
+              <div className='flex flex-col gap-[9.5px]'>
+                <div className='flex items-center justify-between pl-0.5'>
+                  <Label htmlFor='column-sidebar-unique'>Unique</Label>
+                  <Switch
+                    id='column-sidebar-unique'
+                    checked={uniqueInput}
+                    onCheckedChange={(v) => setUniqueInput(!!v)}
+                  />
+                </div>
+              </div>
+            </>
+          )}
+        </fieldset>
       </div>
 
       <div className='flex items-center justify-end gap-2 border-[var(--border)] border-t px-2 py-3'>
         <Button variant='default' size='sm' onClick={onClose}>
-          Cancel
-        </Button>
-        <Button variant='primary' size='sm' onClick={handleSave} disabled={saveDisabled}>
-          {saveDisabled ? 'Saving…' : 'Save'}
+          {readOnly ? 'Close' : 'Cancel'}
         </Button>
+        {readOnly ? (
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <span className='inline-flex'>
+                <Button variant='primary' size='sm' disabled>
+                  Save
+                </Button>
+              </span>
+            </Tooltip.Trigger>
+            {readOnlyReason && <Tooltip.Content>{readOnlyReason}</Tooltip.Content>}
+          </Tooltip.Root>
+        ) : (
+          <Button variant='primary' size='sm' onClick={handleSave} disabled={saveDisabled}>
+            {saveDisabled ? 'Saving…' : 'Save'}
+          </Button>
+        )}
       </div>
     </div>
   )

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

@@ -18,6 +18,7 @@ import {
   type ColumnTypeOption,
   columnTypeOptionsForTable,
 } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar'
+import { LOCK_TOOLTIPS } from '@/app/workspace/[workspaceId]/tables/[tableId]/lock-copy'
 
 const CELL_HEADER =
   'border-[var(--border)] border-r border-b bg-[var(--bg)] px-2 py-[7px] text-left align-middle'
@@ -117,7 +118,7 @@ export function ColumnDropdown({
     const lockedTrigger = (
       <Tooltip.Root>
         <Tooltip.Trigger asChild>{triggerButton}</Tooltip.Trigger>
-        <Tooltip.Content>Changing the table schema is disabled in Table Security.</Tooltip.Content>
+        <Tooltip.Content>{LOCK_TOOLTIPS.schema}</Tooltip.Content>
       </Tooltip.Root>
     )
     return trigger === 'inline-header' ? (

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/expanded-cell-popover.test.tsx

@@ -120,6 +120,9 @@ describe('ExpandedCellPopover', () => {
     expect(getTextarea().readOnly).toBe(true)
     expect(getSaveButton().disabled).toBe(true)
     expect(document.body.textContent).not.toContain(BLOCKED_REASON)
+    // The ↵ half of the shortcut hint would advertise a save that never happens.
+    expect(document.body.textContent).toContain('esc close')
+    expect(document.body.textContent).not.toContain('save ·')
 
     const trigger = getSaveButton().parentElement
     if (!trigger) throw new Error('Missing Save tooltip trigger')
@@ -135,6 +138,7 @@ describe('ExpandedCellPopover', () => {
     render()
     expect(getTextarea().readOnly).toBe(false)
     expect(getSaveButton().disabled).toBe(false)
+    expect(document.body.textContent).toContain('save ·')
 
     typeDraft('Changed text')
     pressEnter()

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

@@ -278,6 +278,11 @@ function ExpandedCellEditor({
       <div className='flex items-center justify-between border-[var(--border)] border-t bg-[var(--surface-2)] px-2 py-1.5'>
         {parseError ? (
           <span className='text-[var(--text-error)] text-caption'>{parseError}</span>
+        ) : saveBlockedReason ? (
+          // Saving is refused, so the ↵ half of the shortcut hint would be a lie.
+          <span className='text-[var(--text-tertiary)] text-caption'>
+            <kbd className='font-mono'>esc</kbd> close
+          </span>
         ) : (
           <span className='text-[var(--text-tertiary)] text-caption'>
             <kbd className='font-mono'>↵</kbd> save · <kbd className='font-mono'>esc</kbd> cancel

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

@@ -15,7 +15,10 @@ interface ColumnHeaderMenuProps {
   column: DisplayColumn
   colIndex: number
   readOnly?: boolean
-  schemaLocked?: boolean
+  /** Why column changes are unavailable; disables the schema rows and explains them. */
+  schemaLockedReason?: string
+  /** Why deleting is unavailable; disables the destructive column row. */
+  deleteLockedReason?: string
   isRenaming: boolean
   isColumnSelected: boolean
   renameValue: string
@@ -66,7 +69,8 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
   column,
   colIndex,
   readOnly,
-  schemaLocked,
+  schemaLockedReason,
+  deleteLockedReason,
   isRenaming,
   isColumnSelected,
   renameValue,
@@ -348,7 +352,8 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
             column={column}
             deleteLabel={deleteLabel}
             onOpenConfig={onOpenConfig}
-            schemaLocked={schemaLocked}
+            schemaLockedReason={schemaLockedReason}
+            deleteLockedReason={deleteLockedReason}
             onInsertLeft={onInsertLeft}
             onInsertRight={onInsertRight}
             onDeleteColumn={onDeleteColumn}