Merge pull request #5782 from supabase/fix/studio-logs-log-panel-not-closing-on-custom-query-run

bugfix/studio/logs:  hide log selection panel when custom logs query is run

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

@@ -53,7 +53,8 @@ const LogTable = ({ isCustomQuery, data = [] }: Props) => {
       )
     },
   }))
-
+  
+  const stringData = JSON.stringify(data)
   const logMap = useMemo(() => {
     if (!hasLogDataFormat) return {} as LogMap
     const logData = data as LogData[]
@@ -61,15 +62,13 @@ const LogTable = ({ isCustomQuery, data = [] }: Props) => {
       acc[d.id] = d
       return acc
     }, {}) as LogMap
-  }, [JSON.stringify(data)])
+  }, [stringData])
 
-  const stringData = JSON.stringify(data)
   useEffect(() => {
-    if (!hasLogDataFormat) return
     if (isNil(data)) return
     if (focusedLog && !(focusedLog.id in logMap)) {
       setFocusedLog(null)
-    }
+    } 
   }, [stringData])
 
   if (!data) return null

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

@@ -375,6 +375,31 @@ test('bug: load older btn does not error out when previous page is empty', async
   })
 })
 
+test('bug: log selection gets hidden when custom query is run', async () => {
+  const data = [
+    logDataFixture({
+      event_message: 'some event happened',
+      metadata: {
+        my_key: 'something_value',
+      },
+    }),
+  ]
+  get.mockResolvedValue({ data })
+  const {container} =render(<LogPage />)
+  fireEvent.click(await screen.findByText(/happened/))
+  await screen.findByDisplayValue(/something_value/)
+  get.mockResolvedValue({ data: [] })
+
+  const toggle = getToggleByText(/via query/)
+  expect(toggle).toBeTruthy()
+  userEvent.click(toggle)
+  const editor = container.querySelector('.monaco-editor')
+  userEvent.type(editor, 'select \ncount(*) as my_count \nfrom edge_logs')
+  userEvent.click(await screen.findByText('Run'))
+
+  await expect(screen.findByDisplayValue(/something_value/)).rejects.toThrow()
+})
+
 test('log event chart hide', async () => {
   render(<LogPage />)
   await screen.findByText('Events')