CEC-5085: add search on VINs support (#450)

src/components/Cars/List/index.jsx

@@ -13,15 +13,15 @@ import OptionsDropdown from "../../Controls/OptionsDropdown";
 import { RoleWrap } from "../../Controls/RoleWrap";
 import SearchField from "../../Controls/SearchField";
 import BulkActions from "../../BulkActions";
-import { useLocalStorage } from "../../useLocalStorage";
+import useQuery from "./useQuery";
 import useStyles from "../../useStyles";
 
 const MainForm = () => {
   const classes = useStyles();
-  const [search, setSearch] = useLocalStorage("VEHICLE_SEARCH", "");
   const [online, setOnline] = useState(false);
   const [onlineHMI, setOnlineHMI] = useState(false);
   const [selectedVins, setSelectedVins] = useState([]);
+  const { vins, search, query, setQuery } = useQuery();
   const { setTitle, setSitePath } = useStatusContext();
   const {
     token: {
@@ -32,7 +32,7 @@ const MainForm = () => {
   } = useUserContext();
 
   const handleSearch = (query) => {
-    setSearch(query);
+    setQuery(query);
   };
 
   const handleOnline = (event) => {
@@ -78,7 +78,7 @@ const MainForm = () => {
           <BulkActions vins={selectedVins} actions={["addTags", "addToFleet", "deleteVehicles", "updateConfig"]} />
         </Grid>
         <Grid item md={4} className={classes.textCenterAlign}>
-          <SearchField classes={classes} onSearch={handleSearch} savedSearchValue={search} />
+          <SearchField classes={classes} onSearch={handleSearch} savedSearchValue={query} />
         </Grid>
         <Grid item md={2} className={clsx(classes.textJustifyAlign, classes.actionsBar)}>
           <OptionsDropdown listId="filter-menu">
@@ -106,6 +106,7 @@ const MainForm = () => {
         multiSelect
         search={{
           search,
+          vins,
           online: online ? true : null,
           online_hmi: onlineHMI ? true : null,
         }}