Merge branch 'develop' into release/0.0.3

src/components/App/__snapshots__/App.test.js.snap

@@ -14,6 +14,30 @@ exports[`App Route / authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -650,6 +674,30 @@ exports[`App Route /home authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -1286,6 +1334,30 @@ exports[`App Route /issue-info authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -1905,6 +1977,30 @@ exports[`App Route /issues authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -2767,6 +2863,30 @@ exports[`App Route /package-deploy authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -3838,6 +3958,30 @@ exports[`App Route /package-status authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -4644,6 +4788,30 @@ exports[`App Route /packages authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -5664,6 +5832,30 @@ exports[`App Route /page-not-found authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -6225,6 +6417,30 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -7057,6 +7273,30 @@ exports[`App Route /tools/security-dll authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -7451,6 +7691,30 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -8149,6 +8413,30 @@ exports[`App Route /vehicle-add authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -9265,6 +9553,30 @@ exports[`App Route /vehicle-status authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"
@@ -10316,6 +10628,30 @@ exports[`App Route /vehicles authenticated 1`] = `
         <div
           class="MuiToolbar-root MuiToolbar-regular MuiToolbar-gutters"
         >
+          <button
+            aria-label="toggle drawer"
+            class="MuiButtonBase-root MuiIconButton-root makeStyles-menuButton-0 MuiIconButton-colorInherit MuiIconButton-edgeStart"
+            tabindex="0"
+            type="button"
+          >
+            <span
+              class="MuiIconButton-label"
+            >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
           <div>
             <h6
               class="MuiTypography-root MuiTypography-h6 MuiTypography-noWrap"

src/components/CANSelfServe/SelfServe/index.jsx

@@ -72,9 +72,19 @@ const MainForm = ({ id }) => {
   };
 
   const handleSelectedItemsChange = (event) => {
-    setSelectedCanSignals(event.target.value);
+    const { value } = event.target;
+    if (value.some(item => item === "Select All")) {
+      if (selectedCanSignals.length === canSignals.length) {
+        setSelectedCanSignals([]);
+      } else {
+        setSelectedCanSignals(canSignals.map(signal => signal.signal_name));
+      }
+    } else {
+      setSelectedCanSignals(value);
+    }
   };
 
+
   return (
     <div className={classes.paper}>
       <Grid container spacing={3} justifyContent="center">
@@ -163,6 +173,10 @@ const MainForm = ({ id }) => {
                 </div>
               )}
             >
+              <MenuItem value="Select All">
+                <Checkbox checked={selectedCanSignals.length === canSignals.length} />
+                <ListItemText primary="Select All" />
+              </MenuItem>
               {canSignals.map((signal) => (
                 <MenuItem key={signal.signal_name} value={signal.signal_name}>
                   <Checkbox checked={selectedCanSignals.indexOf(signal.signal_name) > -1} />

src/components/Cars/Status/CANFiltersTab.jsx

@@ -1,13 +1,11 @@
-import React from "react";
-import { useParams } from "react-router";
-import clsx from "clsx";
 import { Typography } from "@material-ui/core";
+import clsx from "clsx";
+import React from "react";
 
 import CANFiltersTable from "../../CANFilter/Table";
 import useStyles from "../../useStyles";
 
-const CANFiltersTab = () => {
+const CANFiltersTab = ({vin}) => {
-  const { vin } = useParams();
   const classes = useStyles();
 
   return (

src/components/Cars/Status/CANFiltersTab.test.jsx

@@ -8,10 +8,10 @@ jest.mock("@material-ui/core/utils/unstable_useId", () =>
 import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
 
-import { setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
-import CANFiltersTab from "./CANFiltersTab";
 import addSnapshotSerializer from "../../../utils/snapshot";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
+import { setToken } from "../../Contexts/UserContext";
+import CANFiltersTab from "./CANFiltersTab";
 
 const renderCANFiltersTab = async () => {
   const { container } = render(

src/components/Cars/Status/CANSignalsTab.jsx

@@ -1,11 +1,11 @@
-import React from "react";
-import clsx from "clsx";
 import { Typography } from "@material-ui/core";
+import clsx from "clsx";
+import React from "react";
 
-import useStyles from "../../useStyles";
 import { useUserContext } from "../../Contexts/UserContext";
-import CANSignals from "../CANSignals";
 import { VehicleProvider } from "../../Contexts/VehicleContext";
+import useStyles from "../../useStyles";
+import CANSignals from "../CANSignals";
 
 const Main = (props) => {
   const {

src/components/Cars/Status/CANSignalsTab.test.jsx

@@ -9,14 +9,14 @@ jest.mock("@material-ui/core/utils/unstable_useId", () =>
 
 import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
-import CANSignalsTab from "./CANSignalsTab";
-import {setToken} from "../../Contexts/UserContext";
 import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
+import { setToken } from "../../Contexts/UserContext";
+import CANSignalsTab from "./CANSignalsTab";
 
 const renderCANSignalsTab = async () => {
   const { container } = render(
     <BrowserRouter>
-      <CANSignalsTab vin="TESTVIN1234567890" token="token"/>
+      <CANSignalsTab vin="TESTVIN1234567890" />
     </BrowserRouter>
   );
   await waitFor(() => {

src/components/Cars/Status/CarUpdatesTab.jsx

@@ -1,7 +1,6 @@
 import { Typography } from "@material-ui/core";
 import clsx from "clsx";
 import React from "react";
-import { useParams } from "react-router";
 
 import { useUserContext } from "../../Contexts/UserContext";
 import { VehicleProvider } from "../../Contexts/VehicleContext";
@@ -9,8 +8,7 @@ import CarUpdatesTable from "../../Controls/CarUpdatesTable";
 import CarVersionLogTable from "../../Controls/CarVersionLogTable";
 import useStyles from "../../useStyles";
 
-const MainForm = () => {
+const MainForm = ({vin}) => {
-  const { vin } = useParams();
   const classes = useStyles();
   const {
     token: {
@@ -28,9 +26,9 @@ const MainForm = () => {
   );
 };
 
-const CarUpdatesTab = () => (
+const CarUpdatesTab = ({vin}) => (
   <VehicleProvider>
-    <MainForm />
+    <MainForm vin={vin} />
   </VehicleProvider>
 );
 

src/components/Cars/Status/DetailsTab.jsx

@@ -1,13 +1,11 @@
-import React from "react";
-import { useParams } from "react-router";
-import clsx from "clsx";
 import { Typography } from "@material-ui/core";
+import clsx from "clsx";
+import React from "react";
 
-import CarDetails from "./Details";
 import useStyles from "../../useStyles";
+import CarDetails from "./Details";
 
-const CarDetailsTab = () => {
+const CarDetailsTab = ({vin}) => {
-  const { vin } = useParams();
   const classes = useStyles();
 
   return (

src/components/Cars/Status/DigitalTwinTab.jsx

@@ -1,16 +1,18 @@
-import React, { useEffect, useState } from "react";
-import clsx from "clsx";
 import { Typography } from "@material-ui/core";
+import clsx from "clsx";
+import React, { useEffect, useState } from "react";
 
-import useStyles from "../../useStyles";
+import { logger } from "../../../services/monitoring";
-import DigitalTwin from "../../DigitalTwin";
-import {
-  useVehicleContext,
-  VehicleProvider,
-} from "../../Contexts/VehicleContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { useUserContext } from "../../Contexts/UserContext";
-import { logger } from "../../../services/monitoring";
+import {
+  useVehicleContext,
+  VehicleProvider
+} from "../../Contexts/VehicleContext";
+import DigitalTwin from "../../DigitalTwin";
+import useStyles from "../../useStyles";
+
+const REQUEST_INTERVAL = 10000;
 
 const Main = (props) => {
   const { getState } = useVehicleContext();
@@ -26,7 +28,13 @@ const Main = (props) => {
 
   useEffect(() => {
     if (!vin) return;
-    (async () => {
+    getCarState();
+    const interval = setInterval(getCarState, REQUEST_INTERVAL);
+    return () => { clearInterval(interval); }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [vin]);
+
+  const getCarState = async () => {
     try {
       const result = await getState(token, vin);
       setCarState(result.data);
@@ -34,9 +42,7 @@ const Main = (props) => {
       setMessage(e.message);
       logger.warn(e.stack);
     }
-    })();
+  };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [vin]);
 
   return (
     <div className={clsx(classes.paper, classes.tableSize)}>

src/components/Cars/Status/ECUsTab.jsx

@@ -1,15 +1,13 @@
 import { Typography } from "@material-ui/core";
 import clsx from "clsx";
 import React from "react";
-import { useParams } from "react-router";
 
 import { useUserContext } from "../../Contexts/UserContext";
 import { VehicleProvider } from "../../Contexts/VehicleContext";
 import CarECUsTable from "../../Controls/CarECUsTable";
 import useStyles from "../../useStyles";
 
-const MainForm = () => {
+const MainForm = ({ vin }) => {
-  const { vin } = useParams();
   const classes = useStyles();
   const {
     token: {
@@ -27,9 +25,9 @@ const MainForm = () => {
   );
 };
 
-const CarUpdatesTab = () => (
+const CarUpdatesTab = ({vin}) => (
   <VehicleProvider>
-    <MainForm />
+    <MainForm vin={vin}/>
   </VehicleProvider>
 );
 

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

@@ -24,7 +24,7 @@ exports[`CANFiltersTab Render 1`] = `
           >
             <a
               class="makeStyles-labelInline-0"
-              href="/filter-add?vin=undefined"
+              href="/filter-add?vin=TESTVIN1234567890"
             >
               <svg
                 aria-hidden="true"
@@ -233,7 +233,7 @@ exports[`CANFiltersTab Render 1`] = `
               >
                 <a
                   class=""
-                  href="/filter-update?vin=undefined&can_id=123&interval=1000"
+                  href="/filter-update?vin=TESTVIN1234567890&can_id=123&interval=1000"
                   style="margin: 5px;"
                   title="Update \\"123\\""
                 >
@@ -279,7 +279,7 @@ exports[`CANFiltersTab Render 1`] = `
               >
                 <a
                   class=""
-                  href="/filter-update?vin=undefined&can_id=456-789&interval=2000"
+                  href="/filter-update?vin=TESTVIN1234567890&can_id=456-789&interval=2000"
                   style="margin: 5px;"
                   title="Update \\"456-789\\""
                 >
@@ -325,7 +325,7 @@ exports[`CANFiltersTab Render 1`] = `
               >
                 <a
                   class=""
-                  href="/filter-update?vin=undefined&can_id=1&interval=0"
+                  href="/filter-update?vin=TESTVIN1234567890&can_id=1&interval=0"
                   style="margin: 5px;"
                   title="Update \\"1\\""
                 >

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

@@ -298,7 +298,46 @@ exports[`CarUpdatesTab Render 1`] = `
               </thead>
               <tbody
                 class="MuiTableBody-root"
-              />
+              >
+                <tr
+                  class="MuiTableRow-root"
+                >
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    TREX
+                  </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    0.9.56
+                  </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    1/13/2023 2:11:33 AM
+                  </td>
+                </tr>
+                <tr
+                  class="MuiTableRow-root"
+                >
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    DBC
+                  </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    386c18977a1be3cda60c953e5902c680dbe82b89523f2527e80cd9db863db991
+                  </td>
+                  <td
+                    class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                  >
+                    1/13/2023 2:11:33 AM
+                  </td>
+                </tr>
+              </tbody>
               <tfoot
                 class="MuiTableFooter-root"
               >
@@ -366,7 +405,7 @@ exports[`CarUpdatesTab Render 1`] = `
                       <p
                         class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
                       >
-                        0-0 of 0
+                        1-2 of 2
                       </p>
                       <div
                         class="MuiTablePagination-actions"

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

@@ -35,13 +35,34 @@ exports[`DigitalTwinTab Render 1`] = `
             true
           </div>
           <div>
+            <div
+              class="makeStyles-popupSection-0"
+            >
+              <h3>
+                Battery
+              </h3>
               <p>
                 <b>
-                Battery
+                  Percentage
                 </b>
                 : 
                 95%
               </p>
+              <p>
+                <b>
+                  Total Mileage
+                </b>
+                : 
+                unknown
+              </p>
+              <p>
+                <b>
+                  Max Range
+                </b>
+                : 
+                577
+              </p>
+            </div>
             <div
               class="makeStyles-popupSection-0"
             >
@@ -102,14 +123,14 @@ exports[`DigitalTwinTab Render 1`] = `
                   driver
                 </b>
                 : 
-                Closed
+                Unlocked
               </p>
               <p>
                 <b>
                   all
                 </b>
                 : 
-                Locked
+                Unlocked
               </p>
             </div>
             <div
@@ -181,7 +202,7 @@ exports[`DigitalTwinTab Render 1`] = `
             >
               <p>
                 <b>
-                  Updated at
+                  Updated At
                 </b>
                 : 
                 7/26/2022 12:26:38 AM
@@ -192,7 +213,7 @@ exports[`DigitalTwinTab Render 1`] = `
             >
               <p>
                 <b>
-                  DBC version
+                  DBC Version
                 </b>
                 : 
                 d439abd3662dd20099f49dd8f43f7b145202e961caa2b5aba2c6154c8096348b

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

@@ -103,6 +103,98 @@ exports[`ECUsTab Render 1`] = `
                     </svg>
                   </span>
                 </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Vendor
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Supplier Version
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Serial
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
+                <th
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root"
+                    role="button"
+                    tabindex="0"
+                  >
+                    Boot Loader
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                      />
+                    </svg>
+                  </span>
+                </th>
                 <th
                   class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
                   scope="col"
@@ -136,7 +228,7 @@ exports[`ECUsTab Render 1`] = `
                     role="button"
                     tabindex="0"
                   >
-                    Created
+                    Fingerprint
                     <svg
                       aria-hidden="true"
                       class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
@@ -176,7 +268,106 @@ exports[`ECUsTab Render 1`] = `
             </thead>
             <tbody
               class="MuiTableBody-root"
+            >
+              <tr
+                class="MuiTableRow-root"
+              >
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  ECUA
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  SWVERSION
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  HWVERSION
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  VENDOR
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  SUPPLIER_SW_VERSION
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  SERIAL_NUMBER
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  BOOT_LOADER
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  CONFIG
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  FINGERPRINT
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  7/14/2021 8:09:40 PM
+                </td>
+              </tr>
+              <tr
+                class="MuiTableRow-root"
+              >
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  ECUB
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  SWVERSION
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  HWVERSION
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
                 />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  CONFIG
+                </td>
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                />
+                <td
+                  class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
+                >
+                  7/14/2021 8:09:40 PM
+                </td>
+              </tr>
+            </tbody>
             <tfoot
               class="MuiTableFooter-root"
             >
@@ -244,7 +435,7 @@ exports[`ECUsTab Render 1`] = `
                     <p
                       class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
                     >
-                      0-0 of 0
+                      1-2 of 2
                     </p>
                     <div
                       class="MuiTablePagination-actions"

src/components/Cars/Status/index.jsx

@@ -26,10 +26,12 @@ const TabViews = [
   {
     label: "Details",
     component: CarDetailsTab,
+    rolesPerProvider: Permissions.FiskerMagnaRead,
   },
   {
     label: "Car Updates",
     component: CarUpdatesTab,
+    rolesPerProvider: Permissions.FiskerMagnaRead,
   },
   {
     label: "CAN Filters",
@@ -39,22 +41,27 @@ const TabViews = [
   {
     label: "Digital Twin",
     component: DigitalTwinTab,
+    rolesPerProvider: Permissions.FiskerMagnaRead,
   },
   {
     label: "CAN Signals",
     component: CANSignalsTab,
+    rolesPerProvider: Permissions.FiskerMagnaRead,
   },
   {
     label: "T.Rex logs",
     component: TRexLogsTab,
+    rolesPerProvider: Permissions.FiskerMagnaRead,
   },
   {
     label: "ECUs",
     component: ECUsTab,
+    rolesPerProvider: Permissions.FiskerMagnaRead,
   },
   {
     label: "Remote Commands",
     component: RemoteCommandsTab,
+    rolesPerProvider: Permissions.FiskerMagnaCreate,
   },
   {
     label: "Fleets",
@@ -63,7 +70,8 @@ const TabViews = [
   },
   {
     label: "CAN Signal Export",
-    component: SelfServeTab
+    component: SelfServeTab,
+    rolesPerProvider: Permissions.FiskerRead,
   }
 ];
 

src/components/Controls/CarECUsTable/index.jsx

@@ -1,20 +1,20 @@
-import React, { useEffect, useState } from "react";
 import {
   Table,
   TableBody,
   TableCell,
   TableFooter,
   TablePagination,
-  TableRow,
+  TableRow
 } from "@material-ui/core";
 import clsx from "clsx";
+import React, { useEffect, useState } from "react";
 
-import { LocalDateTimeString } from "../../../utils/dates";
-import TableHeaderSortable from "../../Table/HeaderSortable";
-import { useVehicleContext } from "../../Contexts/VehicleContext";
-import { useStatusContext } from "../../Contexts/StatusContext";
 import { logger } from "../../../services/monitoring";
-import {useLocalStorage} from "../../useLocalStorage";
+import { LocalDateTimeString } from "../../../utils/dates";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { useVehicleContext } from "../../Contexts/VehicleContext";
+import TableHeaderSortable from "../../Table/HeaderSortable";
+import { useLocalStorage } from "../../useLocalStorage";
 
 const tableColumns = [
   {
@@ -29,13 +29,29 @@ const tableColumns = [
     id: "hw_version",
     label: "HW Version",
   },
+  {
+    id: "vendor",
+    label: "Vendor",
+  },
+  {
+    id: "supplier_sw_version",
+    label: "Supplier Version",
+  },
+  {
+    id: "serial_number",
+    label: "Serial",
+  },
+  {
+    id: "boot_loader_version",
+    label: "Boot Loader",
+  },
   {
     id: "config",
     label: "Config",
   },
   {
-    id: "created_at",
+    id: "fingerprint",
-    label: "Created",
+    label: "Fingerprint",
   },
   {
     id: "updated_at",
@@ -117,16 +133,11 @@ const CarECUsTable = ({ vin, token, classes }) => {
         <TableBody>
           {ecus.map((row, i) => (
             <TableRow key={row.ecu + i}>
-              <TableCell align="center">{row.ecu}</TableCell>
+              {tableColumns.map((column, j) => {
-              <TableCell align="center">{row.sw_version}</TableCell>
+                const key = `${row.ecu + i}${column.id}`
-              <TableCell align="center">{row.hw_version}</TableCell>
+                if (column.id === "updated_at") return (<TableCell key={key} align="center">{LocalDateTimeString(row.updated)}</TableCell>);
-              <TableCell align="center">{row.config}</TableCell>
+                return (<TableCell key={key} align="center">{row[column.id]}</TableCell>);
-              <TableCell align="center">
+              })}
-                {LocalDateTimeString(row.created)}
-              </TableCell>
-              <TableCell align="center">
-                {LocalDateTimeString(row.updated)}
-              </TableCell>
             </TableRow>
           ))}
         </TableBody>

src/components/DigitalTwin/index.js

@@ -4,6 +4,10 @@ import { LocalDateTimeString } from "../../utils/dates";
 import { ValidateLocationByParam } from "../../utils/locations";
 import useStyles from "../useStyles";
 
+const UNKNOWN = "unknown";
+const LOCKED = "Locked";
+const UNLOCKED = "Unlocked";
+
 const keyValueTemplate = (key, value) => (
   <p key={key}>
     <b>{key}</b>: {value}
@@ -23,33 +27,43 @@ const windowState = (value) => {
 
 const DigitalTwin = (props) => {
   const classes = useStyles();
-  const { battery, doors, location, trex_version, ip, updated, windows, misc_windows, sunroof, dbc_version, door_locks } = props;
+  const { battery, doors, location, trex_version, ip, updated, windows, misc_windows, sunroof, dbc_version, door_locks, vcu0x260, charging_metrics, max_range } = props;
 
   return (
     <div>
-      {!battery && !doors && !location && !windows && (
+      {!battery && !doors && !location && !windows && !vcu0x260 && !charging_metrics && (
         <p>No vehicle data to display.</p>
       )}
-      {battery != null && keyValueTemplate("Battery", `${battery.percent}%`)}
+      {(battery || max_range) && (
-      {doors != null && (
+        <div className={classes.popupSection}>
+          <h3>Battery</h3>
+          {keyValueTemplate("Percentage", `${battery?.percent || 0}%`)}
+          {keyValueTemplate("Total Mileage", battery?.total_mileage_odometer || UNKNOWN)}
+          {keyValueTemplate("Max Range", max_range?.max_miles || UNKNOWN)}
+        </div>
+      )}
+      {(vcu0x260 || charging_metrics) && (
+        <div className={classes.popupSection}>
+          <h3>Charging</h3>
+          {keyValueTemplate("Charge Type", vcu0x260?.charge_type || UNKNOWN)}
+          {keyValueTemplate("Remaining Time", charging_metrics?.remaining_charging_time || UNKNOWN)}
+        </div>
+      )}
+      {doors && (
         <div className={classes.popupSection}>
           <h3>Doors</h3>
           {Object.entries(doors).map(mapOpenCloseState)}
         </div>
       )}
-      {door_locks != null && (
+      {door_locks && (
         <div className={classes.popupSection}>
           <h3>Door Locks</h3>
           {Object.entries(door_locks).map((value) => {
-            if (value[0] === "driver") {
+            return keyValueTemplate(value[0], value[1] ? LOCKED : UNLOCKED);
-              return keyValueTemplate(value[0], value[1] ? "Open" : "Closed");
-            } else {
-              return keyValueTemplate(value[0], value[1] ? "Unlocked" : "Locked");
-            }
           })}
         </div>
       )}
-      {windows != null && (
+      {windows && (
         <div className={classes.popupSection}>
           <h3>Windows</h3>
           {Object.entries(windows).map((value) => {
@@ -57,7 +71,7 @@ const DigitalTwin = (props) => {
           })}
         </div>
       )}
-      {misc_windows != null && (
+      {misc_windows && (
         <div className={classes.popupSection}>
           <h3>Misc Windows</h3>
           {Object.entries(misc_windows).map((value) => {
@@ -65,7 +79,7 @@ const DigitalTwin = (props) => {
           })}
         </div>
       )}
-      {sunroof != null && (
+      {sunroof && (
         <div className={classes.popupSection}>
           <h3>Sunroof</h3>
           {Object.entries(sunroof).map((value) => {
@@ -73,7 +87,7 @@ const DigitalTwin = (props) => {
           })}
         </div>
       )}
-      {location != null && (
+      {location && (
         <div className={classes.popupSection}>
           <h3>Location</h3>
           {Object.entries(location).map((value) => {
@@ -100,12 +114,12 @@ const DigitalTwin = (props) => {
       )}
       {updated != null && (
         <div className={classes.popupSection}>
-          {keyValueTemplate("Updated at", LocalDateTimeString(updated))}
+          {keyValueTemplate("Updated At", LocalDateTimeString(updated))}
         </div>
       )}
       {dbc_version != null && (
         <div className={classes.popupSection}>
-          {keyValueTemplate("DBC version", dbc_version)}
+          {keyValueTemplate("DBC Version", dbc_version)}
         </div>
       )}
     </div>

src/components/Layouts/MenuDrawer.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import clsx from "clsx";
 import {
   Container,
@@ -7,8 +7,10 @@ import {
   Toolbar,
   Typography,
   Divider,
+  IconButton,
 } from "@material-ui/core";
 
+import MenuIcon from "@material-ui/icons/Menu";
 import SideMenu from "./SideMenu";
 import useStyles from "../useStyles";
 import { useUserContext } from "../Contexts/UserContext";
@@ -22,20 +24,40 @@ export default function MenuDrawer({ children }) {
   const { title, sitePath } = useStatusContext();
   const { token } = useUserContext();
 
+  const [drawerOpen, setDrawerOpen] = useState(true);
+
+  const toggleDrawer = () => {
+    setDrawerOpen(!drawerOpen);
+  };
+
   return (
     <div className={classes.root}>
       <AppBar
         position="fixed"
         className={clsx(classes.appBar, {
-          [classes.appBarShift]: token !== null,
+          [classes.appBarShift]: token !== null && drawerOpen,
         })}
       >
         <Toolbar>
+          {token !== null && (
+            <IconButton
+              edge="start"
+              color="inherit"
+              aria-label="toggle drawer"
+              onClick={toggleDrawer}
+              className={classes.menuButton}
+            >
+              <MenuIcon />
+            </IconButton>
+          )}
           <div>
             <Typography variant="h6" noWrap>
               {title}
             </Typography>
-            <SiteBreadcrumbs path={sitePath} className={classes.breadcrumbs} />
+            <SiteBreadcrumbs
+              path={sitePath}
+              className={classes.breadcrumbs}
+            />
           </div>
           {token !== null && (
             <UserMenu color="inherit" className={classes.rightToolbar} />
@@ -47,7 +69,7 @@ export default function MenuDrawer({ children }) {
           className={classes.drawer}
           variant="persistent"
           anchor="left"
-          open={true}
+          open={drawerOpen}
           classes={{
             paper: classes.drawerPaper,
           }}
@@ -65,7 +87,7 @@ export default function MenuDrawer({ children }) {
       )}
       <main
         className={clsx(classes.content, {
-          [classes.contentShift]: token !== null,
+          [classes.contentShift]: token !== null && drawerOpen,
         })}
       >
         <div className={classes.drawerHeader} />

src/components/VehicleMap/index.jsx

@@ -1,16 +1,16 @@
-import React, { useEffect, useState } from "react";
-import useStyles from "../useStyles";
-import L from "leaflet";
-import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
 import { Button } from "@material-ui/core";
+import L from "leaflet";
+import React, { useEffect, useState } from "react";
+import { MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet";
+import useStyles from "../useStyles";
 
+import GrayMarkerIcon from "../../assets/gray-marker.png";
+import GreenMarkerIcon from "../../assets/green-marker.png";
+import { logger } from "../../services/monitoring";
+import { ValidateLocationData } from "../../utils/locations";
 import { useUserContext } from "../Contexts/UserContext";
 import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
 import { VehiclePopUp } from "./popup";
-import { ValidateLocationData } from "../../utils/locations"
-import GreenMarkerIcon from "../../assets/green-marker.png";
-import GrayMarkerIcon from "../../assets/gray-marker.png";
-import { logger } from "../../services/monitoring";
 
 const Component = () => {
   const classes = useStyles();
@@ -39,7 +39,7 @@ const Component = () => {
     return () => {
       clearInterval(id);
     };
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token]);
 
   const retrieveAndStoreLocations = (accessToken) => {

src/services/__mocks__/vehiclesAPI.js

@@ -33,11 +33,16 @@ const data = [
 
 const ecusData = [
   {
-    config: "CONFIG",
     created: "2021-07-14T20:09:40.98187Z",
     ecu: "ECUA",
     hw_version: "HWVERSION",
     sw_version: "SWVERSION",
+    vendor: "VENDOR",
+    supplier_sw_version: "SUPPLIER_SW_VERSION",
+    serial_number: "SERIAL_NUMBER",
+    boot_loader_version: "BOOT_LOADER",
+    config: "CONFIG",
+    fingerprint: "FINGERPRINT",
     updated: "2021-07-14T20:09:40.98187Z",
   },
   {