TT-14699 : [UI] Dashboard cert search partially works (#411)

* Dashboard cert search partially

This PR makes a change to extended the `Combobox2` component with **server-side search capability** through a new `onSearch` prop.

**New `onSearch` Prop**
- Optional callback function that receives the search term as user types
- Enables backend/API-based search instead of only client-side filtering

**Smart Debouncing (300ms)**
- Prevents API spam by debouncing search calls
- Uses stable function reference to avoid re-creating debounced function to avoid unlimited API calls

* bump version

* extend tests

Author: jay-deshmukh

lib/index.js

@@ -1,6 +1,6 @@
 {
   "name": "@tyk-technologies/tyk-ui",
-  "version": "4.4.21",
+  "version": "4.4.22",
   "description": "Tyk UI - ui reusable components",
   "main": "src/index.js",
   "scripts": {

lib/index.js.map

@@ -630,4 +630,265 @@ describe('Combobox2', () => {
         .should('have.text', item.name);
     });
   });
+
+  describe('onSearch prop for server-side search', () => {
+    it('does not call onSearch on mount', () => {
+      const onSearchSpy = cy.spy().as('onSearchSpy');
+
+      cy.mount(
+        <Combobox2
+          values={items}
+          value=""
+          onSearch={onSearchSpy}
+          showSearch
+        />,
+      );
+
+      cy.get('@onSearchSpy').should('not.have.been.called');
+    });
+
+    it('calls onSearch when user types in tag mode', () => {
+      const onSearchSpy = cy.spy().as('onSearchSpy');
+
+      cy.mount(
+        <Combobox2
+          values={items}
+          value={[]}
+          tags
+          onSearch={onSearchSpy}
+        />,
+      );
+
+      cy.get(`.${classes.entryField}`)
+        .type('test');
+
+      cy.wait(350);
+
+      cy.get('@onSearchSpy').should('have.been.calledOnce');
+      cy.get('@onSearchSpy').should('have.been.calledWith', 'test');
+    });
+
+    it('calls onSearch when user types with showSearch enabled', () => {
+      const onSearchSpy = cy.spy().as('onSearchSpy');
+
+      cy.mount(
+        <Combobox2
+          values={items}
+          value=""
+          onSearch={onSearchSpy}
+          showSearch
+        />,
+      );
+
+      cy.get(`.${classes.trigger}`)
+        .click();
+
+      cy.get(`.${classes.searchField} input`)
+        .type('search');
+
+      cy.get('@onSearchSpy').should('have.been.calledOnce');
+      cy.get('@onSearchSpy').should('have.been.calledWith', 'search');
+    });
+
+    it('debounces onSearch calls correctly', () => {
+      const onSearchSpy = cy.spy().as('onSearchSpy');
+
+      cy.mount(
+        <Combobox2
+          values={items}
+          value={[]}
+          tags
+          onSearch={onSearchSpy}
+        />,
+      );
+
+      cy.get(`.${classes.entryField}`)
+        .type('a');
+
+      cy.wait(100);
+
+      cy.get(`.${classes.entryField}`)
+        .type('b');
+
+      cy.wait(100);
+
+      cy.get(`.${classes.entryField}`)
+        .type('c');
+
+      cy.get('@onSearchSpy').should('not.have.been.called');
+
+      cy.wait(350);
+
+      cy.get('@onSearchSpy').should('have.been.calledOnce');
+      cy.get('@onSearchSpy').should('have.been.calledWith', 'abc');
+    });
+
+    it('calls onSearch with empty string when search is cleared after searching', () => {
+      const onSearchSpy = cy.spy().as('onSearchSpy');
+
+      cy.mount(
+        <Combobox2
+          values={items}
+          value={[]}
+          tags
+          onSearch={onSearchSpy}
+        />,
+      );
+
+      cy.get(`.${classes.entryField}`)
+        .type('test');
+
+      cy.wait(350);
+
+      cy.get('@onSearchSpy').should('have.been.calledWith', 'test');
+
+      cy.get(`.${classes.entryField}`)
+        .clear();
+
+      cy.wait(350);
+
+      cy.get('@onSearchSpy').should('have.been.calledWith', '');
+    });
+
+    it('does not perform client-side filtering when onSearch is provided', () => {
+      function Comp() {
+        const [searchResults, setSearchResults] = useState(items);
+
+        const handleSearch = (searchTerm) => {
+          if (!searchTerm) {
+            setSearchResults(items);
+          } else {
+            setSearchResults(items.filter((item) => item.name === searchTerm));
+          }
+        };
+
+        return (
+          <Combobox2
+            values={searchResults}
+            value={[]}
+            tags
+            onSearch={handleSearch}
+          />
+        );
+      }
+
+      cy.mount(<Comp />);
+
+      cy.get(`.${classes.entryField}`)
+        .type('Item2');
+
+      cy.wait(350);
+
+      cy.get(`.${classes.dropdownList} li`)
+        .should('have.length', 1)
+        .and('contain.text', 'Item2');
+    });
+
+    it('works correctly with multiple value updates', () => {
+      function Comp() {
+        const [searchResults, setSearchResults] = useState(items);
+
+        const handleSearch = (searchTerm) => {
+          if (!searchTerm) {
+            setSearchResults(items);
+          } else {
+            setSearchResults(
+              items.filter((item) => item.name.toLowerCase().includes(searchTerm.toLowerCase())),
+            );
+          }
+        };
+
+        return (
+          <Combobox2
+            values={searchResults}
+            value=""
+            onSearch={handleSearch}
+            showSearch
+          />
+        );
+      }
+
+      cy.mount(<Comp />);
+
+      cy.get(`.${classes.trigger}`)
+        .click();
+
+      cy.get(`.${classes.dropdownList} li`)
+        .should('have.length', items.length);
+
+      cy.get(`.${classes.searchField} input`)
+        .type('item2');
+
+      cy.wait(350);
+
+      cy.get(`.${classes.dropdownList} li`)
+        .should('have.length', 1)
+        .and('contain.text', 'Item2');
+
+      cy.get(`.${classes.searchField} input`)
+        .clear();
+
+      cy.wait(350);
+
+      cy.get(`.${classes.dropdownList} li`)
+        .should('have.length', items.length);
+    });
+
+    it('maintains backward compatibility - works without onSearch prop', () => {
+      cy.mount(
+        <Combobox2
+          values={items}
+          value=""
+          showSearch
+        />,
+      );
+
+      cy.get(`.${classes.trigger}`)
+        .click();
+
+      cy.get(`.${classes.dropdownList} li`)
+        .should('have.length', items.length);
+
+      cy.get(`.${classes.searchField} input`)
+        .type('Item2');
+
+      cy.get(`.${classes.dropdownList} li`)
+        .should('have.length', 1)
+        .and('contain.text', 'Item2');
+    });
+
+    it('handles rapid typing and clearing correctly', () => {
+      const onSearchSpy = cy.spy().as('onSearchSpy');
+
+      cy.mount(
+        <Combobox2
+          values={items}
+          value={[]}
+          tags
+          onSearch={onSearchSpy}
+        />,
+      );
+
+      cy.get(`.${classes.entryField}`)
+        .type('test');
+
+      cy.wait(350);
+
+      cy.get('@onSearchSpy').should('have.been.calledWith', 'test');
+
+      cy.get(`.${classes.entryField}`)
+        .clear();
+
+      cy.wait(350);
+
+      cy.get('@onSearchSpy').should('have.been.calledWith', '');
+
+      cy.get(`.${classes.entryField}`)
+        .type('new');
+
+      cy.wait(350);
+
+      cy.get('@onSearchSpy').should('have.been.calledWith', 'new');
+    });
+  });
 });

lib/tyk-ui.js

@@ -626,4 +626,54 @@ import Icon from '../../../components/Icon';
   placeholder="Please select a value"
   validateOnChange={(values, lastValue) => {console.log(lastValue, !isNaN(lastValue.id)); return !isNaN(lastValue.id) ? undefined : 'Added value is not a number'}}
 />
-```
+```
+
+#### Combobox with dynamic server side search using `onSearch`
+
+```js
+import { useState, useEffect } from 'react';
+
+const [posts, setPosts] = useState([]);
+const [loading, setLoading] = useState(false);
+const [selectedPost, setSelectedPost] = useState(null);
+
+// Load initial posts on mount
+useEffect(() => {
+  fetchPosts('');
+}, []);
+
+async function fetchPosts(searchTerm) {
+  setLoading(true);
+  try {
+    const response = await fetch(`https://jsonplaceholder.typicode.com/posts?userId=${searchTerm}`);
+    const data = await response.json();
+    
+    setPosts(data.map(post => ({
+      id: post.id,
+      name: post.title,
+      body: post.body
+    })));
+  } catch (error) {
+    console.error('Error fetching posts:', error);
+  } finally {
+    setLoading(false);
+  }
+}
+
+<Combobox2
+  values={posts.length > 0 ? posts : [
+   {id: 201, name: '201'},
+   {id: 'aaa', name: 'AAA'}
+  ]}
+  value={selectedPost}
+  label="Search Posts (Backend Search)"
+  placeholder="Type to search posts..."
+  onChange={(selected) => {
+    console.log('Selected:', selected);
+    setSelectedPost(selected);
+  }}
+  onSearch={fetchPosts}
+  note={loading ? 'Loading...' : 'Search results will be fetched from the backend'}
+  showSearch
+/>
+```