refactor(tables): inject the cell editor instead of importing it

Completes the presentational/editing split at the row level. `DataRow` took an
`InlineEditor` import and constructed the editor itself, which would have carried
the whole write path — and its authenticated `useTimezone` — into the moved view
layer. It now takes a `renderCellEditor` callback and renders whatever the host
returns.

`TableGrid` supplies it, which is where it belongs: the closure needs the
pending-update state and the save/cancel handlers that own the mutation. A
surface with no write path passes nothing and renders no editor.

`DataRow.workspaceId` also becomes optional, matching `CellContent` — the two
together are the seam a share-scope surface needs.

Note the failure mode this deliberately avoids: making the prop optional means
`tsc` stays green whether or not the shell wires it, so the callsite and the
memo comparator were both updated in this change rather than left to a later one.

Author: waleedlatif1

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

@@ -1,13 +1,13 @@
 'use client'
 
-import React from 'react'
+import React, { type ReactNode } from 'react'
 import { Button, Checkbox, cn, handleKeyboardActivation } from '@sim/emcn'
 import { PlayOutline, Square } from '@sim/emcn/icons'
 import type { ActiveDispatch } from '@/lib/api/contracts/tables'
 import type { TableRow as TableRowType, WorkflowGroup } from '@/lib/table'
 import { getUnmetGroupDeps } from '@/lib/table/deps'
 import type { SaveReason } from '../../types'
-import { CellContent, InlineEditor } from './cells'
+import { CellContent } from './cells'
 import {
   CELL,
   CELL_CHECKBOX,
@@ -21,9 +21,17 @@ import { type NormalizedSelection, resolveCellExec } from './utils'
 export interface DataRowProps {
   row: TableRowType
   columns: DisplayColumn[]
-  /** Current workspace id — forwarded to cells so in-workspace resource URLs
-   *  render as tagged-resource chips. */
-  workspaceId: string
+  /**
+   * Current workspace id — forwarded to cells so in-workspace resource URLs render
+   * as tagged-resource chips. Optional: a surface with no workspace identity (an
+   * anonymous share) omits it and those chips are never emitted.
+   */
+  workspaceId?: string
+  /**
+   * Builds the inline editing surface for a cell. Supplied by the host that owns
+   * the write path, so a read-only surface renders — and bundles — no editor.
+   */
+  renderCellEditor?: (cell: { row: TableRowType; column: DisplayColumn }) => ReactNode
   rowIndex: number
   isFirstRow: boolean
   editingColumnName: string | null
@@ -111,6 +119,7 @@ function dataRowPropsAreEqual(prev: DataRowProps, next: DataRowProps): boolean {
     prev.pendingCellValue !== next.pendingCellValue ||
     prev.onClick !== next.onClick ||
     prev.onDoubleClick !== next.onDoubleClick ||
+    prev.renderCellEditor !== next.renderCellEditor ||
     prev.onSave !== next.onSave ||
     prev.onCancel !== next.onCancel ||
     prev.onContextMenu !== next.onContextMenu ||
@@ -156,6 +165,7 @@ export const DataRow = React.memo(function DataRow({
   editingColumnName,
   initialCharacter,
   pendingCellValue,
+  renderCellEditor,
   normalizedSelection,
   isRowChecked,
   onClick,
@@ -376,21 +386,7 @@ export const DataRow = React.memo(function DataRow({
                 )}
                 column={column}
                 isEditing={isEditing}
-                editor={
-                  isEditing ? (
-                    <InlineEditor
-                      value={
-                        pendingCellValue && column.key in pendingCellValue
-                          ? pendingCellValue[column.key]
-                          : row.data[column.key]
-                      }
-                      column={column}
-                      initialCharacter={initialCharacter ?? undefined}
-                      onSave={(value, reason) => onSave(row.id, column.key, value, reason)}
-                      onCancel={onCancel}
-                    />
-                  ) : undefined
-                }
+                editor={isEditing ? renderCellEditor?.({ row, column }) : undefined}
                 waitingOnLabels={
                   column.workflowGroupId
                     ? (waitingByGroupId?.get(column.workflowGroupId) ?? undefined)

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

@@ -50,7 +50,7 @@ import type { ColumnConfig } from '../column-config-sidebar'
 import { ContextMenu } from '../context-menu'
 import { NewColumnDropdown } from '../new-column-dropdown'
 import type { WorkflowConfig } from '../workflow-sidebar'
-import { ExpandedCellPopover } from './cells'
+import { ExpandedCellPopover, InlineEditor } from './cells'
 import { ADD_COL_WIDTH, COL_WIDTH, SELECTION_TINT_BG } from './constants'
 import { DataRow } from './data-row'
 import { ColumnHeaderMenu, WorkflowGroupMetaCell } from './headers'
@@ -3683,6 +3683,29 @@ export function TableGrid({
 
   const pendingUpdate = updateRowMutation.isPending ? updateRowMutation.variables : null
 
+  /**
+   * The inline editing surface for a cell. Built here rather than inside `DataRow`
+   * because it is the write path: it closes over the pending-update state and the
+   * save/cancel handlers that own the mutation. A read-only surface passes no
+   * `renderCellEditor` at all and therefore renders — and bundles — no editor.
+   */
+  const renderCellEditor = useCallback(
+    ({ row, column }: { row: TableRowType; column: DisplayColumn }) => (
+      <InlineEditor
+        value={
+          pendingUpdate && pendingUpdate.rowId === row.id && column.key in pendingUpdate.data
+            ? pendingUpdate.data[column.key]
+            : row.data[column.key]
+        }
+        column={column}
+        initialCharacter={initialCharacter ?? undefined}
+        onSave={(value, reason) => handleInlineSave(row.id, column.key, value, reason)}
+        onCancel={handleInlineCancel}
+      />
+    ),
+    [pendingUpdate, initialCharacter, handleInlineSave, handleInlineCancel]
+  )
+
   /**
    * Row ids for the current multi-row selection. Drives "Run N selected rows"
    * in the workflow-group run menu — `null` when there's no multi-selection so
@@ -4287,6 +4310,7 @@ export function TableGrid({
                                 onDoubleClick={handleCellDoubleClick}
                                 onSave={handleInlineSave}
                                 onCancel={handleInlineCancel}
+                                renderCellEditor={renderCellEditor}
                                 onContextMenu={handleRowContextMenu}
                                 onCellMouseDown={handleCellMouseDown}
                                 onCellMouseEnter={handleCellMouseEnter}