[MISC] Clear search filter when switching adapter settings pages

[chandrasekharan-zipstack]

What

Fixed search filter persistence issue when switching between adapter settings pages (LLMs, Vector DBs, Embedding, Text Extractor).

Why

When searching for an adapter on one settings page (e.g., "postgres" on Vector DBs), switching to another page (e.g., LLMs) would keep the search filter active but display empty results since the search term doesn't match items on the new page. This creates confusing UX where users don't realize they need to clear the search filter.

How

• Added searchKey prop to ToolNavBar that uses the page type as key for Search component
• Added clearSearch() function to useListSearch hook to reset internal search state
• ToolSettings calls clearSearch() when type changes and passes type as searchKey to force Search component remount

React's key prop ensures Search component remounts when switching pages, and the clearSearch function resets the internal search state completely.

Can this PR break any existing features. If yes, please list possible items. If no, please explain why.

No. This only adds optional props and a new hook function. Existing behavior is preserved for all use cases.

Notes on Testing

• Switch between different adapter settings pages (LLMs, Vector DBs, Embedding, Text Extractor)
• Perform a search on one page
• Switch to another page - search filter should be cleared and show all items for new page
• Verify each page displays correct adapters after filter is cleared

Screenshots

The search filter gets cleared on switching side nav bar tabs ---

Generated with Claude Code

[coderabbitai]

Summary by CodeRabbit

• Improvements
  • Fixed search functionality to properly reset when switching between different tool types, preventing search queries from persisting across tool contexts.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Walkthrough

Three files modified to introduce search state management improvements. Added searchKey prop to ToolNavBar and implemented clearSearch function in useListSearch hook. ToolSettings now clears search state when the tool type changes, passing searchKey to ToolNavBar to scope search behavior.

Changes

Cohort / File(s)	Summary
Search hook enhancement frontend/src/hooks/useListSearch.js	Added clearSearch function (via useCallback) that resets searchTextRef and restores displayList to full list. Exported as part of hook's public API.
Search integration in components frontend/src/components/navigations/tool-nav-bar/ToolNavBar.jsx, frontend/src/components/tool-settings/tool-settings/ToolSettings.jsx	ToolNavBar: Added searchKey prop to component signature and propTypes; rendered as React key on Search input element. ToolSettings: Integrated clearSearch function call on mount/update to reset search state; passes current type as searchKey to ToolNavBar.

Sequence Diagram

sequenceDiagram
    participant TS as ToolSettings
    participant ULS as useListSearch Hook
    participant TNB as ToolNavBar
    participant S as Search Component

    TS->>TS: Type prop changes
    TS->>ULS: Call clearSearch()
    activate ULS
    ULS->>ULS: Reset searchTextRef
    ULS->>ULS: Restore displayList to full list
    deactivate ULS
    TS->>TNB: Pass new searchKey (type)
    TNB->>S: Re-render with key={searchKey}
    Note over S: Component re-mounts<br/>Search state cleared

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Verify searchKey prop is properly destructured and typed in ToolNavBar
• Confirm clearSearch correctly resets both searchTextRef and displayList state
• Check that ToolSettings properly invokes clearSearch on type changes (mount/update lifecycle)
• Validate that the React key change on Search component triggers proper re-initialization

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: clearing search filters when switching adapter settings pages, which is the primary objective of this PR.
Description check	✅ Passed	The PR description is comprehensive and follows the template structure, covering all required sections including What, Why, How, risk assessment, testing notes, and impact analysis.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch misc/adapter-search-filter-clear-fix

---

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.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

frontend/src/components/navigations/tool-nav-bar/ToolNavBar.jsx (1)

21-23: Consider cancelling debounced search on type change.

The debounced function is recreated on each render but not cancelled when searchKey changes. If a user types and switches types within 600ms, the pending debounced callback may fire after the switch, applying stale search text to the new page's data while the input appears empty.

To prevent this, memoize and cancel the debounced function:

+import { useMemo, useEffect } from "react";
+
 function ToolNavBar({
   ...
 }) {
   const navigate = useNavigate();
-  const onSearchDebounce = debounce(({ target: { value } }) => {
-    onSearch(value, setSearchList);
-  }, 600);
+  const onSearchDebounce = useMemo(
+    () => debounce(({ target: { value } }) => {
+      onSearch(value, setSearchList);
+    }, 600),
+    [onSearch, setSearchList]
+  );
+
+  useEffect(() => {
+    return () => {
+      onSearchDebounce.cancel();
+    };
+  }, [searchKey, onSearchDebounce]);

🧹 Nitpick comments (1)

frontend/src/components/tool-settings/tool-settings/ToolSettings.jsx (1)

60-67: Optional: Consider adding stable dependencies to useEffect.

While clearSearch and setMasterList are stable references (memoized with useCallback), ESLint's exhaustive-deps rule may flag them as missing dependencies. Adding them would silence warnings without changing behavior.

 useEffect(() => {
   clearSearch();
   setMasterList([]);
   if (!type) {
     return;
   }
   getAdapters();
-}, [type]);
+}, [type, clearSearch, setMasterList]);

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Cache: Disabled due to Reviews > Disable Cache setting

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between a70a178 and f07115f.

📒 Files selected for processing (3)

• frontend/src/components/navigations/tool-nav-bar/ToolNavBar.jsx (3 hunks)
• frontend/src/components/tool-settings/tool-settings/ToolSettings.jsx (2 hunks)
• frontend/src/hooks/useListSearch.js (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build

🔇 Additional comments (3)

frontend/src/hooks/useListSearch.js (1)

36-39: LGTM! Clean implementation of search state reset.

The clearSearch function correctly resets both the search text reference and the display list to show unfiltered results. The use of useCallback with an empty dependency array ensures a stable function reference.

Also applies to: 57-57

frontend/src/components/navigations/tool-nav-bar/ToolNavBar.jsx (1)

18-19: Good use of React key prop to reset search state.

The searchKey prop correctly forces the Search component to remount when the adapter type changes, clearing its internal input state. This pairs well with the clearSearch() call in the parent component.

Also applies to: 59-59, 81-81

frontend/src/components/tool-settings/tool-settings/ToolSettings.jsx (1)

57-57: Well-structured implementation of search reset on type change.

The combination of calling clearSearch() and passing type as searchKey ensures both the hook's internal state and the Search component's UI are properly reset when switching adapter pages. The clearSearch() call on line 61 is essential—without it, searchTextRef would retain the old search term and incorrectly filter the new adapter data.

Also applies to: 61-61, 231-231

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud