diff --git a/studio/pages/project/[ref]/settings/logs/[type].tsx b/studio/pages/project/[ref]/settings/logs/[type].tsx
index 68fc1fdc141..2f2e9b6bc6a 100644
--- a/studio/pages/project/[ref]/settings/logs/[type].tsx
+++ b/studio/pages/project/[ref]/settings/logs/[type].tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
import { SettingsLayout } from 'components/layouts/'
import { useRouter } from 'next/router'
import LogPanel from 'components/ui/Logs/LogPanel'
@@ -43,8 +43,8 @@ export const LogPage = () => {
revalidateOnFocus: false,
}
)
- const debouncedSearch = debounce(setSearch, 600)
- const debouncedWhere = debounce(setWhere, 600)
+
+ const debouncedQueryParams = useRef(debounce(setQueryParams, 600)).current
useEffect(() => {
const params = {
@@ -53,7 +53,8 @@ export const LogPage = () => {
where: where || '',
}
const qs = new URLSearchParams(params).toString()
- setQueryParams(qs)
+ debouncedQueryParams(qs)
+ return () => debouncedQueryParams.cancel()
}, [search, where, type])
const countKey = `${API_URL}/projects/${ref}/logs?${queryParams}&count=true&period_start=${latestRefresh}`
@@ -83,7 +84,7 @@ export const LogPage = () => {
{ label: "Recent - Errors", onClick: () => setSearch('[Ee]rror|\\s[45][0-9][0-9]\\s') },
]}
searchValue={search}
- onCustomClick={handleModeToggle} isLoading={isLoading} onRefresh={handleRefresh} onSearch={debouncedSearch} />
+ onCustomClick={handleModeToggle} isLoading={isLoading} onRefresh={handleRefresh} onSearch={setSearch} />
{mode === 'custom' &&
{
id={'logs-where-editor'}
language="pgsql"
defaultValue={where}
- onInputChange={(v) => debouncedWhere(v || '')}
+ onInputChange={(v) => setWhere(v || '')}
onInputRun={handleRefresh}
/>
}
{error && (
Could not fetch data
)}
- {newCount ? : null}
+ {newCount ? : null}
)
diff --git a/studio/tests/pages/projects/logs.test.js b/studio/tests/pages/projects/logs.test.js
index 1d72247bc89..a452140ce00 100644
--- a/studio/tests/pages/projects/logs.test.js
+++ b/studio/tests/pages/projects/logs.test.js
@@ -76,10 +76,7 @@ test('Refresh', async () => {
await waitFor(() => screen.getByText(/my_key/))
// simulate refresh
- // wrap with a waitFor, and trigger twice, as button becomes disabled when Loading and may take time to reset
await waitFor(() => userEvent.click(screen.getByText(/Refresh/)))
- // called by counter twice and refresh twice
- await waitFor(() => expect(get).toBeCalledTimes(4), { timeout: 1000 })
// when log line unmounts and it was focused, should close focus panel
await waitFor(() => screen.queryByText(/my_key/) === null, { timeout: 1000 })
await waitFor(() => screen.queryByText(/happened/) === null, { timeout: 1000 })
@@ -107,9 +104,9 @@ test("Search will trigger a log refresh", async () => {
await waitFor(() => {
expect(get).toHaveBeenCalledWith(expect.stringContaining("search_query"))
expect(get).toHaveBeenCalledWith(expect.stringContaining("something"))
- })
+ }, { timeout: 1500 })
- await waitFor(() => screen.getByText(/happened/))
+ await waitFor(() => screen.getByText(/happened/), { timeout: 1000 })
})
test("poll count for new messages", async () => {
@@ -156,7 +153,7 @@ test("where clause will trigger a log refresh", async () => {
const { container } = render()
let editor = container.querySelector('.monaco-editor');
expect(editor).toBeFalsy()
- userEvent.click(screen.getAllByText("Custom Query"))
+ userEvent.click(screen.getByText("Custom Query"))
editor = container.querySelector('.monaco-editor');
userEvent.type(editor, "metadata.field = something")
await waitFor(() => {