From 37748b5078cc1af392faebe1a331d13caf7c081e Mon Sep 17 00:00:00 2001
From: Ali Waseem <waseema393@gmail.com>
Date: Tue, 10 Feb 2026 13:39:06 -0700
Subject: [PATCH] chore: add E2E tests for simulating a drag and drop CSV
 (#42658)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Chore: test drag and drop on table editor

follow up for https://github.com/supabase/supabase/issues/42655

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

## Summary by CodeRabbit

* **Tests**
* Added comprehensive end-to-end test for CSV drag-and-drop import
functionality that validates the complete import workflow: drag-drop
detection on empty tables, import dialog display with accurate row
counts, and successful data import to the grid.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../components/grid/components/grid/Grid.tsx  |  1 +
 .../features/files/table-editor-drag-drop.csv |  4 ++
 e2e/studio/features/table-editor.spec.ts      | 62 +++++++++++++++++++
 3 files changed, 67 insertions(+)
 create mode 100644 e2e/studio/features/files/table-editor-drag-drop.csv

diff --git a/apps/studio/components/grid/components/grid/Grid.tsx b/apps/studio/components/grid/components/grid/Grid.tsx
index d57ac84322e..0ee375115af 100644
--- a/apps/studio/components/grid/components/grid/Grid.tsx
+++ b/apps/studio/components/grid/components/grid/Grid.tsx
@@ -230,6 +230,7 @@ export const Grid = memo(
 
       return (
         <div
+          data-testid="table-editor-grid-container"
           className={cn('flex flex-col relative transition-colors', containerClass)}
           style={{ width: width || '100%', height: height || '50vh' }}
           onDragOver={onDragOver}
diff --git a/e2e/studio/features/files/table-editor-drag-drop.csv b/e2e/studio/features/files/table-editor-drag-drop.csv
new file mode 100644
index 00000000000..cef853d61e7
--- /dev/null
+++ b/e2e/studio/features/files/table-editor-drag-drop.csv
@@ -0,0 +1,4 @@
+id,pw_column
+1,drag drop value 1
+2,drag drop value 2
+3,drag drop value 3
diff --git a/e2e/studio/features/table-editor.spec.ts b/e2e/studio/features/table-editor.spec.ts
index 662816d4563..61933ed6b56 100644
--- a/e2e/studio/features/table-editor.spec.ts
+++ b/e2e/studio/features/table-editor.spec.ts
@@ -1,6 +1,7 @@
 import { expect, Page } from '@playwright/test'
 import fs from 'fs'
 import path from 'path'
+import { createTable as dbCreateTable, dropTable } from '../utils/db/index.js'
 import { env } from '../env.config.js'
 import { releaseFileOnceCleanup, withFileOnceSetup } from '../utils/once-per-file.js'
 import { resetLocalStorage } from '../utils/reset-local-storage.js'
@@ -1172,4 +1173,65 @@ testRunner('table editor', () => {
     await deleteTable(page, ref, sourceTableName)
     await deleteTable(page, ref, targetTableName)
   })
+
+  test('CSV drag and drop imports data on empty table', async ({ page, ref }) => {
+    const tableName = 'pw_table_csv_drag_drop'
+
+    await dropTable(tableName)
+    await dbCreateTable(tableName, columnName)
+
+    const loadPromise = waitForTableToLoad(page, ref)
+    await page.goto(toUrl(`/project/${ref}/editor?schema=public`))
+    await loadPromise
+
+    await page.getByRole('button', { name: `View ${tableName}`, exact: true }).click()
+    await page.waitForURL(/\/editor\/\d+\?schema=public$/)
+
+    await expect(
+      page.getByText('or drag and drop a CSV file here'),
+      'Empty table should show drag and drop hint'
+    ).toBeVisible()
+
+    const csvFilePath = path.join(import.meta.dirname, 'files', 'table-editor-drag-drop.csv')
+    const csvBuffer = fs.readFileSync(csvFilePath)
+
+    // Synthesize a DataTransfer with the CSV file to simulate a browser file drag-and-drop
+    const dataTransfer = await page.evaluateHandle((csvBase64: string) => {
+      const dt = new DataTransfer()
+      const bytes = Uint8Array.from(atob(csvBase64), (c) => c.charCodeAt(0))
+      const file = new File([bytes], 'table-editor-drag-drop.csv', { type: 'text/csv' })
+      dt.items.add(file)
+      return dt
+    }, csvBuffer.toString('base64'))
+
+    const gridContainer = page.getByTestId('table-editor-grid-container')
+
+    await gridContainer.dispatchEvent('dragover', { dataTransfer })
+    await expect(
+      page.getByText('Drop your CSV file here'),
+      'Drag feedback should show when CSV is dragged over'
+    ).toBeVisible()
+
+    await gridContainer.dispatchEvent('drop', { dataTransfer })
+
+    await expect(
+      page.getByText('A total of 3 rows will be'),
+      'Import dialog should show correct row count from CSV'
+    ).toBeVisible({ timeout: 10_000 })
+
+    const waitForCsvInsert = createApiResponseWaiter(page, 'pg-meta', ref, 'query?key=', {
+      method: 'POST',
+    })
+    await page.getByRole('button', { name: 'Import data' }).click()
+    await waitForCsvInsert
+    await waitForGridDataToLoad(page, ref)
+
+    await expect(
+      page.getByText('3 records'),
+      'Table should show 3 records after drag and drop import'
+    ).toBeVisible()
+    await expect(page.getByRole('gridcell', { name: 'drag drop value 1' })).toBeVisible()
+
+    await dropTable(tableName)
+  })
 })