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/Manifest/Status/index.jsx

@@ -1,6 +1,3 @@
-import React, { useEffect, useState } from "react";
-import { useParams } from "react-router";
-import { Link } from "react-router-dom";
 import {
   LinearProgress,
   Table,
@@ -14,22 +11,27 @@ import {
 } from "@material-ui/core";
 import CancelIcon from "@material-ui/icons/Cancel";
 import clsx from "clsx";
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router";
+import { Link } from "react-router-dom";
 
-import {
-  ManifestsProvider,
-  useManifestsContext,
-} from "../../Contexts/ManifestsContext";
+import { logger } from "../../../services/monitoring";
+import { LocalDateTimeString } from "../../../utils/dates";
+import { Permissions } from "../../../utils/roles";
 import {
   CarUpdatesProvider,
   useCarUpdatesContext,
 } from "../../Contexts/CarUpdatesContext";
-import { useUserContext } from "../../Contexts/UserContext";
+import {
+  ManifestsProvider,
+  useManifestsContext,
+} from "../../Contexts/ManifestsContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
-import useStyles from "../../useStyles";
-import { LocalDateTimeString } from "../../../utils/dates";
-import { logger } from "../../../services/monitoring";
-import ManifestDetails from "../Details";
+import { useUserContext } from "../../Contexts/UserContext";
+import { RoleWrap } from "../../Controls/RoleWrap";
 import { useLocalStorage } from "../../useLocalStorage";
+import useStyles from "../../useStyles";
+import ManifestDetails from "../Details";
 
 const PAGE_SIZE = "MANIFEST_STATUS_PAGE_SIZE";
 
@@ -52,6 +54,8 @@ const MainForm = () => {
     token: {
       idToken: { jwtToken: token },
     },
+    groups,
+    providers,
   } = useUserContext();
 
   useEffect(() => {
@@ -172,11 +176,18 @@ const MainForm = () => {
                 {LocalDateTimeString(row.updated)}
               </TableCell>
               <TableCell>
-                <Tooltip key={row.vin} title={`Send cancel for ${row.vin}`}>
-                  <Link to="#" onClick={() => sendCancel(row)}>
-                    <CancelIcon />
-                  </Link>
-                </Tooltip>
+                <RoleWrap
+                  groups={groups}
+                  providers={providers}
+                  rolesPerProvider={Permissions.FiskerCreate}
+                  eitherComponent={<>No action</>}
+                >
+                  <Tooltip key={row.vin} title={`Send cancel for ${row.vin}`}>
+                    <Link to="#" onClick={() => sendCancel(row)}>
+                      <CancelIcon />
+                    </Link>
+                  </Tooltip>
+                </RoleWrap>
               </TableCell>
             </TableRow>
           ))}