CEC-3119 Magna access (#235)

* CEC-3119 Magna access * Clean up * Update test provider
2022-11-14 13:30:57 -08:00
parent 33bfc4fb13
commit b7e13382c4
76 changed files with 1316 additions and 918 deletions
--- a/src/components/Cars/Add/index.test.jsx
+++ b/src/components/Cars/Add/index.test.jsx
@@ -8,7 +8,7 @@ import { BrowserRouter } from "react-router-dom";
 import { VehicleProvider } from "../../Contexts/VehicleContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../utils/snapshot";

@@ -36,7 +36,7 @@ describe("VehicleAddForm", () => {
  });

  it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
    const container = await renderVehicleAdd();
    expect(container).toMatchSnapshot();
  });
--- a/src/components/Cars/List/snapshots/index.test.jsx.snap
+++ b/src/components/Cars/List/snapshots/index.test.jsx.snap
@@ -22,22 +22,7 @@ exports[`VehicleTable Render 1`] = `
            >
              <div
                class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
-              >
-                <a
-                  href="/vehicle-add"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
-                    />
-                  </svg>
-                </a>
-              </div>
+              />
              <div
                class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-4"
              >
--- a/src/components/Cars/List/index.jsx
+++ b/src/components/Cars/List/index.jsx
@@ -1,16 +1,18 @@
-import React, { useEffect, useState } from "react";
 import { Checkbox, FormControlLabel, Grid, MenuItem } from "@material-ui/core";
 import AddCircleIcon from "@material-ui/icons/AddCircle";
-import { Link } from "react-router-dom";
 import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";

-import { VehicleProvider } from "../../Contexts/VehicleContext";
-import { useUserContext } from "../../Contexts/UserContext";
+import { Permissions } from "../../../utils/roles";
 import { useStatusContext } from "../../Contexts/StatusContext";
-import useStyles from "../../useStyles";
-import SearchField from "../../Controls/SearchField";
+import { useUserContext } from "../../Contexts/UserContext";
+import { VehicleProvider } from "../../Contexts/VehicleContext";
 import CarSelectionTable from "../../Controls/CarSelectionTable";
 import OptionsDropdown from "../../Controls/OptionsDropdown";
+import { RoleWrap } from "../../Controls/RoleWrap";
+import SearchField from "../../Controls/SearchField";
+import useStyles from "../../useStyles";

 const MainForm = () => {
  const classes = useStyles();
@@ -22,6 +24,8 @@ const MainForm = () => {
    token: {
      idToken: { jwtToken: token },
    },
+    groups,
+    providers,
  } = useUserContext();

  const handleSearch = (query) => {
@@ -30,11 +34,11 @@ const MainForm = () => {

  const handleOnline = (event) => {
    setOnline(event.target.checked);
-  }
+  };

  const handleOnlineHMI = (event) => {
    setOnlineHMI(event.target.checked);
-  }
+  };

  useEffect(() => {
    setTitle("Vehicles");
@@ -46,30 +50,34 @@ const MainForm = () => {
    <div className={clsx(classes.paper, classes.tableSize)}>
      <Grid container className={classes.root} spacing={2}>
        <Grid item md={4} className={classes.textJustifyAlign}>
-          <Link to="/vehicle-add">
-            <AddCircleIcon fontSize="large" />
-          </Link>
+          <RoleWrap
+            groups={groups}
+            providers={providers}
+            rolesPerProvider={Permissions.FiskerDelete}
+          >
+            <Link to="/vehicle-add">
+              <AddCircleIcon fontSize="large" />
+            </Link>
+          </RoleWrap>
        </Grid>
        <Grid item md={4} className={classes.textCenterAlign}>
          <SearchField classes={classes} onSearch={handleSearch} />
        </Grid>
        <Grid item md={2} className={classes.textJustifyAlign}>
-          <OptionsDropdown listId='filter-menu'>
+          <OptionsDropdown listId="filter-menu">
            <MenuItem>
-              <FormControlLabel control={
-                <Checkbox
-                  checked={online}
-                  onChange={handleOnline}
-                />
-              } label="Only online" />
+              <FormControlLabel
+                control={<Checkbox checked={online} onChange={handleOnline} />}
+                label="Only online"
+              />
            </MenuItem>
            <MenuItem>
-              <FormControlLabel control={
-                <Checkbox
-                  checked={onlineHMI}
-                  onChange={handleOnlineHMI}
-                />
-              } label="Only online HMI" />
+              <FormControlLabel
+                control={
+                  <Checkbox checked={onlineHMI} onChange={handleOnlineHMI} />
+                }
+                label="Only online HMI"
+              />
            </MenuItem>
          </OptionsDropdown>
        </Grid>
@@ -79,7 +87,11 @@ const MainForm = () => {
        classes={classes}
        token={token}
        multiSelect={false}
-        search={{ search, online: online? true : null, online_hmi: onlineHMI? true : null }}
+        search={{
+          search,
+          online: online ? true : null,
+          online_hmi: onlineHMI ? true : null,
+        }}
      />
    </div>
  );
--- a/src/components/Cars/List/index.test.jsx
+++ b/src/components/Cars/List/index.test.jsx
@@ -11,7 +11,7 @@ import { BrowserRouter } from "react-router-dom";
 import { VehicleProvider } from "../../Contexts/VehicleContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../utils/snapshot";

@@ -39,7 +39,7 @@ describe("VehicleTable", () => {
  });

  it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
    const container = await renderVehicleTable();
    expect(container).toMatchSnapshot();
  });
--- a/src/components/Cars/Status/CANFiltersTab.test.jsx
+++ b/src/components/Cars/Status/CANFiltersTab.test.jsx
@@ -9,7 +9,7 @@ import { render, waitFor } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";

 import { setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import CANFiltersTab from "./CANFiltersTab";
 import addSnapshotSerializer from "../../../utils/snapshot";

@@ -31,7 +31,7 @@ describe("CANFiltersTab", () => {
  });

  it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
    const container = await renderCANFiltersTab();
    expect(container).toMatchSnapshot();
  });
--- a/src/components/Cars/Status/CANSignalsTab.test.jsx
+++ b/src/components/Cars/Status/CANSignalsTab.test.jsx
@@ -11,7 +11,7 @@ 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} from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";

 const renderCANSignalsTab = async () => {
  const { container } = render(
@@ -31,7 +31,7 @@ describe("CANSignalsTab", () => {
  });

  it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
    const container = await renderCANSignalsTab();
    expect(container).toMatchSnapshot();
  });
--- a/src/components/Cars/Status/CarUpdatesTab.test.jsx
+++ b/src/components/Cars/Status/CarUpdatesTab.test.jsx
@@ -11,7 +11,7 @@ import { BrowserRouter } from "react-router-dom";
 import { CANFiltersProvider } from "../../Contexts/CANFiltersContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import MainForm from "./CarUpdatesTab";
 import addSnapshotSerializer from "../../../utils/snapshot";

@@ -39,7 +39,7 @@ describe("CarUpdatesTab", () => {
  });

  it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
    const container = await renderCarUpdatesTab();
    expect(container).toMatchSnapshot();
  });
--- a/src/components/Cars/Status/Details/snapshots/index.test.jsx.snap
+++ b/src/components/Cars/Status/Details/snapshots/index.test.jsx.snap
@@ -101,23 +101,6 @@ exports[`VehicleDetailsTab Render 1`] = `
                    />
                  </svg>
                </a>
-                <a
-                  class=""
-                  href="/"
-                  title="Delete \\"TESTVIN1234567890\\""
-                >
-                  <svg
-                    aria-hidden="true"
-                    aria-label="Delete \\"TESTVIN1234567890\\""
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
-                </a>
              </div>
            </div>
            <div />
--- a/src/components/Cars/Status/Details/index.jsx
+++ b/src/components/Cars/Status/Details/index.jsx
@@ -1,28 +1,36 @@
+import { Grid, Tooltip } from "@material-ui/core";
+import DeleteIcon from "@material-ui/icons/Delete";
+import EditIcon from "@material-ui/icons/Edit";
+import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import { Redirect } from "react-router";
-import { Link } from 'react-router-dom';
-import {
-  Grid,
-  Tooltip,
-} from "@material-ui/core";
-import EditIcon from "@material-ui/icons/Edit"
-import DeleteIcon from "@material-ui/icons/Delete";
-import clsx from "clsx";
+import { Link } from "react-router-dom";

-import { useUserContext } from "../../../Contexts/UserContext"
-import { useStatusContext } from "../../../Contexts/StatusContext";
-import useStyles from "../../../useStyles";
 import { logger } from "../../../../services/monitoring";
-import { useVehicleContext, VehicleProvider } from "../../../Contexts/VehicleContext";
+import { Permissions } from "../../../../utils/roles";
+import { useStatusContext } from "../../../Contexts/StatusContext";
+import { useUserContext } from "../../../Contexts/UserContext";
+import {
+  useVehicleContext,
+  VehicleProvider
+} from "../../../Contexts/VehicleContext";
+import { RoleWrap } from "../../../Controls/RoleWrap";
 import DeleteConfirmation from "../../../DeleteConfirmation";
+import useStyles from "../../../useStyles";

 const MainForm = ({ vin }) => {
  const classes = useStyles();
  const { setMessage } = useStatusContext();
  const { vehicle, getVehicle, deleteVehicle } = useVehicleContext();
  const [redirect, setRedirect] = useState(null);
-  const [showDeleteModal, setShowDeleteModal] = useState(false)
-  const { token: { idToken: { jwtToken: token } } } = useUserContext();
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+    groups,
+    providers,
+  } = useUserContext();

  useEffect(() => {
    (async () => {
@@ -40,7 +48,7 @@ const MainForm = ({ vin }) => {
  const onDelete = async () => {
    try {
      await deleteVehicle(vin, token);
-      setMessage(`Deleted ${vin}`)
+      setMessage(`Deleted ${vin}`);
      setRedirect(`/vehicles`);
    } catch (e) {
      setMessage(e.message);
@@ -56,36 +64,67 @@ const MainForm = ({ vin }) => {
    <div className={clsx(classes.paper, classes.tableSize)}>
      <Grid container className={classes.root} spacing={2}>
        <Grid item md={12} className={classes.textCenterAlign}>
-          <p><b>VIN</b>: {vin}</p>
+          <p>
+            <b>VIN</b>: {vin}
+          </p>
          {vehicle.log_level != null && (
-            <p><b>Log Level</b>: {vehicle.log_level}</p>
+            <p>
+              <b>Log Level</b>: {vehicle.log_level}
+            </p>
          )}
        </Grid>
        {vehicle.canbus && (
          <Grid item md={12} className={classes.textCenterAlign}>
            <b>CANBus</b>
-            <p><b>Enabled</b>: {vehicle.canbus.enabled.toString()}</p>
-            <p><b>Max Memory Buffer Size</b>: {vehicle.canbus.max_mem_buffer_size ?? "Default"}</p>
-            <p><b>Enabled</b>: {vehicle.canbus.data_logger_enabled.toString()}</p>
-            <p><b>Max Disk Buffer Size</b>: {vehicle.canbus.max_disk_buffer_size ?? "Default"}</p>
-            <p><b>Filters</b>: {vehicle.canbus.filters ? vehicle.canbus.filters.length : 0}</p>
+            <p>
+              <b>Enabled</b>: {vehicle.canbus.enabled.toString()}
+            </p>
+            <p>
+              <b>Max Memory Buffer Size</b>: {vehicle.canbus.max_mem_buffer_size ?? "Default"}
+            </p>
+            <p>
+              <b>Enabled</b>: {vehicle.canbus.data_logger_enabled.toString()}
+            </p>
+            <p>
+              <b>Max Disk Buffer Size</b>: {vehicle.canbus.max_disk_buffer_size ?? "Default"}
+            </p>
+            <p>
+              <b>Filters</b>: {vehicle.canbus.filters ? vehicle.canbus.filters.length : 0}
+            </p>
          </Grid>
        )}
        <Grid item md={12} className={classes.textCenterAlign}>
-          <Tooltip key={`update-${vin}`} title={`Update "${vin}"`}>
-            <Link to={`/vehicle-update?vin=${vin}`} style={{ margin: 5 }}>
-              <EditIcon aria-label={`Update "${vin}"`} />
-            </Link>
-          </Tooltip>
-          <Tooltip key={`delete-${vin}`} title={`Delete "${vin}"`}>
-            <Link to="#" onClick={() => setShowDeleteModal(true)}>
-              <DeleteIcon aria-label={`Delete "${vin}"`} />
-            </Link>
-          </Tooltip>
+          <RoleWrap
+            groups={groups}
+            providers={providers}
+            rolesPerProvider={Permissions.FiskerCreate}
+          >
+            <Tooltip key={`update-${vin}`} title={`Update "${vin}"`}>
+              <Link to={`/vehicle-update?vin=${vin}`} style={{ margin: 5 }}>
+                <EditIcon aria-label={`Update "${vin}"`} />
+              </Link>
+            </Tooltip>
+          </RoleWrap>
+          <RoleWrap
+            groups={groups}
+            providers={providers}
+            rolesPerProvider={Permissions.FiskerDelete}
+          >
+            <Tooltip key={`delete-${vin}`} title={`Delete "${vin}"`}>
+              <Link to="#" onClick={() => setShowDeleteModal(true)}>
+                <DeleteIcon aria-label={`Delete "${vin}"`} />
+              </Link>
+            </Tooltip>
+          </RoleWrap>
        </Grid>
      </Grid>
-      <DeleteConfirmation message={vin} open={showDeleteModal} close={()=> setShowDeleteModal(false)} deleteFunction={onDelete}/>
-    </div >
+      <DeleteConfirmation
+        message={vin}
+        open={showDeleteModal}
+        close={() => setShowDeleteModal(false)}
+        deleteFunction={onDelete}
+      />
+    </div>
  );
 };

--- a/src/components/Cars/Status/Details/index.test.jsx
+++ b/src/components/Cars/Status/Details/index.test.jsx
@@ -9,7 +9,7 @@ import routeData from "react-router";
 import { VehicleProvider } from "../../../Contexts/VehicleContext";
 import { StatusProvider } from "../../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER }from "../../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../../utils/snapshot";

@@ -42,7 +42,7 @@ describe("VehicleDetailsTab", () => {
  })

  it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
    const container = await renderVehicleDetailsTab();
    expect(container).toMatchSnapshot();
  });
--- a/src/components/Cars/Status/DetailsTab.test.jsx
+++ b/src/components/Cars/Status/DetailsTab.test.jsx
@@ -11,7 +11,7 @@ import { MemoryRouter, Route } from "react-router-dom";
 import { VehicleProvider } from "../../Contexts/VehicleContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import MainForm from "./DetailsTab";
 import addSnapshotSerializer from "../../../utils/snapshot";

@@ -41,7 +41,7 @@ describe("DetailsTab", () => {
  });

  it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
    const container = await renderDetailsTab();
    expect(container).toMatchSnapshot();
  });
--- a/src/components/Cars/Status/DigitalTwinTab.test.jsx
+++ b/src/components/Cars/Status/DigitalTwinTab.test.jsx
@@ -10,7 +10,7 @@ import { render, waitFor } from "@testing-library/react";

 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import DigitalTwinTab from "./DigitalTwinTab";
 import addSnapshotSerializer from "../../../utils/snapshot";

@@ -34,7 +34,7 @@ describe("DigitalTwinTab", () => {
  });

  it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
    const container = await renderDetailsTab();
    expect(container).toMatchSnapshot();
  });
--- a/src/components/Cars/Status/FleetsTab.test.jsx
+++ b/src/components/Cars/Status/FleetsTab.test.jsx
@@ -12,7 +12,7 @@ import { BrowserRouter } from "react-router-dom";
 import {StatusProvider} from "../../Contexts/StatusContext";
 import {VehicleProvider} from "../../Contexts/VehicleContext";
 import {setToken, UserProvider} from "../../Contexts/UserContext";
-import {TEST_AUTH_OBJECT} from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import addSnapshotSerializer from "../../../utils/snapshot";
 import FleetsTab from "./FleetsTab";

@@ -40,7 +40,7 @@ describe("FleetsTab", () => {
  });

  it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
    const container = await renderFleetsTab();
    expect(container).toMatchSnapshot();
  });
--- a/src/components/Cars/Status/RemoteCommandsTab.test.jsx
+++ b/src/components/Cars/Status/RemoteCommandsTab.test.jsx
@@ -10,7 +10,7 @@ import {StatusProvider} from "../../Contexts/StatusContext";
 import {setToken, UserProvider} from "../../Contexts/UserContext";
 import RemoteCommandsTab from "./RemoteCommandsTab";
 import addSnapshotSerializer from "../../../utils/snapshot";
-import {TEST_AUTH_OBJECT} from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import React from "react";

 const renderRemoteCommandsTab = async () => {
@@ -33,7 +33,7 @@ describe("RemoteCommandsTab", () => {
  });

  it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
    const container = await renderRemoteCommandsTab();
    expect(container).toMatchSnapshot();
  });
--- a/src/components/Cars/Status/snapshots/CANFiltersTab.test.jsx.snap
+++ b/src/components/Cars/Status/snapshots/CANFiltersTab.test.jsx.snap
@@ -249,23 +249,6 @@ exports[`CANFiltersTab Render 1`] = `
                    />
                  </svg>
                </a>
-                <a
-                  class=""
-                  href="/"
-                  title="Delete \\"123\\""
-                >
-                  <svg
-                    aria-hidden="true"
-                    aria-label="Delete 123"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
-                </a>
              </td>
            </tr>
            <tr
@@ -312,23 +295,6 @@ exports[`CANFiltersTab Render 1`] = `
                    />
                  </svg>
                </a>
-                <a
-                  class=""
-                  href="/"
-                  title="Delete \\"456-789\\""
-                >
-                  <svg
-                    aria-hidden="true"
-                    aria-label="Delete 456-789"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
-                </a>
              </td>
            </tr>
            <tr
@@ -375,23 +341,6 @@ exports[`CANFiltersTab Render 1`] = `
                    />
                  </svg>
                </a>
-                <a
-                  class=""
-                  href="/"
-                  title="Delete \\"1\\""
-                >
-                  <svg
-                    aria-hidden="true"
-                    aria-label="Delete 1"
-                    class="MuiSvgIcon-root"
-                    focusable="false"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                    />
-                  </svg>
-                </a>
              </td>
            </tr>
          </tbody>
--- a/src/components/Cars/Status/snapshots/DetailsTab.test.jsx.snap
+++ b/src/components/Cars/Status/snapshots/DetailsTab.test.jsx.snap
@@ -109,23 +109,6 @@ exports[`DetailsTab Render 1`] = `
                      />
                    </svg>
                  </a>
-                  <a
-                    class=""
-                    href="/testroute/TESTVIN1234567890"
-                    title="Delete \\"TESTVIN1234567890\\""
-                  >
-                    <svg
-                      aria-hidden="true"
-                      aria-label="Delete \\"TESTVIN1234567890\\""
-                      class="MuiSvgIcon-root"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                      />
-                    </svg>
-                  </a>
                </div>
              </div>
              <div />
--- a/src/components/Cars/Status/snapshots/index.test.jsx.snap
+++ b/src/components/Cars/Status/snapshots/index.test.jsx.snap
@@ -67,7 +67,6 @@ exports[`CarStatus Render 1`] = `
                  </button>
                  <button
                    aria-controls="tabpanel-2"
-                    aria-selected="false"
                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
                    id="tab-2"
                    role="tab"
@@ -85,7 +84,6 @@ exports[`CarStatus Render 1`] = `
                  </button>
                  <button
                    aria-controls="tabpanel-3"
-                    aria-selected="false"
                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
                    id="tab-3"
                    role="tab"
@@ -103,7 +101,6 @@ exports[`CarStatus Render 1`] = `
                  </button>
                  <button
                    aria-controls="tabpanel-4"
-                    aria-selected="false"
                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
                    id="tab-4"
                    role="tab"
@@ -121,7 +118,6 @@ exports[`CarStatus Render 1`] = `
                  </button>
                  <button
                    aria-controls="tabpanel-5"
-                    aria-selected="false"
                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
                    id="tab-5"
                    role="tab"
@@ -139,7 +135,6 @@ exports[`CarStatus Render 1`] = `
                  </button>
                  <button
                    aria-controls="tabpanel-6"
-                    aria-selected="false"
                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
                    id="tab-6"
                    role="tab"
@@ -217,23 +212,6 @@ exports[`CarStatus Render 1`] = `
                          />
                        </svg>
                      </a>
-                      <a
-                        class=""
-                        href="/"
-                        title="Delete \\"TESTVIN1234567890\\""
-                      >
-                        <svg
-                          aria-hidden="true"
-                          aria-label="Delete \\"TESTVIN1234567890\\""
-                          class="MuiSvgIcon-root"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                          />
-                        </svg>
-                      </a>
                    </div>
                  </div>
                  <div />
--- a/src/components/Cars/Status/index.jsx
+++ b/src/components/Cars/Status/index.jsx
@@ -1,19 +1,22 @@
+import { Box, Tab, Tabs } from "@material-ui/core";
+import clsx from "clsx";
 import React, { useEffect } from "react";
 import { useParams } from "react-router";
 import { useLocation } from "react-router-dom";
-import clsx from "clsx";
-import { Box, Tab, Tabs } from "@material-ui/core";

-import CarDetailsTab from "./DetailsTab";
-import CarUpdatesTab from "./CarUpdatesTab";
-import CANFiltersTab from "./CANFiltersTab";
-import DigitalTwinTab from "./DigitalTwinTab";
-import TabPanel from "../../Controls/TabPanel";
+import { Permissions } from "../../../utils/roles";
 import { useStatusContext } from "../../Contexts/StatusContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import { RoleWrap } from "../../Controls/RoleWrap";
+import TabPanel from "../../Controls/TabPanel";
 import useStyles from "../../useStyles";
+import CANFiltersTab from "./CANFiltersTab";
 import CANSignalsTab from "./CANSignalsTab";
-import RemoteCommandsTab from "./RemoteCommandsTab";
+import CarUpdatesTab from "./CarUpdatesTab";
+import CarDetailsTab from "./DetailsTab";
+import DigitalTwinTab from "./DigitalTwinTab";
 import FleetsTab from "./FleetsTab";
+import RemoteCommandsTab from "./RemoteCommandsTab";

 const tabHashes = ["details", "updates", "filters"];

@@ -24,6 +27,8 @@ const CarStatus = () => {
  const { hash } = useLocation();
  const [tabIndex, setTabIndex] = React.useState(0);

+  const { groups, providers } = useUserContext();
+
  useEffect(() => {
    const key = hash.replace("#", "");
    const index = tabHashes.findIndex((element) => element === key);
@@ -63,12 +68,18 @@ const CarStatus = () => {
        >
          <Tab label="Details" {...tabProps(0)} />
          <Tab label="Car Updates" {...tabProps(1)} />
-          <Tab label="CAN Filters" {...tabProps(2)} />
-          <Tab label="Digital Twin" {...tabProps(3)} />
-          <Tab label="CAN Signals" {...tabProps(4)} />
-          <Tab label="Remote Commands" {...tabProps(5)} />
-          <Tab label="Fleets" {...tabProps(6)} />
+          <RoleWrap
+            groups={groups}
+            providers={providers}
+            rolesPerProvider={Permissions.FiskerRead}
+          >
+            <Tab label="CAN Filters" {...tabProps(2)} />
+            <Tab label="Digital Twin" {...tabProps(3)} />

+            <Tab label="CAN Signals" {...tabProps(4)} />
+            <Tab label="Remote Commands" {...tabProps(5)} />
+            <Tab label="Fleets" {...tabProps(6)} />
+          </RoleWrap>
        </Tabs>
      </Box>

@@ -80,25 +91,30 @@ const CarStatus = () => {
        <CarUpdatesTab />
      </TabPanel>

-      <TabPanel value={tabIndex} index={2}>
-        <CANFiltersTab />
-      </TabPanel>
+      <RoleWrap
+        groups={groups}
+        providers={providers}
+        rolesPerProvider={Permissions.FiskerRead}
+      >
+        <TabPanel value={tabIndex} index={2}>
+          <CANFiltersTab />
+        </TabPanel>
+        <TabPanel value={tabIndex} index={3}>
+          <DigitalTwinTab vin={vin} />
+        </TabPanel>

-      <TabPanel value={tabIndex} index={3}>
-        <DigitalTwinTab vin={vin} />
-      </TabPanel>
+        <TabPanel value={tabIndex} index={4} className={classes.fullWidth}>
+          <CANSignalsTab vin={vin} />
+        </TabPanel>

-      <TabPanel value={tabIndex} index={4} className={classes.fullWidth}>
-        <CANSignalsTab vin={vin} />
-      </TabPanel>
+        <TabPanel value={tabIndex} index={5} className={classes.fullWidth}>
+          <RemoteCommandsTab vin={vin} />
+        </TabPanel>

-      <TabPanel value={tabIndex} index={5} className={classes.fullWidth}>
-        <RemoteCommandsTab vin={vin} />
-      </TabPanel>
-
-      <TabPanel value={tabIndex} index={6} className={classes.fullWidth}>
-        <FleetsTab vin={vin} />
-      </TabPanel>
+        <TabPanel value={tabIndex} index={6} className={classes.fullWidth}>
+          <FleetsTab vin={vin} />
+        </TabPanel>
+      </RoleWrap>
    </div>
  );
 };
--- a/src/components/Cars/Status/index.test.jsx
+++ b/src/components/Cars/Status/index.test.jsx
@@ -12,7 +12,7 @@ import routeData from "react-router";
 import { CANFiltersProvider } from "../../Contexts/CANFiltersContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import CarStatus from "./index";
 import addSnapshotSerializer from "../../../utils/snapshot";

@@ -45,7 +45,7 @@ describe("CarStatus", () => {
  })

  it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
    const container = await renderCarStatus();
    expect(container).toMatchSnapshot();
  });
--- a/src/components/Cars/Update/index.test.jsx
+++ b/src/components/Cars/Update/index.test.jsx
@@ -8,7 +8,7 @@ import { BrowserRouter } from "react-router-dom";
 import { VehicleProvider } from "../../Contexts/VehicleContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
 import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT } from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import MainForm from "./index";
 import addSnapshotSerializer from "../../../utils/snapshot";

@@ -36,7 +36,7 @@ describe("VehicleUpdate", () => {
  });

  it("Render", async () => {
-    setToken(TEST_AUTH_OBJECT);
+    setToken(TEST_AUTH_OBJECT_FISKER);
    const container = await renderVehicleUpdate();
    expect(container).toMatchSnapshot();
  });