Replaces search bar component with usememo logic

ui/app/mirrors/edit/[mirrorId]/cdc.tsx

@@ -1,16 +1,16 @@
 'use client';
 
-import SearchBar from '@/components/Search';
 import TimeLabel from '@/components/TimeComponent';
 import { QRepMirrorStatus, SnapshotStatus } from '@/grpc_generated/route';
 import { Button } from '@/lib/Button';
 import { Icon } from '@/lib/Icon';
 import { Label } from '@/lib/Label';
 import { ProgressBar } from '@/lib/ProgressBar';
+import { SearchField } from '@/lib/SearchField';
 import { Table, TableCell, TableRow } from '@/lib/Table';
 import moment, { Duration, Moment } from 'moment';
 import Link from 'next/link';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 class TableCloneSummary {
   flowJobName: string;
@@ -88,9 +88,17 @@ type SnapshotStatusProps = {
   status: SnapshotStatus;
 };
 export const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => {
-  const [snapshotRows, setSnapshotRows] = useState(
-    status.clones.map(summarizeTableClone)
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const snapshotRows = useMemo(
+    () =>
+      status.clones
+        .map(summarizeTableClone)
+        .filter((row: any) =>
+          row.tableName.toLowerCase().includes(searchQuery.toLowerCase())
+        ),
+    [status.clones, searchQuery]
   );
+
   return (
     <div style={{ marginTop: '2rem' }}>
       <Table
@@ -113,15 +121,10 @@ export const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => {
             </>
           ),
           right: (
-            <SearchBar
-              allItems={status.clones.map(summarizeTableClone)}
-              setItems={setSnapshotRows}
-              filterFunction={(query: string) =>
-                status.clones.map(summarizeTableClone).filter((row: any) => {
-                  return row.tableName
-                    .toLowerCase()
-                    .includes(query.toLowerCase());
-                })
+            <SearchField
+              placeholder='Search by table name'
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setSearchQuery(e.target.value)
               }
             />
           ),

ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx

@@ -1,14 +1,14 @@
 'use client';
 
-import SearchBar from '@/components/Search';
 import TimeLabel from '@/components/TimeComponent';
 import { Button } from '@/lib/Button';
 import { Icon } from '@/lib/Icon';
 import { Label } from '@/lib/Label';
 import { ProgressCircle } from '@/lib/ProgressCircle';
+import { SearchField } from '@/lib/SearchField';
 import { Table, TableCell, TableRow } from '@/lib/Table';
 import moment from 'moment';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 type SyncStatusRow = {
   batchId: number;
@@ -53,13 +53,16 @@ const ROWS_PER_PAGE = 10;
 export const SyncStatusTable = ({ rows }: SyncStatusTableProps) => {
   const [currentPage, setCurrentPage] = useState(1);
   const totalPages = Math.ceil(rows.length / ROWS_PER_PAGE);
-
+  const [searchQuery, setSearchQuery] = useState<string>('');
   const startRow = (currentPage - 1) * ROWS_PER_PAGE;
   const endRow = startRow + ROWS_PER_PAGE;
-  const allRows = rows.slice(startRow, endRow);
-  const [displayedRows, setDisplayedRows] = useState(
-    rows.slice(startRow, endRow)
-  );
+  const displayedRows = useMemo(() => {
+    const allRows = rows.slice(startRow, endRow);
+    const shownRows = allRows.filter(
+      (row: any) => row.batchId == parseInt(searchQuery, 10)
+    );
+    return shownRows.length > 0 ? shownRows : allRows;
+  }, [searchQuery, endRow, startRow, rows]);
   const handlePrevPage = () => {
     if (currentPage > 1) setCurrentPage(currentPage - 1);
   };
@@ -90,13 +93,10 @@ export const SyncStatusTable = ({ rows }: SyncStatusTableProps) => {
           </>
         ),
         right: (
-          <SearchBar
-            allItems={allRows}
-            setItems={setDisplayedRows}
-            filterFunction={(query: string) =>
-              allRows.filter((row: any) => {
-                return row.batchId == parseInt(query, 10);
-              })
+          <SearchField
+            placeholder='Search by batch ID'
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setSearchQuery(e.target.value)
             }
           />
         ),

ui/app/mirrors/status/qrep/[mirrorId]/qrepStatusTable.tsx

@@ -1,14 +1,14 @@
 'use client';
 
-import SearchBar from '@/components/Search';
 import TimeLabel from '@/components/TimeComponent';
 import { Button } from '@/lib/Button';
 import { Icon } from '@/lib/Icon';
 import { Label } from '@/lib/Label';
 import { ProgressCircle } from '@/lib/ProgressCircle';
+import { SearchField } from '@/lib/SearchField';
 import { Table, TableCell, TableRow } from '@/lib/Table';
 import moment from 'moment';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 export type QRepPartitionStatus = {
   partitionId: string;
@@ -85,8 +85,17 @@ export default function QRepStatusTable({
     (currentPage - 1) * ROWS_PER_PAGE,
     currentPage * ROWS_PER_PAGE
   );
-  const [displayedPartitions, setDisplayedPartitions] =
-    useState(visiblePartitions);
+
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const displayedPartitions = useMemo(
+    () =>
+      visiblePartitions.filter((partition: QRepPartitionStatus) => {
+        return partition.partitionId
+          .toLowerCase()
+          .includes(searchQuery.toLowerCase());
+      }),
+    [visiblePartitions, searchQuery]
+  );
 
   const handleNext = () => {
     if (currentPage < totalPages) setCurrentPage(currentPage + 1);
@@ -136,15 +145,10 @@ export default function QRepStatusTable({
           </>
         ),
         right: (
-          <SearchBar
-            allItems={visiblePartitions}
-            setItems={setDisplayedPartitions}
-            filterFunction={(query: string) =>
-              visiblePartitions.filter((partition: QRepPartitionStatus) => {
-                return partition.partitionId
-                  .toLowerCase()
-                  .includes(query.toLowerCase());
-              })
+          <SearchField
+            placeholder='Search by partition UUID'
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setSearchQuery(e.target.value)
             }
           />
         ),

ui/app/mirrors/tables.tsx

@@ -1,15 +1,22 @@
 'use client';
 import { DropDialog } from '@/components/DropDialog';
 import PeerButton from '@/components/PeerComponent';
-import SearchBar from '@/components/Search';
 import TimeLabel from '@/components/TimeComponent';
 import { Label } from '@/lib/Label';
+import { SearchField } from '@/lib/SearchField';
 import { Table, TableCell, TableRow } from '@/lib/Table';
 import Link from 'next/link';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 export function CDCFlows({ cdcFlows }: { cdcFlows: any }) {
-  const [mirrors, setMirrors] = useState(cdcFlows);
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const mirrors = useMemo(
+    () =>
+      cdcFlows.filter((flow: any) => {
+        return flow.name.toLowerCase().includes(searchQuery.toLowerCase());
+      }),
+    [searchQuery, cdcFlows]
+  );
 
   return (
     <>
@@ -26,15 +33,10 @@ export function CDCFlows({ cdcFlows }: { cdcFlows: any }) {
           toolbar={{
             left: <></>,
             right: (
-              <SearchBar
-                allItems={cdcFlows}
-                setItems={setMirrors}
-                filterFunction={(query: string) =>
-                  cdcFlows.filter((flow: any) => {
-                    return flow.name
-                      .toLowerCase()
-                      .includes(query.toLowerCase());
-                  })
+              <SearchField
+                placeholder='Search by flow name'
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setSearchQuery(e.target.value)
                 }
               />
             ),
@@ -102,8 +104,14 @@ export function QRepFlows({
   qrepFlows: any;
   title: string;
 }) {
-  const [mirrors, setMirrors] = useState(qrepFlows);
-
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const mirrors = useMemo(
+    () =>
+      qrepFlows.filter((flow: any) => {
+        return flow.name.toLowerCase().includes(searchQuery.toLowerCase());
+      }),
+    [searchQuery, qrepFlows]
+  );
   return (
     <>
       <Label variant='headline'>{title}</Label>
@@ -119,15 +127,10 @@ export function QRepFlows({
           toolbar={{
             left: <></>,
             right: (
-              <SearchBar
-                allItems={qrepFlows}
-                setItems={setMirrors}
-                filterFunction={(query: string) =>
-                  qrepFlows.filter((flow: any) => {
-                    return flow.name
-                      .toLowerCase()
-                      .includes(query.toLowerCase());
-                  })
+              <SearchField
+                placeholder='Search by flow name'
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setSearchQuery(e.target.value)
                 }
               />
             ),

ui/app/peers/peersTable.tsx

@@ -2,11 +2,11 @@
 import { DropDialog } from '@/components/DropDialog';
 import PeerButton from '@/components/PeerComponent';
 import PeerTypeLabel from '@/components/PeerTypeComponent';
-import SearchBar from '@/components/Search';
 import { Peer } from '@/grpc_generated/peers';
 import { Label } from '@/lib/Label';
+import { SearchField } from '@/lib/SearchField';
 import { Table, TableCell, TableRow } from '@/lib/Table';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 function PeerRow({ peer }: { peer: Peer }) {
   return (
@@ -30,21 +30,25 @@ function PeerRow({ peer }: { peer: Peer }) {
 }
 
 function PeersTable({ title, peers }: { title: string; peers: Peer[] }) {
-  const [rows, setRows] = useState<Peer[]>(peers);
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const rows = useMemo(
+    () =>
+      peers.filter((peer) => {
+        return peer.name.toLowerCase().includes(searchQuery.toLowerCase());
+      }),
+    [peers, searchQuery]
+  );
 
   return (
     <Table
       title={<Label variant='headline'>{title}</Label>}
       toolbar={{
         left: <></>,
         right: (
-          <SearchBar
-            allItems={peers}
-            setItems={setRows}
-            filterFunction={(query: string) =>
-              peers.filter((peer) => {
-                return peer.name.toLowerCase().includes(query.toLowerCase());
-              })
+          <SearchField
+            placeholder='Search by peer name'
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              setSearchQuery(e.target.value)
             }
           />
         ),