fix(tables): read-only cell editors and add-row form for update-locked tables

- Update-locked tables open cell editors read-only; the expanded editor disables Save with the reason on hover, and empty cells that can't be edited open nothing
- New row opens the Add Row form when only updates are locked
- Row form reads and writes values by column id and uses one date-and-time picker
- ChipDatePicker follows InsideModalContext so its calendar is clickable in modals, and gains showTime/timeLabel in single mode

Author: j15z

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.test.tsx

@@ -7,14 +7,21 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import type { TableInfo, TableRow } from '@/lib/table'
 import { RowModal } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal'
 
-const { mockToastError, mockUseTimezoneState, mockUpdateRow, mockDeleteRow, mockDeleteRows } =
-  vi.hoisted(() => ({
-    mockToastError: vi.fn(),
-    mockUseTimezoneState: vi.fn(),
-    mockUpdateRow: vi.fn(),
-    mockDeleteRow: vi.fn(),
-    mockDeleteRows: vi.fn(),
-  }))
+const {
+  mockToastError,
+  mockUseTimezoneState,
+  mockCreateRow,
+  mockUpdateRow,
+  mockDeleteRow,
+  mockDeleteRows,
+} = vi.hoisted(() => ({
+  mockToastError: vi.fn(),
+  mockUseTimezoneState: vi.fn(),
+  mockCreateRow: vi.fn(),
+  mockUpdateRow: vi.fn(),
+  mockDeleteRow: vi.fn(),
+  mockDeleteRows: vi.fn(),
+}))
 
 vi.mock('next/navigation', () => ({
   useParams: () => ({ workspaceId: 'workspace-1' }),
@@ -23,6 +30,7 @@ vi.mock('@/hooks/queries/general-settings', () => ({
   useTimezoneState: mockUseTimezoneState,
 }))
 vi.mock('@/hooks/queries/tables', () => ({
+  useCreateTableRow: () => ({ mutateAsync: mockCreateRow, isPending: false }),
   useUpdateTableRow: () => ({ mutateAsync: mockUpdateRow, isPending: false }),
   useDeleteTableRow: () => ({ mutateAsync: mockDeleteRow, isPending: false }),
   useDeleteTableRows: () => ({ mutateAsync: mockDeleteRows, isPending: false }),
@@ -35,11 +43,12 @@ vi.mock('@sim/emcn', () => {
       createElement('button', { type: 'button', ...props }, children),
     ChipConfirmModal: passthrough,
     ChipDatePicker: ({ value, onChange }: { value?: string; onChange: (value: string) => void }) =>
-      createElement(
-        'button',
-        { type: 'button', 'data-testid': 'date', onClick: () => onChange(value ?? '2026-11-01') },
-        value
-      ),
+      createElement('input', {
+        'data-testid': 'date',
+        value: value ?? '',
+        onChange: (event: { currentTarget: { value: string } }) =>
+          onChange(event.currentTarget.value),
+      }),
     ChipModal: passthrough,
     ChipModalBody: passthrough,
     ChipModalError: passthrough,
@@ -80,13 +89,6 @@ vi.mock('@sim/emcn', () => {
         'Update Row'
       ),
     ChipModalHeader: passthrough,
-    ChipTimePicker: ({ value, onChange }: { value?: string; onChange: (value: string) => void }) =>
-      createElement('input', {
-        'data-testid': 'time',
-        value: value ?? '',
-        onChange: (event: { currentTarget: { value: string } }) =>
-          onChange(event.currentTarget.value),
-      }),
     Label: passthrough,
     toast: { error: mockToastError },
   }
@@ -113,6 +115,85 @@ function changeInput(input: HTMLInputElement, value: string) {
   input.dispatchEvent(new Event('input', { bubbles: true }))
 }
 
+describe('RowModal add mode', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockCreateRow.mockResolvedValue(undefined)
+    mockUseTimezoneState.mockReturnValue({ timezone: 'America/Los_Angeles', status: 'ready' })
+  })
+
+  it('inserts the complete row under column ids in one request without updating', async () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    const props = {
+      mode: 'add' as const,
+      isOpen: true,
+      onClose: vi.fn(),
+      table: {
+        id: 'table-3',
+        name: 'People',
+        schema: { columns: [{ id: 'col_name', name: 'Name', type: 'string' as const }] },
+      },
+      onSuccess: vi.fn(),
+    }
+
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    act(() => root.render(createElement(RowModal, props)))
+
+    const nameInput = container.querySelector<HTMLInputElement>('[data-testid="modal-input"]')
+    expect(nameInput?.value).toBe('')
+    act(() => changeInput(nameInput as HTMLInputElement, 'Ada'))
+    const submit = container.querySelector<HTMLButtonElement>('[data-testid="submit"]')
+    await act(async () => submit?.click())
+
+    expect(mockCreateRow).toHaveBeenCalledWith({ data: { col_name: 'Ada' } })
+    expect(mockUpdateRow).not.toHaveBeenCalled()
+    expect(props.onSuccess).toHaveBeenCalledTimes(1)
+
+    act(() => root.unmount())
+    container.remove()
+  })
+})
+
+describe('RowModal column ids', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockUpdateRow.mockResolvedValue(undefined)
+    mockUseTimezoneState.mockReturnValue({ timezone: 'America/Los_Angeles', status: 'ready' })
+  })
+
+  it('shows and saves edit values stored under the column id', async () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    const props = {
+      mode: 'edit' as const,
+      isOpen: true,
+      onClose: vi.fn(),
+      table: {
+        id: 'table-4',
+        name: 'People',
+        schema: { columns: [{ id: 'col_name', name: 'Name', type: 'string' as const }] },
+      },
+      row: { ...row, data: { col_name: 'Ada' } },
+      onSuccess: vi.fn(),
+    }
+
+    act(() => root.render(createElement(RowModal, props)))
+
+    const nameInput = container.querySelector<HTMLInputElement>('[data-testid="modal-input"]')
+    expect(nameInput?.value).toBe('Ada')
+    act(() => changeInput(nameInput as HTMLInputElement, 'Grace'))
+    const submit = container.querySelector<HTMLButtonElement>('[data-testid="submit"]')
+    await act(async () => submit?.click())
+
+    expect(mockUpdateRow).toHaveBeenCalledWith({ rowId: 'row-1', data: { col_name: 'Grace' } })
+    act(() => root.unmount())
+    container.remove()
+  })
+})
+
 describe('RowModal expiration editing', () => {
   beforeEach(() => {
     vi.clearAllMocks()
@@ -136,7 +217,9 @@ describe('RowModal expiration editing', () => {
     ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
     act(() => root.render(createElement(RowModal, props)))
 
-    expect(container.querySelector<HTMLInputElement>('[data-testid="time"]')?.value).toBe('01:00')
+    expect(container.querySelector<HTMLInputElement>('[data-testid="date"]')?.value).toBe(
+      '2026-11-01T01:00:00'
+    )
     expect(container.querySelector<HTMLButtonElement>('[data-testid="submit"]')?.disabled).toBe(
       false
     )
@@ -153,9 +236,9 @@ describe('RowModal expiration editing', () => {
     })
     act(() => root.render(createElement(RowModal, props)))
 
-    const timeInput = container.querySelector<HTMLInputElement>('[data-testid="time"]')
-    expect(timeInput?.value).toBe('01:00')
-    act(() => changeInput(timeInput as HTMLInputElement, '01:30'))
+    const dateInput = container.querySelector<HTMLInputElement>('[data-testid="date"]')
+    expect(dateInput?.value).toBe('2026-11-01T01:00:00')
+    act(() => changeInput(dateInput as HTMLInputElement, '2026-11-01T01:30'))
 
     const submit = container.querySelector<HTMLButtonElement>('[data-testid="submit"]')
     await act(async () => submit?.click())
@@ -193,15 +276,15 @@ describe('RowModal expiration editing', () => {
     expect(container.querySelector('[aria-label="Edit starts_at"]')?.textContent).toBe(
       'Loading timezone…'
     )
-    expect(container.querySelector<HTMLInputElement>('[data-testid="time"]')).toBeNull()
+    expect(container.querySelector<HTMLInputElement>('[data-testid="date"]')).toBeNull()
 
     mockUseTimezoneState.mockReturnValue({
       timezone: 'America/Los_Angeles',
       status: 'ready',
     })
     act(() => root.render(createElement(RowModal, props)))
 
-    expect(container.querySelector<HTMLInputElement>('[data-testid="time"]')).not.toBeNull()
+    expect(container.querySelector<HTMLInputElement>('[data-testid="date"]')).not.toBeNull()
     act(() => root.unmount())
     container.remove()
   })
@@ -226,7 +309,9 @@ describe('RowModal expiration editing', () => {
 
     act(() => root.render(createElement(RowModal, props)))
 
-    expect(container.querySelector<HTMLInputElement>('[data-testid="time"]')?.value).toBe('01:00')
+    expect(container.querySelector<HTMLInputElement>('[data-testid="date"]')?.value).toBe(
+      '2026-11-01T01:00:00'
+    )
     expect(container.querySelector<HTMLButtonElement>('[data-testid="submit"]')?.disabled).toBe(
       false
     )