'use client' import React, { MouseEventHandler, useEffect, useState } from 'react' import moment from 'moment' import { toast } from 'sonner' import { useQuery } from 'urql' import { DEFAULT_PAGE_SIZE } from '@/lib/constants' import { graphql } from '@/lib/gql/generates' import type { ListUsersQuery } from '@/lib/gql/generates/graphql' import { useCopyToClipboard } from '@/lib/hooks/use-copy-to-clipboard' import { useMe } from '@/lib/hooks/use-me' import { QueryVariables, useMutation } from '@/lib/tabby/gql' import { listSecuredUsers } from '@/lib/tabby/query' import type { ArrayElementType } from '@/lib/types' import { cn } from '@/lib/utils' import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog' import { Badge } from '@/components/ui/badge' import { Button, buttonVariants } from '@/components/ui/button' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu' import { IconInfoCircled, IconMore, IconSpinner } from '@/components/ui/icons' import { Pagination, PaginationContent, PaginationItem, PaginationNext, PaginationPrevious } from '@/components/ui/pagination' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip' import LoadingWrapper from '@/components/loading-wrapper' import { UpdateUserRoleDialog } from './user-role-dialog' const updateUserActiveMutation = graphql(/* GraphQL */ ` mutation UpdateUserActive($id: ID!, $active: Boolean!) { updateUserActive(id: $id, active: $active) } `) const generateResetPasswordUrlMutation = graphql(/* GraphQL */ ` mutation generateResetPasswordUrl($userId: ID!) { generateResetPasswordUrl(userId: $userId) } `) type UserNode = ArrayElementType['node'] const PAGE_SIZE = DEFAULT_PAGE_SIZE export default function UsersTable() { const [{ data: me }] = useMe() const [queryVariables, setQueryVariables] = React.useState< QueryVariables >({ first: PAGE_SIZE }) const [{ data, error, fetching }, reexecuteQuery] = useQuery({ query: listSecuredUsers, variables: queryVariables }) const [users, setUsers] = React.useState() const [currentUser, setCurrentUser] = React.useState() const [updateRoleVisible, setUpdateRoleVisible] = React.useState(false) const [isPromote, setIsPromote] = React.useState(false) React.useEffect(() => { const _users = data?.users if (_users?.edges?.length) { setUsers(_users) } }, [data]) React.useEffect(() => { if (error?.message) { toast.error(error.message) } }, [error]) const updateUserActive = useMutation(updateUserActiveMutation) const onUpdateUserActive = (node: UserNode, active: boolean) => { updateUserActive({ id: node.id, active }).then(response => { if (response?.error || !response?.data?.updateUserActive) { toast.error( response?.error?.message || `${active ? 'activate' : 'deactivate'} failed` ) return } reexecuteQuery() }) } const onUpdateUserRole = (node: UserNode) => { setCurrentUser(node) setUpdateRoleVisible(true) setIsPromote(!node.isAdmin) } const pageInfo = users?.pageInfo const makeBadge = (node: UserNode) => node.isOwner ? ( OWNER ) : node.isAdmin ? ( ADMIN ) : ( MEMBER ) return ( <> {!!users?.edges?.length && ( <> Name Email Joined Status Level {users.edges.map(x => { const showOperation = !x.node.isOwner && me?.me?.isAdmin && x.node.id !== me.me.id return ( {x.node.name} {x.node.email} {moment.utc(x.node.createdAt).fromNow()} {x.node.active ? ( Active ) : ( Inactive )} {makeBadge(x.node)} {showOperation && ( )} ) })}

{(pageInfo?.hasNextPage || pageInfo?.hasPreviousPage) && ( setQueryVariables({ last: PAGE_SIZE, before: pageInfo?.startCursor }) } /> setQueryVariables({ first: PAGE_SIZE, after: pageInfo?.endCursor }) } /> )} )} { reexecuteQuery() setUpdateRoleVisible(false) }} user={currentUser} isPromote={isPromote} open={updateRoleVisible} onOpenChange={setUpdateRoleVisible} /> ) } function OperationView({ user, onUpdateUserActive, onUpdateUserRole }: { user: ArrayElementType onUpdateUserActive: (node: UserNode, active: boolean) => void onUpdateUserRole: (node: UserNode) => void }) { const [open, setOpen] = useState(false) const [submitting, setSubmitting] = useState(false) const onOpenChange = (open: boolean) => { if (submitting) return setOpen(open) } const { copyToClipboard, isCopied } = useCopyToClipboard({ timeout: 1000 }) const generateResetPasswordUrl = useMutation(generateResetPasswordUrlMutation) const handleGenerateResetPassworkURL: MouseEventHandler< HTMLButtonElement > = e => { e.preventDefault() if (submitting) return setSubmitting(true) generateResetPasswordUrl({ userId: user.node.id }) .then(res => { const link = res?.data?.generateResetPasswordUrl if (link) { copyToClipboard(link) setOpen(false) } else { toast.error( res?.error?.message || 'Failed to generate password reset link' ) } }) .catch(error => { toast.error(error?.message || 'Failed to generate password reset link') }) .finally(() => { setSubmitting(false) }) } useEffect(() => { if (isCopied) { toast.success('Password reset link copied to clipboard') } }, [isCopied]) return ( <> {!!user.node.active && ( onUpdateUserRole(user.node)} className="cursor-pointer" > {user.node.isAdmin ? 'Downgrade to member' : 'Upgrade to admin'} )} {!!user.node.active && ( onUpdateUserActive(user.node, false)} className="cursor-pointer" > Deactivate )} {!user.node.active && ( onUpdateUserActive(user.node, true)} className="cursor-pointer" > Activate )} setOpen(true)} className="cursor-pointer gap-1" > Reset password {user.node.isSsoUser && } Reset password By clicking {'"'}Yes{'"'}, a password reset link will be generated for{' '} {user.node.name || user.node.email} . The password won't be modified until the user follows the instructions in the link to make the change. Cancel {submitting && } Yes ) }