improvement(tables): polish reference row previews

Author: j15z

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

@@ -0,0 +1,70 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createTableColumn } from '@sim/testing'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { DisplayColumn } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/types'
+
+vi.mock(
+  '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-render',
+  () => ({
+    resolveCellRender: () => ({ kind: 'empty' }),
+    CellRender: () => null,
+  })
+)
+
+vi.mock(
+  '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/inline-editors',
+  () => ({ InlineEditor: () => <input data-testid='inline-editor' /> })
+)
+
+import { CellContent } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/cell-content'
+
+const COLUMN: DisplayColumn = {
+  ...createTableColumn({ id: 'col-name', name: 'Name', type: 'string' }),
+  key: 'col-name',
+  groupSize: 1,
+  groupStartColIndex: 0,
+  headerLabel: 'Name',
+  isGroupStart: true,
+}
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  globalThis.IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  act(() => {
+    root = createRoot(container)
+  })
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+})
+
+describe('CellContent', () => {
+  it('keeps the inline editor below the sticky table header', () => {
+    act(() => {
+      root.render(
+        <CellContent
+          value='Acme'
+          column={COLUMN}
+          workspaceId='workspace-1'
+          isEditing
+          onSave={vi.fn()}
+          onCancel={vi.fn()}
+        />
+      )
+    })
+
+    const editorLayer = container.querySelector('[data-testid="inline-editor"]')?.parentElement
+    expect(editorLayer?.className).toContain('z-[9]')
+    expect(editorLayer?.className).not.toContain('z-10')
+  })
+})

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

@@ -64,7 +64,7 @@ export function CellContent({
   return (
     <>
       {isEditing && (
-        <div className='absolute inset-0 z-10 flex items-center px-0'>
+        <div className='absolute inset-0 z-[9] flex items-center px-0'>
           <InlineEditor
             value={value}
             column={column}

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

@@ -8,9 +8,28 @@ import type { DisplayColumn } from '@/app/workspace/[workspaceId]/tables/[tableI
 
 vi.mock('@sim/emcn', () => ({
   Badge: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
+  Button: ({
+    children,
+    size,
+    variant,
+    ...props
+  }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    size?: string
+    variant?: string
+  }) => (
+    <button data-size={size} data-variant={variant} {...props}>
+      {children}
+    </button>
+  ),
   Checkbox: () => null,
-  Chip: ({ children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
-    <button {...props}>{children}</button>
+  ChipTag: ({
+    children,
+    variant,
+    ...props
+  }: React.HTMLAttributes<HTMLSpanElement> & { variant?: string }) => (
+    <span data-chip-tag-variant={variant} {...props}>
+      {children}
+    </span>
   ),
   cn: (...values: Array<string | false | null | undefined>) => values.filter(Boolean).join(' '),
   Tooltip: {
@@ -45,6 +64,7 @@ const REFERENCE_COLUMN: DisplayColumn = {
   name: 'Account',
   type: 'reference',
   referenceTableId: 'table-accounts',
+  referenceTableName: 'Accounts',
   groupSize: 1,
   groupStartColIndex: 0,
   headerLabel: 'Account',
@@ -69,15 +89,15 @@ afterEach(() => {
 })
 
 describe('reference cell rendering', () => {
-  it('resolves a stored row ID to a chip labeled with the reference column name', () => {
+  it('resolves a stored row ID to a chip labeled with the referenced table name', () => {
     expect(
       resolveCellRender({
         value: 'row-account-1',
         exec: undefined,
         column: REFERENCE_COLUMN,
         waitingOnLabels: undefined,
       })
-    ).toMatchObject({ kind: 'column-chip', label: 'Account' })
+    ).toEqual({ kind: 'column-chip', label: 'Accounts' })
   })
 
   it('keeps an empty reference cell empty', () => {
@@ -91,6 +111,17 @@ describe('reference cell rendering', () => {
     ).toEqual({ kind: 'empty' })
   })
 
+  it('uses a neutral label while the referenced table name is unavailable', () => {
+    expect(
+      resolveCellRender({
+        value: 'row-account-1',
+        exec: undefined,
+        column: { ...REFERENCE_COLUMN, referenceTableName: undefined },
+        waitingOnLabels: undefined,
+      })
+    ).toEqual({ kind: 'column-chip', label: 'Referenced table' })
+  })
+
   it('opens the referenced row from the chip without exposing its stored row ID', () => {
     const onReferenceClick = vi.fn()
 
@@ -110,11 +141,44 @@ describe('reference cell rendering', () => {
     })
 
     const chip = container.querySelector('button')
-    expect(chip?.textContent).toBe('Account')
+    expect(chip?.textContent).toBe('Accounts')
+    expect(chip?.dataset.variant).toBe('ghost')
+    expect(chip?.dataset.size).toBe('sm')
+    expect(chip?.className).toContain('max-w-full')
+    expect(chip?.className).toContain('p-0')
+    expect(chip?.querySelector('svg')).toBeNull()
+    const tag = chip?.querySelector('[data-chip-tag-variant="field"]')
+    expect(tag?.textContent).toBe('Accounts')
+    expect(tag?.className).toContain('min-w-0')
+    expect(tag?.className).toContain('max-w-full')
 
     act(() => chip?.click())
 
     expect(onReferenceClick).toHaveBeenCalledOnce()
     expect(container.textContent).not.toContain('row-account-1')
   })
+
+  it('keeps a chip double-click from reaching the reference cell', () => {
+    const onCellDoubleClick = vi.fn()
+
+    act(() => {
+      root.render(
+        <div onDoubleClick={onCellDoubleClick}>
+          <CellRender
+            kind={{ kind: 'column-chip', label: 'Accounts' }}
+            isEditing={false}
+            referenceAction={{ expanded: false, onClick: vi.fn() }}
+          />
+        </div>
+      )
+    })
+
+    act(() => {
+      container
+        .querySelector('button')
+        ?.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
+    })
+
+    expect(onCellDoubleClick).not.toHaveBeenCalled()
+  })
 })

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

@@ -2,7 +2,7 @@
 
 import type React from 'react'
 import { useEffect, useRef, useState } from 'react'
-import { Badge, Checkbox, Chip, cn, Tooltip } from '@sim/emcn'
+import { Badge, Button, Checkbox, ChipTag, cn, Tooltip } from '@sim/emcn'
 import { parse } from 'tldts'
 import { faviconUrl } from '@/lib/core/utils/favicon'
 import type { RowExecutionMetadata, SelectOption } from '@/lib/table'
@@ -28,7 +28,7 @@ export type CellRenderKind =
   // Plain typed cells
   | { kind: 'boolean'; checked: boolean }
   | { kind: 'select'; options: SelectOption[] }
-  | { kind: 'column-chip'; label: string; icon: React.ComponentType<{ className?: string }> }
+  | { kind: 'column-chip'; label: string }
   | { kind: 'json'; text: string }
   | { kind: 'date'; text: string }
   | { kind: 'url'; text: string; href: string; domain: string }
@@ -135,8 +135,7 @@ export function resolveCellRender({
     return rowId
       ? {
           kind: 'column-chip',
-          label: typeDefinition.referencePreview.getChipLabel(column),
-          icon: typeDefinition.icon,
+          label: column.referenceTableName ?? 'Referenced table',
         }
       : { kind: 'empty' }
   }
@@ -397,24 +396,25 @@ export function CellRender({
         </span>
       )
 
-    case 'column-chip': {
-      const ChipIcon = kind.icon
+    case 'column-chip':
       return (
-        <Chip
-          active={referenceAction?.expanded}
-          leftIcon={ChipIcon}
+        <Button
+          variant='ghost'
+          size='sm'
           aria-expanded={referenceAction?.expanded}
           disabled={!referenceAction}
-          className={cn('h-5 max-w-full', isEditing && 'invisible')}
+          className={cn('min-w-0 max-w-full p-0', isEditing && 'invisible')}
           onClick={(event) => {
             event.stopPropagation()
             referenceAction?.onClick()
           }}
+          onDoubleClick={(event) => event.stopPropagation()}
         >
-          {kind.label}
-        </Chip>
+          <ChipTag variant='field' className='min-w-0 max-w-full'>
+            <span className='truncate'>{kind.label}</span>
+          </ChipTag>
+        </Button>
       )
-    }
 
     case 'json':
       return (