Added delete button to the group show page

newjersey · Oct 17, 2024 · 752ff66 · 752ff66
1 parent 339585b
commit 752ff66
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 28 deletions.
diff --git a/src/factories.tsx b/src/factories.tsx
@@ -15,7 +15,7 @@ import { StateAbbreviation } from './utils/statesAndTerritories'
 import { DEPARTMENT_SEALS } from './utils/departmentSeals'
 import { UsersIndex } from './network/useUsers'
 import { UserShow } from './network/useUser'
-import { GroupsIndex, GroupShow } from './network/groups'
+import { GroupsIndex, GroupShow, GroupShowUser } from './network/groups'
 
 export const randomObject = () => {
   return { [faker.lorem.word()]: faker.lorem.words(3) }
@@ -146,25 +146,30 @@ const buildUser = (): UserShow => ({
 })
 
 export const buildUserShow = (options?: Partial<UserShow>): UserShow => {
-  const user = buildUser()
   return {
-    ...user,
+    ...buildUser(),
     ...options,
   }
 }
 
 export const buildUserIndex = (options?: Partial<UsersIndex>): UsersIndex => {
-  const user = buildUser()
   return {
-    ...user,
+    ...buildUser(),
+    ...options,
+  }
+}
+
+export const buildGroupUserIndex = (options?: Partial<GroupShowUser>): GroupShowUser => {
+  return {
+    ...buildUser(),
+    membershipId: uniqueId(),
     ...options,
   }
 }
 
 export const buildUserMembershipIndex = (options?: Partial<UsersIndex>): UsersIndex => {
-  const user = buildUser()
   return {
-    ...user,
+    ...buildUser(),
     ...options,
   }
 }
@@ -176,26 +181,23 @@ const buildGroup = (): GroupsIndex => ({
 })
 
 export const buildGroupIndex = (options?: Partial<GroupsIndex>): GroupsIndex => {
-  const group = buildGroup()
   return {
-    ...group,
+    ...buildGroup(),
     ...options,
   }
 }
 
 export const buildGroupShow = (options?: Partial<GroupShow>): GroupShow => {
-  const group = buildGroup()
   return {
-    ...group,
+    ...buildGroup(),
     users: [],
     ...options,
   }
 }
 
 export const buildGroupMembershipIndex = (options?: Partial<GroupsIndex>): GroupsIndex => {
-  const group = buildGroup()
   return {
-    ...group,
+    ...buildGroup(),
     ...options,
   }
 }

diff --git a/src/network/groups/useGroup.ts b/src/network/groups/useGroup.ts
@@ -2,15 +2,18 @@ import { useQuery } from '@tanstack/react-query'
 import { useAuthedFetch } from '../useAuthedFetch'
 import { UserRole } from 'src/appTypes'
 
+export interface GroupShowUser {
+  id: string
+  email: string
+  role: UserRole
+  membershipId: string
+}
+
 export interface GroupShow {
   id: string
   name: string
   description: string
-  users: {
-    id: string
-    email: string
-    role: UserRole
-  }[]
+  users: GroupShowUser[]
 }
 
 export const buildUseGroupQueryKey = (id: string): string => `useGroup('${id}')`

diff --git a/src/pages/groups.css b/src/pages/groups.css
@@ -45,6 +45,10 @@
 
 .group-members .user-list {
   margin: 0;
+
+  .user-item {
+    flex-direction: row;
+  }
 }
 
 .group-edit-action-buttons {

diff --git a/src/pages/groups/[id].tsx b/src/pages/groups/[id].tsx
@@ -16,6 +16,7 @@ import {
   UswdsIcon,
 } from 'src/ui'
 import { DestroyGroup } from 'src/ui/GroupShow/DestroyGroup'
+import { DestroyMembership } from 'src/ui/Memberships/DestroyMembership'
 import { Actions } from 'src/ui/Layout'
 import { formatPageTitle } from 'src/utils/formatPageTitle'
 import { useCurrentRole } from 'src/utils/useCurrentRole'
@@ -66,6 +67,17 @@ const GroupShowPage: FC<Props> = ({ params }) => {
                         <Link to={`/users/${user.id}`} className="user-email">
                           {user.email}
                         </Link>
+                        {isAdmin && (
+                          <DestroyMembership
+                            group={group}
+                            membership={{
+                              id: user.membershipId,
+                              groupId: group.id,
+                              userId: user.id,
+                            }}
+                            user={user}
+                          />
+                        )}
                       </li>
                     ))}
                   </List>

diff --git a/src/pages/groups/__tests__/[id].test.tsx b/src/pages/groups/__tests__/[id].test.tsx
@@ -6,7 +6,7 @@ import {
   buildGroupShow,
   buildUseMutationResult,
   buildUseQueryResult,
-  buildUserIndex,
+  buildGroupUserIndex,
 } from 'src/testHelpers'
 import { useGroup, GroupShow, useDestroyGroup } from 'src/network/groups'
 import { faker } from '@faker-js/faker'
@@ -85,7 +85,9 @@ describe('Group Show Page', () => {
     let group: GroupShow
 
     beforeEach(() => {
-      group = buildGroupShow({ users: [buildUserIndex(), buildUserIndex({ role: 'admin' })] })
+      group = buildGroupShow({
+        users: [buildGroupUserIndex(), buildGroupUserIndex({ role: 'admin' })],
+      })
       const query = buildUseQueryResult({ data: group })
       asMock(useGroup).mockReturnValue(query)
     })
@@ -138,15 +140,28 @@ describe('Group Show Page', () => {
     })
   })
 
-  describe('destroying a group as an admin', () => {
-    it('provides a delete button', async () => {
-      const group = buildGroupShow()
-      const query = buildUseQueryResult({ data: group })
-      asMock(useGroup).mockReturnValue(query)
-      asMock(useCurrentRole).mockReturnValue({ role: 'admin', isAdmin: true, isLoading: false })
-      const { queryByRole } = renderPage()
+  describe('as an admin', () => {
+    describe('destroying an membership', () => {
+      it('provides a delete button', async () => {
+        const group = buildGroupShow({ users: [buildGroupUserIndex()] })
+        const query = buildUseQueryResult({ data: group })
+        asMock(useGroup).mockReturnValue(query)
+        asMock(useCurrentRole).mockReturnValue({ role: 'admin', isAdmin: true, isLoading: false })
+        const { queryByRole } = renderPage()
+        expect(queryByRole('button', { name: 'Remove' })).not.toBeNull()
+      })
+    })
 
-      expect(queryByRole('button', { name: 'Delete' })).not.toBeNull()
+    describe('destroying a group', () => {
+      it('provides a delete button', async () => {
+        const group = buildGroupShow()
+        const query = buildUseQueryResult({ data: group })
+        asMock(useGroup).mockReturnValue(query)
+        asMock(useCurrentRole).mockReturnValue({ role: 'admin', isAdmin: true, isLoading: false })
+        const { queryByRole } = renderPage()
+
+        expect(queryByRole('button', { name: 'Delete' })).not.toBeNull()
+      })
     })
   })
 })