CEC-3119 Magna access (#235)

* CEC-3119 Magna access

* Clean up

* Update test provider

src/components/Layouts/SideMenu.jsx

@@ -1,17 +1,17 @@
-import React from "react";
 import { List } from "@material-ui/core";
-import HomeIcon from "@material-ui/icons/Home";
-import DirectionsCarIcon from "@material-ui/icons/DirectionsCar";
-import CommuteIcon from "@material-ui/icons/Commute";
-import CloudDownloadIcon from "@material-ui/icons/CloudDownload";
 import AssessmentIcon from "@material-ui/icons/Assessment";
 import BuildIcon from "@material-ui/icons/Build";
+import CloudDownloadIcon from "@material-ui/icons/CloudDownload";
+import CommuteIcon from "@material-ui/icons/Commute";
+import DirectionsCarIcon from "@material-ui/icons/DirectionsCar";
+import HomeIcon from "@material-ui/icons/Home";
 import SettingsInputCompositeIcon from "@material-ui/icons/SettingsInputComposite";
+import { default as React, useEffect, useState } from "react";
 
+import { hasRole, Permissions } from "../../utils/roles";
 import { useUserContext } from "../Contexts/UserContext";
-import { Roles, hasRole } from "../../utils/roles";
-import { ExpandableSideMenuItem, MenuItem } from "./MenuItem";
 import SupersetDashboardList from "../SupersetDashboardList/SupersetDashboardList";
+import { ExpandableSideMenuItem, MenuItem } from "./MenuItem";
 
 const menuData = [
   {
@@ -24,65 +24,60 @@ const menuData = [
     label: "Deployments",
     to: "/packages",
     icon: <CloudDownloadIcon />,
-    roles: [Roles.READ, Roles.CREATE],
+    rolesPerProvider: Permissions.FiskerMagnaRead,
   },
   {
     label: "Vehicles",
     to: "/vehicles",
     icon: <DirectionsCarIcon />,
-    roles: [Roles.READ, Roles.CREATE],
+    rolesPerProvider: Permissions.FiskerMagnaRead,
   },
   {
     label: "Fleets",
     to: "/fleets",
     icon: <CommuteIcon />,
-    roles: [Roles.READ, Roles.CREATE],
+    rolesPerProvider: Permissions.FiskerRead,
   },
   {
     label: "Datascope",
     to: null,
     icon: <AssessmentIcon />,
-    roles: [Roles.READ, Roles.CREATE],
-    component: SupersetDashboardList
+    rolesPerProvider: Permissions.FiskerRead,
+    component: SupersetDashboardList,
   },
   {
     label: "Suppliers",
     to: "/suppliers",
     icon: <SettingsInputCompositeIcon />,
-    roles: [Roles.APPROVESUPPLIERS],
+    rolesPerProvider: Permissions.FiskerSupplierAdmin,
   },
   {
     label: "Tools",
     to: "/tools/certificates/add",
     icon: <BuildIcon />,
-    roles: [Roles.CERTIFICATES, Roles.APPROVESUPPLIERS],
+    rolesPerProvider: Permissions.FiskerTools,
     submenus: [
       {
         label: "Certificate",
         to: "/tools/certificates/add",
-        roles: [Roles.CERTIFICATES],
+        rolesPerProvider: Permissions.FiskerCertificate,
       },
       {
         label: "SMS",
         to: "/tools/sms/send",
-        roles: [Roles.CREATE],
-      }
+        rolesPerProvider: Permissions.FiskerCreate,
+      },
     ],
   },
 ];
 
-
 const SideMenu = () => {
-  const { groups } = useUserContext();
-
-  const menu = menuData.reduce((result, item) => {
-    if (hasRole(item.roles, groups)) {
-      result.push(item);
-    }
-
-    return result;
-  }, []);
+  const { groups, providers } = useUserContext();
+  const [menu, setMenu] = useState(menuData);
 
+  useEffect(() => {
+    filterAccessible(groups, providers, setMenu);
+  }, [groups, providers]);
 
   return (
     <List>
@@ -96,4 +91,14 @@ const SideMenu = () => {
   );
 };
 
-export default SideMenu;
+const filterAccessible = (groups, providers, setMenu) => {
+  const filteredMenu = menuData.reduce((result, item) => {
+    if (hasRole(groups, item.rolesPerProvider, providers)) {
+      result.push(item);
+    }
+    return result;
+  }, []);
+  setMenu(filteredMenu);
+};
+
+export default SideMenu;