allow select and copy text, fix context menu (#36162)

apps/studio/components/interfaces/Settings/Logs/LogTable.tsx

@@ -33,6 +33,7 @@ import { isDefaultLogPreviewFormat } from './Logs.utils'
 import { DefaultErrorRenderer } from './LogsErrorRenderers/DefaultErrorRenderer'
 import ResourcesExceededErrorRenderer from './LogsErrorRenderers/ResourcesExceededErrorRenderer'
 import { LogsTableEmptyState } from './LogsTableEmptyState'
+import { toast } from 'sonner'
 
 interface Props {
   data?: LogData[]
@@ -127,7 +128,13 @@ const LogTable = ({
       resizable: true,
       renderCell: ({ row }: any) => {
         return (
-          <span onContextMenu={(e) => showContextMenu(e, { id: LOGS_EXPLORER_CONTEXT_MENU_ID })}>
+          <span
+            onContextMenu={(e) => {
+              e.preventDefault()
+              setCellPosition({ row, column: { name: v } })
+              showContextMenu(e, { id: LOGS_EXPLORER_CONTEXT_MENU_ID })
+            }}
+          >
             {formatCellValue(row?.[v])}
           </span>
         )
@@ -207,9 +214,23 @@ const LogTable = ({
 
   const RowRenderer = useCallback<(key: Key, props: RenderRowProps<LogData, unknown>) => ReactNode>(
     (key, props) => {
-      return <Row key={key} {...props} isRowSelected={false} selectedCellIdx={undefined} />
+      const handleContextMenu = (e: React.MouseEvent) => {
+        if (columns.length > 0) {
+          setCellPosition({ row: props.row, column: columns[0] })
+        }
+        showContextMenu(e, { id: LOGS_EXPLORER_CONTEXT_MENU_ID })
+      }
+      return (
+        <Row
+          key={key}
+          {...props}
+          isRowSelected={false}
+          selectedCellIdx={undefined}
+          onContextMenu={handleContextMenu}
+        />
+      )
     },
-    []
+    [columns, showContextMenu]
   )
 
   const formatCellValue = (value: any) => {
@@ -221,12 +242,11 @@ const LogTable = ({
   }
 
   const onCopyCell = () => {
-    if (cellPosition) {
-      const { row, column } = cellPosition
-      const cellValue = row?.[column.name] ?? ''
-      const value = formatCellValue(cellValue)
-      copyToClipboard(value)
-    }
+    if (!cellPosition) return
+    const eventMessage = cellPosition.row.event_message
+    copyToClipboard(eventMessage, () => {
+      toast.success('Copied to clipboard')
+    })
   }
 
   const LogsExplorerTableHeader = () => (
@@ -420,7 +440,7 @@ const LogTable = ({
               <Menu id={LOGS_EXPLORER_CONTEXT_MENU_ID} animation={false}>
                 <Item onClick={onCopyCell}>
                   <Clipboard size={14} />
-                  <span className="ml-2 text-xs">Copy cell content</span>
+                  <span className="ml-2 text-xs">Copy event message</span>
                 </Item>
               </Menu>,
               document.body

apps/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx

@@ -56,7 +56,11 @@ export const SelectionDetailedRow = ({
 export const TextFormatter: React.FC<{ className?: string; value: string }> = ({
   value,
   className,
-}) => <span className={'font-mono text-xs truncate ' + className}>{value}</span>
+}) => (
+  <span className={cn('font-mono text-xs truncate select-text cursor-text', className)}>
+    {value}
+  </span>
+)
 
 export const ResponseCodeFormatter = ({ value }: { value: string }) => {
   if (!value) {