refactor(app): move react components to react codebase [EE-3179] (#6971)

app/react/components/datatables/SearchBar.tsx

@@ -0,0 +1,39 @@
+import { useLocalStorage } from '@/portainer/hooks/useLocalStorage';
+
+interface Props {
+  value: string;
+  placeholder?: string;
+  onChange(value: string): void;
+}
+
+export function SearchBar({
+  value,
+  placeholder = 'Search...',
+  onChange,
+}: Props) {
+  return (
+    <div className="searchBar">
+      <i className="fa fa-search searchIcon" aria-hidden="true" />
+      <input
+        type="text"
+        className="searchInput"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+      />
+    </div>
+  );
+}
+
+export function useSearchBarState(
+  key: string
+): [string, (value: string) => void] {
+  const filterKey = keyBuilder(key);
+  const [value, setValue] = useLocalStorage(filterKey, '', sessionStorage);
+
+  return [value, setValue];
+
+  function keyBuilder(key: string) {
+    return `datatable_text_filter_${key}`;
+  }
+}