CEC-464 can filters forms (#118)

* can filters forms and lists

* unit tests

* updating warnings and tests

* merge develop

* fixed snapshots

* update jest mocks

* updating tests

src/components/Cars/Status/CarUpdatesTab.jsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { useParams } from "react-router";
+import clsx from "clsx";
+import { Button, Grid, Typography } from "@material-ui/core";
+
+import CarECUsTable from "../../Controls/CarECUsTable";
+import CarUpdatesTable from "../../Controls/CarUpdatesTable";
+import { logger } from "../../../services/monitoring";
+import {
+  VehicleProvider,
+  useVehicleContext,
+} from "../../Contexts/VehicleContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import useStyles from "../../useStyles";
+
+
+const MainForm = () => {
+  const { vin } = useParams();
+  const classes = useStyles();
+  const { setMessage } = useStatusContext();
+  const { busy, sendCommand } = useVehicleContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const updateHandler = async (e) => {
+    try {
+      await sendCommand([vin], "ecu", "", token);
+      setMessage(`Sent command to ${vin}`);
+    } catch (error) {
+      setMessage(error.message);
+      logger.error(error.stack);
+    }
+  };
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Typography variant="h6">Car Updates</Typography>
+      <CarUpdatesTable vin={vin} token={token} classes={classes} />
+      <Grid container className={classes.root} spacing={2}>
+        <Grid item md={4} className={classes.textJustifyAlign}></Grid>
+        <Grid item md={4} className={classes.textCenterAlign}>
+          <Typography variant="h6" className={classes.labelInline}>
+            Car ECUs
+          </Typography>
+        </Grid>
+        <Grid item md={4} className={classes.textRightAlign}>
+          <Button
+            type="submit"
+            disabled={busy}
+            variant="contained"
+            color="primary"
+            className={clsx(classes.formControl, classes.textField)}
+            onClick={updateHandler}
+          >
+            {busy ? "Sending..." : "Refresh"}
+          </Button>
+        </Grid>
+      </Grid>
+      <CarECUsTable vin={vin} token={token} classes={classes} />
+    </div >
+  );
+};
+
+const CarUpdatesTab = () => (
+  <VehicleProvider>
+    <MainForm />
+  </VehicleProvider>
+);
+
+export default CarUpdatesTab;