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/Controls/CarUpdatesTable/index.jsx

@@ -1,4 +1,3 @@
-import React, { useEffect, useState } from "react";
 import {
   LinearProgress,
   Table,
@@ -9,19 +8,22 @@ import {
   TableRow,
   Tooltip,
 } from "@material-ui/core";
-import { Link } from "react-router-dom";
 import CancelIcon from "@material-ui/icons/Cancel";
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 
+import { logger } from "../../../services/monitoring";
 import { LocalDateTimeString } from "../../../utils/dates";
-import TableHeaderSortable from "../../Table/HeaderSortable";
 import {
   CarUpdatesProvider,
   useCarUpdatesContext,
 } from "../../Contexts/CarUpdatesContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
-import useStyles from "../../useStyles";
-import { logger } from "../../../services/monitoring";
+import { useUserContext } from "../../Contexts/UserContext";
+import TableHeaderSortable from "../../Table/HeaderSortable";
 import { useLocalStorage } from "../../useLocalStorage";
+import useStyles from "../../useStyles";
+import { RoleWrap } from "../RoleWrap";
 
 const tableColumns = [
   {
@@ -68,6 +70,8 @@ const MainForm = ({ vin, token }) => {
   } = useCarUpdatesContext();
   const { setMessage } = useStatusContext();
 
+  const { groups, providers } = useUserContext();
+
   useEffect(() => {
     (async () => {
       try {
@@ -176,11 +180,17 @@ const MainForm = ({ vin, token }) => {
               {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}
+              >
+                <Tooltip key={row.vin} title={`Send cancel for ${row.vin}`}>
+                  <Link to="#" onClick={() => sendCancel(row)}>
+                    <CancelIcon />
+                  </Link>
+                </Tooltip>
+              </RoleWrap>
             </TableCell>
           </TableRow>
         ))}