CEC-2977 Filter portal access based on auth provider (#231)

* fix/fleet-vehicles-search

* fix/fleet-name-update

* Update hasRole logic, create RoleWrap component

* Add MAGNA and MAGNAGROUP env vars

* Add Permissions

Co-authored-by: jwu-fisker <jwu@fiskerinc.com>

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"
               >

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>
   );

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();
   });