feat: Setup query and placeholders for TeamMembers

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

@@ -539,9 +539,16 @@ const EditorToolbar: React.FC<{
 
             {/* Only show team settings link if inside a team route  */}
             {isTeamSettingsVisible && (
-              <MenuItem onClick={() => navigate(`${rootTeamPath()}/settings`)}>
-                Team Settings
-              </MenuItem>
+              <>
+                <MenuItem
+                  onClick={() => navigate(`${rootTeamPath()}/settings`)}
+                >
+                  Team Settings
+                </MenuItem>
+                <MenuItem onClick={() => navigate(`${rootTeamPath()}/members`)}>
+                  Team Members
+                </MenuItem>
+              </>
             )}
 
             {/* Only show flow settings link if inside a flow route  */}

editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx

@@ -0,0 +1,19 @@
+import Box from "@mui/material/Box";
+import { Role, User } from "@opensystemslab/planx-core/types";
+import React from "react";
+
+export type TeamMember = Omit<User, "teams" | "isPlatformAdmin"> & {
+  role: Role;
+};
+
+interface Props {
+  teamMembersByRole: Record<Role, TeamMember[]>;
+}
+
+export const TeamMembers: React.FC<Props> = ({ teamMembersByRole }) => {
+  return (
+    <Box component="pre" sx={{ fontSize: 12 }}>
+      {JSON.stringify(teamMembersByRole, null, 4)}
+    </Box>
+  );
+};

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

@@ -71,6 +71,8 @@ const routes = compose(
 
       return import("./flow");
     }),
+
+    "/members": lazy(() => import("./teamMembers")),
   }),
 );
 

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

@@ -0,0 +1,76 @@
+import { Role, User } from "@opensystemslab/planx-core/types";
+import gql from "graphql-tag";
+import { groupBy } from "lodash";
+import { compose, mount, route, withData } from "navi";
+import {
+  TeamMember,
+  TeamMembers,
+} from "pages/FlowEditor/components/Team/TeamMembers";
+import { useStore } from "pages/FlowEditor/lib/store";
+import React from "react";
+
+import { client } from "../lib/graphql";
+import { makeTitle } from "./utils";
+
+interface GetUsersForTeam {
+  users: User[];
+}
+
+const teamMembersRoutes = compose(
+  withData((req) => ({
+    mountpath: req.mountpath,
+  })),
+
+  mount({
+    "/": route(async () => {
+      const teamSlug = useStore.getState().teamSlug;
+
+      const {
+        data: { users },
+      } = await client.query<GetUsersForTeam>({
+        query: gql`
+          query GetUsersForTeam($teamSlug: String!) {
+            users(
+              where: {
+                _or: [
+                  { is_platform_admin: { _eq: true } }
+                  { teams: { team: { slug: { _eq: $teamSlug } } } }
+                ]
+              }
+            ) {
+              id
+              firstName: first_name
+              lastName: last_name
+              isPlatformAdmin: is_platform_admin
+              email
+              teams(where: { team: { slug: { _eq: $teamSlug } } }) {
+                role
+              }
+            }
+          }
+        `,
+        variables: { teamSlug },
+      });
+
+      const teamMembers: TeamMember[] = users.map((user) => ({
+        firstName: user.firstName,
+        lastName: user.lastName,
+        email: user.email,
+        id: user.id,
+        role: user.isPlatformAdmin ? "platformAdmin" : user.teams[0].role,
+      }));
+
+      const teamMembersByRole = groupBy(teamMembers, "role") as Record<
+        Role,
+        TeamMember[]
+      >;
+
+      return {
+        title: makeTitle("Team Members"),
+        view: <TeamMembers teamMembersByRole={teamMembersByRole} />,
+      };
+    }),
+  }),
+);
+
+export default teamMembersRoutes;