From 8f8bd6e70dfac6fce6cef6ea89ba4649f9d00320 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Thu, 13 Oct 2022 16:16:27 +0000
Subject: [PATCH 01/13] fix: make SQL editor preview table cells copyable

---
 .../to-be-cleaned/SqlEditor/TabSqlQuery.js    | 24 +++++++++++++++----
 studio/styles/grid.scss                       | 18 +++++++++++++-
 2 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js b/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
index dd0cdba43d2..c2aedc4800e 100644
--- a/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
+++ b/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
@@ -5,7 +5,7 @@ import { CSVLink } from 'react-csv'
 import { debounce } from 'lodash'
 import { observer } from 'mobx-react-lite'
 import { useEffect, useRef, useState } from 'react'
-import { Button, Dropdown, IconChevronDown } from 'ui'
+import { Button, Dropdown, IconChevronDown, IconClipboard } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { useKeyboardShortcuts, useStore, useWindowDimensions, checkPermissions } from 'hooks'
@@ -311,11 +311,11 @@ const Results = ({ results }) => {
     {
       'Command+c': (event) => {
         event.stopPropagation()
-        onCopyCell()
+        onCopySelectedCell()
       },
       'Control+c': (event) => {
         event.stopPropagation()
-        onCopyCell()
+        onCopySelectedCell()
       },
     },
     ['INPUT', 'TEXTAREA']
@@ -337,7 +337,21 @@ const Results = ({ results }) => {
   }
 
   const formatter = (column, row) => {
-    return <span className="font-mono text-xs">{JSON.stringify(row[column])}</span>
+    return (
+      <div className="sb-grid-select-cell__formatter overflow-hidden">
+        <span className="font-mono text-xs truncate">{JSON.stringify(row[column])}</span>
+
+        {row[column] && (
+          <Button
+            type="outline"
+            icon={<IconClipboard size="tiny" />}
+            onClick={() => copyToClipboard(formatClipboardValue(row[column]))}
+            className="sb-grid-select-cell__copy-action"
+            title="Copy"
+          />
+        )}
+      </div>
+    )
   }
   const columnRender = (name) => {
     return <div className="flex h-full items-center justify-center font-mono">{name}</div>
@@ -355,7 +369,7 @@ const Results = ({ results }) => {
     setCellPosition(position)
   }
 
-  function onCopyCell() {
+  function onCopySelectedCell() {
     if (columns && cellPosition) {
       const { idx, rowIdx } = cellPosition
       const column = columns[idx]
diff --git a/studio/styles/grid.scss b/studio/styles/grid.scss
index 7da30942b20..20c6634572b 100644
--- a/studio/styles/grid.scss
+++ b/studio/styles/grid.scss
@@ -388,7 +388,7 @@
 .sb-grid-select-editor {
   button {
     @apply border-none rounded-none shadow-none;
-    box-shadow: none !important
+    box-shadow: none !important;
   }
 }
 
@@ -527,6 +527,22 @@
   @apply border-scale-300;
 }
 
+/*
+  Cell copy action
+*/
+
+.sb-grid-select-cell__copy-action {
+  @apply hidden mr-1;
+}
+
+.sb-grid-select-cell__formatter:hover .sb-grid-select-cell__copy-action {
+  @apply block opacity-50;
+}
+
+.sb-grid-select-cell__copy-action:hover {
+  @apply opacity-100;
+}
+
 /*
   Header
 */

From a66e5028ad1d587a0cd4d6eecf5ff9cc6c246c45 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Fri, 14 Oct 2022 04:05:03 +0000
Subject: [PATCH 02/13] refactor: styling with pure Tailwindcss classes

---
 .../to-be-cleaned/SqlEditor/TabSqlQuery.js     |  4 ++--
 studio/styles/grid.scss                        | 18 +-----------------
 2 files changed, 3 insertions(+), 19 deletions(-)

diff --git a/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js b/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
index c2aedc4800e..fc42aef8ec1 100644
--- a/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
+++ b/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
@@ -338,7 +338,7 @@ const Results = ({ results }) => {
 
   const formatter = (column, row) => {
     return (
-      <div className="sb-grid-select-cell__formatter overflow-hidden">
+      <div className="group sb-grid-select-cell__formatter overflow-hidden">
         <span className="font-mono text-xs truncate">{JSON.stringify(row[column])}</span>
 
         {row[column] && (
@@ -346,7 +346,7 @@ const Results = ({ results }) => {
             type="outline"
             icon={<IconClipboard size="tiny" />}
             onClick={() => copyToClipboard(formatClipboardValue(row[column]))}
-            className="sb-grid-select-cell__copy-action"
+            className="hidden mr-1 group-hover:block group-hover:opacity-50 hover:opacity-100"
             title="Copy"
           />
         )}
diff --git a/studio/styles/grid.scss b/studio/styles/grid.scss
index 20c6634572b..7da30942b20 100644
--- a/studio/styles/grid.scss
+++ b/studio/styles/grid.scss
@@ -388,7 +388,7 @@
 .sb-grid-select-editor {
   button {
     @apply border-none rounded-none shadow-none;
-    box-shadow: none !important;
+    box-shadow: none !important
   }
 }
 
@@ -527,22 +527,6 @@
   @apply border-scale-300;
 }
 
-/*
-  Cell copy action
-*/
-
-.sb-grid-select-cell__copy-action {
-  @apply hidden mr-1;
-}
-
-.sb-grid-select-cell__formatter:hover .sb-grid-select-cell__copy-action {
-  @apply block opacity-50;
-}
-
-.sb-grid-select-cell__copy-action:hover {
-  @apply opacity-100;
-}
-
 /*
   Header
 */

From e525edd70dcfd9c75bd2853d0debb009f2ab3928 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Sun, 16 Oct 2022 06:57:51 +0000
Subject: [PATCH 03/13] chore: implements suggested improvements

---
 .../to-be-cleaned/SqlEditor/TabSqlQuery.js    | 39 ++++++++++++++++---
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js b/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
index fc42aef8ec1..82973f2cfee 100644
--- a/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
+++ b/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
@@ -1,11 +1,12 @@
 import Split from 'react-split'
 import Editor from '@monaco-editor/react'
 import DataGrid from '@supabase/react-data-grid'
+import classNames from 'classnames'
 import { CSVLink } from 'react-csv'
 import { debounce } from 'lodash'
 import { observer } from 'mobx-react-lite'
 import { useEffect, useRef, useState } from 'react'
-import { Button, Dropdown, IconChevronDown, IconClipboard } from 'ui'
+import { Button, Dropdown, IconCheck, IconChevronDown, IconClipboard } from 'ui'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 
 import { useKeyboardShortcuts, useStore, useWindowDimensions, checkPermissions } from 'hooks'
@@ -306,6 +307,7 @@ const UtilityTabResults = observer(() => {
 
 const Results = ({ results }) => {
   const [cellPosition, setCellPosition] = useState(undefined)
+  const [copiedCell, setCopiedCell] = useState(undefined)
 
   useKeyboardShortcuts(
     {
@@ -336,7 +338,29 @@ const Results = ({ results }) => {
     )
   }
 
-  const formatter = (column, row) => {
+  useEffect(() => {
+    let timeoutId = 0
+
+    if (copiedCell) {
+      timeoutId = setTimeout(() => {
+        setCopiedCell(undefined)
+      }, 1000)
+    }
+
+    return () => {
+      timeoutId && clearTimeout(timeoutId)
+    }
+  }, [copiedCell])
+
+  const handleCopyClick = (column, row, rowIndex) => {
+    copyToClipboard(formatClipboardValue(row[column]), () => {
+      setCopiedCell(`${column},${rowIndex}`)
+    })
+  }
+
+  const formatter = (column, row, rowIndex) => {
+    const isCopied = copiedCell === `${column},${rowIndex}`
+
     return (
       <div className="group sb-grid-select-cell__formatter overflow-hidden">
         <span className="font-mono text-xs truncate">{JSON.stringify(row[column])}</span>
@@ -344,9 +368,12 @@ const Results = ({ results }) => {
         {row[column] && (
           <Button
             type="outline"
-            icon={<IconClipboard size="tiny" />}
-            onClick={() => copyToClipboard(formatClipboardValue(row[column]))}
-            className="hidden mr-1 group-hover:block group-hover:opacity-50 hover:opacity-100"
+            icon={isCopied ? <IconCheck size="tiny" /> : <IconClipboard size="tiny" />}
+            onClick={() => handleCopyClick(column, row, rowIndex)}
+            className={classNames(
+              'mx-1 group-hover:block group-hover:opacity-50 hover:opacity-100',
+              !isCopied && 'hidden'
+            )}
             title="Copy"
           />
         )}
@@ -359,7 +386,7 @@ const Results = ({ results }) => {
   const columns = Object.keys(results[0]).map((key) => ({
     key,
     name: key,
-    formatter: ({ row }) => formatter(key, row),
+    formatter: ({ row }) => formatter(key, row, results.indexOf(row)),
     headerRenderer: () => columnRender(key),
     resizable: true,
     width: 120,

From dd71508f2e18c021d7114d6bc540df595e37f509 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Mon, 17 Oct 2022 04:13:05 +0000
Subject: [PATCH 04/13] fix: conditional hook rule

---
 .../to-be-cleaned/SqlEditor/TabSqlQuery.js    | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js b/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
index 82973f2cfee..3663daf9d33 100644
--- a/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
+++ b/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
@@ -323,6 +323,22 @@ const Results = ({ results }) => {
     ['INPUT', 'TEXTAREA']
   )
 
+  useEffect(() => {
+    let timeoutId = 0
+
+    if (copiedCell) {
+      timeoutId = setTimeout(() => {
+        setCopiedCell(undefined)
+      }, 1000)
+    }
+
+    return () => {
+      // we need to clear previous timeout to prevent checkmark flickering
+      // when clicking `Copy` btn multiple times in a short time
+      timeoutId && clearTimeout(timeoutId)
+    }
+  }, [copiedCell])
+
   if (results?.error) {
     return (
       <div className="bg-table-header-light dark:bg-table-header-dark">
@@ -338,20 +354,6 @@ const Results = ({ results }) => {
     )
   }
 
-  useEffect(() => {
-    let timeoutId = 0
-
-    if (copiedCell) {
-      timeoutId = setTimeout(() => {
-        setCopiedCell(undefined)
-      }, 1000)
-    }
-
-    return () => {
-      timeoutId && clearTimeout(timeoutId)
-    }
-  }, [copiedCell])
-
   const handleCopyClick = (column, row, rowIndex) => {
     copyToClipboard(formatClipboardValue(row[column]), () => {
       setCopiedCell(`${column},${rowIndex}`)

From f49f76baa41f6a70c5c034d447e79998fe597065 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Mon, 17 Oct 2022 07:51:31 +0000
Subject: [PATCH 05/13] chore: updates comment wording

---
 studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js b/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
index 3663daf9d33..28888b61c59 100644
--- a/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
+++ b/studio/components/to-be-cleaned/SqlEditor/TabSqlQuery.js
@@ -334,7 +334,7 @@ const Results = ({ results }) => {
 
     return () => {
       // we need to clear previous timeout to prevent checkmark flickering
-      // when clicking `Copy` btn multiple times in a short time
+      // when clicking `Copy` button multiple times in a short time
       timeoutId && clearTimeout(timeoutId)
     }
   }, [copiedCell])

From adc49fec0e3419e149066602df745456280a6bb9 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Fri, 21 Oct 2022 03:29:14 +0800
Subject: [PATCH 06/13] feat: copy button for log selection

---
 .../interfaces/Settings/Logs/LogSelection.tsx | 55 +++++++++++++------
 studio/components/ui/CopyButton.tsx           | 32 +++++++++++
 studio/tests/components/CopyButton.test.tsx   | 12 ++++
 studio/tests/pages/projects/LogTable.test.js  |  4 ++
 4 files changed, 87 insertions(+), 16 deletions(-)
 create mode 100644 studio/components/ui/CopyButton.tsx
 create mode 100644 studio/tests/components/CopyButton.test.tsx

diff --git a/studio/components/interfaces/Settings/Logs/LogSelection.tsx b/studio/components/interfaces/Settings/Logs/LogSelection.tsx
index 01cc5473042..b814789d926 100644
--- a/studio/components/interfaces/Settings/Logs/LogSelection.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogSelection.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react'
-import { IconX } from 'ui'
+import { Button, Divider, IconX } from 'ui'
 
 import { LogData, QueryType } from './Logs.types'
 
@@ -9,9 +9,15 @@ import FunctionInvocationSelectionRender from './LogSelectionRenderers/FunctionI
 import FunctionLogsSelectionRender from './LogSelectionRenderers/FunctionLogsSelectionRender'
 import DefaultExplorerSelectionRenderer from './LogSelectionRenderers/DefaultExplorerSelectionRenderer'
 import DefaultPreviewSelectionRenderer from './LogSelectionRenderers/DefaultPreviewSelectionRenderer'
-import { isDefaultLogPreviewFormat, LogsEndpointParams } from '.'
+import {
+  isDefaultLogPreviewFormat,
+  isUnixMicro,
+  LogsEndpointParams,
+  unixMicroToIsoTimestamp,
+} from '.'
 import useSingleLog from 'hooks/analytics/useSingleLog'
 import Connecting from 'components/ui/Loading/Loading'
+import CopyButton from 'components/ui/CopyButton'
 
 export interface LogSelectionProps {
   log: LogData | null
@@ -64,6 +70,23 @@ const LogSelection: FC<LogSelectionProps> = ({
     }
   }
 
+  const selectionText = () => {
+    if (!fullLog) return ''
+    if (queryType) {
+      return `Log ID
+${fullLog.id}\n
+Log Timestamp (UTC)
+${isUnixMicro(fullLog.timestamp) ? unixMicroToIsoTimestamp(fullLog.timestamp) : fullLog.timestamp}\n
+Log Event Message
+${fullLog.event_message}\n
+Log Metadata
+${JSON.stringify(fullLog.metadata, null, 2)}
+`
+    }
+
+    return JSON.stringify(fullLog, null, 2)
+  }
+
   return (
     <div
       className={[
@@ -123,22 +146,22 @@ const LogSelection: FC<LogSelectionProps> = ({
           </div>
         </div>
       </div>
-      <div
-        className=" 
-          relative
-          h-px
-          flex-grow
-          bg-scale-300
-        "
-      >
-        <div
-          className="absolute top-6 right-6 cursor-pointer text-scale-900 transition hover:text-scale-1200"
-          onClick={onClose}
-        >
-          <IconX size={14} strokeWidth={2} />
+      <div className="relative h-px flex-grow bg-scale-300">
+        <div className="pt-4 px-4 flex flex-col gap-4">
+          <div className="flex flex-row justify-between items-center">
+            <CopyButton text={selectionText()} type="default" />
+            <Button
+              type="text"
+              className="cursor-pointer transition hover:text-scale-1200 h-8 w-8 px-0 py-0 flex items-center justify-center"
+              onClick={onClose}
+            >
+              <IconX size={14} strokeWidth={2} className="text-scale-900" />
+            </Button>
+          </div>
+          <div className="h-px w-full bg-scale-600 rounded " />
         </div>
         {isLoading && <Connecting />}
-        <div className="flex flex-col space-y-6 bg-scale-300 py-8">
+        <div className="flex flex-col space-y-6 bg-scale-300 py-4">
           {!isLoading && <Formatter />}
         </div>
       </div>
diff --git a/studio/components/ui/CopyButton.tsx b/studio/components/ui/CopyButton.tsx
new file mode 100644
index 00000000000..294a0cdb179
--- /dev/null
+++ b/studio/components/ui/CopyButton.tsx
@@ -0,0 +1,32 @@
+import { Button, ButtonProps } from 'ui'
+import { copyToClipboard } from 'lib/helpers'
+import { IconClipboard } from 'ui'
+import { useEffect, useState } from 'react'
+
+export interface CopyButtonProps extends ButtonProps {
+  text: string
+}
+const CopyButton: React.FC<CopyButtonProps> = ({ text, children, onClick, ...props }) => {
+  const [showCopied, setShowCopied] = useState(false)
+
+  useEffect(() => {
+    if (!showCopied) return
+    const timer = setTimeout(() => setShowCopied(false), 2000)
+    return () => clearTimeout(timer)
+  }, [showCopied])
+
+  return (
+    <Button
+      onClick={(e) => {
+        setShowCopied(true)
+        copyToClipboard(text)
+        onClick?.(e)
+      }}
+      icon={<IconClipboard size="tiny" />}
+      {...props}
+    >
+      {children ?? (showCopied ? 'Copied' : 'Copy')}
+    </Button>
+  )
+}
+export default CopyButton
diff --git a/studio/tests/components/CopyButton.test.tsx b/studio/tests/components/CopyButton.test.tsx
new file mode 100644
index 00000000000..d8db3fc667e
--- /dev/null
+++ b/studio/tests/components/CopyButton.test.tsx
@@ -0,0 +1,12 @@
+import { screen } from '@testing-library/dom'
+import userEvent from '@testing-library/user-event'
+import CopyButton from 'components/ui/CopyButton'
+import { render } from 'tests/helpers'
+
+test('shows copied text', async () => {
+    const callback = jest.fn()
+  render(<CopyButton text="some text" onClick={callback} />)
+  userEvent.click(await screen.findByText('Copy'))
+  await screen.findByText('Copied')
+  expect(callback).toBeCalled()
+})
diff --git a/studio/tests/pages/projects/LogTable.test.js b/studio/tests/pages/projects/LogTable.test.js
index 804bfdbe685..94624e0b891 100644
--- a/studio/tests/pages/projects/LogTable.test.js
+++ b/studio/tests/pages/projects/LogTable.test.js
@@ -23,6 +23,10 @@ test('can display log data', async () => {
   userEvent.click(row)
   await screen.findByText(/my_key/)
   await screen.findByText(/something_value/)
+
+  // render copy button
+  userEvent.click(await screen.findByText(/Copy/))
+  await screen.findByText(/Copied/)
 })
 
 test('dedupes log lines with exact id', async () => {

From a432267ebab7273294299666444c4583102042a0 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Fri, 21 Oct 2022 04:00:39 +0800
Subject: [PATCH 07/13] feat: add log selection detailed row value copying

---
 .../DatabaseApiSelectionRender.tsx            | 27 ++-----
 .../DatabasePostgresSelectionRender.tsx       | 24 +++---
 .../DefaultExplorerSelectionRenderer.tsx      | 27 +------
 .../DefaultPreviewSelectionRenderer.tsx       | 73 ++++++-------------
 .../FunctionInvocationSelectionRender.tsx     | 45 ++++--------
 .../FunctionLogsSelectionRender.tsx           | 39 +++-------
 .../Settings/Logs/LogsFormatters.tsx          | 30 ++++++++
 studio/components/ui/CopyButton.tsx           | 19 ++++-
 8 files changed, 115 insertions(+), 169 deletions(-)

diff --git a/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DatabaseApiSelectionRender.tsx b/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DatabaseApiSelectionRender.tsx
index 16402c0e2e1..1c786f068ae 100644
--- a/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DatabaseApiSelectionRender.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DatabaseApiSelectionRender.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { LOGS_TAILWIND_CLASSES } from '../Logs.constants'
 import LogsDivider from '../Logs.Divider'
-import { jsonSyntaxHighlight, ResponseCodeFormatter } from '../LogsFormatters'
+import { jsonSyntaxHighlight, ResponseCodeFormatter, SelectionDetailedRow } from '../LogsFormatters'
 
 const DatabaseApiSelectionRender = ({ log }: any) => {
   const request = log?.metadata[0]?.request?.[0]
@@ -13,27 +13,16 @@ const DatabaseApiSelectionRender = ({ log }: any) => {
   const clientInfo = request?.headers?.[0]?.x_client_info
   const referer = request?.headers?.[0]?.referer
 
-  const DetailedRow = ({ label, value }: { label: string; value: string | React.ReactNode }) => {
-    return (
-      <div className="grid grid-cols-12">
-        <span className="text-scale-900 text-sm col-span-4 whitespace-pre-wrap">{label}</span>
-        <span className="text-scale-1200 text-sm col-span-8 whitespace-pre-wrap break-all">
-          {value}
-        </span>
-      </div>
-    )
-  }
-
   return (
     <>
       <div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding} space-y-2`}>
-        <DetailedRow label="Status" value={<ResponseCodeFormatter value={status} />} />
-        <DetailedRow label="Method" value={method} />
-        <DetailedRow label="Timestamp" value={log.timestamp} />
-        <DetailedRow label="IP Address" value={ipAddress} />
-        <DetailedRow label="Origin Country" value={countryOrigin} />
-        {clientInfo && <DetailedRow label="Client" value={clientInfo} />}
-        {referer && <DetailedRow label="Referer" value={referer} />}
+        <SelectionDetailedRow label="Status" value={status} valueRender={<ResponseCodeFormatter value={status} />} />
+        <SelectionDetailedRow label="Method" value={method} />
+        <SelectionDetailedRow label="Timestamp" value={log.timestamp} />
+        <SelectionDetailedRow label="IP Address" value={ipAddress} />
+        <SelectionDetailedRow label="Origin Country" value={countryOrigin} />
+        {clientInfo && <SelectionDetailedRow label="Client" value={clientInfo} />}
+        {referer && <SelectionDetailedRow label="Referer" value={referer} />}
       </div>
       <LogsDivider />
       <div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding}`}>
diff --git a/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DatabasePostgresSelectionRender.tsx b/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DatabasePostgresSelectionRender.tsx
index 1f341742ccc..c583f131055 100644
--- a/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DatabasePostgresSelectionRender.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DatabasePostgresSelectionRender.tsx
@@ -2,21 +2,13 @@ import { Alert } from 'ui'
 import React from 'react'
 import { LOGS_TAILWIND_CLASSES } from '../Logs.constants'
 import LogsDivider from '../Logs.Divider'
-import { jsonSyntaxHighlight, SeverityFormatter } from '../LogsFormatters'
+import { jsonSyntaxHighlight, SelectionDetailedRow, SeverityFormatter } from '../LogsFormatters'
 
 const DatabasePostgresSelectionRender = ({ log }: any) => {
   const postgresUsername = log?.metadata[0]?.parsed[0]?.user_name
   const sessionId = log?.metadata[0]?.parsed[0]?.session_id
   const hint = log?.metadata[0]?.parsed[0]?.hint
-
-  const DetailedRow = ({ label, value }: { label: string; value: string | React.ReactNode }) => {
-    return (
-      <div className="grid grid-cols-12">
-        <p className="col-span-4 whitespace-pre-wrap text-sm text-scale-900">{label}</p>
-        <p className="col-span-8 whitespace-pre-wrap text-base text-scale-1200">{value}</p>
-      </div>
-    )
-  }
+  const errorSeverity = log?.metadata[0]?.parsed[0]?.error_severity
 
   return (
     <>
@@ -29,13 +21,17 @@ const DatabasePostgresSelectionRender = ({ log }: any) => {
       </div>
       <LogsDivider />
       <div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding} space-y-2`}>
-        <DetailedRow label="Severity" value={<SeverityFormatter value={log.error_severity} />} />
-        <DetailedRow label="Postgres Username" value={postgresUsername} />
-        <DetailedRow label="Session ID" value={sessionId} />
+        <SelectionDetailedRow
+          label="Severity"
+          value={errorSeverity}
+          valueRender={<SeverityFormatter value={errorSeverity} />}
+        />
+        <SelectionDetailedRow label="Postgres Username" value={postgresUsername} />
+        <SelectionDetailedRow label="Session ID" value={sessionId} />
       </div>
       {hint && (
         <div className={`mt-4 ${LOGS_TAILWIND_CLASSES.log_selection_x_padding}`}>
-          <Alert variant="warning" withIcon title={log?.metadata[0]?.parsed[0]?.hint} />
+          <Alert variant="warning" withIcon title={hint} />
         </div>
       )}
       <LogsDivider />
diff --git a/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultExplorerSelectionRenderer.tsx b/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultExplorerSelectionRenderer.tsx
index 479c27ceed6..a4be3324635 100644
--- a/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultExplorerSelectionRenderer.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultExplorerSelectionRenderer.tsx
@@ -1,30 +1,7 @@
 import { LOGS_TAILWIND_CLASSES } from '../Logs.constants'
-import { jsonSyntaxHighlight } from '../LogsFormatters'
+import { jsonSyntaxHighlight, SelectionDetailedRow } from '../LogsFormatters'
 
 const DefaultExplorerSelectionRenderer = ({ log }: any) => {
-  const DetailedRow = ({
-    label,
-    value,
-    code,
-  }: {
-    label: string
-    value: string | React.ReactNode
-    code?: boolean
-  }) => {
-    return (
-      <div className="grid grid-cols-12">
-        <span className="text-scale-900 text-sm col-span-4 whitespace-prep-wrap">{label}</span>
-        <span
-          className={`text-scale-1200 text-sm col-span-8 whitespace-prep-wrap ${
-            code && 'text-xs font-mono'
-          }`}
-        >
-          {value}
-        </span>
-      </div>
-    )
-  }
-
   const DetailedJsonRow = ({
     label,
     value,
@@ -63,7 +40,7 @@ const DefaultExplorerSelectionRenderer = ({ log }: any) => {
             {value && typeof value === 'object' ? (
               <DetailedJsonRow label={key} value={value} />
             ) : (
-              <DetailedRow label={key} value={value === null ? 'NULL ' : String(value)} />
+              <SelectionDetailedRow label={key} value={value === null ? 'NULL ' : String(value)} />
             )}
           </div>
         )
diff --git a/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultPreviewSelectionRenderer.tsx b/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultPreviewSelectionRenderer.tsx
index 35d8510e98e..4f2bfd73b5a 100644
--- a/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultPreviewSelectionRenderer.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultPreviewSelectionRenderer.tsx
@@ -1,55 +1,30 @@
-import { isUnixMicro, unixMicroToIsoTimestamp } from '..'
+import { isUnixMicro, PreviewLogData, unixMicroToIsoTimestamp } from '..'
 import { LOGS_TAILWIND_CLASSES } from '../Logs.constants'
-import { jsonSyntaxHighlight } from '../LogsFormatters'
+import { jsonSyntaxHighlight, SelectionDetailedRow } from '../LogsFormatters'
 
-const DefaultPreviewSelectionRenderer = ({ log }: any) => {
-  const DetailedRow = ({
-    label,
-    value,
-    code,
-  }: {
-    label: string
-    value: string | React.ReactNode
-    code?: boolean
-  }) => {
-    return (
-      <div className="grid grid-cols-12">
-        <span className="text-scale-900 text-sm col-span-4 whitespace-prep-wrap">{label}</span>
-        <span
-          className={`text-scale-1200 text-sm col-span-8 whitespace-prep-wrap ${
-            code && 'text-xs font-mono'
-          }`}
-        >
-          {value}
-        </span>
-      </div>
-    )
-  }
-
-  return (
-    <div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding} space-y-6`}>
-      <div className="flex flex-col gap-3">
-        <h3 className="text-scale-900 text-sm">Event Message</h3>
-        <div className="text-xs text-wrap font-mono text-scale-1200 whitespace-pre-wrap overflow-x-auto">
-          {log.event_message}
-        </div>
-      </div>
-
-      <DetailedRow
-        label="ISO Timestamp"
-        value={isUnixMicro(log.timestamp) ? unixMicroToIsoTimestamp(log.timestamp) : log.timestamp}
-      />
-      <div className="flex flex-col gap-3">
-        <h3 className="text-scale-900 text-sm">Metadata</h3>
-        <pre
-          className=" className={`text-scale-1200 text-sm col-span-8 overflow-x-auto text-xs font-mono`}"
-          dangerouslySetInnerHTML={{
-            __html: jsonSyntaxHighlight(log.metadata),
-          }}
-        />
+const DefaultPreviewSelectionRenderer = ({ log }: { log: PreviewLogData }) => (
+  <div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding} space-y-6`}>
+    <div className="flex flex-col gap-3">
+      <h3 className="text-scale-900 text-sm">Event Message</h3>
+      <div className="text-xs text-wrap font-mono text-scale-1200 whitespace-pre-wrap overflow-x-auto">
+        {log.event_message}
       </div>
     </div>
-  )
-}
+
+    <SelectionDetailedRow
+      label="ISO Timestamp"
+      value={isUnixMicro(log.timestamp) ? unixMicroToIsoTimestamp(log.timestamp) : String(log.timestamp)}
+    />
+    <div className="flex flex-col gap-3">
+      <h3 className="text-scale-900 text-sm">Metadata</h3>
+      <pre
+        className=" className={`text-scale-1200 text-sm col-span-8 overflow-x-auto text-xs font-mono`}"
+        dangerouslySetInnerHTML={{
+          __html: jsonSyntaxHighlight(log.metadata!),
+        }}
+      />
+    </div>
+  </div>
+)
 
 export default DefaultPreviewSelectionRenderer
diff --git a/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/FunctionInvocationSelectionRender.tsx b/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/FunctionInvocationSelectionRender.tsx
index 51cfe6bb247..cb772f6964f 100644
--- a/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/FunctionInvocationSelectionRender.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/FunctionInvocationSelectionRender.tsx
@@ -2,7 +2,7 @@ import dayjs from 'dayjs'
 import { filterFunctionsRequestResponse } from 'lib/logs'
 import { PreviewLogData } from '..'
 import { LOGS_TAILWIND_CLASSES } from '../Logs.constants'
-import { jsonSyntaxHighlight, ResponseCodeFormatter } from '../LogsFormatters'
+import { jsonSyntaxHighlight, ResponseCodeFormatter, SelectionDetailedRow } from '../LogsFormatters'
 
 const FunctionInvocationSelectionRender = ({ log }: { log: PreviewLogData }) => {
   const metadata = log.metadata?.[0]
@@ -15,39 +15,22 @@ const FunctionInvocationSelectionRender = ({ log }: { log: PreviewLogData }) =>
   const deploymentId = metadata.deployment_id
   const timestamp = dayjs(log.timestamp / 1000)
 
-  const DetailedRow = ({
-    label,
-    value,
-    code,
-  }: {
-    label: string
-    value: string | React.ReactNode
-    code?: boolean
-  }) => {
-    return (
-      <div className="grid grid-cols-12">
-        <span className="text-scale-900 text-sm col-span-4 whitespace-pre-wrap">{label}</span>
-        <span
-          className={`text-scale-1200 text-sm col-span-8 whitespace-pre-wrap ${
-            code && 'text-xs font-mono'
-          }`}
-        >
-          {value}
-        </span>
-      </div>
-    )
-  }
-
   return (
     <>
       <div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding} space-y-2`}>
-        <DetailedRow label="Status" value={<ResponseCodeFormatter value={status} />} />
-        <DetailedRow label="Method" value={method} />
-        <DetailedRow label="Timestamp" value={dayjs(timestamp).format('DD MMM, YYYY HH:mm')} />
-        <DetailedRow label="Execution Time" value={`${executionTimeMs}ms`} />
-        <DetailedRow label="Deployment ID" value={deploymentId} />
-        <DetailedRow label="Log ID" value={log.id} />
-        <DetailedRow label="Request Path" value={requestUrl.pathname + requestUrl.search} />
+        <SelectionDetailedRow label="Status" value={status} valueRender={<ResponseCodeFormatter value={status} />} />
+        <SelectionDetailedRow label="Method" value={method} />
+        <SelectionDetailedRow
+          label="Timestamp"
+          value={dayjs(timestamp).format('DD MMM, YYYY HH:mm')}
+        />
+        <SelectionDetailedRow label="Execution Time" value={`${executionTimeMs}ms`} />
+        <SelectionDetailedRow label="Deployment ID" value={deploymentId} />
+        <SelectionDetailedRow label="Log ID" value={log.id} />
+        <SelectionDetailedRow
+          label="Request Path"
+          value={requestUrl.pathname + requestUrl.search}
+        />
       </div>
       <div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding}`}>
         <h3 className="text-lg text-scale-1200 mb-4">Request body</h3>
diff --git a/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/FunctionLogsSelectionRender.tsx b/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/FunctionLogsSelectionRender.tsx
index 9d371f162d7..fb5a925767b 100644
--- a/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/FunctionLogsSelectionRender.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/FunctionLogsSelectionRender.tsx
@@ -1,34 +1,11 @@
 import dayjs from 'dayjs'
 import { LOGS_TAILWIND_CLASSES } from '../Logs.constants'
-import { jsonSyntaxHighlight, SeverityFormatter } from '../LogsFormatters'
+import { jsonSyntaxHighlight, SelectionDetailedRow, SeverityFormatter } from '../LogsFormatters'
 
 const FunctionLogsSelectionRender = ({ log }: any) => {
   const timestamp = dayjs(log.timestamp / 1000)
   const metadata = log.metadata[0]
 
-  const DetailedRow = ({
-    label,
-    value,
-    code,
-  }: {
-    label: string
-    value: string | React.ReactNode
-    code?: boolean
-  }) => {
-    return (
-      <div className="grid grid-cols-12">
-        <span className="text-scale-900 text-sm col-span-4 whitespace-pre-wrap">{label}</span>
-        <span
-          className={`text-scale-1200 text-sm col-span-8 whitespace-pre-wrap ${
-            code && 'text-xs font-mono'
-          }`}
-        >
-          {value}
-        </span>
-      </div>
-    )
-  }
-
   return (
     <>
       <div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding}`}>
@@ -39,11 +16,15 @@ const FunctionLogsSelectionRender = ({ log }: any) => {
       </div>
       <div className="h-px w-full bg-panel-border-interior-light dark:bg-panel-border-interior-dark"></div>
       <div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding} space-y-2`}>
-        <DetailedRow label="Severity" value={<SeverityFormatter value={metadata.level} />} />
-        <DetailedRow label="Deployment version" value={metadata.version} />
-        <DetailedRow label="Timestamp" value={timestamp.format('DD MMM, YYYY HH:mm')} />
-        <DetailedRow label="Execution ID" value={metadata.execution_id} />
-        <DetailedRow label="Deployment ID" value={metadata.deployment_id} />
+        <SelectionDetailedRow
+          label="Severity"
+          value={metadata.level}
+          valueRender={<SeverityFormatter value={metadata.level} />}
+        />
+        <SelectionDetailedRow label="Deployment version" value={metadata.version} />
+        <SelectionDetailedRow label="Timestamp" value={timestamp.format('DD MMM, YYYY HH:mm')} />
+        <SelectionDetailedRow label="Execution ID" value={metadata.execution_id} />
+        <SelectionDetailedRow label="Deployment ID" value={metadata.deployment_id} />
       </div>
       <div className={`${LOGS_TAILWIND_CLASSES.log_selection_x_padding}`}>
         <h3 className="text-lg text-scale-1200 mb-4">Metadata</h3>
diff --git a/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx b/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx
index 82156ba5284..87ed2f6f855 100644
--- a/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogsFormatters.tsx
@@ -8,11 +8,41 @@ import { IconAlertCircle, IconInfo } from 'ui'
 import dayjs from 'dayjs'
 import React from 'react'
 import { isUnixMicro, unixMicroToIsoTimestamp } from '.'
+import CopyButton from 'components/ui/CopyButton'
 
 export const RowLayout: React.FC = ({ children }) => (
   <div className="flex h-full w-full items-center gap-4">{children}</div>
 )
 
+export const SelectionDetailedRow = ({
+  label,
+  value,
+  valueRender,
+}: {
+  label: string
+  value: string
+  valueRender?: React.ReactNode
+}) => {
+  return (
+    <div className="grid grid-cols-12 group">
+      <span className="text-scale-900 text-sm col-span-4 whitespace-pre-wrap">{label}</span>
+      <span className="text-scale-1200 text-sm col-span-6 whitespace-pre-wrap break-all">
+        {valueRender ?? value}
+      </span>
+      <CopyButton
+        bounceIconOnCopy
+        text={value}
+        className="group-hover:opacity-100 opacity-0 my-auto transition col-span-2  h-4 w-4 px-0 py-0"
+        type="text"
+        title="Copy to clipboard"
+      >
+        {''}
+      </CopyButton>
+    </div>
+  )
+}
+
+// used for column renderers
 export const TextFormatter: React.FC<{ className?: string; value: string }> = ({
   value,
   className,
diff --git a/studio/components/ui/CopyButton.tsx b/studio/components/ui/CopyButton.tsx
index 294a0cdb179..690f3399d7e 100644
--- a/studio/components/ui/CopyButton.tsx
+++ b/studio/components/ui/CopyButton.tsx
@@ -5,8 +5,16 @@ import { useEffect, useState } from 'react'
 
 export interface CopyButtonProps extends ButtonProps {
   text: string
+  // used for text-less feedback
+  bounceIconOnCopy?: boolean
 }
-const CopyButton: React.FC<CopyButtonProps> = ({ text, children, onClick, ...props }) => {
+const CopyButton: React.FC<CopyButtonProps> = ({
+  text,
+  children,
+  onClick,
+  bounceIconOnCopy,
+  ...props
+}) => {
   const [showCopied, setShowCopied] = useState(false)
 
   useEffect(() => {
@@ -22,7 +30,14 @@ const CopyButton: React.FC<CopyButtonProps> = ({ text, children, onClick, ...pro
         copyToClipboard(text)
         onClick?.(e)
       }}
-      icon={<IconClipboard size="tiny" />}
+      icon={
+        <IconClipboard
+          size="tiny"
+          className={[showCopied && bounceIconOnCopy ? 'animate-bounce' : '', 'transition'].join(
+            ' '
+          )}
+        />
+      }
       {...props}
     >
       {children ?? (showCopied ? 'Copied' : 'Copy')}

From 48781daa7cc0ec5ce1e60a56230de7b89cc614e7 Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Fri, 21 Oct 2022 04:02:27 +0800
Subject: [PATCH 08/13] feat: update copy button title

---
 studio/components/interfaces/Settings/Logs/LogSelection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/components/interfaces/Settings/Logs/LogSelection.tsx b/studio/components/interfaces/Settings/Logs/LogSelection.tsx
index b814789d926..d6e16e194ae 100644
--- a/studio/components/interfaces/Settings/Logs/LogSelection.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogSelection.tsx
@@ -149,7 +149,7 @@ ${JSON.stringify(fullLog.metadata, null, 2)}
       <div className="relative h-px flex-grow bg-scale-300">
         <div className="pt-4 px-4 flex flex-col gap-4">
           <div className="flex flex-row justify-between items-center">
-            <CopyButton text={selectionText()} type="default" />
+            <CopyButton text={selectionText()} type="default" title="Copy log to clipboard" />
             <Button
               type="text"
               className="cursor-pointer transition hover:text-scale-1200 h-8 w-8 px-0 py-0 flex items-center justify-center"

From 0fc74e44ed2700dd460e8dbcdd6cdcf94b08f24a Mon Sep 17 00:00:00 2001
From: TzeYiing <ty@tzeyiing.com>
Date: Fri, 21 Oct 2022 18:40:42 +0800
Subject: [PATCH 09/13] fix: hide copy button when loading

---
 studio/components/interfaces/Settings/Logs/LogSelection.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/studio/components/interfaces/Settings/Logs/LogSelection.tsx b/studio/components/interfaces/Settings/Logs/LogSelection.tsx
index d6e16e194ae..2ecb104e789 100644
--- a/studio/components/interfaces/Settings/Logs/LogSelection.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogSelection.tsx
@@ -149,7 +149,9 @@ ${JSON.stringify(fullLog.metadata, null, 2)}
       <div className="relative h-px flex-grow bg-scale-300">
         <div className="pt-4 px-4 flex flex-col gap-4">
           <div className="flex flex-row justify-between items-center">
-            <CopyButton text={selectionText()} type="default" title="Copy log to clipboard" />
+            <div className={`transition ${!isLoading ? 'opacity-100' : 'opacity-0'}`}>
+              <CopyButton text={selectionText()} type="default" title="Copy log to clipboard" />
+            </div>
             <Button
               type="text"
               className="cursor-pointer transition hover:text-scale-1200 h-8 w-8 px-0 py-0 flex items-center justify-center"

From f26d85e9dbd7153239ef1ced96b8e93324a6e710 Mon Sep 17 00:00:00 2001
From: Lakshan Perera <lakshan@supabase.io>
Date: Tue, 25 Oct 2022 00:43:18 +1100
Subject: [PATCH 10/13] Added functions-go to client libs (#9206)

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 4a667be65dc..711b0cf3b2c 100644
--- a/README.md
+++ b/README.md
@@ -134,7 +134,7 @@ Our approach for client libraries is modular. Each sub-library is a standalone i
     <td>-</td>
     <td>-</td>
     <td><a href="https://github.com/supabase-community/storage-go" target="_blank" rel="noopener noreferrer">storage-go</a></td>
-    <td>-</td>
+    <td><a href="https://github.com/supabase-community/functions-go" target="_blank" rel="noopener noreferrer">functions-go</a></td>
   </tr>
   <tr>
     <td>Java</td>

From 80adb8d3966d76ba7cbe425f18f3b42ad8795176 Mon Sep 17 00:00:00 2001
From: Ziinc <Ziinc@users.noreply.github.com>
Date: Mon, 24 Oct 2022 21:53:17 +0800
Subject: [PATCH 11/13] chore: update LogEventChart title to be more intuitive
 (#9679)

chore: update chart title to be more intuitive
---
 studio/components/interfaces/Settings/Logs/LogEventChart.tsx | 2 +-
 studio/tests/pages/projects/LogEventChart.test.js            | 2 +-
 studio/tests/pages/projects/LogsPreviewer.test.js            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/studio/components/interfaces/Settings/Logs/LogEventChart.tsx b/studio/components/interfaces/Settings/Logs/LogEventChart.tsx
index ac4e51cca10..cc81a902c95 100644
--- a/studio/components/interfaces/Settings/Logs/LogEventChart.tsx
+++ b/studio/components/interfaces/Settings/Logs/LogEventChart.tsx
@@ -33,7 +33,7 @@ const LogEventChart: React.FC<Props> = ({ data, onBarClick }) => {
       chartSize="tiny"
       data={transformedData}
       attribute="count"
-      label="Events"
+      label="Logs / Time"
       onBarClick={(v?: { activePayload?: { payload: any }[] }) => {
         if (!v || !v?.activePayload?.[0]?.payload) return
         const unixOrIsoTimestamp = v.activePayload[0].payload.timestamp
diff --git a/studio/tests/pages/projects/LogEventChart.test.js b/studio/tests/pages/projects/LogEventChart.test.js
index 58f3862ada7..b9ea349a3ee 100644
--- a/studio/tests/pages/projects/LogEventChart.test.js
+++ b/studio/tests/pages/projects/LogEventChart.test.js
@@ -34,5 +34,5 @@ test('renders chart', async () => {
   // )
   // userEvent.click(paths[0])
   // expect(mock).toBeCalledTimes(1)
-  await screen.findByText('Events')
+  await screen.findByText(/Logs \/ Time/)
 })
diff --git a/studio/tests/pages/projects/LogsPreviewer.test.js b/studio/tests/pages/projects/LogsPreviewer.test.js
index 86cc684f691..0b1855f8957 100644
--- a/studio/tests/pages/projects/LogsPreviewer.test.js
+++ b/studio/tests/pages/projects/LogsPreviewer.test.js
@@ -309,7 +309,7 @@ test('log event chart hide', async () => {
     return { result: [] }
   })
   render(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
-  await screen.findByText('Events')
+  await screen.findByText(/Logs \/ Time/)
   const toggle = await screen.findByText(/Chart/)
   userEvent.click(toggle)
   await expect(screen.findByText('Events')).rejects.toThrow()

From 3f760475dc18179028a9fbfd902d643b7e66b838 Mon Sep 17 00:00:00 2001
From: Ziinc <Ziinc@users.noreply.github.com>
Date: Mon, 24 Oct 2022 21:53:49 +0800
Subject: [PATCH 12/13] feat: adds in new filters for api requests (#9695)

---
 .../Settings/Logs/Logs.constants.ts           | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/studio/components/interfaces/Settings/Logs/Logs.constants.ts b/studio/components/interfaces/Settings/Logs/Logs.constants.ts
index 85dc9ba6f89..6c50b7cd2d2 100644
--- a/studio/components/interfaces/Settings/Logs/Logs.constants.ts
+++ b/studio/components/interfaces/Settings/Logs/Logs.constants.ts
@@ -215,7 +215,9 @@ export const SQL_FILTER_TEMPLATES: any = {
 
     'method.get': `request.method = 'GET'`,
     'method.post': `request.method = 'POST'`,
-    'method.del': `request.method = 'DEL'`,
+    'method.put': `request.method = 'PUT'`,
+    'method.patch': `request.method = 'PATCH'`,
+    'method.delete': `request.method = 'DELETE'`,
     'method.options': `request.method = 'OPTIONS'`,
   },
   function_edge_logs: {
@@ -373,11 +375,26 @@ export const FILTER_OPTIONS: FilterTableSet = {
           label: 'OPTIONS',
           description: '',
         },
+        {
+          key: 'put',
+          label: 'PUT',
+          description: '',
+        },
         {
           key: 'post',
           label: 'POST',
           description: '',
         },
+        {
+          key: 'patch',
+          label: 'PATCH',
+          description: '',
+        },
+        {
+          key: 'delete',
+          label: 'DELETE',
+          description: '',
+        },
       ],
     },
   },

From 87a77da3135d9723ca8602eaf3540f540bfa4e07 Mon Sep 17 00:00:00 2001
From: Chensokheng <52232579+Chensokheng@users.noreply.github.com>
Date: Tue, 11 Oct 2022 22:06:53 +0700
Subject: [PATCH 13/13] fix: condition always true

---
 studio/hooks/analytics/useLogsPreview.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/studio/hooks/analytics/useLogsPreview.tsx b/studio/hooks/analytics/useLogsPreview.tsx
index 6927a579c91..278a625cf5e 100644
--- a/studio/hooks/analytics/useLogsPreview.tsx
+++ b/studio/hooks/analytics/useLogsPreview.tsx
@@ -14,7 +14,7 @@ import {
   LogsTableName,
   PREVIEWER_DATEPICKER_HELPERS,
 } from 'components/interfaces/Settings/Logs'
-import { Dispatch, SetStateAction, useEffect, useState } from 'react'
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react'
 import useSWR from 'swr'
 import useSWRInfinite, { SWRInfiniteKeyLoader } from 'swr/infinite'
 import { API_URL } from 'lib/constants'
@@ -47,18 +47,21 @@ function useLogsPreview(
   const [latestRefresh, setLatestRefresh] = useState<string>(new Date().toISOString())
 
   const [filters, setFilters] = useState<Filters>({ ...filterOverride })
+  const isFirstRender = useRef<boolean>(true)
 
   const [params, setParams] = useState<LogsEndpointParams>({
     project: projectRef,
-    sql: '',
+    sql: genDefaultQuery(table, filters),
     iso_timestamp_start: defaultHelper.calcFrom(),
     iso_timestamp_end: defaultHelper.calcTo(),
   })
 
   useEffect(() => {
-    if (filters !== {}) {
-      refresh()
+    if (isFirstRender.current) {
+      isFirstRender.current = false
+      return
     }
+    refresh()
   }, [JSON.stringify(filters)])
 
   // handle url generation for log pagination