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')