feat: Only show "Team Settings" menu for users with teamEditor role

editor.planx.uk/src/components/Header.tsx

@@ -400,10 +400,11 @@ const EditorToolbar: React.FC<{
 }> = ({ headerRef, route }) => {
   const { navigate } = useNavigation();
   const [open, setOpen] = useState(false);
-  const [togglePreview, user, team] = useStore((state) => [
+  const [togglePreview, user, team, canUserEditTeam] = useStore((state) => [
     state.togglePreview,
     state.getUser(),
     state.getTeam(),
+    state.canUserEditTeam,
   ]);
 
   const handleClose = () => {
@@ -414,6 +415,9 @@ const EditorToolbar: React.FC<{
     setOpen(!open);
   };
 
+  const isTeamSettingsVisible =
+    route.data.team && !route.data.flow && canUserEditTeam(team.slug);
+
   return (
     <>
       <StyledToolbar disableGutters>
@@ -496,7 +500,7 @@ const EditorToolbar: React.FC<{
             )}
 
             {/* Only show team settings link if inside a team route  */}
-            {route.data.team && !route.data.flow && (
+            {isTeamSettingsVisible && (
               <MenuItem onClick={() => navigate(`${rootTeamPath()}/settings`)}>
                 Team Settings
               </MenuItem>

editor.planx.uk/src/routes/flowSettings.tsx

@@ -1,6 +1,14 @@
 import gql from "graphql-tag";
 import { publicClient } from "lib/graphql";
-import { compose, mount, redirect, route, withData } from "navi";
+import {
+  compose,
+  map,
+  mount,
+  NotFoundError,
+  redirect,
+  route,
+  withData,
+} from "navi";
 import DataManagerSettings from "pages/FlowEditor/components/Settings/DataManagerSettings";
 import ServiceFlags from "pages/FlowEditor/components/Settings/ServiceFlags";
 import ServiceSettings from "pages/FlowEditor/components/Settings/ServiceSettings";
@@ -18,58 +26,66 @@ const flowSettingsRoutes = compose(
 
   mount({
     "/": redirect("./service"),
-    "/:tab": route(async (req) => {
-      const { data } = await publicClient.query({
-        query: gql`
-          query GetFlow($slug: String!, $team_slug: String!) {
-            flows(
-              limit: 1
-              where: {
-                slug: { _eq: $slug }
-                team: { slug: { _eq: $team_slug } }
+    "/:tab": map(async (req) => {
+      const isAuthorised = useStore.getState().canUserEditTeam(req.params.team);
+      if (!isAuthorised)
+        throw new NotFoundError(
+          `User does not have access to ${req.originalUrl}`,
+        );
+
+      return route(async (req) => {
+        const { data } = await publicClient.query({
+          query: gql`
+            query GetFlow($slug: String!, $team_slug: String!) {
+              flows(
+                limit: 1
+                where: {
+                  slug: { _eq: $slug }
+                  team: { slug: { _eq: $team_slug } }
+                }
+              ) {
+                id
+                settings
               }
-            ) {
-              id
-              settings
             }
-          }
-        `,
-        variables: {
-          slug: req.params.flow,
-          team_slug: req.params.team,
-        },
-      });
+          `,
+          variables: {
+            slug: req.params.flow,
+            team_slug: req.params.team,
+          },
+        });
 
-      const settings: FlowSettings = data.flows[0].settings;
-      useStore.getState().setFlowSettings(settings);
+        const settings: FlowSettings = data.flows[0].settings;
+        useStore.getState().setFlowSettings(settings);
 
-      return {
-        title: makeTitle(
-          [req.params.team, req.params.flow, "Flow Settings"].join("/"),
-        ),
-        view: (
-          <Settings
-            currentTab={req.params.tab}
-            tabs={[
-              {
-                name: "Service",
-                route: "service",
-                Component: ServiceSettings,
-              },
-              {
-                name: "Service Flags",
-                route: "flags",
-                Component: ServiceFlags,
-              },
-              {
-                name: "Data",
-                route: "data-manager",
-                Component: DataManagerSettings,
-              },
-            ]}
-          />
-        ),
-      };
+        return {
+          title: makeTitle(
+            [req.params.team, req.params.flow, "Flow Settings"].join("/"),
+          ),
+          view: (
+            <Settings
+              currentTab={req.params.tab}
+              tabs={[
+                {
+                  name: "Service",
+                  route: "service",
+                  Component: ServiceSettings,
+                },
+                {
+                  name: "Service Flags",
+                  route: "flags",
+                  Component: ServiceFlags,
+                },
+                {
+                  name: "Data",
+                  route: "data-manager",
+                  Component: DataManagerSettings,
+                },
+              ]}
+            />
+          ),
+        };
+      });
     }),
   }),
 );

editor.planx.uk/src/routes/teamSettings.tsx

@@ -1,39 +1,56 @@
-import { compose, mount, redirect, route, withData } from "navi";
+import {
+  compose,
+  map,
+  mount,
+  NotFoundError,
+  redirect,
+  route,
+  withData,
+} from "navi";
 import DesignSettings from "pages/FlowEditor/components/Settings/DesignSettings";
 import TeamSettings from "pages/FlowEditor/components/Settings/TeamSettings";
+import { useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
 
 import Settings from "../pages/FlowEditor/components/Settings";
 import { makeTitle } from "./utils";
 
-const flowSettingsRoutes = compose(
+const teamSettingsRoutes = compose(
   withData((req) => ({
     mountpath: req.mountpath,
   })),
 
   mount({
     "/": redirect("./team"),
-    "/:tab": route(async (req) => ({
-      title: makeTitle([req.params.team, "Team Settings"].join("/")),
-      view: (
-        <Settings
-          currentTab={req.params.tab}
-          tabs={[
-            {
-              name: "Team",
-              route: "team",
-              Component: TeamSettings,
-            },
-            {
-              name: "Design",
-              route: "design",
-              Component: DesignSettings,
-            },
-          ]}
-        />
-      ),
-    })),
+    "/:tab": map(async (req) => {
+      const isAuthorised = useStore.getState().canUserEditTeam(req.params.team);
+      if (!isAuthorised)
+        throw new NotFoundError(
+          `User does not have access to ${req.originalUrl}`,
+        );
+
+      return route(async (req) => ({
+        title: makeTitle([req.params.team, "Team Settings"].join("/")),
+        view: (
+          <Settings
+            currentTab={req.params.tab}
+            tabs={[
+              {
+                name: "Team",
+                route: "team",
+                Component: TeamSettings,
+              },
+              {
+                name: "Design",
+                route: "design",
+                Component: DesignSettings,
+              },
+            ]}
+          />
+        ),
+      }));
+    }),
   }),
 );
 
-export default flowSettingsRoutes;
+export default teamSettingsRoutes;

hasura.planx.uk/metadata/tables.yaml

@@ -1412,6 +1412,10 @@
 - table:
     name: team_themes
     schema: public
+  object_relationships:
+    - name: team
+      using:
+        foreign_key_constraint_on: team_id
   select_permissions:
     - role: api
       permission:
@@ -1481,7 +1485,14 @@
           - link_colour
           - logo
           - primary_colour
-        filter: {}
+        filter:
+          team:
+            members:
+              _and:
+                - user_id:
+                    _eq: x-hasura-user-id
+                - role:
+                    _eq: teamEditor
         check: null
       comment: ""
 - table: