fix: table editor columns cannot be selected nor advisor icon clicked (#44931)

## Problem

Since the drag & drop refactor, users cannot double click to select the
column name in the columns headers of the table editor. Besides, the
advisor button cannot be clicked either.

## Solution

- Add a delay constraint on the drag & drop operation, allowing click
events to trigger
- Add e2e tests to prevent future reggressions

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
  * Double-click column headers to copy column names to clipboard
  * Index Advisor warnings now accessible in the Table Editor

* **Improvements**
* Improved drag start timing and tolerance for smoother column dragging
  * Better screen reader announcement for index suggestion actions
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/studio/components/grid/components/grid/ColumnHeader.tsx

@@ -87,6 +87,7 @@ export function ColumnHeader<R>({
                   className="flex items-center"
                   onClick={() => openSheet(column.name as string)}
                 >
+                  <span className="sr-only">View {column.name} index suggestion</span>
                   <Lightbulb size={14} strokeWidth={2} className="!text-warning" />
                 </button>
               </TooltipTrigger>

apps/studio/components/grid/components/grid/Grid.tsx

@@ -225,7 +225,14 @@ export const Grid = memo(
         }
       }, [rowClass])
 
-      const sensors = useSensors(useSensor(PointerSensor))
+      const sensors = useSensors(
+        useSensor(PointerSensor, {
+          activationConstraint: {
+            delay: 150,
+            tolerance: 5,
+          },
+        })
+      )
       const [draggedColumn, setDraggedColumn] = useState<SupaColumn | undefined>(undefined)
 
       return (

e2e/studio/features/index-advisor.spec.ts

@@ -6,8 +6,6 @@ import { releaseFileOnceCleanup, withFileOnceSetup } from '../utils/once-per-fil
 import { test, withSetupCleanup } from '../utils/test.js'
 import { toUrl } from '../utils/to-url.js'
 
-const TEST_TABLE_NAME = 'pw_test_index_advisor'
-
 test.describe('Index Advisor', () => {
   test.beforeAll(async () => {
     await withFileOnceSetup(import.meta.url, async () => {
@@ -38,6 +36,7 @@ test.describe('Index Advisor', () => {
   })
 
   test('should show Index Advisor warnings in Query Performance', async ({ page, ref }) => {
+    const TEST_TABLE_NAME = 'pw_test_index_advisor'
     await using _ = await withSetupCleanup(
       async () => {
         await createTable(TEST_TABLE_NAME, 'name', [
@@ -70,4 +69,37 @@ test.describe('Index Advisor', () => {
       timeout: 30000,
     })
   })
+
+  test('should show Index Advisor warnings in Table Editor', async ({ page, ref }) => {
+    const TEST_TABLE_NAME = 'pw_test_index_advisor_editor'
+    await using _ = await withSetupCleanup(
+      async () => {
+        await createTable(TEST_TABLE_NAME, 'name', [
+          {
+            name: 'test',
+          },
+          {
+            name: 'demo',
+          },
+          {
+            name: 'test',
+          },
+        ])
+      },
+      async () => {
+        await dropTable(TEST_TABLE_NAME)
+      }
+    )
+
+    // Run query that need indexes
+    await query(`SELECT * FROM ${TEST_TABLE_NAME} WHERE name = 'test';`)
+
+    // Navigate to table editor page
+    await page.goto(toUrl(`/project/${ref}/editor?schema=public`))
+    await page.getByLabel(`View ${TEST_TABLE_NAME}`).click()
+    await expect(page.getByText('demo')).toBeVisible()
+    await page.waitForLoadState('networkidle')
+    await page.getByRole('button', { name: `View name index suggestion`, exact: true }).click()
+    await expect(page.getByRole('dialog', { name: 'Index Recommendation' })).toBeVisible()
+  })
 })

e2e/studio/features/table-editor.spec.ts

@@ -1753,4 +1753,26 @@ testRunner('table editor', () => {
       exact: true,
     })
   })
+
+  test('Can double-click a column name to copy it', async ({ page, ref }) => {
+    const tableName = 'pw_table_column_click'
+
+    // create table + verify that this exists.
+    await using _ = await withSetupCleanup(
+      () => createTableWithRLS(tableName, 'pw_column'),
+      async () => {
+        await dropTable(tableName)
+      }
+    )
+    await page.goto(toUrl(`/project/${ref}/editor?schema=public`))
+    await page.getByLabel(`View ${tableName}`).click()
+    await expect(page.getByRole('button', { name: 'pw_column', exact: true })).toBeVisible()
+    await page.getByRole('button', { name: 'pw_column', exact: true }).dblclick()
+    await page.keyboard.press('ControlOrMeta+C')
+    await expectClipboardValue({
+      page,
+      value: 'pw_column',
+      exact: true,
+    })
+  })
 })