improvement(tables): move preview navigation into header

Author: j15z

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

@@ -29,6 +29,7 @@ vi.mock('@/lib/table/column-types', () => ({
 }))
 
 vi.mock('@sim/emcn/icons', () => ({
+  ArrowRight: () => null,
   Loader: () => null,
 }))
 
@@ -125,11 +126,18 @@ describe('ReferenceRowPreview', () => {
     expect(container.textContent).toContain('Acme')
     expect(container.textContent).toContain('Enterprise')
     expect(container.textContent).not.toContain('Open in sub view')
-    const goToTableLink = Array.from(container.querySelectorAll('a')).find(
-      (link) => link.textContent === 'Go to table'
-    )
+    const goToTableLink = container.querySelector('a[aria-label="Go to table"]')
     expect(goToTableLink?.getAttribute('href')).toBe('/workspace/workspace-1/tables/table-accounts')
+    expect(goToTableLink?.getAttribute('title')).toBe('Go to table')
+    expect(goToTableLink?.className).toContain('size-[20px]')
+    expect(goToTableLink?.className).toContain('hover-hover:bg-[var(--surface-active)]')
     expect(goToTableLink?.parentElement?.className).toContain('h-9')
+    expect(goToTableLink?.parentElement?.className).toContain('gap-1.5')
+    expect(goToTableLink?.previousElementSibling?.textContent).toBe('Accounts')
+    expect(goToTableLink?.textContent).toBe('')
+    const previewShell = container.querySelector<HTMLElement>('tbody > tr > td > div > div')
+    expect(previewShell?.lastElementChild?.className).toContain('h-9')
+    expect(previewShell?.lastElementChild?.querySelector('a')).toBeNull()
     const previewCell = container.querySelector('tbody > tr > td')
     expect(previewCell?.className).toContain('overflow-clip')
     expect(previewCell?.className).toContain('border-r')

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

@@ -2,7 +2,7 @@
 
 import { memo, type ReactNode, useLayoutEffect, useMemo, useRef } from 'react'
 import { buttonVariants } from '@sim/emcn'
-import { Loader } from '@sim/emcn/icons'
+import { ArrowRight, Loader } from '@sim/emcn/icons'
 import { noop } from '@sim/utils/helpers'
 import Link from 'next/link'
 import { columnTypeById } from '@/lib/table/column-types'
@@ -188,6 +188,14 @@ export const ReferenceRowPreview = memo(function ReferenceRowPreview({
             <div className='flex h-9 shrink-0 items-center gap-1.5 px-3 text-[var(--text-primary)] text-small'>
               <ReferenceIcon className='size-[14px] text-[var(--text-icon)]' />
               <span className='font-medium'>{table?.name ?? 'Referenced table'}</span>
+              <Link
+                href={`/workspace/${workspaceId}/tables/${referenceTableId}`}
+                aria-label='Go to table'
+                title='Go to table'
+                className={buttonVariants({ variant: 'quiet', size: 'icon' })}
+              >
+                <ArrowRight className='size-[14px]' />
+              </Link>
             </div>
 
             <div
@@ -197,14 +205,7 @@ export const ReferenceRowPreview = memo(function ReferenceRowPreview({
               {content}
             </div>
 
-            <div className='flex h-9 shrink-0 items-center bg-[var(--bg)] px-3'>
-              <Link
-                href={`/workspace/${workspaceId}/tables/${referenceTableId}`}
-                className={buttonVariants({ variant: 'default', size: 'sm' })}
-              >
-                Go to table
-              </Link>
-            </div>
+            <div aria-hidden className='h-9 shrink-0 bg-[var(--bg)]' />
           </div>
         </div>
       </td>