Fix/permissions for statviz dashboard

front/src/App.tsx

@@ -16,7 +16,7 @@ import ShipmentsOverviewView from "views/Transfers/ShipmentsOverview/ShipmentsOv
 import ShipmentView from "views/Transfers/ShipmentView/ShipmentView";
 import QrReaderView from "views/QrReader/QrReaderView";
 import NotFoundView from "views/NotFoundView/NotFoundView";
-import { useAuthorization } from "hooks/useAuthorization";
+import { AuthorizeProps, useAuthorization } from "hooks/useAuthorization";
 import ResolveHash from "views/QrReader/components/ResolveHash";
 import { useErrorHandling } from "hooks/useErrorHandling";
 import { TableSkeleton } from "components/Skeletons";
@@ -27,9 +27,7 @@ import Dashboard from "@boxtribute/shared-components/statviz/dashboard/Dashboard
 type ProtectedRouteProps = {
   component: ReactElement;
   redirectPath: string | undefined;
-  requiredAbp?: string[];
-  minBeta?: number;
-};
+} & AuthorizeProps;
 
 type DropappRedirectProps = {
   path: "/boxes/:boxId" | "/boxes/create/:qrCodeHash" | "/qrreader" | "/qrreader/:qrCodeHash";
@@ -38,13 +36,13 @@ type DropappRedirectProps = {
 function Protected({
   component,
   redirectPath,
-  requiredAbp = [],
+  requiredAbps = [],
   minBeta = 0,
 }: ProtectedRouteProps) {
   const { triggerError } = useErrorHandling();
   const { pathname: currentPath } = useLocation();
   const authorize = useAuthorization();
-  const isAuthorized = authorize({ requiredAbp, minBeta });
+  const isAuthorized = authorize({ requiredAbps, minBeta });
 
   useEffect(() => {
     if (!isAuthorized)
@@ -145,7 +143,12 @@ function App() {
             <Route
               index
               element={
-                <Protected component={<Dashboard />} redirectPath={prevLocation} minBeta={3} />
+                <Protected
+                  component={<Dashboard />}
+                  redirectPath={prevLocation}
+                  minBeta={3}
+                  requiredAbps={[["view_inventory", "view_shipments", "view_beneficiary_graph"]]}
+                />
               }
             />
           </Route>
@@ -166,7 +169,7 @@ function App() {
                     </ErrorBoundary>
                   }
                   redirectPath={prevLocation}
-                  requiredAbp={["manage_inventory"]}
+                  requiredAbps={["manage_inventory"]}
                 />
               }
             />
@@ -177,7 +180,7 @@ function App() {
                   <Protected
                     component={<BoxCreateView />}
                     redirectPath={prevLocation}
-                    requiredAbp={["manage_inventory"]}
+                    requiredAbps={["manage_inventory"]}
                   />
                 }
               />
@@ -189,7 +192,7 @@ function App() {
                   <Protected
                     component={<BTBox />}
                     redirectPath={prevLocation}
-                    requiredAbp={["view_inventory"]}
+                    requiredAbps={["view_inventory"]}
                   />
                 }
               />
@@ -199,7 +202,7 @@ function App() {
                   <Protected
                     component={<BoxEditView />}
                     redirectPath={prevLocation}
-                    requiredAbp={["manage_inventory"]}
+                    requiredAbps={["manage_inventory"]}
                   />
                 }
               />
@@ -216,7 +219,7 @@ function App() {
                   <Protected
                     component={<TransferAgreementOverviewView />}
                     redirectPath={prevLocation}
-                    requiredAbp={["view_transfer_agreements"]}
+                    requiredAbps={["view_transfer_agreements"]}
                   />
                 }
               />
@@ -226,7 +229,7 @@ function App() {
                   <Protected
                     component={<CreateTransferAgreementView />}
                     redirectPath={prevLocation}
-                    requiredAbp={["create_transfer_agreement"]}
+                    requiredAbps={["create_transfer_agreement"]}
                   />
                 }
               />
@@ -238,7 +241,7 @@ function App() {
                   <Protected
                     component={<ShipmentsOverviewView />}
                     redirectPath={prevLocation}
-                    requiredAbp={["view_shipments"]}
+                    requiredAbps={["view_shipments"]}
                   />
                 }
               />
@@ -248,7 +251,7 @@ function App() {
                   <Protected
                     component={<CreateShipmentView />}
                     redirectPath={prevLocation}
-                    requiredAbp={["create_shipment"]}
+                    requiredAbps={["create_shipment"]}
                   />
                 }
               />
@@ -258,7 +261,7 @@ function App() {
                   <Protected
                     component={<ShipmentView />}
                     redirectPath={prevLocation}
-                    requiredAbp={["view_shipments"]}
+                    requiredAbps={["view_shipments"]}
                   />
                 }
               />

front/src/components/HeaderMenu/HeaderMenu.tsx

@@ -1,26 +1,23 @@
 import { useMediaQuery } from "@chakra-ui/react";
+import { AuthorizeProps } from "hooks/useAuthorization";
 import MenuMobile from "./MenuMobile";
 import MenuDesktop from "./MenuDesktop";
 
-export interface IMenuItemData {
+export type MenuItemData = AuthorizeProps & {
   link: string;
   name: string;
   beta?: boolean;
-  minBeta?: number;
-  requiredAbp: string[];
   external?: boolean;
-}
+};
 
-export interface IMenuItemsGroupData {
+export type MenuItemsGroupData = AuthorizeProps & {
   text: string;
-  links: IMenuItemData[];
-  minBeta?: number;
-  requiredAbp: string[];
-}
+  links: MenuItemData[];
+};
 
 export interface IHeaderMenuProps {
   onClickScanQrCode: () => void;
-  menuItemsGroups: IMenuItemsGroupData[];
+  menuItemsGroups: MenuItemsGroupData[];
 }
 
 function HeaderMenu(props: IHeaderMenuProps) {

front/src/components/HeaderMenu/HeaderMenuContainer.test.tsx

@@ -27,7 +27,12 @@ it("1.3.1 - Menus are available to the user depending on ABPs - Nothing", async
 
 it("1.3.2 - Menus are available to the user depending on ABPs - Aid Inventory", async () => {
   mockImplementationOfQrReader(mockedQrReader, "NoBoxAssociatedWithQrCode");
-  mockAuthenticatedUser(mockedUseAuth0, "[email protected]", ["create_label"], "3");
+  mockAuthenticatedUser(
+    mockedUseAuth0,
+    "[email protected]",
+    ["view_inventory", "view_shipments", "view_beneficiary_graph", "create_label"],
+    "3",
+  );
 
   render(<HeaderMenuContainer />, {
     routePath: "/bases/:baseId",
@@ -69,7 +74,12 @@ it("1.3.3 - Menus are available to the user depending on ABPs - Aid Inventory w/
 
 it("1.3.4 - Menus available to the user depending on ABPs - Coordinator Admin", async () => {
   mockImplementationOfQrReader(mockedQrReader, "NoBoxAssociatedWithQrCode");
-  mockAuthenticatedUser(mockedUseAuth0, "[email protected]", ["manage_volunteers"], "3");
+  mockAuthenticatedUser(
+    mockedUseAuth0,
+    "[email protected]",
+    ["view_inventory", "view_shipments", "view_beneficiary_graph", "manage_volunteers"],
+    "3",
+  );
 
   render(<HeaderMenuContainer />, {
     routePath: "/bases/:baseId",
@@ -86,7 +96,14 @@ it("1.3.5 - Menus available to the user depending on ABPs - Coordinator Admin w/
   mockAuthenticatedUser(
     mockedUseAuth0,
     "[email protected]",
-    ["manage_volunteers", "manage_products", "manage_warehouses"],
+    [
+      "view_inventory",
+      "view_shipments",
+      "view_beneficiary_graph",
+      "manage_volunteers",
+      "manage_products",
+      "manage_warehouses",
+    ],
     "3",
   );