diff --git a/studio/components/interfaces/Settings/Logs/LogTable.tsx b/studio/components/interfaces/Settings/Logs/LogTable.tsx
index 9036e383825..495cf253833 100644
--- a/studio/components/interfaces/Settings/Logs/LogTable.tsx
+++ b/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
diff --git a/studio/tests/pages/projects/logs.test.js b/studio/tests/pages/projects/logs.test.js
index da0a33eb36d..b6433d41f07 100644
--- a/studio/tests/pages/projects/logs.test.js
+++ b/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()
+ 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()
await screen.findByText('Events')