fix: add debounced prop and ux to mui search input component

src/components/mui/__tests__/search-input.test.js

@@ -12,10 +12,11 @@
  * */
 
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom";
 import SearchInput from "../search-input";
+import { DEBOUNCE_WAIT } from "../../../utils/constants";
 
 describe("SearchInput", () => {
   test("renders with custom placeholder", () => {
@@ -58,4 +59,39 @@ describe("SearchInput", () => {
     rerender(<SearchInput term="new" onSearch={jest.fn()} />);
     expect(screen.getByDisplayValue("new")).toBeInTheDocument();
   });
+
+  describe("debounced prop", () => {
+    beforeEach(() => jest.useFakeTimers());
+    afterEach(() => jest.useRealTimers());
+
+    test("calls onSearch after debounce delay when debounced is true", async () => {
+      const onSearch = jest.fn();
+      const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+      render(<SearchInput term="" onSearch={onSearch} debounced />);
+      const input = screen.getByPlaceholderText("Search...");
+      await user.type(input, "something");
+      expect(onSearch).not.toHaveBeenCalled();
+      act(() => jest.advanceTimersByTime(DEBOUNCE_WAIT));
+      expect(onSearch).toHaveBeenCalledWith("something");
+    });
+
+    test("does not call onSearch on Enter when debounced is true", async () => {
+      const onSearch = jest.fn();
+      const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+      render(<SearchInput term="" onSearch={onSearch} debounced />);
+      const input = screen.getByPlaceholderText("Search...");
+      await user.type(input, "something{Enter}");
+      expect(onSearch).not.toHaveBeenCalled();
+    });
+
+    test("does not call onSearch on typing without Enter when not debounced", async () => {
+      const onSearch = jest.fn();
+      const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+      render(<SearchInput term="" onSearch={onSearch} />);
+      const input = screen.getByPlaceholderText("Search...");
+      await user.type(input, "something");
+      act(() => jest.runAllTimers());
+      expect(onSearch).not.toHaveBeenCalled();
+    });
+  });
 });

src/components/mui/search-input.js

@@ -11,53 +11,67 @@
  * limitations under the License.
  * */
 
-import React, { useEffect, useState } from "react";
-import { TextField, IconButton } from "@mui/material";
+import React, { useEffect, useState, useMemo } from "react";
+import { TextField, IconButton, InputAdornment } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import ClearIcon from "@mui/icons-material/Clear";
+import { debounce } from "lodash";
+import { DEBOUNCE_WAIT } from "../../utils/constants";
 
-const SearchInput = ({ term, onSearch, placeholder = "Search..." }) => {
+const SearchInput = ({ term, onSearch, placeholder = "Search...", debounced }) => {
   const [searchTerm, setSearchTerm] = useState(term);
 
   useEffect(() => {
     setSearchTerm(term || "");
   }, [term]);
 
-  const handleSearch = (ev) => {
-    if (ev.key === "Enter") {
-      onSearch(searchTerm);
-    }
-  };
-
   const handleClear = () => {
+    onSearchDebounced?.cancel();
     setSearchTerm("");
     onSearch("");
   };
 
+  const onSearchDebounced = useMemo(
+    () => debounced ? debounce((value) => onSearch(value), DEBOUNCE_WAIT) : null,
+    [onSearch, debounced]
+  );
+
+  useEffect(() => () => onSearchDebounced?.cancel(), [onSearchDebounced]);
+
+  const handleChange = (value) => {
+    setSearchTerm(value);
+    if (debounced) onSearchDebounced(value);
+  };
+
+  const handleKeyDown = (ev) => {
+    if (!debounced && ev.key === "Enter") {
+      onSearch(searchTerm);
+    }
+  };
+
   return (
     <TextField
       variant="outlined"
       value={searchTerm}
       placeholder={placeholder}
       slotProps={{
         input: {
-          endAdornment: term ? (
-            <IconButton
-              size="small"
-              onClick={handleClear}
-              sx={{ position: "absolute", right: 0 }}
-            >
-              <ClearIcon sx={{ color: "#0000008F" }} />
-            </IconButton>
-          ) : (
-            <SearchIcon
-              sx={{ mr: 1, color: "#0000008F", position: "absolute", right: 0 }}
-            />
+          startAdornment: (
+            <InputAdornment position="start">
+              <SearchIcon sx={{ color: "#0000008F" }} />
+            </InputAdornment>
+          ),
+          endAdornment: term && (
+            <InputAdornment position="end">
+              <IconButton size="small" onClick={handleClear}>
+                <ClearIcon fontSize="small" sx={{ color: "#0000008F" }} />
+              </IconButton>
+            </InputAdornment>
           )
         }
       }}
-      onChange={(event) => setSearchTerm(event.target.value)}
-      onKeyDown={handleSearch}
+      onChange={(ev) => handleChange(ev.target.value)}
+      onKeyDown={handleKeyDown}
       fullWidth
       sx={{
         "& .MuiOutlinedInput-root": {