fix(tables): address reference review findings

Author: j15z

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

@@ -18,6 +18,7 @@ interface ComboboxProps {
   searchable?: boolean
   searchPlaceholder?: string
   disabled?: boolean
+  isLoading?: boolean
   onChange?: (value: string) => void
 }
 
@@ -124,6 +125,7 @@ beforeEach(() => {
       { id: 'table-current', name: 'Current table' },
       { id: 'table-customers', name: 'Customers' },
     ],
+    isPending: false,
   })
   mockAddColumn.mockResolvedValue({ data: { columns: [] } })
   mockUpdateColumn.mockResolvedValue({ data: { columns: [] } })
@@ -233,6 +235,8 @@ describe('ColumnConfigSidebar', () => {
   })
 
   it('keeps an existing Reference column visible but not retargetable when disabled', async () => {
+    mockUseTablesList.mockReturnValue({ data: [], isPending: false })
+
     await act(async () => {
       root.render(
         <ColumnConfigSidebar
@@ -251,13 +255,36 @@ describe('ColumnConfigSidebar', () => {
       )
     })
 
-    expect(mockUseTablesList).toHaveBeenCalledWith('workspace-1', 'active', { enabled: false })
-    expect(findCombobox('Select table')?.disabled).toBe(true)
+    expect(mockUseTablesList).toHaveBeenCalledWith('workspace-1', 'active', { enabled: true })
+    expect(findCombobox('Select table')).toMatchObject({
+      disabled: true,
+      options: [{ label: 'table-current', value: 'table-current' }],
+      value: 'table-current',
+    })
     expect(findCombobox('Select type')?.options).toContainEqual(
       expect.objectContaining({ value: 'reference', disabled: true })
     )
   })
 
+  it('shows the Reference table selector as loading while tables are fetched', async () => {
+    mockUseTablesList.mockReturnValue({ data: [], isPending: true })
+
+    await act(async () => {
+      root.render(
+        <ColumnConfigSidebar
+          config={{ mode: 'create', proposedName: 'Related row', type: 'reference' }}
+          onClose={vi.fn()}
+          existingColumn={null}
+          workspaceId='workspace-1'
+          tableId='table-current'
+          referenceColumnsEnabled
+        />
+      )
+    })
+
+    expect(findCombobox('Select table')?.isLoading).toBe(true)
+  })
+
   it('keeps Select options in the edit sidebar', async () => {
     await act(async () => {
       root.render(

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

@@ -177,10 +177,19 @@ function ColumnConfigBody({
       existingColumn.referenceTableId !== referenceTableInput)
   const saveDisabled = updateColumn.isPending || addColumn.isPending || referenceMutationBlocked
   const supportsUnique = columnTypeById(typeInput).supportsUnique
-  const { data: workspaceTables = [] } = useTablesList(workspaceId, 'active', {
-    enabled: wantsReference && referenceColumnsEnabled,
-  })
-  const tableOptions = workspaceTables.map((table) => ({ value: table.id, label: table.name }))
+  const shouldLoadReferenceTables =
+    wantsReference && (referenceColumnsEnabled || existingColumn?.type === 'reference')
+  const { data: workspaceTables = [], isPending: workspaceTablesPending } = useTablesList(
+    workspaceId,
+    'active',
+    { enabled: shouldLoadReferenceTables }
+  )
+  const tableOptions = [
+    ...workspaceTables.map((table) => ({ value: table.id, label: table.name })),
+    ...(referenceTableInput && !workspaceTables.some((table) => table.id === referenceTableInput)
+      ? [{ value: referenceTableInput, label: referenceTableInput }]
+      : []),
+  ]
   const trimmedOptions = optionsInput.map((o) => ({ ...o, name: o.name.trim() }))
 
   /** Client-side option validation mirroring the server rules; returns an error message or null. */
@@ -423,6 +432,7 @@ function ColumnConfigBody({
                   placeholder='Select table'
                   searchable
                   searchPlaceholder='Search tables'
+                  isLoading={shouldLoadReferenceTables && workspaceTablesPending}
                   maxHeight={260}
                 />
                 {referenceTableError && <FieldError message={referenceTableError} />}

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

@@ -114,6 +114,11 @@ describe('ColumnDropdown', () => {
     const labels = [...document.body.querySelectorAll<HTMLElement>('[role="menuitem"]')].map(
       (item) => item.textContent
     )
-    expect(labels).not.toContain('Reference')
+    expect(labels).toEqual([
+      ...COLUMN_TYPE_OPTIONS.filter((option) => option.type !== 'reference').map(
+        (option) => option.label
+      ),
+      'Enrichments',
+    ])
   })
 })

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

@@ -1745,7 +1745,10 @@ export function TableGrid({
   function handleCopyRowId() {
     const rowId = contextMenu.row?.id
     if (!rowId) return
-    void navigator.clipboard.writeText(rowId).catch(() => {})
+    void navigator.clipboard.writeText(rowId).catch((error) => {
+      logger.error('Failed to copy row ID', { error })
+      toast.error('Failed to copy row ID')
+    })
   }
 
   const handleGoToReferenceTable = useCallback(