CEC-3898 Update ecu table (#297)

* CEC-3898 Update ecu table

* smells

* smells

* smells

* smells

* Fix test

* Clean up Car status tests

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

@@ -1,19 +1,19 @@
-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 { 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/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",
   },
   {