feat(home): move edge device to view [EE-4559] (#8189)

Co-authored-by: matias.spinarolli <matias.spinarolli@portainer.io>

app/react/components/datatables/FilterSearchBar.tsx

@@ -1,42 +0,0 @@
-import { Search } from 'lucide-react';
-
-import { useLocalStorage } from '@/react/hooks/useLocalStorage';
-
-interface Props {
-  value: string;
-  placeholder?: string;
-  onChange(value: string): void;
-}
-
-export function FilterSearchBar({
-  value,
-  placeholder = 'Search...',
-  onChange,
-}: Props) {
-  return (
-    <div className="searchBar items-center flex h-[34px]">
-      <Search className="searchIcon lucide" />
-      <input
-        type="text"
-        className="searchInput"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder={placeholder}
-        data-cy="home-environmentSearch"
-      />
-    </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}`;
-  }
-}

app/react/components/datatables/SearchBar.tsx

@@ -1,13 +1,19 @@
-import { Search } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Search, X } from 'lucide-react';
+import clsx from 'clsx';
 
 import { useLocalStorage } from '@/react/hooks/useLocalStorage';
 import { AutomationTestingProps } from '@/types';
 import { useDebounce } from '@/react/hooks/useDebounce';
 
+import { Button } from '@@/buttons';
+
 interface Props extends AutomationTestingProps {
   value: string;
   placeholder?: string;
   onChange(value: string): void;
+  className?: string;
+  children?: ReactNode;
 }
 
 export function SearchBar({
@@ -15,11 +21,19 @@ export function SearchBar({
   placeholder = 'Search...',
   onChange,
   'data-cy': dataCy,
+  className,
+  children,
 }: Props) {
   const [searchValue, setSearchValue] = useDebounce(value, onChange);
 
+  function onClear() {
+    setSearchValue('');
+  }
+
   return (
-    <div className="searchBar items-center flex min-w-[90px]">
+    <div
+      className={clsx('searchBar items-center flex min-w-[90px]', className)}
+    >
       <Search className="searchIcon lucide shrink-0" />
       <input
         type="text"
@@ -29,6 +43,8 @@ export function SearchBar({
         placeholder={placeholder}
         data-cy={dataCy}
       />
+      {children}
+      <Button onClick={onClear} icon={X} color="none" disabled={!searchValue} />
     </div>
   );
 }

app/react/components/datatables/TableTitle.tsx

@@ -1,4 +1,5 @@
 import { ComponentType, PropsWithChildren, ReactNode } from 'react';
+import clsx from 'clsx';
 
 import { Icon } from '@@/Icon';
 
@@ -6,6 +7,7 @@ interface Props {
   icon?: ReactNode | ComponentType<unknown>;
   label: string;
   description?: ReactNode;
+  className?: string;
 }
 
 export function TableTitle({
@@ -13,9 +15,10 @@ export function TableTitle({
   label,
   children,
   description,
+  className,
 }: PropsWithChildren<Props>) {
   return (
-    <div className="toolBar flex-col">
+    <div className={clsx('toolBar flex-col', className)}>
       <div className="flex gap-1 p-0 w-full items-center">
         <div className="toolBarTitle">
           {icon && (