Fix topic message search refresh behavior

[rahulbsw]

Resolves #999

Summary

• keep the messages search field as a local draft until Refresh is clicked
• stop clearing the search field from reloading results immediately
• add regression coverage for the clear-and-refresh flow

Testing

• pnpm exec tsc --noEmit
• pnpm exec eslint src/components/Topics/Topic/Messages/Filters/Filters.tsx src/components/Topics/Topic/Messages/Filters/tests/Filters.spec.tsx src/components/common/Search/Search.tsx src/lib/hooks/useMessagesFilters.ts
• pnpm exec jest --runInBand --runTestsByPath src/components/Topics/Topic/Messages/Filters/tests/Filters.spec.tsx

Summary by CodeRabbit

• Improvements

  • Search input now uses a configurable debounce and updates more predictably.
  • Refresh action preserves and applies the current search value when triggered.
  • Clearing the search input no longer immediately changes the visible URL params until refresh; search icon/clear state is handled more consistently.

• Tests

  • Added tests verifying search, clear, and refresh interactions and URL param behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 2332d8f1-caa5-4fc6-a1e4-9e5664b7cd67

📥 Commits

Reviewing files that changed from the base of the PR and between d2bf2b4 and 43da136.

📒 Files selected for processing (2)

• frontend/src/components/common/Search/Search.tsx
• frontend/src/components/common/Search/__tests__/Search.spec.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• frontend/src/components/common/Search/Search.tsx

---

📝 Walkthrough

Walkthrough

Search input behavior and filter refresh are refactored to decouple search state changes from URL synchronization. The Search component now accepts a debounceMs prop to control input debouncing, useMessagesFilters centralizes URL and store synchronization via a syncSearchValue helper, and Filters manages search state locally before explicitly passing it to refreshData on refresh.

Changes

Search and Filter Refresh Behavior

Layer / File(s)	Summary
Search component debounce parameterization frontend/src/components/common/Search/Search.tsx	SearchProps gains optional debounceMs (default 500). Search syncs showIcon and input value with controlled value and q URL param. Debounced handler accepts string values, updates showIcon and inputRef, and either calls onChange(nextValue) or writes q=nextValue to the URL (resetting page to 1). Clear action sets showIcon(false) and Input.onChange forwards target.value to handler.
useMessagesFilters search synchronization frontend/src/lib/hooks/useMessagesFilters.ts	Adds syncSearchValue(params, value) to keep stringFilter in sync between URL and messages-filter store. Removes useRefreshData initialization. setSearch uses syncSearchValue. refreshData(nextSearch) syncs provided search and toggles r query param within the same setSearchParams update.
Filters component search state management frontend/src/components/Topics/Topic/Messages/Filters/Filters.tsx	Introduces local searchValue state initialized from and kept in sync with hook search via useEffect. Removes setSearch from destructuring. Converts Search to a controlled input using searchValue/setSearchValue and debounceMs={0}, and calls refreshData(searchValue) on refresh.
Test infrastructure and search refresh behavior frontend/src/components/Topics/Topic/Messages/Filters/__tests__/Filters.spec.tsx	Mocks use-debounce to return callbacks directly. Adds SearchParamsValue test component to render the current URL query string and embeds it with Filters. Adds test verifying clearing the search input does not update the reflected URL params until the Refresh button is clicked.
Search tests updates frontend/src/components/common/Search/__tests__/Search.spec.tsx	Shared searchParamsMock for jest useSearchParams mock. Adds test inspecting setSearchParams updater output for expected q, page, cluster values. Rewrites clear-button test to use userEvent and waitFor.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested labels

scope/frontend, type/bug, area/ux

Suggested reviewers

• Haarolean

Poem

🐰 A search that waits for the right moment to shine,
No eager URL updates crossing the line,
Debounce tuned, the refresh at hand,
Local state hums, the UI feels grand,
Click Refresh — results appear just as planned.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Fix topic message search refresh behavior' directly and clearly summarizes the main change: fixing how the search refresh mechanism works for topic messages.
Linked Issues check	✅ Passed	The code changes fully implement the requirements from issue #999: preventing automatic refresh on search clear, treating it as a local draft until explicit refresh, and adding test coverage for the clear-and-refresh flow.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the search refresh behavior: Filters.tsx manages local search state, Search.tsx adds debounce control, useMessagesFilters.ts synchronizes search values, and tests validate the new behavior.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Hi rahulbsw! 👋

Welcome, and thank you for opening your first PR in the repo!

Please wait for triaging by our maintainers.

Please take a look at our contributing guide.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/components/common/Search/Search.tsx`:
- Around line 47-61: The debounced handleChange captures the outer searchParams
and can overwrite concurrent URL updates; update the branch that calls
setSearchParams to use the functional updater form of setSearchParams (instead
of mutating the captured searchParams) so you compute the new URLSearchParams
from the previous state, set 'q' to nextValue and reset 'page' to '1' only if a
page param exists, then return the new params; locate this logic in the
handleChange callback inside the useDebouncedCallback and modify it to derive
and return a fresh URLSearchParams based on the previous params.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d619a9f2-58e2-4f91-88aa-48231730b29d

📥 Commits

Reviewing files that changed from the base of the PR and between 4bf06dd and d2bf2b4.

📒 Files selected for processing (4)

• frontend/src/components/Topics/Topic/Messages/Filters/Filters.tsx
• frontend/src/components/Topics/Topic/Messages/Filters/__tests__/Filters.spec.tsx
• frontend/src/components/common/Search/Search.tsx
• frontend/src/lib/hooks/useMessagesFilters.ts