fix: Hide /:teams EditorNavMenu from demoUser role (#3911)

theopensystemslab · Nov 5, 2024 · 042df8d · 042df8d
1 parent 5bb064a
commit 042df8d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 19 deletions.
diff --git a/editor.planx.uk/src/components/EditorNavMenu.tsx b/editor.planx.uk/src/components/EditorNavMenu.tsx
@@ -9,7 +9,7 @@ import TuneIcon from "@mui/icons-material/Tune";
 import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
 import { styled } from "@mui/material/styles";
-import Tooltip, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip";
+import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { Role } from "@opensystemslab/planx-core/types";
 import { useStore } from "pages/FlowEditor/lib/store";
@@ -95,13 +95,12 @@ function EditorNavMenu() {
   const { navigate } = useNavigation();
   const { url } = useCurrentRoute();
   const isRouteLoading = useLoadingRoute();
-  const [teamSlug, flowSlug, user, canUserEditTeam, flowAnalyticsLink] =
+  const [teamSlug, flowSlug, flowAnalyticsLink, role] =
     useStore((state) => [
       state.teamSlug,
       state.flowSlug,
-      state.user,
-      state.canUserEditTeam,
       state.flowAnalyticsLink,
+      state.getUserRoleForCurrentTeam()
     ]);
 
   const isActive = (route: string) => url.href.endsWith(route);
@@ -122,7 +121,7 @@ function EditorNavMenu() {
       title: "Select a team",
       Icon: FormatListBulletedIcon,
       route: "/",
-      accessibleBy: ["platformAdmin", "teamEditor", "teamViewer"],
+      accessibleBy: ["platformAdmin", "teamEditor", "demoUser", "teamViewer"],
     },
     {
       title: "Global settings",
@@ -143,7 +142,7 @@ function EditorNavMenu() {
       title: "Services",
       Icon: FormatListBulletedIcon,
       route: `/${teamSlug}`,
-      accessibleBy: ["platformAdmin", "teamEditor", "teamViewer"],
+      accessibleBy: ["platformAdmin", "teamEditor", "demoUser", "teamViewer"],
     },
     {
       title: "Settings",
@@ -170,25 +169,25 @@ function EditorNavMenu() {
       title: "Editor",
       Icon: EditorIcon,
       route: `/${teamSlug}/${flowSlug}`,
-      accessibleBy: ["platformAdmin", "teamEditor", "teamViewer"],
+      accessibleBy: ["platformAdmin", "teamEditor", "demoUser", "teamViewer"],
     },
     {
       title: "Service settings",
       Icon: TuneIcon,
       route: `/${teamSlug}/${flowSlug}/service`,
-      accessibleBy: ["platformAdmin", "teamEditor"],
+      accessibleBy: ["platformAdmin", "teamEditor", "demoUser"],
     },
     {
       title: "Submissions log",
       Icon: FactCheckIcon,
       route: `/${teamSlug}/${flowSlug}/submissions-log`,
-      accessibleBy: ["platformAdmin", "teamEditor"],
+      accessibleBy: ["platformAdmin", "teamEditor", "demoUser"],
     },
     {
       title: "Feedback",
       Icon: RateReviewIcon,
       route: `/${teamSlug}/${flowSlug}/feedback`,
-      accessibleBy: ["platformAdmin", "teamEditor"],
+      accessibleBy: ["platformAdmin", "teamEditor", "demoUser"],
     },
   ];
 
@@ -198,15 +197,15 @@ function EditorNavMenu() {
           title: "Analytics (external link)",
           Icon: LeaderboardIcon,
           route: flowAnalyticsLink,
-          accessibleBy: ["platformAdmin", "teamEditor"],
+          accessibleBy: ["platformAdmin", "teamEditor", "demoUser"],
         },
       ]
     : [
         {
           title: "Analytics page unavailable",
           Icon: LeaderboardIcon,
           route: "#",
-          accessibleBy: ["platformAdmin", "teamEditor"],
+          accessibleBy: ["platformAdmin", "teamEditor", "demoUser"],
           disabled: true,
         },
       ];
@@ -243,11 +242,7 @@ function EditorNavMenu() {
 
   const { routes, compact } = getRoutesForUrl(url.href);
 
-  const visibleRoutes = routes.filter(({ accessibleBy }) => {
-    if (user?.isPlatformAdmin) return accessibleBy.includes("platformAdmin");
-    if (canUserEditTeam(teamSlug)) return accessibleBy.includes("teamEditor");
-    return accessibleBy.includes("teamViewer");
-  });
+  const visibleRoutes = routes.filter(({ accessibleBy }) => role && accessibleBy.includes(role));
 
   // Hide menu if the user does not have a selection of items
   if (visibleRoutes.length < 2) return null;

diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/user.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/user.ts
@@ -1,9 +1,10 @@
 import { CoreDomainClient } from "@opensystemslab/planx-core";
-import { Team, User, UserTeams } from "@opensystemslab/planx-core/types";
+import { Role, Team, User, UserTeams } from "@opensystemslab/planx-core/types";
 import axios from "axios";
 import type { StateCreator } from "zustand";
 
 import { EditorStore } from "./editor";
+import { TeamStore } from "./team";
 
 export interface UserStore {
   user?: User;
@@ -13,10 +14,11 @@ export interface UserStore {
   getUser: () => User | undefined;
   canUserEditTeam: (teamSlug: Team["slug"]) => boolean;
   initUserStore: () => Promise<void>;
+  getUserRoleForCurrentTeam: () => Role | undefined;
 }
 
 export const userStore: StateCreator<
-  UserStore & EditorStore,
+  UserStore & EditorStore & TeamStore,
   [],
   [],
   UserStore
@@ -50,6 +52,18 @@ export const userStore: StateCreator<
     const user = await getLoggedInUser();
     setUser(user);
   },
+
+  getUserRoleForCurrentTeam: () => {
+    const { user, teamSlug } = get();
+    if (!user || !teamSlug) return;
+
+    if (user.isPlatformAdmin) return "platformAdmin";
+
+    const currentUserTeam = user.teams.find(({ team: { slug } }) => slug === teamSlug );
+    if (!currentUserTeam) return;
+
+    return currentUserTeam.role;
+  }
 });
 
 const getLoggedInUser = async () => {