diff --git a/apps/studio/components/grid/components/menu/ColumnMenu.tsx b/apps/studio/components/grid/components/menu/ColumnMenu.tsx index aadeae9e4b7..e6bc661f68d 100644 --- a/apps/studio/components/grid/components/menu/ColumnMenu.tsx +++ b/apps/studio/components/grid/components/menu/ColumnMenu.tsx @@ -1,13 +1,13 @@ -import type { Sort } from 'components/grid/types' -import { ArrowDown, ArrowUp, ChevronDown, Edit, Lock, Trash, Unlock } from 'lucide-react' -import type { CalculatedColumn } from 'react-data-grid' - import { useTableSort } from 'components/grid/hooks/useTableSort' +import type { Sort } from 'components/grid/types' +import { ArrowDown, ArrowUp, ChevronDown, Copy, Edit, Lock, Trash, Unlock } from 'lucide-react' +import type { CalculatedColumn } from 'react-data-grid' import { useTableEditorStateSnapshot } from 'state/table-editor' import { useTableEditorTableStateSnapshot } from 'state/table-editor-table' import { Button, cn, + copyToClipboard, DropdownMenu, DropdownMenuContent, DropdownMenuItem, @@ -93,9 +93,19 @@ export const ColumnMenu = ({ column, isEncrypted }: ColumnMenuProps) => { Sort Descending + + { + e.stopPropagation() + copyToClipboard(columnName) + }} + > + + Copy name + {snap.editable && ( <> - { await deleteTable(page, ref, tableName) }) + test('column actions works as expected', async ({ page, ref }) => { + const tableName = 'pw_table_column_menu' + const colName = 'pw_column' + + // Ensure we're on editor + if (!page.url().includes('/editor')) { + await page.goto(toUrl(`/project/${ref}/editor?schema=public`)) + await waitForTableToLoad(page, ref) + } + + // Create a small table and three rows + await createTable(page, ref, tableName) + await page.getByRole('button', { name: `View ${tableName}`, exact: true }).click() + await page.waitForURL(/\/editor\/\d+\?schema=public$/) + + // Copy the column name + await page.getByRole('columnheader', { name: colName }).getByRole('button').nth(1).click() + await page.getByRole('menuitem', { name: 'Copy name' }).click() + + await page.waitForTimeout(500) + const copiedTableResult = await page.evaluate(() => navigator.clipboard.readText()) + expect(copiedTableResult).toBe(colName) + + // Cleanup + await deleteTable(page, ref, tableName) + }) + test('importing, pagination and large data actions works as expected', async ({ page, ref }) => { await page.goto(toUrl(`/project/${ref}/editor?schema=public`)) const tableNameDataActions = 'pw_table_data'