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/index.jsx

@@ -1,38 +1,32 @@
 import React, { useEffect } from "react";
 import { useParams } from "react-router";
+import { useLocation } from "react-router-dom";
 import clsx from "clsx";
-import { Button, Grid, Typography } from "@material-ui/core";
+import { Box, Tab, Tabs } 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 CarUpdatesTab from "./CarUpdatesTab";
+import CANFiltersTab from "./CANFiltersTab";
+import TabPanel from "../../Controls/TabPanel";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
 
-const MainForm = () => {
+const tabHashes = [
+  "updates",
+  "filters"
+]
+
+const CarStatus = () => {
   const { vin } = useParams();
   const classes = useStyles();
-  const { setTitle, setSitePath, 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);
-    }
-  };
+  const { setTitle, setSitePath } = useStatusContext();
+  const { hash } = useLocation();
+  const [tabIndex, setTabIndex] = React.useState(0);
+
+  useEffect(() => {
+    const key = hash.replace("#", "")
+    const index = tabHashes.findIndex(element => element === key);
+    if (index >= 0) setTabIndex(index);
+  }, [hash]);
 
   useEffect(() => {
     const title = `Vehicle ${vin} Details`;
@@ -49,39 +43,35 @@ const MainForm = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [vin]);
 
+  const handleTabChange = (event, newIndex) => {
+    setTabIndex(newIndex);
+  };
+
   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>
+      <Box className={classes.tableToolbar} sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs value={tabIndex} onChange={handleTabChange} aria-label="car tabs" indicatorColor="secondary">
+          <Tab label="Car Updates" {...tabProps(0)} />
+          <Tab label="CAN Filters" {...tabProps(1)} />
+        </Tabs>
+      </Box>
+
+      <TabPanel value={tabIndex} index={0}>
+        <CarUpdatesTab />
+      </TabPanel>
+
+      <TabPanel value={tabIndex} index={1}>
+        <CANFiltersTab />
+      </TabPanel>
+    </div >
   );
 };
 
-const CarStatus = () => (
-  <VehicleProvider>
-    <MainForm />
-  </VehicleProvider>
-);
+function tabProps(index) {
+  return {
+    id: `tab-${index}`,
+    "aria-controls": `tabpanel-${index}`
+  };
+}
 
 export default CarStatus;