Merge pull request #16054 from supabase/feat/copy-logs-to-clipboard

feat: Add a button to copy all shown loglines to clipboard

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

@@ -1,21 +1,23 @@
-import { useEffect, useState, useMemo, useCallback } from 'react'
-import { Alert, Button, IconEye, IconEyeOff } from 'ui'
 import DataGrid, { Row, RowRendererProps } from '@supabase/react-data-grid'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { Alert, Button, IconClipboard, IconEye, IconEyeOff } from 'ui'
 
-import LogSelection, { LogSelectionProps } from './LogSelection'
-import { LogData, QueryType } from './Logs.types'
-import { isDefaultLogPreviewFormat } from './Logs.utils'
 import CSVButton from 'components/ui/CSVButton'
+import { useStore } from 'hooks'
+import { copyToClipboard } from 'lib/helpers'
+import { isEqual } from 'lodash'
+import { LogQueryError } from '.'
+import AuthColumnRenderer from './LogColumnRenderers/AuthColumnRenderer'
 import DatabaseApiColumnRender from './LogColumnRenderers/DatabaseApiColumnRender'
 import DatabasePostgresColumnRender from './LogColumnRenderers/DatabasePostgresColumnRender'
 import DefaultPreviewColumnRenderer from './LogColumnRenderers/DefaultPreviewColumnRenderer'
-import { LogQueryError } from '.'
-import ResourcesExceededErrorRenderer from './LogsErrorRenderers/ResourcesExceededErrorRenderer'
-import DefaultErrorRenderer from './LogsErrorRenderers/DefaultErrorRenderer'
-import FunctionsLogsColumnRender from './LogColumnRenderers/FunctionsLogsColumnRender'
 import FunctionsEdgeColumnRender from './LogColumnRenderers/FunctionsEdgeColumnRender'
-import AuthColumnRenderer from './LogColumnRenderers/AuthColumnRenderer'
-import { isEqual } from 'lodash'
+import FunctionsLogsColumnRender from './LogColumnRenderers/FunctionsLogsColumnRender'
+import LogSelection, { LogSelectionProps } from './LogSelection'
+import { LogData, QueryType } from './Logs.types'
+import { isDefaultLogPreviewFormat } from './Logs.utils'
+import DefaultErrorRenderer from './LogsErrorRenderers/DefaultErrorRenderer'
+import ResourcesExceededErrorRenderer from './LogsErrorRenderers/ResourcesExceededErrorRenderer'
 
 interface Props {
   data?: Array<LogData | Object>
@@ -64,6 +66,7 @@ const LogTable = ({
   projectRef,
   params,
 }: Props) => {
+  const { ui } = useStore()
   const [focusedLog, setFocusedLog] = useState<LogData | null>(null)
   const firstRow: LogData | undefined = data?.[0] as LogData
   const columnNames = Object.keys(data[0] || {})
@@ -170,6 +173,12 @@ const LogTable = ({
     []
   )
 
+  const copyResultsToClipboard = () => {
+    copyToClipboard(stringData, () => {
+      ui.setNotification({ category: 'success', message: 'Results copied to clipboard.' })
+    })
+  }
+
   const LogsExplorerTableHeader = () => (
     <div className="flex w-full items-center justify-between rounded-tl rounded-tr border-t border-l border-r bg-scale-100 px-5 py-2 dark:bg-scale-300">
       <div className="flex items-center gap-2">
@@ -192,6 +201,9 @@ const LogTable = ({
             Histogram
           </Button>
         )}
+        <Button type="default" icon={<IconClipboard />} onClick={copyResultsToClipboard}>
+          Copy to clipboard
+        </Button>
         <CSVButton data={data}>Download</CSVButton>
       </div>
     </div>

studio/tests/pages/projects/LogTable.test.js

@@ -26,7 +26,7 @@ test('can display log data', async () => {
   await screen.findByText(/something_value/)
 
   // render copy button
-  userEvent.click(await screen.findByText(/Copy/))
+  userEvent.click(await screen.findByText('Copy'))
   await screen.findByText(/Copied/)
 })
 

studio/tests/pages/projects/logs-query.test.js

@@ -178,7 +178,7 @@ test('bug: can edit query after selecting a log', async () => {
   const rowValue = await screen.findByText(/12345/) // row value
   // open up an show selection panel
   await userEvent.click(rowValue)
-  await screen.findByText(/Copy/)
+  await screen.findByText('Copy')
 
   // change the query
   let editor = container.querySelector('.monaco-editor')
@@ -197,7 +197,7 @@ test('bug: can edit query after selecting a log', async () => {
     { timeout: 1000 }
   )
   // closes the selection panel
-  await expect(screen.findByText(/Copy/)).rejects.toThrow()
+  await expect(screen.findByText('Copy')).rejects.toThrow()
 })
 
 test('query warnings', async () => {