CEC-2211 CAN signals view (#176)

* CEC-2211 CAN signals view

* Correct stg link

src/components/Cars/Status/CANSignalsTab.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+import clsx from "clsx";
+import { Typography } from "@material-ui/core";
+
+import useStyles from "../../useStyles";
+import { useUserContext } from "../../Contexts/UserContext";
+import CANSignals from "../CANSignals";
+import { VehicleProvider } from "../../Contexts/VehicleContext";
+
+const Main = (props) => {
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+  const classes = useStyles();
+  const { vin } = props;
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Typography variant="h6" style={{ paddingBottom: "10px" }}>
+        CAN Signals
+      </Typography>
+      <CANSignals vin={vin} token={token} />
+    </div>
+  );
+};
+
+const CANSignalsTab = (props) => (
+  <VehicleProvider>
+    <Main {...props} />
+  </VehicleProvider>
+);
+
+export default CANSignalsTab;

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

@@ -101,6 +101,24 @@ exports[`CarStatus Render 1`] = `
                       class="MuiTouchRipple-root"
                     />
                   </button>
+                  <button
+                    aria-controls="tabpanel-4"
+                    aria-selected="false"
+                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                    id="tab-4"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      CAN Signals
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
                 </div>
                 <span
                   class="PrivateTabIndicator-root-64 PrivateTabIndicator-colorSecondary-66 MuiTabs-indicator"
@@ -203,6 +221,13 @@ exports[`CarStatus Render 1`] = `
             id="tabpanel-3"
             role="tabpanel"
           />
+          <div
+            aria-labelledby="tab-4"
+            class="makeStyles-fullWidth-0"
+            hidden=""
+            id="tabpanel-4"
+            role="tabpanel"
+          />
         </div>
       </div>
     </div>

src/components/Cars/Status/index.jsx

@@ -11,6 +11,7 @@ import DigitalTwinTab from "./DigitalTwinTab";
 import TabPanel from "../../Controls/TabPanel";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import useStyles from "../../useStyles";
+import CANSignalsTab from "./CANSignalsTab";
 
 const tabHashes = ["details", "updates", "filters"];
 
@@ -62,6 +63,7 @@ const CarStatus = () => {
           <Tab label="Car Updates" {...tabProps(1)} />
           <Tab label="CAN Filters" {...tabProps(2)} />
           <Tab label="Digital Twin" {...tabProps(3)} />
+          <Tab label="CAN Signals" {...tabProps(4)} />
         </Tabs>
       </Box>
 
@@ -80,6 +82,10 @@ const CarStatus = () => {
       <TabPanel value={tabIndex} index={3}>
         <DigitalTwinTab vin={vin} />
       </TabPanel>
+
+      <TabPanel value={tabIndex} index={4} className={classes.fullWidth}>
+        <CANSignalsTab vin={vin} />
+      </TabPanel>
     </div>
   );
 };