diff --git a/studio/components/interfaces/Settings/Logs/LogTable.tsx b/studio/components/interfaces/Settings/Logs/LogTable.tsx index 6ee0bef2796..2ad0e1dfca1 100644 --- a/studio/components/interfaces/Settings/Logs/LogTable.tsx +++ b/studio/components/interfaces/Settings/Logs/LogTable.tsx @@ -15,6 +15,7 @@ import DefaultErrorRenderer from './LogsErrorRenderers/DefaultErrorRenderer' import FunctionsLogsColumnRender from './LogColumnRenderers/FunctionsLogsColumnRender' import FunctionsEdgeColumnRender from './LogColumnRenderers/FunctionsEdgeColumnRender' import AuthColumnRenderer from './LogColumnRenderers/AuthColumnRenderer' +import { isEqual } from 'lodash' interface Props { data?: Array @@ -59,7 +60,6 @@ const LogTable = ({ onHistogramToggle, isHistogramShowing, isLoading, - showDownload, error, projectRef, params, @@ -144,8 +144,10 @@ const LogTable = ({ }, [stringData]) useEffect(() => { - if (!hasId || data === null) return - if (focusedLog && !(focusedLog.id in logMap)) { + if (!data) return + const found = data.find((datum) => isEqual(datum, focusedLog)) + if (!found) { + // close selection panel if not found in dataset setFocusedLog(null) } }, [stringData]) @@ -163,17 +165,7 @@ const LogTable = ({ const RowRenderer = useMemo(() => { return (props: RowRendererProps) => ( - + ) }, []) @@ -290,7 +282,12 @@ const LogTable = ({ } columns={columns as any} rowClass={(row: LogData) => - row.id === focusedLog?.id ? '!bg-scale-400 rdg-row--focused' : 'cursor-pointer' + [ + 'font-mono tracking-tight', + isEqual(row, focusedLog) + ? '!bg-scale-800 rdg-row--focused' + : ' !bg-scale-200 hover:!bg-scale-300 cursor-pointer', + ].join(' ') } rows={logDataRows} rowKeyGetter={(r) => { diff --git a/studio/tests/pages/projects/LogTable.test.js b/studio/tests/pages/projects/LogTable.test.js index 1a7430f9630..0169150df8f 100644 --- a/studio/tests/pages/projects/LogTable.test.js +++ b/studio/tests/pages/projects/LogTable.test.js @@ -68,6 +68,18 @@ test('can display standard preview table columns', async () => { await expect(screen.findByText(fakeMicroTimestamp)).rejects.toThrow() }) +test("closes the selection if the selected row's data changes", async () => { + const { rerender } = render( + + ) + const text = await screen.findByText(/some event message/) + userEvent.click(text) + await screen.findByText('Copy') + rerender() + await expect(screen.findByText(/some event message/)).rejects.toThrow() + await screen.findByText(/some other message/) +}) + test.each([ { queryType: 'functions',