Adding possibility to delete a user from an instance only if allowed

src/packages/ce/src/member/components/MemberDataTableComponent.tsx

@@ -1,22 +1,7 @@
 import React from "react";
 import {DataTable, DataTableColumn, Text, useService, useStore} from "@code0-tech/pictor";
 import {DataTableFilterProps, DataTableSortProps} from "@code0-tech/pictor/dist/components/data-table/DataTable";
-import {
-    Namespace,
-    NamespaceMember,
-    NamespaceProject,
-    NamespaceRole,
-    Runtime,
-    User
-} from "@code0-tech/sagittarius-graphql-types";
-import {ProjectService} from "@edition/project/services/Project.service";
-import {ProjectDataTableRowComponent} from "@edition/project/components/ProjectDataTableRowComponent";
-import {RoleService} from "@edition/role/services/Role.service";
-import {RoleDataTableRowComponent} from "@edition/role/components/RoleDataTableRowComponent";
-import {RuntimeService} from "@edition/runtime/services/Runtime.service";
-import {RuntimeDataTableRowComponent} from "@edition/runtime/components/RuntimeDataTableRowComponent";
-import {UserDataTableRowComponent} from "@edition/user/components/UserDataTableRowComponent";
-import {UserService} from "@edition/user/services/User.service";
+import {Namespace, NamespaceMember} from "@code0-tech/sagittarius-graphql-types";
 import {MemberService} from "@edition/member/services/Member.service";
 import {MemberDataTableRowComponent} from "@edition/member/components/MemberDataTableRowComponent";
 

src/packages/ce/src/user/components/UserDataTableRowComponent.tsx

@@ -1,8 +1,21 @@
-import React from "react";
+import React, {startTransition} from "react";
 import {User} from "@code0-tech/sagittarius-graphql-types";
-import {Avatar, Badge, DataTableColumn, Flex, Text, useService, useStore} from "@code0-tech/pictor";
+import {
+    Avatar,
+    Badge,
+    Button,
+    DataTableColumn, Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTrigger,
+    Flex,
+    Menu, MenuContent, MenuPortal,
+    MenuTrigger, Spacing,
+    Text,
+    useService,
+    useStore
+} from "@code0-tech/pictor";
 import {formatDistanceToNow} from "date-fns";
 import {UserService} from "@edition/user/services/User.service";
+import {useUserSession} from "@edition/user/hooks/User.session.hook";
+import {IconDotsVertical, IconX} from "@tabler/icons-react";
 
 export interface UserDataTableRowComponentProps {
     userId: User['id']
@@ -20,6 +33,15 @@ export const UserDataTableRowComponent: React.FC<UserDataTableRowComponentProps>
         [userStore, userId]
     )
 
+    const userDelete = React.useCallback(() => {
+        if (!userId) return
+        startTransition(() => {
+            userService.userDelete({
+                userId: userId
+            })
+        })
+    }, [userId, userService])
+
     return <>
         <DataTableColumn>
             <Flex style={{flexDirection: "column", gap: "1.3rem"}}>
@@ -44,5 +66,38 @@ export const UserDataTableRowComponent: React.FC<UserDataTableRowComponentProps>
                 </Text>
             </Flex>
         </DataTableColumn>
+        <DataTableColumn>
+            {user?.userAbilities?.deleteUser ? (
+                <Dialog>
+                    <DialogTrigger asChild>
+                        <Button color="error">
+                            <IconX size={16}/>
+                        </Button>
+                    </DialogTrigger>
+                    <DialogPortal>
+                        <DialogOverlay/>
+                        <DialogContent showCloseButton title={"Remove user permanently"}>
+                            <Spacing spacing={"xl"}/>
+                            <Text size={"md"} hierarchy={"secondary"}>
+                                Are you sure you want to remove {" "}
+                                <Badge color={"info"}>
+                                    <Text size={"md"} style={{color: "inherit"}}>@{user?.username}</Text>
+                                </Badge>?
+                            </Text>
+                            <Spacing spacing={"xl"}/>
+                            <Flex justify={"space-between"} align={"center"}>
+                                <DialogClose asChild>
+                                    <Button color={"tertiary"}>No, go back!</Button>
+                                </DialogClose>
+                                <DialogClose asChild>
+                                    <Button color={"error"} onClick={userDelete}>Yes, remove!</Button>
+                                </DialogClose>
+                            </Flex>
+                        </DialogContent>
+                    </DialogPortal>
+                </Dialog>
+
+            ) : null}
+        </DataTableColumn>
     </>
 }

src/packages/ce/src/user/services/User.service.ts

@@ -2,7 +2,7 @@ import {ReactiveArrayService, ReactiveArrayStore} from "@code0-tech/pictor";
 import {
     Mutation,
     Query,
-    User,
+    User, UsersDeleteInput, UsersDeletePayload,
     UsersEmailVerificationInput,
     UsersEmailVerificationPayload,
     UsersIdentityLinkInput,
@@ -37,9 +37,11 @@ import registerMutation from "./mutations/User.register.mutation.graphql";
 import emailVerificationMutation from "./mutations/User.emailVerification.mutation.graphql";
 import passwordResetMutation from "./mutations/User.passwordReset.mutation.graphql"
 import passwordResetRequestMutation from "./mutations/User.passwordResetRequest.mutation.graphql"
+import deleteMutation from "./mutations/User.delete.mutation.graphql"
 import usersQuery from "./queries/Users.query.graphql";
 import userByUsernameQuery from "./queries/User.byUsername.query.graphql";
 import userByIdQuery from "./queries/User.byId.query.graphql";
+
 import {View} from "@code0-tech/pictor/dist/utils/view";
 import {UserView} from "@edition/user/services/User.view";
 
@@ -239,4 +241,24 @@ export class UserService extends ReactiveArrayService<UserView> {
         return result.data?.usersRegister ?? undefined
     }
 
+    async userDelete(payload: UsersDeleteInput): Promise<UsersDeletePayload | undefined> {
+
+        const result = await this.client.mutate<Mutation, UsersDeleteInput>({
+            mutation: deleteMutation,
+            variables: {
+                ...payload
+            }
+        })
+
+        if (result.data && result.data.usersDelete && result.data.usersDelete.user) {
+            const user = result.data.usersDelete.user
+            const index = this.values().findIndex(u => u.id === user.id)
+            this.delete(index)
+
+        }
+
+        return result.data?.usersDelete ?? undefined
+
+    }
+
 }

src/packages/ce/src/user/services/fragments/User.basic.fragment.graphql

@@ -16,5 +16,6 @@ fragment UserBasic on User {
     userAbilities {
         updateUser
         manageMfa
+        deleteUser
     }
 }

src/packages/ce/src/user/services/fragments/User.fragment.graphql

@@ -38,5 +38,6 @@ fragment User on User {
     userAbilities {
         updateUser
         manageMfa
+        deleteUser
     }
 }

src/packages/ce/src/user/services/mutations/User.delete.mutation.graphql

@@ -0,0 +1,17 @@
+mutation delete($userId: UserID!) {
+    usersDelete(input: {
+        userId: $userId
+    }) {
+        errors {
+            ...on Error {
+                errorCode,
+                details {
+                    __typename
+                }
+            }
+        }
+        user {
+            id
+        }
+    }
+}