Remove members from group

BrunoQuaresma · BrunoQuaresma · commit cba7065c885b · 2022-09-27T16:18:28.000Z
diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx
@@ -15,6 +15,7 @@ import { LoadingButton } from "components/LoadingButton/LoadingButton"
 import { Margins } from "components/Margins/Margins"
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader"
 import { Stack } from "components/Stack/Stack"
+import { TableRowMenu } from "components/TableRowMenu/TableRowMenu"
 import { UserAutocomplete } from "components/UserAutocomplete/UserAutocomplete"
 import { useState } from "react"
 import { Helmet } from "react-helmet-async"
@@ -133,7 +134,21 @@ export const GroupPage: React.FC = () => {
                                 highlightTitle
                               />
                             </TableCell>
-                            <TableCell width="1%"></TableCell>
+                            <TableCell width="1%">
+                              <TableCell>
+                                <TableRowMenu
+                                  data={member}
+                                  menuItems={[
+                                    {
+                                      label: "Remove",
+                                      onClick: () => {
+                                        send({ type: "REMOVE_MEMBER", userId: member.id })
+                                      },
+                                    },
+                                  ]}
+                                />
+                              </TableCell>
+                            </TableCell>
                           </TableRow>
                         ))}
                       </Cond>
diff --git a/site/src/xServices/groups/groupXService.ts b/site/src/xServices/groups/groupXService.ts
@@ -1,7 +1,7 @@
 import { getGroup, patchGroup } from "api/api"
 import { getErrorMessage } from "api/errors"
 import { Group } from "api/typesGenerated"
-import { displayError } from "components/GlobalSnackbar/utils"
+import { displayError, displaySuccess } from "components/GlobalSnackbar/utils"
 import { assign, createMachine } from "xstate"
 
 export const groupMachine = createMachine(
@@ -12,6 +12,7 @@ export const groupMachine = createMachine(
         groupId: string
         group?: Group
         addMemberCallback?: () => void
+        removingMember?: string
       },
       services: {} as {
         loadGroup: {
@@ -20,12 +21,20 @@ export const groupMachine = createMachine(
         addMember: {
           data: Group
         }
+        removeMember: {
+          data: Group
+        }
       },
-      events: {} as {
-        type: "ADD_MEMBER"
-        userId: string
-        callback: () => void
-      },
+      events: {} as
+        | {
+            type: "ADD_MEMBER"
+            userId: string
+            callback: () => void
+          }
+        | {
+            type: "REMOVE_MEMBER"
+            userId: string
+          },
     },
     tsTypes: {} as import("./groupXService.typegen").Typegen0,
     initial: "loading",
@@ -49,6 +58,10 @@ export const groupMachine = createMachine(
             target: "addingMember",
             actions: ["assignAddMemberCallback"],
           },
+          REMOVE_MEMBER: {
+            target: "removingMember",
+            actions: ["removeUserFromMembers"],
+          },
         },
       },
       addingMember: {
@@ -64,6 +77,19 @@ export const groupMachine = createMachine(
           },
         },
       },
+      removingMember: {
+        invoke: {
+          src: "removeMember",
+          onDone: {
+            actions: ["assignGroup", "displayRemoveMemberSuccess"],
+            target: "idle",
+          },
+          onError: {
+            target: "idle",
+            actions: ["displayRemoveMemberError"],
+          },
+        },
+      },
     },
   },
   {
@@ -76,6 +102,13 @@ export const groupMachine = createMachine(
 
         return patchGroup(group.id, { name: "", add_users: [userId], remove_users: [] })
       },
+      removeMember: ({ group }, { userId }) => {
+        if (!group) {
+          throw new Error("Group not defined.")
+        }
+
+        return patchGroup(group.id, { name: "", add_users: [], remove_users: [userId] })
+      },
     },
     actions: {
       assignGroup: assign({
@@ -97,6 +130,26 @@ export const groupMachine = createMachine(
           addMemberCallback()
         }
       },
+      // Optimistically remove the user from members
+      removeUserFromMembers: assign({
+        group: ({ group }, { userId }) => {
+          if (!group) {
+            throw new Error("Group is not defined.")
+          }
+
+          return {
+            ...group,
+            members: group.members.filter((currentMember) => currentMember.id !== userId),
+          }
+        },
+      }),
+      displayRemoveMemberError: (_, { data }) => {
+        const message = getErrorMessage(data, "Failed to remove member from the group.")
+        displayError(message)
+      },
+      displayRemoveMemberSuccess: () => {
+        displaySuccess("Member removed successfully.")
+      },
     },
   },
 )
