feat: delete workspace member (#987)

* add delete user endpoint (server)

* delete user (UI)

* prevent token generation

* more checks

apps/client/src/features/workspace/components/members/components/members-action-menu.tsx

@@ -0,0 +1,66 @@
+import { Menu, ActionIcon, Text } from "@mantine/core";
+import React from "react";
+import { IconDots, IconTrash } from "@tabler/icons-react";
+import { modals } from "@mantine/modals";
+import { useDeleteWorkspaceMemberMutation } from "@/features/workspace/queries/workspace-query.ts";
+import { useTranslation } from "react-i18next";
+import useUserRole from "@/hooks/use-user-role.tsx";
+
+interface Props {
+  userId: string;
+}
+export default function MemberActionMenu({ userId }: Props) {
+  const { t } = useTranslation();
+  const deleteWorkspaceMemberMutation = useDeleteWorkspaceMemberMutation();
+  const { isAdmin } = useUserRole();
+
+  const onRevoke = async () => {
+    await deleteWorkspaceMemberMutation.mutateAsync({ userId });
+  };
+
+  const openRevokeModal = () =>
+    modals.openConfirmModal({
+      title: t("Delete member"),
+      children: (
+        <Text size="sm">
+          {t(
+            "Are you sure you want to delete this workspace member? This action is irreversible.",
+          )}
+        </Text>
+      ),
+      centered: true,
+      labels: { confirm: t("Delete"), cancel: t("Don't") },
+      confirmProps: { color: "red" },
+      onConfirm: onRevoke,
+    });
+
+  return (
+    <>
+      <Menu
+        shadow="xl"
+        position="bottom-end"
+        offset={20}
+        width={200}
+        withArrow
+        arrowPosition="center"
+      >
+        <Menu.Target>
+          <ActionIcon variant="subtle" c="gray">
+            <IconDots size={20} stroke={2} />
+          </ActionIcon>
+        </Menu.Target>
+
+        <Menu.Dropdown>
+          <Menu.Item
+            c="red"
+            onClick={openRevokeModal}
+            leftSection={<IconTrash size={16} />}
+            disabled={!isAdmin}
+          >
+            {t("Delete member")}
+          </Menu.Item>
+        </Menu.Dropdown>
+      </Menu>
+    </>
+  );
+}

apps/client/src/features/workspace/components/members/components/workspace-members-table.tsx

@@ -17,6 +17,8 @@ import Paginate from "@/components/common/paginate.tsx";
 import { SearchInput } from "@/components/common/search-input.tsx";
 import NoTableResults from "@/components/common/no-table-results.tsx";
 import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search.tsx";
+import InviteActionMenu from "@/features/workspace/components/members/components/invite-action-menu.tsx";
+import MemberActionMenu from "@/features/workspace/components/members/components/members-action-menu.tsx";
 
 export default function WorkspaceMembersTable() {
   const { t } = useTranslation();
@@ -96,6 +98,9 @@ export default function WorkspaceMembersTable() {
                       disabled={!isAdmin}
                     />
                   </Table.Td>
+                  <Table.Td>
+                    {isAdmin && <MemberActionMenu userId={user.id} />}
+                  </Table.Td>
                 </Table.Tr>
               ))
             ) : (

apps/client/src/features/workspace/queries/workspace-query.ts

@@ -16,6 +16,7 @@ import {
   getWorkspace,
   getWorkspacePublicData,
   getAppVersion,
+  deleteWorkspaceMember,
 } from "@/features/workspace/services/workspace-service";
 import { IPagination, QueryParams } from "@/lib/types.ts";
 import { notifications } from "@mantine/notifications";
@@ -56,6 +57,30 @@ export function useWorkspaceMembersQuery(
   });
 }
 
+export function useDeleteWorkspaceMemberMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation<
+    void,
+    Error,
+    {
+      userId: string;
+    }
+  >({
+    mutationFn: (data) => deleteWorkspaceMember(data),
+    onSuccess: (data, variables) => {
+      notifications.show({ message: "Member deleted successfully" });
+      queryClient.invalidateQueries({
+        queryKey: ["workspaceMembers"],
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({ message: errorMessage, color: "red" });
+    },
+  });
+}
+
 export function useChangeMemberRoleMutation() {
   const queryClient = useQueryClient();
 

apps/client/src/features/workspace/services/workspace-service.ts

@@ -36,6 +36,12 @@ export async function getWorkspaceMembers(
   return req.data;
 }
 
+export async function deleteWorkspaceMember(data: {
+  userId: string;
+}): Promise<void> {
+  await api.post("/workspace/members/delete", data);
+}
+
 export async function updateWorkspace(data: Partial<IWorkspace>) {
   const req = await api.post<IWorkspace>("/workspace/update", data);
   return req.data;