wip

h/security/policy/_api_cookie.py

@@ -8,6 +8,7 @@
 COOKIE_AUTHENTICATABLE_API_REQUESTS = [
     ("api.groups", "POST"),  # Create a new group.
     ("api.group", "PATCH"),  # Edit an existing group.
+    ("api.group_members", "GET"),  # Get a list of a group's members.
 ]
 
 

h/static/scripts/group-forms/components/CreateEditGroupForm.tsx

@@ -3,9 +3,16 @@ import { useEffect, useId, useMemo, useState } from 'preact/hooks';
 import {
   Button,
   CancelIcon,
+  TrashIcon,
   Input,
   RadioGroup,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableBody,
   Textarea,
+  Select,
   ModalDialog,
   useWarnOnPageUnload,
 } from '@hypothesis/frontend-shared';
@@ -219,6 +226,8 @@ export default function CreateEditGroupForm() {
     'unmodified' | 'unsaved' | 'saving' | 'saved'
   >('unmodified');
 
+  const [members, setMembers] = useState([]);
+
   // Warn when leaving page if there are unsaved changes. We only do this when
   // editing a group because this hook lacks a way to disable the handler before
   // calling `setLocation` after a successful group creation.
@@ -333,6 +342,20 @@ export default function CreateEditGroupForm() {
     }
   };
 
+  const getMembers = async () => {
+    let newMembers = (await callAPI(config.api.getGroupMembers!.url, {
+      method: config.api.getGroupMembers!.method,
+      headers: config.api.getGroupMembers!.headers,
+    }));
+    setMembers(newMembers);
+  };
+
+  useEffect(()=> {
+    if (config.api.getGroupMembers !== null) {
+      getMembers();
+    }
+  } ,[])
+
   return (
     <div className="text-grey-6 text-sm/relaxed">
       <h1 className="mt-14 mb-8 text-grey-7 text-xl/none" data-testid="header">
@@ -393,6 +416,40 @@ export default function CreateEditGroupForm() {
           </>
         )}
 
+        <Table title="Members">
+          <TableHead>
+            <TableRow>
+              <TableCell>Username</TableCell>
+              <TableCell>Role</TableCell>
+              <TableCell classes="w-[50px]"></TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+              {members.map((member) => (
+                <TableRow>
+                  <TableCell>{member.username}</TableCell>
+                  <TableCell>
+                    <Select value={member.role} buttonContent={member.role[0].toUpperCase() + member.role.slice(1)}>
+                      <Select.Option value="owner" key="owner">
+                          Owner
+                      </Select.Option>
+                      <Select.Option value="admin" key="admin">
+                          Admin
+                      </Select.Option>
+                      <Select.Option value="moderator" key="moderator">
+                          Moderator
+                      </Select.Option>
+                      <Select.Option value="member" key="member">
+                          Member
+                      </Select.Option>
+                    </Select>
+                  </TableCell>
+                  <TableCell><TrashIcon /></TableCell>
+                </TableRow>
+              ))}
+          </TableBody>
+        </Table>
+
         <div className="flex items-center gap-x-4 mt-2">
           <div data-testid="error-container" role="alert">
             {errorMessage && (

h/static/scripts/group-forms/config.ts

@@ -12,6 +12,7 @@ export type ConfigObject = {
   api: {
     createGroup: APIConfig;
     updateGroup: APIConfig | null;
+    getGroupMembers: APIConfig | null;
   };
   context: {
     group: {

h/views/api/groups.py

@@ -1,6 +1,9 @@
 from pyramid.httpexceptions import HTTPConflict, HTTPNoContent, HTTPNotFound
+from sqlalchemy import select
+from sqlalchemy.orm import selectinload
 
 from h.i18n import TranslationString as _
+from h.models import GroupMembership
 from h.presenters import GroupJSONPresenter, GroupsJSONPresenter, UserJSONPresenter
 from h.schemas.api.group import (
     CreateGroupAPISchema,
@@ -11,11 +14,6 @@
 from h.traversal import EditGroupMembershipContext, GroupContext, GroupMembershipContext
 from h.views.api.config import api_config
 from h.views.api.exceptions import PayloadError
-from h.models import GroupMembership
-
-from sqlalchemy import select
-from sqlalchemy.orm import selectinload
-
 
 DEFAULT_GROUP_TYPE = "private"
 
@@ -245,11 +243,7 @@ def edit_member(request):
     )
 
     context = EditGroupMembershipContext(
-        request.db,
-        request.context.group,
-        request.context.user,
-        membership,
-        appstruct["role"],
+        request.context.group, request.context.user, membership, appstruct["role"]
     )
 
     if not request.has_permission(Permission.Group.MEMBER_EDIT, context):

h/views/groups.py

@@ -77,6 +77,11 @@ def _js_config(self):
                 "url": self.request.route_url("api.group", id=group.pubid),
                 "headers": {"X-CSRF-Token": csrf_token},
             }
+            js_config["api"]["getGroupMembers"] = {
+                "method": "GET",
+                "url": self.request.route_url("api.group_members", pubid=group.pubid),
+                "headers": {"X-CSRF-Token": csrf_token},
+            }
 
         return js_config