CEC-6084 - Car Update search bar

src/components/Cars/Status/CarUpdatesTab.jsx

@@ -1,15 +1,18 @@
-import { Typography } from "@material-ui/core";
+import { Grid, Typography } from "@material-ui/core";
 import clsx from "clsx";
 import React from "react";
 
 import { useUserContext } from "../../Contexts/UserContext";
 import { VehicleProvider } from "../../Contexts/VehicleContext";
+import { useLocalStorage } from "../../useLocalStorage";
 import CarUpdatesTable from "../../Controls/CarUpdatesTable";
 import CarVersionLogTable from "../../Controls/CarVersionLogTable";
 import FlashpackInfoTable from "../../Controls/FlashpackInfoTable";
+import SearchField from "../../Controls/SearchField";
 import useStyles from "../../useStyles";
 
 const MainForm = ({ vin }) => {
+  const [search, setSearch] = useLocalStorage("CAR_UPDATES_SEARCH", "");
   const classes = useStyles();
   const {
     token: {
@@ -17,10 +20,17 @@ const MainForm = ({ vin }) => {
     },
   } = useUserContext();
 
+  const handleSearch = (query) => {
+    setSearch(query);
+  };
+
   return (
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Typography variant="h6">Car Updates</Typography>
-      <CarUpdatesTable vin={vin} token={token} classes={classes} />
+      <Grid item md={4} className={classes.textCenterAlign}>
+        <SearchField classes={classes} onSearch={handleSearch} savedSearchValue={search} />
+      </Grid>
+      <CarUpdatesTable vin={vin} token={token} classes={classes} search={search} />
       <Typography variant="h6" className={classes.labelInline}>Version Log</Typography>
       <CarVersionLogTable vin={vin} token={token} classes={classes} />
       <Typography variant="h6" className={classes.labelInline}>Flashpack Version Progress</Typography>

src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap

@@ -19,6 +19,60 @@ exports[`CarUpdatesTab Render 1`] = `
           >
             Car Updates
           </h6>
+          <div
+            class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-4"
+          >
+            <div
+              class="MuiFormControl-root makeStyles-margin-0 makeStyles-fullWidth-0"
+            >
+              <label
+                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
+                data-shrink="false"
+                for="search"
+              >
+                Search
+              </label>
+              <div
+                class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
+              >
+                <input
+                  aria-invalid="false"
+                  class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
+                  id="search"
+                  type="text"
+                  value=""
+                />
+                <div
+                  class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+                >
+                  <button
+                    aria-label="search"
+                    class="MuiButtonBase-root MuiIconButton-root"
+                    tabindex="0"
+                    type="button"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
           <table
             class="MuiTable-root"
           >

src/components/Controls/CarUpdatesTable/index.jsx

@@ -63,7 +63,7 @@ const tableColumns = [
 
 const PAGE_SIZE = "CAR_UPDATES_TABLE_PAGE_SIZE";
 
-const MainForm = ({ vin, token }) => {
+const MainForm = ({ vin, token, search }) => {
   const classes = useStyles();
   const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
   const [pageIndex, setPageIndex] = useState(0);
@@ -89,6 +89,7 @@ const MainForm = ({ vin, token }) => {
         await getCarUpdates(
           {
             vin,
+            search,
             limit: pageSize,
             offset: pageSize * pageIndex,
             order: `${orderBy} ${order}`,
@@ -101,7 +102,7 @@ const MainForm = ({ vin, token }) => {
       }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [vin, token, pageIndex, pageSize, orderBy, order]);
+  }, [vin, token, search, pageIndex, pageSize, orderBy, order]);
 
   useEffect(() => {
     try {