Add a context menu item to copy a column name (#43101)

Small QOL improvement: a new context menu that allows to copy a column
name.

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) => {
           <ArrowDown size={14} strokeWidth={currentSort && !currentSort.ascending ? 3 : 1.5} />
           <span>Sort Descending</span>
         </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          className="space-x-2"
+          onClick={(e) => {
+            e.stopPropagation()
+            copyToClipboard(columnName)
+          }}
+        >
+          <Copy size={12} />
+          <span>Copy name</span>
+        </DropdownMenuItem>
         {snap.editable && (
           <>
-            <DropdownMenuSeparator />
             <Tooltip>
               <TooltipTrigger asChild className={`${isEncrypted ? 'opacity-50' : ''}`}>
                 <DropdownMenuItem

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

@@ -605,6 +605,33 @@ testRunner('table editor', () => {
     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'