From 07a4bd4f8f879bb22149c4859df352384bd83354 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 15 Sep 2023 13:08:11 +0000
Subject: [PATCH 1/7] Remove groups service

---
 site/src/api/queries/groups.ts              |  8 +++
 site/src/pages/GroupsPage/GroupsPage.tsx    | 26 +++++----
 site/src/xServices/groups/groupsXService.ts | 60 ---------------------
 3 files changed, 23 insertions(+), 71 deletions(-)
 create mode 100644 site/src/api/queries/groups.ts
 delete mode 100644 site/src/xServices/groups/groupsXService.ts

diff --git a/site/src/api/queries/groups.ts b/site/src/api/queries/groups.ts
new file mode 100644
index 0000000000000..7c3828048dd1a
--- /dev/null
+++ b/site/src/api/queries/groups.ts
@@ -0,0 +1,8 @@
+import * as API from "api/api";
+
+export const groups = (organizationId: string) => {
+  return {
+    queryKey: ["groups"],
+    queryFn: () => API.getGroups(organizationId),
+  };
+};
diff --git a/site/src/pages/GroupsPage/GroupsPage.tsx b/site/src/pages/GroupsPage/GroupsPage.tsx
index d63e4dfb69ca9..1af0759b1b0ec 100644
--- a/site/src/pages/GroupsPage/GroupsPage.tsx
+++ b/site/src/pages/GroupsPage/GroupsPage.tsx
@@ -1,24 +1,28 @@
-import { useMachine } from "@xstate/react";
 import { useFeatureVisibility } from "hooks/useFeatureVisibility";
 import { useOrganizationId } from "hooks/useOrganizationId";
 import { usePermissions } from "hooks/usePermissions";
-import { FC } from "react";
+import { FC, useEffect } from "react";
 import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
-import { groupsMachine } from "xServices/groups/groupsXService";
 import GroupsPageView from "./GroupsPageView";
+import { useQuery } from "@tanstack/react-query";
+import { groups } from "api/queries/groups";
+import { displayError } from "components/GlobalSnackbar/utils";
+import { getErrorMessage } from "api/errors";
 
 export const GroupsPage: FC = () => {
   const organizationId = useOrganizationId();
   const { createGroup: canCreateGroup } = usePermissions();
   const { template_rbac: isTemplateRBACEnabled } = useFeatureVisibility();
-  const [state] = useMachine(groupsMachine, {
-    context: {
-      organizationId,
-      shouldFetchGroups: isTemplateRBACEnabled,
-    },
-  });
-  const { groups } = state.context;
+  const groupsQuery = useQuery(groups(organizationId));
+
+  useEffect(() => {
+    if (groupsQuery.error) {
+      displayError(
+        getErrorMessage(groupsQuery.error, "Error on loading groups."),
+      );
+    }
+  }, [groupsQuery.error]);
 
   return (
     <>
@@ -27,7 +31,7 @@ export const GroupsPage: FC = () => {
       </Helmet>
 
       <GroupsPageView
-        groups={groups}
+        groups={groupsQuery.data}
         canCreateGroup={canCreateGroup}
         isTemplateRBACEnabled={isTemplateRBACEnabled}
       />
diff --git a/site/src/xServices/groups/groupsXService.ts b/site/src/xServices/groups/groupsXService.ts
deleted file mode 100644
index 3552838724bae..0000000000000
--- a/site/src/xServices/groups/groupsXService.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { getGroups } from "api/api";
-import { getErrorMessage } from "api/errors";
-import { Group } from "api/typesGenerated";
-import { displayError } from "components/GlobalSnackbar/utils";
-import { assign, createMachine } from "xstate";
-
-export const groupsMachine = createMachine(
-  {
-    id: "groupsMachine",
-    predictableActionArguments: true,
-    schema: {
-      context: {} as {
-        organizationId: string;
-        shouldFetchGroups: boolean;
-        groups?: Group[];
-      },
-      services: {} as {
-        loadGroups: {
-          data: Group[];
-        };
-      },
-    },
-    tsTypes: {} as import("./groupsXService.typegen").Typegen0,
-    initial: "loading",
-    states: {
-      loading: {
-        always: [{ target: "idle", cond: "cantFetchGroups" }],
-        invoke: {
-          src: "loadGroups",
-          onDone: {
-            actions: ["assignGroups"],
-            target: "idle",
-          },
-          onError: {
-            target: "idle",
-            actions: ["displayLoadingGroupsError"],
-          },
-        },
-      },
-      idle: {},
-    },
-  },
-  {
-    guards: {
-      cantFetchGroups: ({ shouldFetchGroups }) => !shouldFetchGroups,
-    },
-    services: {
-      loadGroups: ({ organizationId }) => getGroups(organizationId),
-    },
-    actions: {
-      assignGroups: assign({
-        groups: (_, { data }) => data,
-      }),
-      displayLoadingGroupsError: (_, { data }) => {
-        const message = getErrorMessage(data, "Error on loading groups.");
-        displayError(message);
-      },
-    },
-  },
-);

From 6b93fcc795ea56f01441a47d9c6cad6c444a723a Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 15 Sep 2023 13:14:02 +0000
Subject: [PATCH 2/7] Remove create group service

---
 site/src/api/queries/groups.ts                | 15 +++++
 site/src/pages/GroupsPage/CreateGroupPage.tsx | 30 ++++------
 .../xServices/groups/createGroupXService.ts   | 59 -------------------
 3 files changed, 26 insertions(+), 78 deletions(-)
 delete mode 100644 site/src/xServices/groups/createGroupXService.ts

diff --git a/site/src/api/queries/groups.ts b/site/src/api/queries/groups.ts
index 7c3828048dd1a..67a6dab9adb2f 100644
--- a/site/src/api/queries/groups.ts
+++ b/site/src/api/queries/groups.ts
@@ -1,4 +1,6 @@
+import { QueryClient } from "@tanstack/react-query";
 import * as API from "api/api";
+import { CreateGroupRequest } from "api/typesGenerated";
 
 export const groups = (organizationId: string) => {
   return {
@@ -6,3 +8,16 @@ export const groups = (organizationId: string) => {
     queryFn: () => API.getGroups(organizationId),
   };
 };
+
+export const createGroup = (queryClient: QueryClient) => {
+  return {
+    mutationFn: ({
+      organizationId,
+      ...request
+    }: CreateGroupRequest & { organizationId: string }) =>
+      API.createGroup(organizationId, request),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries(["groups"]);
+    },
+  };
+};
diff --git a/site/src/pages/GroupsPage/CreateGroupPage.tsx b/site/src/pages/GroupsPage/CreateGroupPage.tsx
index 953f9cebb0b6c..b09c4f9176991 100644
--- a/site/src/pages/GroupsPage/CreateGroupPage.tsx
+++ b/site/src/pages/GroupsPage/CreateGroupPage.tsx
@@ -1,26 +1,17 @@
-import { useMachine } from "@xstate/react";
 import { useOrganizationId } from "hooks/useOrganizationId";
 import { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useNavigate } from "react-router-dom";
 import { pageTitle } from "utils/page";
-import { createGroupMachine } from "xServices/groups/createGroupXService";
 import CreateGroupPageView from "./CreateGroupPageView";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { createGroup } from "api/queries/groups";
 
 export const CreateGroupPage: FC = () => {
+  const queryClient = useQueryClient();
   const navigate = useNavigate();
   const organizationId = useOrganizationId();
-  const [createState, sendCreateEvent] = useMachine(createGroupMachine, {
-    context: {
-      organizationId,
-    },
-    actions: {
-      onCreate: (_, { data }) => {
-        navigate(`/groups/${data.id}`);
-      },
-    },
-  });
-  const { error } = createState.context;
+  const createGroupMutation = useMutation(createGroup(queryClient));
 
   return (
     <>
@@ -28,14 +19,15 @@ export const CreateGroupPage: FC = () => {
         <title>{pageTitle("Create Group")}</title>
       </Helmet>
       <CreateGroupPageView
-        onSubmit={(data) => {
-          sendCreateEvent({
-            type: "CREATE",
-            data,
+        onSubmit={async (data) => {
+          const newGroup = await createGroupMutation.mutateAsync({
+            organizationId,
+            ...data,
           });
+          navigate(`/groups/${newGroup.id}`);
         }}
-        formErrors={error}
-        isLoading={createState.matches("creatingGroup")}
+        formErrors={createGroupMutation.error}
+        isLoading={createGroupMutation.isLoading}
       />
     </>
   );
diff --git a/site/src/xServices/groups/createGroupXService.ts b/site/src/xServices/groups/createGroupXService.ts
deleted file mode 100644
index 69dc6b3f7e7f3..0000000000000
--- a/site/src/xServices/groups/createGroupXService.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { createGroup } from "api/api";
-import { CreateGroupRequest, Group } from "api/typesGenerated";
-import { createMachine, assign } from "xstate";
-
-export const createGroupMachine = createMachine(
-  {
-    id: "createGroupMachine",
-    schema: {
-      context: {} as {
-        organizationId: string;
-        error?: unknown;
-      },
-      services: {} as {
-        createGroup: {
-          data: Group;
-        };
-      },
-      events: {} as {
-        type: "CREATE";
-        data: CreateGroupRequest;
-      },
-    },
-    tsTypes: {} as import("./createGroupXService.typegen").Typegen0,
-    initial: "idle",
-    states: {
-      idle: {
-        on: {
-          CREATE: {
-            target: "creatingGroup",
-          },
-        },
-      },
-      creatingGroup: {
-        invoke: {
-          src: "createGroup",
-          onDone: {
-            target: "idle",
-            actions: ["onCreate"],
-          },
-          onError: {
-            target: "idle",
-            actions: ["assignError"],
-          },
-        },
-      },
-    },
-  },
-  {
-    services: {
-      createGroup: ({ organizationId }, { data }) =>
-        createGroup(organizationId, data),
-    },
-    actions: {
-      assignError: assign({
-        error: (_, event) => event.data,
-      }),
-    },
-  },
-);

From 7466c8b7b841be7e984858e6f5d9121ca23cd071 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 15 Sep 2023 13:28:34 +0000
Subject: [PATCH 3/7] Remove edit group service

---
 site/src/api/queries/groups.ts                |  29 ++++-
 .../pages/GroupsPage/SettingsGroupPage.tsx    |  47 ++++----
 .../src/xServices/groups/editGroupXService.ts | 100 ------------------
 3 files changed, 52 insertions(+), 124 deletions(-)
 delete mode 100644 site/src/xServices/groups/editGroupXService.ts

diff --git a/site/src/api/queries/groups.ts b/site/src/api/queries/groups.ts
index 67a6dab9adb2f..cf6eb7dbd3b99 100644
--- a/site/src/api/queries/groups.ts
+++ b/site/src/api/queries/groups.ts
@@ -1,6 +1,10 @@
 import { QueryClient } from "@tanstack/react-query";
 import * as API from "api/api";
-import { CreateGroupRequest } from "api/typesGenerated";
+import {
+  CreateGroupRequest,
+  Group,
+  PatchGroupRequest,
+} from "api/typesGenerated";
 
 export const groups = (organizationId: string) => {
   return {
@@ -9,6 +13,13 @@ export const groups = (organizationId: string) => {
   };
 };
 
+export const group = (groupId: string) => {
+  return {
+    queryKey: ["group", groupId],
+    queryFn: () => API.getGroup(groupId),
+  };
+};
+
 export const createGroup = (queryClient: QueryClient) => {
   return {
     mutationFn: ({
@@ -21,3 +32,19 @@ export const createGroup = (queryClient: QueryClient) => {
     },
   };
 };
+
+export const patchGroup = (queryClient: QueryClient) => {
+  return {
+    mutationFn: ({
+      groupId,
+      ...request
+    }: PatchGroupRequest & { groupId: string }) =>
+      API.patchGroup(groupId, request),
+    onSuccess: async (updatedGroup: Group) => {
+      await Promise.all([
+        queryClient.invalidateQueries(["groups"]),
+        queryClient.invalidateQueries(["group", updatedGroup.id]),
+      ]);
+    },
+  };
+};
diff --git a/site/src/pages/GroupsPage/SettingsGroupPage.tsx b/site/src/pages/GroupsPage/SettingsGroupPage.tsx
index d61bc5beac9d1..28ecb49080b76 100644
--- a/site/src/pages/GroupsPage/SettingsGroupPage.tsx
+++ b/site/src/pages/GroupsPage/SettingsGroupPage.tsx
@@ -1,33 +1,24 @@
-import { useMachine } from "@xstate/react";
 import { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useNavigate, useParams } from "react-router-dom";
 import { pageTitle } from "utils/page";
-import { editGroupMachine } from "xServices/groups/editGroupXService";
 import SettingsGroupPageView from "./SettingsGroupPageView";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { group, patchGroup } from "api/queries/groups";
+import { displayError } from "components/GlobalSnackbar/utils";
+import { getErrorMessage } from "api/errors";
 
 export const SettingsGroupPage: FC = () => {
-  const { groupId } = useParams();
-  if (!groupId) {
-    throw new Error("Group ID not defined.");
-  }
-
+  const { groupId } = useParams() as { groupId: string };
+  const queryClient = useQueryClient();
+  const groupQuery = useQuery(group(groupId));
+  const patchGroupMutation = useMutation(patchGroup(queryClient));
   const navigate = useNavigate();
 
   const navigateToGroup = () => {
     navigate(`/groups/${groupId}`);
   };
 
-  const [editState, sendEditEvent] = useMachine(editGroupMachine, {
-    context: {
-      groupId,
-    },
-    actions: {
-      onUpdate: navigateToGroup,
-    },
-  });
-  const { error, group } = editState.context;
-
   return (
     <>
       <Helmet>
@@ -36,13 +27,23 @@ export const SettingsGroupPage: FC = () => {
 
       <SettingsGroupPageView
         onCancel={navigateToGroup}
-        onSubmit={(data) => {
-          sendEditEvent({ type: "UPDATE", data });
+        onSubmit={async (data) => {
+          try {
+            await patchGroupMutation.mutateAsync({
+              groupId,
+              ...data,
+              add_users: [],
+              remove_users: [],
+            });
+            navigateToGroup();
+          } catch (error) {
+            displayError(getErrorMessage(error, "Failed to update group"));
+          }
         }}
-        group={group}
-        formErrors={error}
-        isLoading={editState.matches("loading")}
-        isUpdating={editState.matches("updating")}
+        group={groupQuery.data}
+        formErrors={groupQuery.error}
+        isLoading={groupQuery.isLoading}
+        isUpdating={patchGroupMutation.isLoading}
       />
     </>
   );
diff --git a/site/src/xServices/groups/editGroupXService.ts b/site/src/xServices/groups/editGroupXService.ts
deleted file mode 100644
index 755a4863e52e4..0000000000000
--- a/site/src/xServices/groups/editGroupXService.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import { getGroup, patchGroup } from "api/api";
-import { getErrorMessage } from "api/errors";
-import { Group } from "api/typesGenerated";
-import { displayError } from "components/GlobalSnackbar/utils";
-import { assign, createMachine } from "xstate";
-
-export const editGroupMachine = createMachine(
-  {
-    id: "editGroup",
-    schema: {
-      context: {} as {
-        groupId: string;
-        group?: Group;
-        error?: unknown;
-      },
-      services: {} as {
-        loadGroup: {
-          data: Group;
-        };
-        updateGroup: {
-          data: Group;
-        };
-      },
-      events: {} as {
-        type: "UPDATE";
-        data: {
-          display_name: string;
-          name: string;
-          avatar_url: string;
-          quota_allowance: number;
-        };
-      },
-    },
-    tsTypes: {} as import("./editGroupXService.typegen").Typegen0,
-    initial: "loading",
-    states: {
-      loading: {
-        invoke: {
-          src: "loadGroup",
-          onDone: {
-            actions: ["assignGroup"],
-            target: "idle",
-          },
-          onError: {
-            actions: ["displayLoadGroupError"],
-            target: "idle",
-          },
-        },
-      },
-      idle: {
-        on: {
-          UPDATE: {
-            target: "updating",
-          },
-        },
-      },
-      updating: {
-        invoke: {
-          src: "updateGroup",
-          onDone: {
-            actions: ["onUpdate"],
-          },
-          onError: {
-            target: "idle",
-            actions: ["assignError"],
-          },
-        },
-      },
-    },
-  },
-  {
-    services: {
-      loadGroup: ({ groupId }) => getGroup(groupId),
-
-      updateGroup: ({ group }, { data }) => {
-        if (!group) {
-          throw new Error("Group not defined.");
-        }
-
-        return patchGroup(group.id, {
-          ...data,
-          add_users: [],
-          remove_users: [],
-        });
-      },
-    },
-    actions: {
-      assignGroup: assign({
-        group: (_, { data }) => data,
-      }),
-      displayLoadGroupError: (_, { data }) => {
-        const message = getErrorMessage(data, "Failed to the group.");
-        displayError(message);
-      },
-      assignError: assign({
-        error: (_, event) => event.data,
-      }),
-    },
-  },
-);

From 93c0f378ce8ad72f9b61494ae3b6c3afcb5e3a2e Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 15 Sep 2023 16:23:49 +0000
Subject: [PATCH 4/7] Remove groups service

---
 site/src/api/api.ts                        |  18 ++
 site/src/api/queries/groups.ts             |  57 +++++
 site/src/pages/GroupsPage/GroupPage.tsx    | 216 +++++++++-------
 site/src/xServices/groups/groupXService.ts | 275 ---------------------
 4 files changed, 199 insertions(+), 367 deletions(-)
 delete mode 100644 site/src/xServices/groups/groupXService.ts

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
index 4c29b92017e00..d54bfce9894c7 100644
--- a/site/src/api/api.ts
+++ b/site/src/api/api.ts
@@ -954,6 +954,24 @@ export const patchGroup = async (
   return response.data;
 };
 
+export const addMember = async (groupId: string, userId: string) => {
+  return patchGroup(groupId, {
+    name: "",
+    display_name: "",
+    add_users: [userId],
+    remove_users: [],
+  });
+};
+
+export const removeMember = async (groupId: string, userId: string) => {
+  return patchGroup(groupId, {
+    name: "",
+    display_name: "",
+    add_users: [],
+    remove_users: [userId],
+  });
+};
+
 export const deleteGroup = async (groupId: string): Promise<void> => {
   await axios.delete(`/api/v2/groups/${groupId}`);
 };
diff --git a/site/src/api/queries/groups.ts b/site/src/api/queries/groups.ts
index cf6eb7dbd3b99..1368d4e251d7e 100644
--- a/site/src/api/queries/groups.ts
+++ b/site/src/api/queries/groups.ts
@@ -1,5 +1,6 @@
 import { QueryClient } from "@tanstack/react-query";
 import * as API from "api/api";
+import { checkAuthorization } from "api/api";
 import {
   CreateGroupRequest,
   Group,
@@ -20,6 +21,24 @@ export const group = (groupId: string) => {
   };
 };
 
+export const groupPermissions = (groupId: string) => {
+  return {
+    queryKey: ["group", groupId, "permissions"],
+    queryFn: () =>
+      checkAuthorization({
+        checks: {
+          canUpdateGroup: {
+            object: {
+              resource_type: "group",
+              resource_id: groupId,
+            },
+            action: "update",
+          },
+        },
+      }),
+  };
+};
+
 export const createGroup = (queryClient: QueryClient) => {
   return {
     mutationFn: ({
@@ -48,3 +67,41 @@ export const patchGroup = (queryClient: QueryClient) => {
     },
   };
 };
+
+export const deleteGroup = (queryClient: QueryClient) => {
+  return {
+    mutationFn: API.deleteGroup,
+    onSuccess: async (_: void, groupId: string) => {
+      await Promise.all([
+        queryClient.invalidateQueries(["groups"]),
+        queryClient.invalidateQueries(["group", groupId]),
+      ]);
+    },
+  };
+};
+
+export const addMember = (queryClient: QueryClient) => {
+  return {
+    mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
+      API.addMember(groupId, userId),
+    onSuccess: async (updatedGroup: Group) => {
+      await Promise.all([
+        queryClient.invalidateQueries(["groups"]),
+        queryClient.invalidateQueries(["group", updatedGroup.id]),
+      ]);
+    },
+  };
+};
+
+export const removeMember = (queryClient: QueryClient) => {
+  return {
+    mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
+      API.removeMember(groupId, userId),
+    onSuccess: async (updatedGroup: Group) => {
+      await Promise.all([
+        queryClient.invalidateQueries(["groups"]),
+        queryClient.invalidateQueries(["group", updatedGroup.id]),
+      ]);
+    },
+  };
+};
diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx
index f0dc74ce800de..908347a78947f 100644
--- a/site/src/pages/GroupsPage/GroupPage.tsx
+++ b/site/src/pages/GroupsPage/GroupPage.tsx
@@ -9,7 +9,6 @@ import TableRow from "@mui/material/TableRow";
 import DeleteOutline from "@mui/icons-material/DeleteOutline";
 import PersonAdd from "@mui/icons-material/PersonAdd";
 import SettingsOutlined from "@mui/icons-material/SettingsOutlined";
-import { useMachine } from "@xstate/react";
 import { User } from "api/typesGenerated";
 import { AvatarData } from "components/AvatarData/AvatarData";
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
@@ -30,7 +29,6 @@ import { useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { Link as RouterLink, useNavigate, useParams } from "react-router-dom";
 import { pageTitle } from "utils/page";
-import { groupMachine } from "xServices/groups/groupXService";
 import { Maybe } from "components/Conditionals/Maybe";
 import { makeStyles } from "@mui/styles";
 import {
@@ -39,76 +37,38 @@ import {
 } from "components/TableToolbar/TableToolbar";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { isEveryoneGroup } from "utils/groups";
-
-const AddGroupMember: React.FC<{
-  isLoading: boolean;
-  onSubmit: (user: User, reset: () => void) => void;
-}> = ({ isLoading, onSubmit }) => {
-  const [selectedUser, setSelectedUser] = useState<User | null>(null);
-  const styles = useStyles();
-
-  const resetValues = () => {
-    setSelectedUser(null);
-  };
-
-  return (
-    <form
-      onSubmit={(e) => {
-        e.preventDefault();
-
-        if (selectedUser) {
-          onSubmit(selectedUser, resetValues);
-        }
-      }}
-    >
-      <Stack direction="row" alignItems="center" spacing={1}>
-        <UserAutocomplete
-          className={styles.autoComplete}
-          value={selectedUser}
-          onChange={(newValue) => {
-            setSelectedUser(newValue);
-          }}
-        />
-
-        <LoadingButton
-          disabled={!selectedUser}
-          type="submit"
-          startIcon={<PersonAdd />}
-          loading={isLoading}
-        >
-          Add user
-        </LoadingButton>
-      </Stack>
-    </form>
-  );
-};
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  addMember,
+  deleteGroup,
+  group,
+  groupPermissions,
+  removeMember,
+} from "api/queries/groups";
+import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
+import { getErrorMessage } from "api/errors";
 
 export const GroupPage: React.FC = () => {
-  const { groupId } = useParams();
-  if (!groupId) {
-    throw new Error("groupId is not defined.");
-  }
-
+  const { groupId } = useParams() as { groupId: string };
+  const queryClient = useQueryClient();
   const navigate = useNavigate();
-  const [state, send] = useMachine(groupMachine, {
-    context: {
-      groupId,
-    },
-    actions: {
-      redirectToGroups: () => {
-        navigate("/groups");
-      },
-    },
-  });
-  const { group, permissions } = state.context;
-  const isLoading = group === undefined || permissions === undefined;
+  const groupQuery = useQuery(group(groupId));
+  const groupData = groupQuery.data;
+  const { data: permissions } = useQuery(groupPermissions(groupId));
+  const addMemberMutation = useMutation(addMember(queryClient));
+  const removeMemberMutation = useMutation(removeMember(queryClient));
+  const deleteGroupMutation = useMutation(deleteGroup(queryClient));
+  const [isDeletingGroup, setIsDeletinGroup] = useState(false);
+  const isLoading = !groupData || !permissions;
   const canUpdateGroup = permissions ? permissions.canUpdateGroup : false;
 
   return (
     <>
       <Helmet>
         <title>
-          {pageTitle((group?.display_name || group?.name) ?? "Loading...")}
+          {pageTitle(
+            (groupData?.display_name || groupData?.name) ?? "Loading...",
+          )}
         </title>
       </Helmet>
       <ChooseOne>
@@ -125,9 +85,9 @@ export const GroupPage: React.FC = () => {
                     <Button startIcon={<SettingsOutlined />}>Settings</Button>
                   </Link>
                   <Button
-                    disabled={group?.id === group?.organization_id}
+                    disabled={groupData?.id === groupData?.organization_id}
                     onClick={() => {
-                      send("DELETE");
+                      setIsDeletinGroup(true);
                     }}
                     startIcon={<DeleteOutline />}
                   >
@@ -137,12 +97,13 @@ export const GroupPage: React.FC = () => {
               }
             >
               <PageHeaderTitle>
-                {group?.display_name || group?.name}
+                {groupData?.display_name || groupData?.name}
               </PageHeaderTitle>
               <PageHeaderSubtitle>
                 {/* Show the name if it differs from the display name. */}
-                {group?.display_name && group?.display_name !== group?.name
-                  ? group?.name
+                {groupData?.display_name &&
+                groupData?.display_name !== groupData?.name
+                  ? groupData?.name
                   : ""}{" "}
               </PageHeaderSubtitle>
             </PageHeader>
@@ -151,26 +112,32 @@ export const GroupPage: React.FC = () => {
               <Maybe
                 condition={
                   canUpdateGroup &&
-                  group !== undefined &&
-                  !isEveryoneGroup(group)
+                  groupData !== undefined &&
+                  !isEveryoneGroup(groupData)
                 }
               >
                 <AddGroupMember
-                  isLoading={state.matches("addingMember")}
-                  onSubmit={(user, reset) => {
-                    send({
-                      type: "ADD_MEMBER",
-                      userId: user.id,
-                      callback: reset,
-                    });
+                  isLoading={addMemberMutation.isLoading}
+                  onSubmit={async (user, reset) => {
+                    try {
+                      await addMemberMutation.mutateAsync({
+                        groupId,
+                        userId: user.id,
+                      });
+                      reset();
+                    } catch (error) {
+                      displayError(
+                        getErrorMessage(error, "Failed to add member."),
+                      );
+                    }
                   }}
                 />
               </Maybe>
               <TableToolbar>
                 <PaginationStatus
                   isLoading={Boolean(isLoading)}
-                  showing={group?.members.length ?? 0}
-                  total={group?.members.length ?? 0}
+                  showing={groupData?.members.length ?? 0}
+                  total={groupData?.members.length ?? 0}
                   label="members"
                 />
               </TableToolbar>
@@ -186,7 +153,9 @@ export const GroupPage: React.FC = () => {
 
                   <TableBody>
                     <ChooseOne>
-                      <Cond condition={Boolean(group?.members.length === 0)}>
+                      <Cond
+                        condition={Boolean(groupData?.members.length === 0)}
+                      >
                         <TableRow>
                           <TableCell colSpan={999}>
                             <EmptyState
@@ -198,7 +167,7 @@ export const GroupPage: React.FC = () => {
                       </Cond>
 
                       <Cond>
-                        {group?.members.map((member) => (
+                        {groupData?.members.map((member) => (
                           <TableRow key={member.id}>
                             <TableCell width="99%">
                               <AvatarData
@@ -219,14 +188,29 @@ export const GroupPage: React.FC = () => {
                                   menuItems={[
                                     {
                                       label: "Remove",
-                                      onClick: () => {
-                                        send({
-                                          type: "REMOVE_MEMBER",
-                                          userId: member.id,
-                                        });
+                                      onClick: async () => {
+                                        try {
+                                          await removeMemberMutation.mutateAsync(
+                                            {
+                                              groupId,
+                                              userId: member.id,
+                                            },
+                                          );
+                                          displaySuccess(
+                                            "Member removed successfully.",
+                                          );
+                                        } catch (error) {
+                                          displayError(
+                                            getErrorMessage(
+                                              error,
+                                              "Failed to remove member.",
+                                            ),
+                                          );
+                                        }
                                       },
                                       disabled:
-                                        group.id === group.organization_id,
+                                        groupData.id ===
+                                        groupData.organization_id,
                                     },
                                   ]}
                                 />
@@ -246,15 +230,20 @@ export const GroupPage: React.FC = () => {
 
       {group && (
         <DeleteDialog
-          isOpen={state.matches("confirmingDelete")}
-          confirmLoading={state.matches("deleting")}
+          isOpen={isDeletingGroup}
+          confirmLoading={deleteGroupMutation.isLoading}
           name={group.name}
           entity="group"
-          onConfirm={() => {
-            send("CONFIRM_DELETE");
+          onConfirm={async () => {
+            try {
+              await deleteGroupMutation.mutateAsync(groupId);
+              navigate("/groups");
+            } catch (error) {
+              displayError(getErrorMessage(error, "Failed to delete group."));
+            }
           }}
           onCancel={() => {
-            send("CANCEL_DELETE");
+            setIsDeletinGroup(false);
           }}
         />
       )}
@@ -268,4 +257,47 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
+const AddGroupMember: React.FC<{
+  isLoading: boolean;
+  onSubmit: (user: User, reset: () => void) => void;
+}> = ({ isLoading, onSubmit }) => {
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+  const styles = useStyles();
+
+  const resetValues = () => {
+    setSelectedUser(null);
+  };
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+
+        if (selectedUser) {
+          onSubmit(selectedUser, resetValues);
+        }
+      }}
+    >
+      <Stack direction="row" alignItems="center" spacing={1}>
+        <UserAutocomplete
+          className={styles.autoComplete}
+          value={selectedUser}
+          onChange={(newValue) => {
+            setSelectedUser(newValue);
+          }}
+        />
+
+        <LoadingButton
+          disabled={!selectedUser}
+          type="submit"
+          startIcon={<PersonAdd />}
+          loading={isLoading}
+        >
+          Add user
+        </LoadingButton>
+      </Stack>
+    </form>
+  );
+};
+
 export default GroupPage;
diff --git a/site/src/xServices/groups/groupXService.ts b/site/src/xServices/groups/groupXService.ts
deleted file mode 100644
index 8d33d06700f45..0000000000000
--- a/site/src/xServices/groups/groupXService.ts
+++ /dev/null
@@ -1,275 +0,0 @@
-import { deleteGroup, getGroup, patchGroup, checkAuthorization } from "api/api";
-import { getErrorMessage } from "api/errors";
-import { AuthorizationResponse, Group } from "api/typesGenerated";
-import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
-import { assign, createMachine } from "xstate";
-
-export const groupMachine = createMachine(
-  {
-    id: "group",
-    schema: {
-      context: {} as {
-        groupId: string;
-        group?: Group;
-        permissions?: AuthorizationResponse;
-        addMemberCallback?: () => void;
-        removingMember?: string;
-      },
-      services: {} as {
-        loadGroup: {
-          data: Group;
-        };
-        loadPermissions: {
-          data: AuthorizationResponse;
-        };
-        addMember: {
-          data: Group;
-        };
-        removeMember: {
-          data: Group;
-        };
-        deleteGroup: {
-          data: unknown;
-        };
-      },
-      events: {} as
-        | {
-            type: "ADD_MEMBER";
-            userId: string;
-            callback: () => void;
-          }
-        | {
-            type: "REMOVE_MEMBER";
-            userId: string;
-          }
-        | {
-            type: "DELETE";
-          }
-        | {
-            type: "CONFIRM_DELETE";
-          }
-        | {
-            type: "CANCEL_DELETE";
-          },
-    },
-    tsTypes: {} as import("./groupXService.typegen").Typegen0,
-    initial: "loading",
-    states: {
-      loading: {
-        type: "parallel",
-        states: {
-          data: {
-            initial: "loading",
-            states: {
-              loading: {
-                invoke: {
-                  src: "loadGroup",
-                  onDone: {
-                    actions: ["assignGroup"],
-                    target: "success",
-                  },
-                  onError: {
-                    actions: ["displayLoadGroupError"],
-                  },
-                },
-              },
-              success: {
-                type: "final",
-              },
-            },
-          },
-          permissions: {
-            initial: "loading",
-            states: {
-              loading: {
-                invoke: {
-                  src: "loadPermissions",
-                  onDone: {
-                    actions: ["assignPermissions"],
-                    target: "success",
-                  },
-                  onError: {
-                    actions: ["displayLoadPermissionsError"],
-                  },
-                },
-              },
-              success: {
-                type: "final",
-              },
-            },
-          },
-        },
-        onDone: "idle",
-      },
-      idle: {
-        on: {
-          ADD_MEMBER: {
-            target: "addingMember",
-            actions: ["assignAddMemberCallback"],
-          },
-          REMOVE_MEMBER: {
-            target: "removingMember",
-            actions: ["removeUserFromMembers"],
-          },
-          DELETE: {
-            target: "confirmingDelete",
-          },
-        },
-      },
-      addingMember: {
-        invoke: {
-          src: "addMember",
-          onDone: {
-            actions: ["assignGroup", "callAddMemberCallback"],
-            target: "idle",
-          },
-          onError: {
-            target: "idle",
-            actions: ["displayAddMemberError"],
-          },
-        },
-      },
-      removingMember: {
-        invoke: {
-          src: "removeMember",
-          onDone: {
-            actions: ["assignGroup", "displayRemoveMemberSuccess"],
-            target: "idle",
-          },
-          onError: {
-            target: "idle",
-            actions: ["displayRemoveMemberError"],
-          },
-        },
-      },
-      confirmingDelete: {
-        on: {
-          CONFIRM_DELETE: "deleting",
-          CANCEL_DELETE: "idle",
-        },
-      },
-      deleting: {
-        invoke: {
-          src: "deleteGroup",
-          onDone: {
-            actions: ["redirectToGroups"],
-          },
-          onError: {
-            actions: ["displayDeleteGroupError"],
-          },
-        },
-      },
-    },
-  },
-  {
-    services: {
-      loadGroup: ({ groupId }) => getGroup(groupId),
-      loadPermissions: ({ groupId }) =>
-        checkAuthorization({
-          checks: {
-            canUpdateGroup: {
-              object: {
-                resource_type: "group",
-                resource_id: groupId,
-              },
-              action: "update",
-            },
-          },
-        }),
-      addMember: ({ group }, { userId }) => {
-        if (!group) {
-          throw new Error("Group not defined.");
-        }
-
-        return patchGroup(group.id, {
-          name: "",
-          display_name: "",
-          add_users: [userId],
-          remove_users: [],
-        });
-      },
-      removeMember: ({ group }, { userId }) => {
-        if (!group) {
-          throw new Error("Group not defined.");
-        }
-
-        return patchGroup(group.id, {
-          name: "",
-          display_name: "",
-          add_users: [],
-          remove_users: [userId],
-        });
-      },
-      deleteGroup: ({ group }) => {
-        if (!group) {
-          throw new Error("Group not defined.");
-        }
-
-        return deleteGroup(group.id);
-      },
-    },
-    actions: {
-      assignGroup: assign({
-        group: (_, { data }) => data,
-      }),
-      assignAddMemberCallback: assign({
-        addMemberCallback: (_, { callback }) => callback,
-      }),
-      displayLoadGroupError: (_, { data }) => {
-        const message = getErrorMessage(data, "Failed to load the group.");
-        displayError(message);
-      },
-      displayAddMemberError: (_, { data }) => {
-        const message = getErrorMessage(
-          data,
-          "Failed to add member to the group.",
-        );
-        displayError(message);
-      },
-      callAddMemberCallback: ({ addMemberCallback }) => {
-        if (addMemberCallback) {
-          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.");
-      },
-      displayDeleteGroupError: (_, { data }) => {
-        const message = getErrorMessage(data, "Failed to delete group.");
-        displayError(message);
-      },
-      assignPermissions: assign({
-        permissions: (_, { data }) => data,
-      }),
-      displayLoadPermissionsError: (_, { data }) => {
-        const message = getErrorMessage(
-          data,
-          "Failed to load the permissions.",
-        );
-        displayError(message);
-      },
-    },
-  },
-);

From 9bfb06e9a825bfdd1b190f37dd284a231707d313 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 15 Sep 2023 16:27:53 +0000
Subject: [PATCH 5/7] Refactor queries a bit

---
 site/src/api/queries/groups.ts | 50 +++++++++++++++-------------------
 1 file changed, 22 insertions(+), 28 deletions(-)

diff --git a/site/src/api/queries/groups.ts b/site/src/api/queries/groups.ts
index 1368d4e251d7e..62b59515df0df 100644
--- a/site/src/api/queries/groups.ts
+++ b/site/src/api/queries/groups.ts
@@ -7,23 +7,27 @@ import {
   PatchGroupRequest,
 } from "api/typesGenerated";
 
+const GROUPS_QUERY_KEY = ["groups"];
+
+const getGroupQueryKey = (groupId: string) => ["group", groupId];
+
 export const groups = (organizationId: string) => {
   return {
-    queryKey: ["groups"],
+    queryKey: GROUPS_QUERY_KEY,
     queryFn: () => API.getGroups(organizationId),
   };
 };
 
 export const group = (groupId: string) => {
   return {
-    queryKey: ["group", groupId],
+    queryKey: getGroupQueryKey(groupId),
     queryFn: () => API.getGroup(groupId),
   };
 };
 
 export const groupPermissions = (groupId: string) => {
   return {
-    queryKey: ["group", groupId, "permissions"],
+    queryKey: [...getGroupQueryKey(groupId), "permissions"],
     queryFn: () =>
       checkAuthorization({
         checks: {
@@ -47,7 +51,7 @@ export const createGroup = (queryClient: QueryClient) => {
     }: CreateGroupRequest & { organizationId: string }) =>
       API.createGroup(organizationId, request),
     onSuccess: async () => {
-      await queryClient.invalidateQueries(["groups"]);
+      await queryClient.invalidateQueries(GROUPS_QUERY_KEY);
     },
   };
 };
@@ -59,24 +63,16 @@ export const patchGroup = (queryClient: QueryClient) => {
       ...request
     }: PatchGroupRequest & { groupId: string }) =>
       API.patchGroup(groupId, request),
-    onSuccess: async (updatedGroup: Group) => {
-      await Promise.all([
-        queryClient.invalidateQueries(["groups"]),
-        queryClient.invalidateQueries(["group", updatedGroup.id]),
-      ]);
-    },
+    onSuccess: async (updatedGroup: Group) =>
+      invalidateGroup(queryClient, updatedGroup.id),
   };
 };
 
 export const deleteGroup = (queryClient: QueryClient) => {
   return {
     mutationFn: API.deleteGroup,
-    onSuccess: async (_: void, groupId: string) => {
-      await Promise.all([
-        queryClient.invalidateQueries(["groups"]),
-        queryClient.invalidateQueries(["group", groupId]),
-      ]);
-    },
+    onSuccess: async (_: void, groupId: string) =>
+      invalidateGroup(queryClient, groupId),
   };
 };
 
@@ -84,12 +80,8 @@ export const addMember = (queryClient: QueryClient) => {
   return {
     mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
       API.addMember(groupId, userId),
-    onSuccess: async (updatedGroup: Group) => {
-      await Promise.all([
-        queryClient.invalidateQueries(["groups"]),
-        queryClient.invalidateQueries(["group", updatedGroup.id]),
-      ]);
-    },
+    onSuccess: async (updatedGroup: Group) =>
+      invalidateGroup(queryClient, updatedGroup.id),
   };
 };
 
@@ -97,11 +89,13 @@ export const removeMember = (queryClient: QueryClient) => {
   return {
     mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
       API.removeMember(groupId, userId),
-    onSuccess: async (updatedGroup: Group) => {
-      await Promise.all([
-        queryClient.invalidateQueries(["groups"]),
-        queryClient.invalidateQueries(["group", updatedGroup.id]),
-      ]);
-    },
+    onSuccess: async (updatedGroup: Group) =>
+      invalidateGroup(queryClient, updatedGroup.id),
   };
 };
+
+export const invalidateGroup = (queryClient: QueryClient, groupId: string) =>
+  Promise.all([
+    queryClient.invalidateQueries(GROUPS_QUERY_KEY),
+    queryClient.invalidateQueries(getGroupQueryKey(groupId)),
+  ]);

From ac005c1d0ca455713329af53c0cd3adee93593ed Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 18 Sep 2023 18:34:02 +0000
Subject: [PATCH 6/7] Fix verbiage

---
 site/src/pages/GroupsPage/GroupPage.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx
index 908347a78947f..265d03e093670 100644
--- a/site/src/pages/GroupsPage/GroupPage.tsx
+++ b/site/src/pages/GroupsPage/GroupPage.tsx
@@ -58,7 +58,7 @@ export const GroupPage: React.FC = () => {
   const addMemberMutation = useMutation(addMember(queryClient));
   const removeMemberMutation = useMutation(removeMember(queryClient));
   const deleteGroupMutation = useMutation(deleteGroup(queryClient));
-  const [isDeletingGroup, setIsDeletinGroup] = useState(false);
+  const [isDeletingGroup, setIsDeletingGroup] = useState(false);
   const isLoading = !groupData || !permissions;
   const canUpdateGroup = permissions ? permissions.canUpdateGroup : false;
 
@@ -87,7 +87,7 @@ export const GroupPage: React.FC = () => {
                   <Button
                     disabled={groupData?.id === groupData?.organization_id}
                     onClick={() => {
-                      setIsDeletinGroup(true);
+                      setIsDeletingGroup(true);
                     }}
                     startIcon={<DeleteOutline />}
                   >
@@ -243,7 +243,7 @@ export const GroupPage: React.FC = () => {
             }
           }}
           onCancel={() => {
-            setIsDeletinGroup(false);
+            setIsDeletingGroup(false);
           }}
         />
       )}

From 0871f2d67ec3764726aea098cb87533192d2b34d Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 19 Sep 2023 16:25:17 +0000
Subject: [PATCH 7/7] Move removeGroupMember into GroupMemberRow component

---
 site/src/pages/GroupsPage/GroupPage.tsx | 123 +++++++++++++-----------
 1 file changed, 66 insertions(+), 57 deletions(-)

diff --git a/site/src/pages/GroupsPage/GroupPage.tsx b/site/src/pages/GroupsPage/GroupPage.tsx
index 265d03e093670..162a273984ae2 100644
--- a/site/src/pages/GroupsPage/GroupPage.tsx
+++ b/site/src/pages/GroupsPage/GroupPage.tsx
@@ -9,7 +9,7 @@ import TableRow from "@mui/material/TableRow";
 import DeleteOutline from "@mui/icons-material/DeleteOutline";
 import PersonAdd from "@mui/icons-material/PersonAdd";
 import SettingsOutlined from "@mui/icons-material/SettingsOutlined";
-import { User } from "api/typesGenerated";
+import { Group, User } from "api/typesGenerated";
 import { AvatarData } from "components/AvatarData/AvatarData";
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
@@ -56,7 +56,6 @@ export const GroupPage: React.FC = () => {
   const groupData = groupQuery.data;
   const { data: permissions } = useQuery(groupPermissions(groupId));
   const addMemberMutation = useMutation(addMember(queryClient));
-  const removeMemberMutation = useMutation(removeMember(queryClient));
   const deleteGroupMutation = useMutation(deleteGroup(queryClient));
   const [isDeletingGroup, setIsDeletingGroup] = useState(false);
   const isLoading = !groupData || !permissions;
@@ -168,55 +167,12 @@ export const GroupPage: React.FC = () => {
 
                       <Cond>
                         {groupData?.members.map((member) => (
-                          <TableRow key={member.id}>
-                            <TableCell width="99%">
-                              <AvatarData
-                                avatar={
-                                  <UserAvatar
-                                    username={member.username}
-                                    avatarURL={member.avatar_url}
-                                  />
-                                }
-                                title={member.username}
-                                subtitle={member.email}
-                              />
-                            </TableCell>
-                            <TableCell width="1%">
-                              <Maybe condition={canUpdateGroup}>
-                                <TableRowMenu
-                                  data={member}
-                                  menuItems={[
-                                    {
-                                      label: "Remove",
-                                      onClick: async () => {
-                                        try {
-                                          await removeMemberMutation.mutateAsync(
-                                            {
-                                              groupId,
-                                              userId: member.id,
-                                            },
-                                          );
-                                          displaySuccess(
-                                            "Member removed successfully.",
-                                          );
-                                        } catch (error) {
-                                          displayError(
-                                            getErrorMessage(
-                                              error,
-                                              "Failed to remove member.",
-                                            ),
-                                          );
-                                        }
-                                      },
-                                      disabled:
-                                        groupData.id ===
-                                        groupData.organization_id,
-                                    },
-                                  ]}
-                                />
-                              </Maybe>
-                            </TableCell>
-                          </TableRow>
+                          <GroupMemberRow
+                            member={member}
+                            group={groupData}
+                            key={member.id}
+                            canUpdate={canUpdateGroup}
+                          />
                         ))}
                       </Cond>
                     </ChooseOne>
@@ -251,12 +207,6 @@ export const GroupPage: React.FC = () => {
   );
 };
 
-const useStyles = makeStyles(() => ({
-  autoComplete: {
-    width: 300,
-  },
-}));
-
 const AddGroupMember: React.FC<{
   isLoading: boolean;
   onSubmit: (user: User, reset: () => void) => void;
@@ -300,4 +250,63 @@ const AddGroupMember: React.FC<{
   );
 };
 
+const GroupMemberRow = (props: {
+  member: User;
+  group: Group;
+  canUpdate: boolean;
+}) => {
+  const { member, group, canUpdate } = props;
+  const queryClient = useQueryClient();
+  const removeMemberMutation = useMutation(removeMember(queryClient));
+
+  return (
+    <TableRow key={member.id}>
+      <TableCell width="99%">
+        <AvatarData
+          avatar={
+            <UserAvatar
+              username={member.username}
+              avatarURL={member.avatar_url}
+            />
+          }
+          title={member.username}
+          subtitle={member.email}
+        />
+      </TableCell>
+      <TableCell width="1%">
+        <Maybe condition={canUpdate}>
+          <TableRowMenu
+            data={member}
+            menuItems={[
+              {
+                label: "Remove",
+                onClick: async () => {
+                  try {
+                    await removeMemberMutation.mutateAsync({
+                      groupId: group.id,
+                      userId: member.id,
+                    });
+                    displaySuccess("Member removed successfully.");
+                  } catch (error) {
+                    displayError(
+                      getErrorMessage(error, "Failed to remove member."),
+                    );
+                  }
+                },
+                disabled: group.id === group.organization_id,
+              },
+            ]}
+          />
+        </Maybe>
+      </TableCell>
+    </TableRow>
+  );
+};
+
+const useStyles = makeStyles(() => ({
+  autoComplete: {
+    width: 300,
+  },
+}));
+
 export default GroupPage;

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/9701.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/9701.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/9701.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/9701.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>