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