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/Fleets/Status/Vehicles/Table/index.jsx

@@ -1,5 +1,3 @@
-import React, { useEffect, useState } from "react";
-import { Link } from 'react-router-dom';
 import {
   Grid,
   Table,
@@ -13,27 +11,32 @@ import {
 import AddCircleIcon from "@material-ui/icons/AddCircle";
 import DeleteIcon from "@material-ui/icons/Delete";
 import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 
-import TableHeaderSortable from "../../../../Table/HeaderSortable";
-import { useUserContext } from "../../../../Contexts/UserContext"
-import { useStatusContext } from "../../../../Contexts/StatusContext";
-import { FleetProvider, useFleetContext } from "../../../../Contexts/FleetContext"
-import useStyles from "../../../../useStyles";
-import SearchField from "../../../../Controls/SearchField";
 import { logger } from "../../../../../services/monitoring";
-import { Roles, hasRole } from "../../../../../utils/roles";
-import { useLocalStorage } from "../../../../useLocalStorage";
+import { hasRole, Permissions } from "../../../../../utils/roles";
+import {
+  FleetProvider,
+  useFleetContext,
+} from "../../../../Contexts/FleetContext";
+import { useStatusContext } from "../../../../Contexts/StatusContext";
+import { useUserContext } from "../../../../Contexts/UserContext";
+import SearchField from "../../../../Controls/SearchField";
 import DeleteConfirmation from "../../../../DeleteConfirmation";
+import TableHeaderSortable from "../../../../Table/HeaderSortable";
+import { useLocalStorage } from "../../../../useLocalStorage";
+import useStyles from "../../../../useStyles";
 
 const tableColumns = [
   {
     id: "vin",
-    label: "VIN"
+    label: "VIN",
   },
   {
     id: "",
-    label: "Actions"
-  }
+    label: "Actions",
+  },
 ];
 
 const PAGE_SIZE = "FLEET_STATUS_VEHICLES_TABLE_PAGE_SIZE";
@@ -44,11 +47,22 @@ const MainForm = ({ name }) => {
   const [orderBy, setOrderBy] = useState("id");
   const [order, setOrder] = useState("desc");
   const [search, setSearch] = useState("");
-  const [showDeleteModal, setShowDeleteModal] = useState(false)
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
   const classes = useStyles();
   const { setMessage } = useStatusContext();
-  const { fleetVehicles, totalFleetVehicles, getFleetVehicles, deleteFleetVehicle } = useFleetContext();
-  const { token: { idToken: { jwtToken: token } }, groups } = useUserContext();
+  const {
+    fleetVehicles,
+    totalFleetVehicles,
+    getFleetVehicles,
+    deleteFleetVehicle,
+  } = useFleetContext();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+    groups,
+    providers,
+  } = useUserContext();
 
   const handleSearch = (query) => {
     setSearch(query);
@@ -105,7 +119,7 @@ const MainForm = ({ name }) => {
   const onDelete = async (vin) => {
     try {
       await deleteFleetVehicle(name, { vin: vin }, token);
-      setMessage(`Deleted ${vin}`)
+      setMessage(`Deleted ${vin}`);
     } catch (e) {
       setMessage(e.message);
       logger.warn(e.stack);
@@ -114,12 +128,12 @@ const MainForm = ({ name }) => {
 
   const Actions = (vin) => {
     let actions = [];
-    if (hasRole([Roles.DELETE], groups)) {
+    if (hasRole(groups, Permissions.FiskerDelete, providers)) {
       actions.push({
         tip: `Delete "${vin}"`,
         id: vin,
-        icon: <DeleteIcon aria-label={`Delete ${vin}`} />
-      })
+        icon: <DeleteIcon aria-label={`Delete ${vin}`} />,
+      });
     }
     if (actions.length === 0) return ["No actions"];
 
@@ -140,9 +154,13 @@ const MainForm = ({ name }) => {
                 {action.icon}
               </Link>
             </Tooltip>
-            <DeleteConfirmation message={action.id} open={showDeleteModal} close={() => setShowDeleteModal(false)} deleteFunction={() => onDelete(action.id)} />
+            <DeleteConfirmation
+              message={action.id}
+              open={showDeleteModal}
+              close={() => setShowDeleteModal(false)}
+              deleteFunction={() => onDelete(action.id)}
+            />
           </span>
-
         );
       }
     });
@@ -152,7 +170,10 @@ const MainForm = ({ name }) => {
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Grid container className={classes.root} spacing={2}>
         <Grid item md={4} className={classes.textJustifyAlign}>
-          <Link to={`/fleet/${name}/vehicle-add`} className={classes.labelInline}>
+          <Link
+            to={`/fleet/${name}/vehicle-add`}
+            className={classes.labelInline}
+          >
             <AddCircleIcon fontSize="large" />
           </Link>
         </Grid>
@@ -169,7 +190,7 @@ const MainForm = ({ name }) => {
           onSortRequest={handleSort}
         />
         <TableBody>
-          {fleetVehicles.map(vin => (
+          {fleetVehicles.map((vin) => (
             <TableRow key={vin}>
               <TableCell align="center">
                 <Link to={`/vehicle-status/${vin}`}>{vin}</Link>
@@ -196,7 +217,7 @@ const MainForm = ({ name }) => {
           </TableRow>
         </TableFooter>
       </Table>
-    </div >
+    </div>
   );
 };