fix(tables): keep reference navigation available to viewers

Author: j15z

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

@@ -145,6 +145,8 @@ describe('ColumnConfigSidebar', () => {
           config={{ mode: 'create', proposedName: 'Related row', type: 'reference' }}
           onClose={vi.fn()}
           existingColumn={null}
+          allColumns={[]}
+          tableRowTtlEnabled={false}
           workspaceId='workspace-1'
           tableId='table-current'
           referenceColumnsEnabled
@@ -182,6 +184,8 @@ describe('ColumnConfigSidebar', () => {
           config={{ mode: 'create', proposedName: 'Related row', type: 'reference' }}
           onClose={vi.fn()}
           existingColumn={null}
+          allColumns={[]}
+          tableRowTtlEnabled={false}
           workspaceId='workspace-1'
           tableId='table-current'
           referenceColumnsEnabled
@@ -209,6 +213,8 @@ describe('ColumnConfigSidebar', () => {
             type: 'reference',
             referenceTableId: 'table-current',
           }}
+          allColumns={[]}
+          tableRowTtlEnabled={false}
           workspaceId='workspace-1'
           tableId='table-current'
           onColumnRename={onColumnRename}
@@ -248,6 +254,8 @@ describe('ColumnConfigSidebar', () => {
             type: 'reference',
             referenceTableId: 'table-current',
           }}
+          allColumns={[]}
+          tableRowTtlEnabled={false}
           workspaceId='workspace-1'
           tableId='table-current'
           referenceColumnsEnabled={false}
@@ -275,6 +283,8 @@ describe('ColumnConfigSidebar', () => {
           config={{ mode: 'create', proposedName: 'Related row', type: 'reference' }}
           onClose={vi.fn()}
           existingColumn={null}
+          allColumns={[]}
+          tableRowTtlEnabled={false}
           workspaceId='workspace-1'
           tableId='table-current'
           referenceColumnsEnabled
@@ -297,6 +307,8 @@ describe('ColumnConfigSidebar', () => {
             type: 'select',
             options: [{ id: 'option-ready', name: 'Ready' }],
           }}
+          allColumns={[]}
+          tableRowTtlEnabled={false}
           workspaceId='workspace-1'
           tableId='table-current'
           referenceColumnsEnabled

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

@@ -1,8 +1,8 @@
 'use client'
 
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { cn } from '@sim/emcn'
-import { ChevronDown } from '@sim/emcn/icons'
+import { Button, cn } from '@sim/emcn'
+import { ChevronDown, SquareArrowUpRight } from '@sim/emcn/icons'
 import type { SortDirection, WorkflowGroup } from '@/lib/table'
 import { HeaderLabel } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/header-label'
 import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
@@ -252,6 +252,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
   // Column whose workflow source block was deleted — the header icon swaps to
   // `WorkflowX` with an explanatory tooltip.
   const blockMissing = Boolean(sourceInfo?.blockMissing)
+  const referenceTableId = column.type === 'reference' ? column.referenceTableId : undefined
 
   return (
     <th
@@ -313,6 +314,18 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
             label={column.workflowGroupId ? column.headerLabel : column.name}
             className='ml-1.5 text-[var(--text-primary)] text-small'
           />
+          {referenceTableId && onGoToReferenceTable && (
+            <Button
+              type='button'
+              variant='ghost'
+              size='icon'
+              className='ml-auto shrink-0'
+              onClick={() => onGoToReferenceTable(referenceTableId)}
+              aria-label='Go to Reference Table'
+            >
+              <SquareArrowUpRight className='size-[14px]' />
+            </Button>
+          )}
         </div>
       ) : (
         <div className='flex h-full w-full min-w-0 items-center'>

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.test.tsx

@@ -1,13 +1,19 @@
 /**
  * @vitest-environment jsdom
  */
-import { act, type ReactNode } from 'react'
+import { act, type ButtonHTMLAttributes, type ReactNode } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import type { ColumnDefinition } from '@/lib/table'
 
 vi.mock('@sim/emcn', () => ({
+  Button: ({ children, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => (
+    <button {...props}>{children}</button>
+  ),
   cn: (...values: Array<string | false | null | undefined>) => values.filter(Boolean).join(' '),
+  FloatingTooltip: () => null,
+  isTextClipped: () => false,
+  useFloatingTooltip: () => ({ state: {}, handlers: {} }),
   DropdownMenu: ({ children, open }: { children: ReactNode; open: boolean }) =>
     open ? <>{children}</> : null,
   DropdownMenuContent: ({ children }: { children: ReactNode }) => <div>{children}</div>,
@@ -28,6 +34,7 @@ vi.mock('@sim/emcn/icons', () => ({
   ArrowLeft: () => null,
   ArrowRight: () => null,
   ArrowUp: () => null,
+  ChevronDown: () => null,
   Eye: () => null,
   EyeOff: () => null,
   Fingerprint: () => null,
@@ -39,10 +46,12 @@ vi.mock('@sim/emcn/icons', () => ({
   SquareArrowUpRight: () => null,
   Trash: () => null,
   Workflow: () => null,
+  WorkflowX: () => null,
   X: () => null,
 }))
 
 vi.mock('@/lib/table/column-types', () => ({
+  columnTypeById: () => ({ icon: () => null }),
   columnTypeOf: (column: ColumnDefinition) => ({
     icon: () => null,
     label: column.type === 'reference' ? 'Reference' : 'Text',
@@ -55,6 +64,7 @@ vi.mock('@/app/workspace/[workspaceId]/tables/[tableId]/components/column-config
 
 vi.mock('@/enrichments/registry', () => ({ getEnrichment: () => undefined }))
 
+import { ColumnHeaderMenu } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu'
 import { ColumnOptionsMenu } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell'
 
 let container: HTMLDivElement
@@ -134,3 +144,55 @@ describe('ColumnOptionsMenu Reference navigation', () => {
     expect(findButton('Go to Reference Table')).toBeUndefined()
   })
 })
+
+describe('ColumnHeaderMenu read-only Reference navigation', () => {
+  it('keeps a direct navigation action available without exposing the options menu', () => {
+    const onGoToReferenceTable = vi.fn()
+
+    act(() => {
+      root.render(
+        <ColumnHeaderMenu
+          column={{
+            id: 'col-account',
+            key: 'col-account',
+            name: 'Account',
+            type: 'reference',
+            referenceTableId: 'table-accounts',
+            groupSize: 1,
+            groupStartColIndex: 0,
+            headerLabel: 'Account',
+            isGroupStart: true,
+          }}
+          colIndex={0}
+          readOnly
+          isRenaming={false}
+          isColumnSelected={false}
+          renameValue=''
+          onRenameValueChange={vi.fn()}
+          onRenameSubmit={vi.fn()}
+          onRenameCancel={vi.fn()}
+          onColumnSelect={vi.fn()}
+          onInsertLeft={vi.fn()}
+          onInsertRight={vi.fn()}
+          onGoToReferenceTable={onGoToReferenceTable}
+          onDeleteColumn={vi.fn()}
+          onResizeStart={vi.fn()}
+          onResize={vi.fn()}
+          onResizeEnd={vi.fn()}
+          onAutoResize={vi.fn()}
+          onOpenConfig={vi.fn()}
+        />
+      )
+    })
+
+    const navigationButton = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Go to Reference Table"]'
+    )
+    expect(navigationButton).not.toBeNull()
+
+    act(() => navigationButton?.click())
+
+    expect(onGoToReferenceTable).toHaveBeenCalledWith('table-accounts')
+    expect(container.querySelector('button[aria-label="Column options"]')).toBeNull()
+  })
+})