feat(ui): sort search bar icon [EE-3663] (#7205)

app/react/components/datatables/SearchBar.tsx

@@ -1,6 +1,11 @@
-import { useLocalStorage } from '@/portainer/hooks/useLocalStorage';
+import { Search } from 'react-feather';
+import { useEffect, useMemo, useState } from 'react';
+import _ from 'lodash';
 
-interface Props {
+import { useLocalStorage } from '@/portainer/hooks/useLocalStorage';
+import { AutomationTestingProps } from '@/types';
+
+interface Props extends AutomationTestingProps {
   value: string;
   placeholder?: string;
   onChange(value: string): void;
@@ -10,21 +15,45 @@ export function SearchBar({
   value,
   placeholder = 'Search...',
   onChange,
+  'data-cy': dataCy,
 }: Props) {
+  const [searchValue, setSearchValue] = useDebounce(value, onChange);
+
   return (
-    <div className="searchBar">
-      <i className="fa fa-search searchIcon" aria-hidden="true" />
+    <div className="searchBar items-center flex">
+      <Search className="searchIcon feather" />
       <input
         type="text"
         className="searchInput"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
+        value={searchValue}
+        onChange={(e) => setSearchValue(e.target.value)}
         placeholder={placeholder}
+        data-cy={dataCy}
       />
     </div>
   );
 }
 
+function useDebounce(defaultValue: string, onChange: (value: string) => void) {
+  const [searchValue, setSearchValue] = useState(defaultValue);
+
+  useEffect(() => {
+    setSearchValue(defaultValue);
+  }, [defaultValue]);
+
+  const onChangeDebounces = useMemo(
+    () => _.debounce(onChange, 300),
+    [onChange]
+  );
+
+  return [searchValue, handleChange] as const;
+
+  function handleChange(value: string) {
+    setSearchValue(value);
+    onChangeDebounces(value);
+  }
+}
+
 export function useSearchBarState(
   key: string
 ): [string, (value: string) => void] {