CEC-244 Add search (#43)

* Add search to car send command page
Add snapshot check

src/components/App/App.test.js

@@ -87,6 +87,10 @@ describe("App", () => {
     await check("/vehicle-status/FISKER123", "span.MuiButton-label", "Sign In");
   });
 
+  it("Route /vehicles-command unauthenticated", async () => {
+    await check("/vehicles-command", "span.MuiButton-label", "Sign In");
+  });
+
   it("Route / authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
     await check("/", "h1", "Welcome John!");
@@ -132,6 +136,11 @@ describe("App", () => {
     await check("/vehicle-status/FISKER123", "h6", "Vehicle FISKER123 Details");
   });
 
+  it("Route /vehicles-command authenticated", async () => {
+    setToken(TEST_AUTH_OBJECT);
+    await check("/vehicles-command", "h6", "Send Command");
+  });
+
   it("Route /page-not-found unauthenticated", async () => {
     await check("/page-not-found", "h1", "Page Not Found");
   });

src/components/CarUpdates/Status/index.jsx

@@ -25,7 +25,7 @@ import VehicleStatus from "../../Cars/StatusModal";
 const MainForm = () => {
   const { packageid } = useParams();
   const classes = useStyles();
-  const [pageSize, setPageSize] = useState(25);
+  const [pageSize, setPageSize] = useState(10);
   const [pageIndex, setPageIndex] = useState(0);
   const [viewVIN, setViewVIN] = useState(null);
   const {

src/components/Cars/List/index.jsx

@@ -51,7 +51,7 @@ const tableColumns = [
 
 const MainForm = () => {
   const classes = useStyles();
-  const [pageSize, setPageSize] = useState(25);
+  const [pageSize, setPageSize] = useState(10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("vin");
   const [order, setOrder] = useState("asc");

src/components/Cars/SendCommandBulk/index.jsx

@@ -9,6 +9,7 @@ import {
   TableFooter,
   TablePagination,
   TableRow,
+  Toolbar,
 } from "@material-ui/core";
 
 import {
@@ -21,6 +22,7 @@ import useStyles from "../../useStyles";
 import { LocalDateTimeString } from "../../../utils/dates";
 import TableHeaderSortable from "../../Table/HeaderSortable";
 import SendCommand from "../SendCommand";
+import SearchField from "../../Controls/SearchField";
 
 const tableColumns = [
   {
@@ -51,11 +53,12 @@ const tableColumns = [
 
 const MainForm = () => {
   const classes = useStyles();
-  const [pageSize, setPageSize] = useState(25);
+  const [pageSize, setPageSize] = useState(10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("vin");
   const [order, setOrder] = useState("asc");
   const [selected, setSelected] = useState([]);
+  const [search, setSearch] = useState("");
   const { getVehicles, vehicles, totalVehicles } = useVehicleContext();
   const { setMessage, setTitle } = useStatusContext();
   const {
@@ -89,6 +92,7 @@ const MainForm = () => {
           limit: pageSize,
           offset: pageSize * pageIndex,
           order: `${orderBy} ${order}`,
+          search,
         },
         token
       );
@@ -96,7 +100,7 @@ const MainForm = () => {
       setMessage(e.message);
     }
     // eslint-disable-next-line
-  }, [pageIndex, pageSize, token, orderBy, order]);
+  }, [pageIndex, pageSize, token, orderBy, order, search]);
 
   const handleChangePageIndex = (event, newIndex) => {
     setPageIndex(newIndex);
@@ -128,8 +132,16 @@ const MainForm = () => {
     setSelected(newSelected);
   };
 
+  const handleSearch = (search) => {
+    setSelected([]);
+    setSearch(search);
+  };
+
   return (
     <div className={classes.paper} style={{ height: 700, width: "100%" }}>
+      <Toolbar className={classes.tableToolbar}>
+        <SearchField classes={classes} onSearch={handleSearch} />
+      </Toolbar>
       <TableContainer>
         <Table>
           <TableHeaderSortable

src/components/UpdatePackages/List/index.jsx

@@ -50,7 +50,7 @@ const tableColumns = [
 
 const UpdatePackagesList = () => {
   const classes = useStyles();
-  const [pageSize, setPageSize] = useState(25);
+  const [pageSize, setPageSize] = useState(10);
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");