Add dropdown item to copy name in table editor (supabase#31089)

* Add dropdown item to copy name in table editor

* Fix duplicate key

Author: joshenlim

apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx

@@ -1,6 +1,7 @@
 import * as Tooltip from '@radix-ui/react-tooltip'
 import saveAs from 'file-saver'
 import {
+  Clipboard,
   Copy,
   Download,
   Edit,
@@ -47,6 +48,7 @@ import {
   DropdownMenuTrigger,
 } from 'ui'
 import { useProjectContext } from '../ProjectLayout/ProjectContext'
+import { copyToClipboard } from 'lib/helpers'
 
 export interface EntityListItemProps {
   id: number
@@ -65,6 +67,7 @@ const EntityListItem: ItemRenderer<Entity, EntityListItemProps> = ({
   const { selectedSchema } = useQuerySchemaState()
 
   const isActive = Number(id) === entity.id
+  const canEdit = isActive && !isLocked
 
   const { data: lints = [] } = useProjectLintsQuery({
     projectRef: project?.ref,
@@ -213,23 +216,21 @@ const EntityListItem: ItemRenderer<Entity, EntityListItemProps> = ({
     switch (entity.type) {
       case ENTITY_TYPE.TABLE:
         if (tableHasLints) {
-          tooltipContent = 'RLS Disabled'
+          tooltipContent = 'RLS disabled'
         }
         break
       case ENTITY_TYPE.VIEW:
         if (viewHasLints) {
-          tooltipContent = 'Security Definer view'
+          tooltipContent = 'Security definer view'
         }
         break
       case ENTITY_TYPE.MATERIALIZED_VIEW:
         if (materializedViewHasLints) {
-          tooltipContent = 'Security Definer view'
+          tooltipContent = 'Security definer view'
         }
-
         break
       case ENTITY_TYPE.FOREIGN_TABLE:
         tooltipContent = 'RLS is not enforced on foreign tables'
-
         break
       default:
         break
@@ -355,85 +356,103 @@ const EntityListItem: ItemRenderer<Entity, EntityListItemProps> = ({
         <EntityTooltipTrigger entity={entity} />
       </div>
 
-      {entity.type === ENTITY_TYPE.TABLE && isActive && !isLocked && (
+      {canEdit && (
         <DropdownMenu>
           <DropdownMenuTrigger className="text-foreground-lighter transition-all hover:text-foreground data-[state=open]:text-foreground">
             <MoreHorizontal size={14} strokeWidth={2} />
           </DropdownMenuTrigger>
           <DropdownMenuContent side="bottom" align="start" className="w-44">
             <DropdownMenuItem
-              key="edit-table"
-              className="space-x-2"
-              onClick={(e) => {
-                e.stopPropagation()
-                snap.onEditTable()
-              }}
-            >
-              <Edit size={12} />
-              <span>Edit Table</span>
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              key="duplicate-table"
+              key="copy-name"
               className="space-x-2"
               onClick={(e) => {
                 e.stopPropagation()
-                snap.onDuplicateTable()
+                copyToClipboard(entity.name)
               }}
             >
-              <Copy size={12} />
-              <span>Duplicate Table</span>
-            </DropdownMenuItem>
-            <DropdownMenuItem key="view-policies" className="space-x-2" asChild>
-              <Link
-                key="view-policies"
-                href={`/project/${projectRef}/auth/policies?schema=${selectedSchema}&search=${entity.id}`}
-              >
-                <Lock size={12} />
-                <span>View Policies</span>
-              </Link>
+              <Clipboard size={12} />
+              <span>Copy name</span>
             </DropdownMenuItem>
 
-            <DropdownMenuSub>
-              <DropdownMenuSubTrigger className="gap-x-2">
-                <Download size={12} />
-                Export Data
-              </DropdownMenuSubTrigger>
-              <DropdownMenuSubContent>
+            {entity.type === ENTITY_TYPE.TABLE && (
+              <>
+                <DropdownMenuSeparator />
+
                 <DropdownMenuItem
-                  key="download-table-csv"
+                  key="edit-table"
                   className="space-x-2"
                   onClick={(e) => {
                     e.stopPropagation()
-                    exportTableAsCSV()
+                    snap.onEditTable()
                   }}
                 >
-                  <span>Export table as CSV</span>
+                  <Edit size={12} />
+                  <span>Edit table</span>
                 </DropdownMenuItem>
                 <DropdownMenuItem
-                  key="download-table-sql"
-                  className="gap-x-2"
+                  key="duplicate-table"
+                  className="space-x-2"
                   onClick={(e) => {
                     e.stopPropagation()
-                    exportTableAsSQL()
+                    snap.onDuplicateTable()
                   }}
                 >
-                  <span>Export table as SQL</span>
+                  <Copy size={12} />
+                  <span>Duplicate table</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem key="view-policies" className="space-x-2" asChild>
+                  <Link
+                    key="view-policies"
+                    href={`/project/${projectRef}/auth/policies?schema=${selectedSchema}&search=${entity.id}`}
+                  >
+                    <Lock size={12} />
+                    <span>View policies</span>
+                  </Link>
                 </DropdownMenuItem>
-              </DropdownMenuSubContent>
-            </DropdownMenuSub>
 
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              key="delete-table"
-              className="gap-x-2"
-              onClick={(e) => {
-                e.stopPropagation()
-                snap.onDeleteTable()
-              }}
-            >
-              <Trash size={12} />
-              <span>Delete Table</span>
-            </DropdownMenuItem>
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger className="gap-x-2">
+                    <Download size={12} />
+                    Export data
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuSubContent>
+                    <DropdownMenuItem
+                      key="download-table-csv"
+                      className="space-x-2"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        exportTableAsCSV()
+                      }}
+                    >
+                      <span>Export table as CSV</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      key="download-table-sql"
+                      className="gap-x-2"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        exportTableAsSQL()
+                      }}
+                    >
+                      <span>Export table as SQL</span>
+                    </DropdownMenuItem>
+                  </DropdownMenuSubContent>
+                </DropdownMenuSub>
+
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  key="delete-table"
+                  className="gap-x-2"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    snap.onDeleteTable()
+                  }}
+                >
+                  <Trash size={12} />
+                  <span>Delete table</span>
+                </DropdownMenuItem>
+              </>
+            )}
           </DropdownMenuContent>
         </DropdownMenu>
       )}