Merge branch 'release/0.0.3'

2023-03-22 09:53:35 -07:00
parent b30094253d ce5f8d613c
commit 1fe191d435
20 changed files with 772 additions and 113 deletions
--- a/src/components/App/snapshots/App.test.js.snap
+++ b/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"
--- a/src/components/CANSelfServe/SelfServe/index.jsx
+++ b/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">
@@ -146,7 +156,7 @@ const MainForm = ({ id }) => {
        </Grid>
        <Grid item xs={12}>
          <FormControl fullWidth required>
-            <InputLabel id="select-can-signals-label">Select CAN signals</InputLabel>
+          <InputLabel id="select-can-signals-label">Select CAN signals</InputLabel>
            <Select
              labelId="select-can-signals-label"
              id="select-can-signals"
@@ -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} />
--- a/src/components/Cars/Status/CANFiltersTab.jsx
+++ b/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 { vin } = useParams();
+const CANFiltersTab = ({vin}) => {
  const classes = useStyles();

  return (
--- a/src/components/Cars/Status/CANFiltersTab.test.jsx
+++ b/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(
--- a/src/components/Cars/Status/CANSignalsTab.jsx
+++ b/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 {
--- a/src/components/Cars/Status/CANSignalsTab.test.jsx
+++ b/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(() => {
--- a/src/components/Cars/Status/CarUpdatesTab.jsx
+++ b/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 { vin } = useParams();
+const MainForm = ({vin}) => {
  const classes = useStyles();
  const {
    token: {
@@ -28,9 +26,9 @@ const MainForm = () => {
  );
 };

-const CarUpdatesTab = () => (
+const CarUpdatesTab = ({vin}) => (
  <VehicleProvider>
-    <MainForm />
+    <MainForm vin={vin} />
  </VehicleProvider>
 );

--- a/src/components/Cars/Status/DetailsTab.jsx
+++ b/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 { vin } = useParams();
+const CarDetailsTab = ({vin}) => {
  const classes = useStyles();

  return (
--- a/src/components/Cars/Status/DigitalTwinTab.jsx
+++ b/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 DigitalTwin from "../../DigitalTwin";
-import {
-  useVehicleContext,
-  VehicleProvider,
-} from "../../Contexts/VehicleContext";
+import { logger } from "../../../services/monitoring";
 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,18 +28,22 @@ const Main = (props) => {

  useEffect(() => {
    if (!vin) return;
-    (async () => {
-      try {
-        const result = await getState(token, vin);
-        setCarState(result.data);
-      } catch (e) {
-        setMessage(e.message);
-        logger.warn(e.stack);
-      }
-    })();
+    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);
+    } catch (e) {
+      setMessage(e.message);
+      logger.warn(e.stack);
+    }
+  };
+
  return (
    <div className={clsx(classes.paper, classes.tableSize)}>
      <Typography variant="h6" style={{ paddingBottom: "10px" }}>
--- a/src/components/Cars/Status/ECUsTab.jsx
+++ b/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 { vin } = useParams();
+const MainForm = ({ vin }) => {
  const classes = useStyles();
  const {
    token: {
@@ -27,9 +25,9 @@ const MainForm = () => {
  );
 };

-const CarUpdatesTab = () => (
+const CarUpdatesTab = ({vin}) => (
  <VehicleProvider>
-    <MainForm />
+    <MainForm vin={vin}/>
  </VehicleProvider>
 );

--- a/src/components/Cars/Status/snapshots/CANFiltersTab.test.jsx.snap
+++ b/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\\""
                >
--- a/src/components/Cars/Status/snapshots/CarUpdatesTab.test.jsx.snap
+++ b/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"
--- a/src/components/Cars/Status/snapshots/DigitalTwinTab.test.jsx.snap
+++ b/src/components/Cars/Status/snapshots/DigitalTwinTab.test.jsx.snap
@@ -35,13 +35,34 @@ exports[`DigitalTwinTab Render 1`] = `
            true
          </div>
          <div>
-            <p>
-              <b>
+            <div
+              class="makeStyles-popupSection-0"
+            >
+              <h3>
                Battery
-              </b>
-              : 
-              95%
-            </p>
+              </h3>
+              <p>
+                <b>
+                  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
--- a/src/components/Cars/Status/snapshots/ECUsTab.test.jsx.snap
+++ b/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"
--- a/src/components/Cars/Status/index.jsx
+++ b/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,
  }
 ];

--- a/src/components/Controls/CarECUsTable/index.jsx
+++ b/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",
-    label: "Created",
+    id: "fingerprint",
+    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>
-              <TableCell align="center">{row.sw_version}</TableCell>
-              <TableCell align="center">{row.hw_version}</TableCell>
-              <TableCell align="center">{row.config}</TableCell>
-              <TableCell align="center">
-                {LocalDateTimeString(row.created)}
-              </TableCell>
-              <TableCell align="center">
-                {LocalDateTimeString(row.updated)}
-              </TableCell>
+              {tableColumns.map((column, j) => {
+                const key = `${row.ecu + i}${column.id}`
+                if (column.id === "updated_at") return (<TableCell key={key} align="center">{LocalDateTimeString(row.updated)}</TableCell>);
+                return (<TableCell key={key} align="center">{row[column.id]}</TableCell>);
+              })}
            </TableRow>
          ))}
        </TableBody>
--- a/src/components/DigitalTwin/index.js
+++ b/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}%`)}
-      {doors != null && (
+      {(battery || max_range) && (
+        <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] ? "Open" : "Closed");
-            } else {
-              return keyValueTemplate(value[0], value[1] ? "Unlocked" : "Locked");
-            }
+            return keyValueTemplate(value[0], value[1] ? LOCKED : UNLOCKED);
          })}
        </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>
--- a/src/components/Layouts/MenuDrawer.jsx
+++ b/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} />
--- a/src/components/VehicleMap/index.jsx
+++ b/src/components/VehicleMap/index.jsx
@@ -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) => {