Add page for listing Group members

src/endpoints/groups.js

@@ -5,6 +5,7 @@ import {contentTypesProvided, contentTypesConsumed} from "../negotiate.js";
 import {deleteByUrls, proxyFromUpstream, proxyToUpstream} from "../upstream.js";
 import { slurp } from "../utils/iterators.js";
 import * as options from "./options.js";
+import * as nextJsApp from "./nextjs.js";
 
 
 const setGroup = (nameExtractor) => (req, res, next) => {
@@ -156,13 +157,16 @@ async function receiveGroupLogo(req, res) {
 
 /* Members and roles
  */
-const listMembers = async (req, res) => {
-  const group = req.context.group;
-
-  authz.assertAuthorized(req.user, authz.actions.Read, group);
+const listMembers = contentTypesProvided([
+  ["html", nextJsApp.handleRequest],
+  ["json", async (req, res) => {
+    const group = req.context.group;
+    authz.assertAuthorized(req.user, authz.actions.Read, group);
 
-  return res.json(await group.members());
-};
+    return res.json(await group.members());
+    }
+  ],
+]);
 
 
 const listRoles = (req, res) => {

src/groups.js

@@ -69,7 +69,7 @@ class Group {
 
     /**
      * Map of generic roles a member of this Group can hold to fully-qualified
-     * authz roles.
+     * authz roles. The roles should be listed in order from least to most privileged.
      *
      * The fully-qualified names are used in authz policies, and a user's authz
      * roles are stored using membership in AWS Cognito groups of the same

src/routing/groups.js

@@ -71,18 +71,25 @@ export function setup(app) {
     ;
 
   app.routeAsync("/groups/:groupName/settings/members")
-    .getAsync(endpoints.groups.listMembers);
+    .getAsync(endpoints.groups.listMembers)
+    .optionsAsync(optionsGroup)
+    ;
 
   app.routeAsync("/groups/:groupName/settings/roles")
-    .getAsync(endpoints.groups.listRoles);
+    .getAsync(endpoints.groups.listRoles)
+    .optionsAsync(optionsGroup)
+    ;
 
   app.routeAsync("/groups/:groupName/settings/roles/:roleName/members")
-    .getAsync(endpoints.groups.listRoleMembers);
+    .getAsync(endpoints.groups.listRoleMembers)
+    .optionsAsync(optionsGroup)
+    ;
 
   app.routeAsync("/groups/:groupName/settings/roles/:roleName/members/:username")
     .getAsync(endpoints.groups.getRoleMember)
     .putAsync(endpoints.groups.putRoleMember)
     .deleteAsync(endpoints.groups.deleteRoleMember)
+    .optionsAsync(optionsGroup)
     ;
 
   app.route("/groups/:groupName/settings/*")

static-site/pages/groups/[...groupName].jsx

@@ -1,34 +1,37 @@
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 const IndividualGroupPage = dynamic(() => import("../../src/sections/individual-group-page"), {ssr: false})
+const GroupMembersPage = dynamic(() => import("../../src/sections/group-members-page.tsx"), {ssr: false})
 const GroupSettingsPage = dynamic(() => import("../../src/sections/group-settings-page"), {ssr: false})
 
 
 /**
  * NextJS dynamic routing doesn't allow us to set up routes where we have (e.g.)
  * groups/:groupName/settings -> <GroupSettingsPage>
+ * groups/:groupName/settings/members -> <GroupMembersPage>
  * groups/:groupName[/*] -> <IndividualGroupPage>
  * so we use some JS routing here to serve the right component
  */
 const Index = () => {
   const {query} = useRouter();
   if (!query.groupName) return null; // wait until query ready
 
-
-
-
   /* nextJs dynamic routing will set the part parts _beyond_ "groups/" as query.groupName */
-  if (query.groupName.length===2 && query.groupName[1]==='settings') {
-    // param location TODO!!!
-    return <GroupSettingsPage groupName={query.groupName[0]}/>
+  const groupName = query.groupName[0]
+  const resourcePath = query.groupName.slice(1).join("/")
+
+  if (resourcePath === 'settings') {
+    return <GroupSettingsPage groupName={groupName}/>
   }
 
-  const resourcePath = query.groupName.slice(1);
+  if (resourcePath === 'settings/members') {
+    return <GroupMembersPage groupName={groupName}/>
+  }
 
   return (
-    <IndividualGroupPage groupName={query.groupName[0]} resourcePath={resourcePath.length ? resourcePath : undefined}/>
+    <IndividualGroupPage groupName={groupName} resourcePath={resourcePath.length ? resourcePath : undefined}/>
   );
 
 }
 
-export default Index;
+export default Index;

static-site/src/layouts/generic-page.jsx

@@ -7,13 +7,13 @@ import UserDataWrapper from "../layouts/userDataWrapper";
 import { BigSpacer, HugeSpacer, Line } from "../layouts/generalComponents";
 import * as splashStyles from "../components/splash/styles";
 
-const GenericPage = ({location, children, banner}) => (
+const GenericPage = ({children, banner}) => (
   <MainLayout>
     <div className="index-container">
       <Helmet title={siteTitle} />
       <main>
         <UserDataWrapper>
-          <NavBar location={location} />
+          <NavBar/>
           {banner}
           <splashStyles.Container>
             <HugeSpacer /><HugeSpacer />

static-site/src/pages/contact.jsx

@@ -4,8 +4,8 @@ import { BigSpacer, FlexCenter} from "../layouts/generalComponents";
 import { H1, NarrowFocusParagraph } from "../components/splash/styles";
 
 
-const Contact = props => (
-  <GenericPage location={props.location}>
+const Contact = () => (
+  <GenericPage>
       <H1>Contact Us</H1>
 
       <FlexCenter>

static-site/src/pages/groups.jsx

@@ -61,8 +61,8 @@ const GroupListingInfo = () => {
 // GenericPage needs to be a parent of GroupsPage for the latter to know about
 // UserContext, specifically for class functions to be able to use `this.context`.
 // We `export default Index` below.
-const Index = props => (
-  <GenericPage location={props.location}>
+const Index = () => (
+  <GenericPage>
     <GroupsPage/>
   </GenericPage>
 );

static-site/src/pages/index.jsx

@@ -23,7 +23,7 @@ class Index extends React.Component {
           <SEO/>
           <main>
             <UserDataWrapper>
-              <NavBar location={this.props.location} />
+              <NavBar/>
               <Splash/>
             </UserDataWrapper>
           </main>

static-site/src/pages/team.jsx

@@ -65,11 +65,10 @@ const TeamPage = () => {
 };
 
 
-const Team = props => (
-  <GenericPage location={props.location}>
+const Team = () => (
+  <GenericPage>
     <TeamPage/>
   </GenericPage>
 );
 
 export default Team;
-

static-site/src/sections/community-page.jsx

@@ -72,7 +72,7 @@ class Index extends React.Component {
   render() {
     const banner = this.banner();
     return (
-      <GenericPage location={this.props.location} banner={banner}>
+      <GenericPage banner={banner}>
         <splashStyles.H1>{title}</splashStyles.H1>
         <SmallSpacer />
 

static-site/src/sections/community-repo-page.jsx

@@ -85,22 +85,21 @@ class Index extends React.Component {
   }
 
   render() {
-    const location = this.props.location;
     const banner = this.banner();
     if (this.state.repoNotFound) {
       return (
-        <GenericPage location={location} banner={banner} />
+        <GenericPage banner={banner} />
       );
     }
     if (!this.state.sourceInfo) {
       return (
-        <GenericPage location={location} banner={banner}>
+        <GenericPage banner={banner}>
           <splashStyles.H2>Data loading...</splashStyles.H2>
         </GenericPage>
       );
     }
     return (
-      <GenericPage location={location} banner={banner}>
+      <GenericPage banner={banner}>
         <SourceInfoHeading sourceInfo={this.state.sourceInfo}/>
         <HugeSpacer />
         {this.state.sourceInfo.showDatasets && (

static-site/src/sections/group-members-page.tsx

@@ -0,0 +1,161 @@
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
+import { startCase } from "lodash"
+import { uri } from "../../../src/templateLiterals.js";
+import GenericPage from "../layouts/generic-page.jsx";
+import { BigSpacer, CenteredContainer, FlexGridRight, MediumSpacer } from "../layouts/generalComponents.jsx";
+import * as splashStyles from "../components/splash/styles";
+import { ErrorBanner } from "../components/errorMessages.jsx";
+
+interface GroupMember {
+  username: string,
+  roles: string[]
+}
+
+interface ErrorMessage {
+  title: string,
+  contents: string
+}
+
+const GroupMembersPage = ({ groupName }: {groupName: string}) => {
+  const [ errorMessage, setErrorMessage ] = useState<ErrorMessage>({title: "", contents: ""});
+  const [ roles, setRoles ] = useState<string[]>([]);
+  const [ members, setMembers ] = useState<GroupMember[]>([]);
+
+  useEffect(() => {
+    async function getGroupMembership(groupName: string) {
+      const headers = { headers: {"Accept": "application/json"}};
+      let roles, members = [];
+      try {
+        const [ rolesResponse, membersResponse ] = await Promise.all([
+          fetch(uri`/groups/${groupName}/settings/roles`, headers),
+          fetch(uri`/groups/${groupName}/settings/members`, headers)
+        ]);
+        if (!rolesResponse.ok) {
+          throw new Error(`Fetching group roles failed: ${rolesResponse.status} ${rolesResponse.statusText}`)
+        }
+        if (!membersResponse.ok) {
+          throw new Error(`Fetching group members failed: ${membersResponse.status} ${membersResponse.statusText}`)
+        }
+        roles = await rolesResponse.json();
+        members = await membersResponse.json();
+      } catch (err) {
+        const errorMessage = (err as Error).message
+        if(!ignore) {
+          setErrorMessage({
+            title: "An error occurred when trying to fetch group membership data",
+            contents: errorMessage})
+        }
+      }
+      return {roles, members};
+    }
+
+    let ignore = false;
+    getGroupMembership(groupName).then(result => {
+      if (!ignore) {
+        setRoles(result.roles);
+        setMembers(result.members);
+      }
+    })
+    return () => {
+      ignore = true;
+    };
+  }, [groupName]);
+
+  return (
+    <GenericPage banner={errorMessage.title ? <ErrorBanner {...errorMessage} /> : undefined}>
+      <FlexGridRight>
+        <splashStyles.Button to={uri`/groups/${groupName}`}>
+          Return to {`"${groupName}"`} Page
+        </splashStyles.Button>
+      </FlexGridRight>
+      <MediumSpacer/>
+
+      <splashStyles.H2>
+        {`"${groupName}"`} Group Members
+      </splashStyles.H2>
+      <BigSpacer/>
+
+      {roles && members
+        ? <MembersTable roles={roles as string[]} members={members as GroupMember[]} />
+        : <splashStyles.H4>Fetching group members...</splashStyles.H4>}
+    </GenericPage>
+  )
+};
+
+const MembersTableContainer = styled.div`
+  border: 1px solid #CCC;
+  .row {
+    border-bottom: 1px solid #CCC;
+  }
+  .row:last-child {
+    border-bottom: 0;
+  }
+  .row:nth-child(even) {
+    background-color: #F1F1F1;
+  }
+  p {
+    margin: 10px;
+  }
+`;
+
+const MembersTable = ({ roles, members }: { roles: string[], members: GroupMember[]}) => {
+  const sortedMembers = members.toSorted((a, b) => a.username.localeCompare(b.username));
+  function mostPrivilegedRole(memberRoles: string[]) {
+    // Assumes that the provided roles are listed in order of least to most privileged
+    const roleName = memberRoles.reduce((a, b) => roles.indexOf(a) > roles.indexOf(b) ? a : b);
+    // Prettify the role name by making it singular and capitalized
+    return startCase(roleName.replace(/s$/, ''));
+  }
+
+  return (
+    <CenteredContainer>
+      <MembersTableContainer>
+        <div className="row no-gutters">
+          <div className="col">
+            <splashStyles.CenteredFocusParagraph>
+              <strong>Username</strong>
+            </splashStyles.CenteredFocusParagraph>
+          </div>
+          <div className="col">
+            <splashStyles.CenteredFocusParagraph>
+              <strong>Role</strong>
+            </splashStyles.CenteredFocusParagraph>
+          </div>
+        </div>
+
+        {sortedMembers.map((member) =>
+          <div className="row no-gutters" key={member.username}>
+            <div className="col">
+              <splashStyles.CenteredFocusParagraph>
+                {member.username}
+              </splashStyles.CenteredFocusParagraph>
+            </div>
+            <div className="col">
+              <splashStyles.CenteredFocusParagraph>
+                {mostPrivilegedRole(member.roles)}
+              </splashStyles.CenteredFocusParagraph>
+            </div>
+          </div>
+        )}
+      </MembersTableContainer>
+    </CenteredContainer>
+  )
+};
+
+export async function canViewGroupMembers(groupName: string) {
+  try {
+    const groupMemberOptions = await fetch(uri`/groups/${groupName}/settings/members`, { method: "OPTIONS"});
+      if ([401, 403].includes(groupMemberOptions.status)) {
+        console.log("You can ignore the console error above; it is used to determine whether the members can be shown.");
+      }
+      const allowedMethods = new Set(groupMemberOptions.headers.get("Allow")?.split(/\s*,\s*/));
+      return allowedMethods.has("GET");
+  } catch (err) {
+    const errorMessage = (err as Error).message
+    console.error("Cannot check user permissions to view group members", errorMessage);
+  }
+  return false
+}
+
+export default GroupMembersPage;

static-site/src/sections/group-settings-page.jsx

@@ -12,7 +12,7 @@ const UNAUTHORIZED_MESSAGE = <>
   If your permissions have changed recently, try <a href="/logout">logging out</a> and logging back in.<br/>
 </>;
 
-const EditGroupSettingsPage = ({ location, groupName }) => {
+const EditGroupSettingsPage = ({ groupName }) => {
   const [ userAuthorized, setUserAuthorized ] = useState(null);
   const [ errorMessage, setErrorMessage ] = useState();
 
@@ -39,7 +39,7 @@ const EditGroupSettingsPage = ({ location, groupName }) => {
   };
 
   return (
-    <GenericPage location={location}>
+    <GenericPage>
       <FlexGridRight>
         <splashStyles.Button to={uri`/groups/${groupName}`}>
           Return to {`"${groupName}"`} Page