CEC-3519 Add car version history (#260)

* CEC-3519 Add car version history
CEC-3455 Delete button is icon and remove column
CEC-3496 Fix Issue delete

* smell

* Remove tab from issues details page

* Fix date format

src/components/Cars/Status/CarUpdatesTab.jsx

@@ -1,12 +1,12 @@
+import { Typography } from "@material-ui/core";
+import clsx from "clsx";
 import React from "react";
 import { useParams } from "react-router";
-import clsx from "clsx";
-import { Typography } from "@material-ui/core";
 
-import CarECUsTable from "../../Controls/CarECUsTable";
-import CarUpdatesTable from "../../Controls/CarUpdatesTable";
-import { VehicleProvider } from "../../Contexts/VehicleContext";
 import { useUserContext } from "../../Contexts/UserContext";
+import { VehicleProvider } from "../../Contexts/VehicleContext";
+import CarUpdatesTable from "../../Controls/CarUpdatesTable";
+import CarVersionLogTable from "../../Controls/CarVersionLogTable";
 import useStyles from "../../useStyles";
 
 const MainForm = () => {
@@ -22,10 +22,8 @@ const MainForm = () => {
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Typography variant="h6">Car Updates</Typography>
       <CarUpdatesTable vin={vin} token={token} classes={classes} />
-      <Typography variant="h6" className={classes.labelInline}>
-        Car ECUs
-      </Typography>
-      <CarECUsTable vin={vin} token={token} classes={classes} />
+      <Typography variant="h6" className={classes.labelInline}>Version Log</Typography>
+      <CarVersionLogTable vin={vin} token={token} classes={classes} />
     </div>
   );
 };

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

@@ -1,6 +1,7 @@
 jest.mock("../../Contexts/CANFiltersContext");
 jest.mock("../../Contexts/StatusContext");
 jest.mock("../../Contexts/UserContext");
+jest.mock("../../../services/vehiclesAPI");
 jest.mock("@material-ui/core/utils/unstable_useId", () =>
   jest.fn().mockReturnValue("mui-test-id")
 );
@@ -8,12 +9,12 @@ jest.mock("@material-ui/core/utils/unstable_useId", () =>
 import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
 
+import addSnapshotSerializer from "../../../utils/snapshot";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import { CANFiltersProvider } from "../../Contexts/CANFiltersContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
-import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
+import { setToken, UserProvider } from "../../Contexts/UserContext";
 import MainForm from "./CarUpdatesTab";
-import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderCarUpdatesTab = async () => {
   const { container } = render(

src/components/Cars/Status/ECUsTab.jsx

@@ -0,0 +1,36 @@
+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 classes = useStyles();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Typography variant="h6" className={classes.labelInline}>
+        Car ECUs
+      </Typography>
+      <CarECUsTable vin={vin} token={token} classes={classes} />
+    </div>
+  );
+};
+
+const CarUpdatesTab = () => (
+  <VehicleProvider>
+    <MainForm />
+  </VehicleProvider>
+);
+
+export default CarUpdatesTab;

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

@@ -0,0 +1,44 @@
+jest.mock("../../Contexts/CANFiltersContext");
+jest.mock("../../Contexts/StatusContext");
+jest.mock("../../Contexts/UserContext");
+jest.mock("../../../services/vehiclesAPI");
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
+  jest.fn().mockReturnValue("mui-test-id")
+);
+
+import { render, waitFor } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+
+import addSnapshotSerializer from "../../../utils/snapshot";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
+import { StatusProvider } from "../../Contexts/StatusContext";
+import { setToken, UserProvider } from "../../Contexts/UserContext";
+import MainForm from "./ECUsTab";
+
+const renderECUsTab = async () => {
+  const { container } = render(
+    <StatusProvider>
+      <UserProvider>
+        <BrowserRouter>
+          <MainForm vin="TESTVIN1234567890" />
+        </BrowserRouter>
+      </UserProvider>
+    </StatusProvider>
+  );
+  await waitFor(() => {
+    /* render */
+  });
+  return container;
+};
+
+describe("ECUsTab", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT_FISKER);
+    const container = await renderECUsTab();
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -173,7 +173,7 @@ exports[`CarUpdatesTab Render 1`] = `
           <h6
             class="MuiTypography-root makeStyles-labelInline-0 MuiTypography-h6"
           >
-            Car ECUs
+            Version Log
           </h6>
           <div
             class="makeStyles-paper-0 makeStyles-tableSize-0"
@@ -187,6 +187,52 @@ exports[`CarUpdatesTab Render 1`] = `
                 <tr
                   class="MuiTableRow-root MuiTableRow-head"
                 >
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiTableSortLabel-root"
+                      role="button"
+                      tabindex="0"
+                    >
+                      Type
+                      <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"
+                    >
+                      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
                     aria-sort="descending"
                     class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
@@ -198,7 +244,7 @@ exports[`CarUpdatesTab Render 1`] = `
                       role="button"
                       tabindex="0"
                     >
-                      ECU
+                      Date
                       <span
                         class="makeStyles-hiddenSortSpan-0"
                       >
@@ -216,121 +262,6 @@ exports[`CarUpdatesTab 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"
-                    >
-                      SW 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"
-                    >
-                      HW 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"
-                    >
-                      Config
-                      <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"
-                    >
-                      Created
-                      <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"
-                    >
-                      Updated
-                      <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>
                 </tr>
               </thead>
               <tbody
@@ -344,7 +275,7 @@ exports[`CarUpdatesTab Render 1`] = `
                 >
                   <td
                     class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
-                    colspan="10"
+                    colspan="3"
                   >
                     <div
                       class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"

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

@@ -0,0 +1,309 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ECUsTab Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-statusprovider"
+  >
+    <div
+      data-testid="mocked-userprovider"
+    >
+      <div
+        class="makeStyles-paper-0 makeStyles-tableSize-0"
+      >
+        <h6
+          class="MuiTypography-root makeStyles-labelInline-0 MuiTypography-h6"
+        >
+          Car ECUs
+        </h6>
+        <div
+          class="makeStyles-paper-0 makeStyles-tableSize-0"
+        >
+          <table
+            class="MuiTable-root"
+          >
+            <thead
+              class="MuiTableHead-root"
+            >
+              <tr
+                class="MuiTableRow-root MuiTableRow-head"
+              >
+                <th
+                  aria-sort="descending"
+                  class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                  scope="col"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiTableSortLabel-root MuiTableSortLabel-active"
+                    role="button"
+                    tabindex="0"
+                  >
+                    ECU
+                    <span
+                      class="makeStyles-hiddenSortSpan-0"
+                    >
+                      sorted descending
+                    </span>
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionDesc"
+                      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"
+                  >
+                    SW 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"
+                  >
+                    HW 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"
+                  >
+                    Config
+                    <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"
+                  >
+                    Created
+                    <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"
+                  >
+                    Updated
+                    <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>
+              </tr>
+            </thead>
+            <tbody
+              class="MuiTableBody-root"
+            />
+            <tfoot
+              class="MuiTableFooter-root"
+            >
+              <tr
+                class="MuiTableRow-root MuiTableRow-footer"
+              >
+                <td
+                  class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
+                  colspan="10"
+                >
+                  <div
+                    class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
+                  >
+                    <div
+                      class="MuiTablePagination-spacer"
+                    />
+                    <p
+                      class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                    >
+                      Rows per page:
+                    </p>
+                    <div
+                      class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
+                    >
+                      <select
+                        aria-label="rows per page"
+                        class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
+                      >
+                        <option
+                          class="MuiTablePagination-menuItem"
+                          value="5"
+                        >
+                          5
+                        </option>
+                        <option
+                          class="MuiTablePagination-menuItem"
+                          value="10"
+                        >
+                          10
+                        </option>
+                        <option
+                          class="MuiTablePagination-menuItem"
+                          value="25"
+                        >
+                          25
+                        </option>
+                        <option
+                          class="MuiTablePagination-menuItem"
+                          value="100"
+                        >
+                          100
+                        </option>
+                      </select>
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M7 10l5 5 5-5z"
+                        />
+                      </svg>
+                    </div>
+                    <p
+                      class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                    >
+                      0-0 of 0
+                    </p>
+                    <div
+                      class="MuiTablePagination-actions"
+                    >
+                      <button
+                        aria-label="Previous page"
+                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                        disabled=""
+                        tabindex="-1"
+                        title="Previous page"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                      <button
+                        aria-label="Next page"
+                        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                        disabled=""
+                        tabindex="-1"
+                        title="Next page"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -21,8 +21,12 @@ exports[`CarStatus Render 1`] = `
               class="MuiTabs-root"
             >
               <div
-                class="MuiTabs-scroller MuiTabs-fixed"
-                style="overflow: hidden;"
+                class="MuiTabs-scrollable"
+                style="width: 99px; height: 99px; position: absolute; top: -9999px; overflow: scroll;"
+              />
+              <div
+                class="MuiTabs-scroller MuiTabs-scrollable"
+                style="margin-bottom: 0px;"
               >
                 <div
                   aria-label="car tabs"
@@ -131,7 +135,7 @@ exports[`CarStatus Render 1`] = `
                     <span
                       class="MuiTab-wrapper"
                     >
-                      Remote Commands
+                      ECUs
                     </span>
                     <span
                       class="MuiTouchRipple-root"
@@ -145,6 +149,24 @@ exports[`CarStatus Render 1`] = `
                     role="tab"
                     tabindex="-1"
                     type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      Remote Commands
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
+                  <button
+                    aria-controls="tabpanel-7"
+                    aria-selected="false"
+                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                    id="tab-7"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
                   >
                     <span
                       class="MuiTab-wrapper"
@@ -314,6 +336,12 @@ exports[`CarStatus Render 1`] = `
             id="tabpanel-6"
             role="tabpanel"
           />
+          <div
+            aria-labelledby="tab-7"
+            hidden=""
+            id="tabpanel-7"
+            role="tabpanel"
+          />
         </div>
       </div>
     </div>

src/components/Cars/Status/index.jsx

@@ -14,6 +14,7 @@ import CANSignalsTab from "./CANSignalsTab";
 import CarUpdatesTab from "./CarUpdatesTab";
 import CarDetailsTab from "./DetailsTab";
 import DigitalTwinTab from "./DigitalTwinTab";
+import ECUsTab from "./ECUsTab";
 import FleetsTab from "./FleetsTab";
 import RemoteCommandsTab from "./RemoteCommandsTab";
 
@@ -41,6 +42,10 @@ const TabViews = [
     label: "CAN Signals",
     component: CANSignalsTab,
   },
+  {
+    label: "ECUs",
+    component: ECUsTab,
+  },
   {
     label: "Remote Commands",
     component: RemoteCommandsTab,
@@ -110,6 +115,7 @@ const CarStatus = () => {
           value={tabIndex}
           onChange={handleTabChange}
           aria-label="car tabs"
+          variant="scrollable"
           indicatorColor="secondary">
           {tabs.map((item, index) => <Tab key={index} label={item.label} {...tabProps(index)} />)}
         </Tabs>