Replace local SearchBar component with SearchBar from common

src/components/records/RecordSearch.js

 import { useEffect, useCallback, useState, useContext, useMemo } from "react";
 import { initRequestParams } from "../common/Helper";
 import { RecordTable } from "./RecordTable";
-import { SearchBar } from "../common/SearchBar/SearchBar";
 import useUrlState from "@ahooksjs/use-url-state";
 import { serialize, deserialize } from "../common/URLState/URLState";
 import { Grid, Tabs, Tab } from "@mui/material";
-import { useAPIMethod, usePagination } from "@ess-ics/ce-ui-common";
+import { useAPIMethod, usePagination, SearchBar } from "@ess-ics/ce-ui-common";
 import { apiContext } from "../../api/DeployApi";
 
 export function RecordSearch({ iocName, rowType }) {
@@ -148,7 +147,6 @@ export function RecordSearch({ iocName, rowType }) {
           search={setSearch}
           query={deserialize(urlState.query)}
           loading={loading || !dataReady}
-          placeholder="Search"
         >
           <RecordTable
             records={records}

src/views/IOC/IOCListView.tsx

@@ -3,7 +3,8 @@ import { useLazyListIocsQuery, ListIocsApiArg } from "../../store/deployApi";
 import {
   useGlobalAppBarContext,
   RootPaper,
-  usePagination
+  usePagination,
+  SearchBar
 } from "@ess-ics/ce-ui-common";
 import {
   applicationTitle,
@@ -15,7 +16,6 @@ import {
   deserialize
 } from "../../components/common/URLState/URLState";
 import { GlobalAppBarContext, OnPageParams } from "../../types/common";
-import { SearchBar } from "../../components/common/SearchBar/SearchBar";
 import { ApiAlertError } from "../../components/common/Alerts/ApiAlertError";
 import { Container, Grid, Tabs, Tab } from "@mui/material";
 import IOCTable from "../../components/IOC/IOCTable";
@@ -163,7 +163,6 @@ export const IOCListView = () => {
             search={setSearch}
             query={deserialize(urlState.query)}
             loading={isFetching || !iocs}
-            placeholder="Search"
           >
             {error ? (
               <ApiAlertError error={error} />

src/views/host/HostListView.js

@@ -5,13 +5,13 @@ import {
   GlobalAppBarContext,
   RootPaper,
   useAPIMethod,
-  usePagination
+  usePagination,
+  SearchBar
 } from "@ess-ics/ce-ui-common";
 import {
   applicationTitle,
   initRequestParams
 } from "../../components/common/Helper";
-import { SearchBar } from "../../components/common/SearchBar/SearchBar";
 import useUrlState from "@ahooksjs/use-url-state";
 import {
   serialize,
@@ -144,20 +144,18 @@ export function HostListView() {
   };
 
   const content = (
-    <>
-      <SearchBar
-        search={setSearch}
-        query={deserialize(urlState.query)}
-        loading={loading}
-      >
-        <HostTable
-          hosts={hosts?.netBoxHosts ?? []}
-          loading={loading || !dataReady}
-          pagination={pagination}
-          onPage={onPage}
-        />
-      </SearchBar>
-    </>
+    <SearchBar
+      search={setSearch}
+      query={deserialize(urlState.query)}
+      loading={loading}
+    >
+      <HostTable
+        hosts={hosts?.netBoxHosts ?? []}
+        loading={loading || !dataReady}
+        pagination={pagination}
+        onPage={onPage}
+      />
+    </SearchBar>
   );
 
   return (

src/views/records/RecordListView.js

@@ -4,13 +4,13 @@ import {
   GlobalAppBarContext,
   RootPaper,
   useAPIMethod,
-  usePagination
+  usePagination,
+  SearchBar
 } from "@ess-ics/ce-ui-common";
 import {
   applicationTitle,
   initRequestParams
 } from "../../components/common/Helper";
-import { SearchBar } from "../../components/common/SearchBar/SearchBar";
 import useUrlState from "@ahooksjs/use-url-state";
 import {
   serialize,
@@ -149,7 +149,6 @@ export function RecordListView() {
       search={setSearch}
       query={deserialize(urlState.query)}
       loading={loading || !dataReady}
-      placeholder="Search"
     >
       <RecordTable
         records={records}