import { useState } from "react"; import { trpc } from "@calcom/trpc/react"; import { Badge, ConfirmationDialogContent, Dialog, DropdownActions, showToast, Table } from "@calcom/ui"; import { Edit, Trash } from "@calcom/ui/components/icon"; import { withLicenseRequired } from "../../common/components/LicenseRequired"; const { Body, Cell, ColumnTitle, Header, Row } = Table; function UsersTableBare() { const utils = trpc.useContext(); const [data] = trpc.viewer.users.list.useSuspenseQuery(); const mutation = trpc.viewer.users.delete.useMutation({ onSuccess: async () => { showToast("User has been deleted", "success"); await utils.viewer.users.list.invalidate(); }, onError: (err) => { console.error(err.message); showToast("There has been an error deleting this user.", "error"); }, onSettled: () => { setUserToDelete(null); }, }); const [userToDelete, setUserToDelete] = useState(null); return (

User Timezone Role Edit

{data.map((user) => ( {/* Using flexbox in a table will mess with the overflow, that's why I used position absolute to position the image. */}

{user.name} /{user.username}
{user.email}

{user.timeZone} {user.role.toLowerCase()}

setUserToDelete(user.id), icon: Trash, }, ]} />

))}

setUserToDelete(null)} onConfirm={() => { if (!userToDelete) return; mutation.mutate({ userId: userToDelete }); }} />

); } const DeleteUserDialog = ({ user, onConfirm, onClose, }: { user: number | null; onConfirm: () => void; onClose: () => void; }) => { return ( // eslint-disable-next-line @typescript-eslint/no-empty-function -- noop ); }; export const UsersTable = withLicenseRequired(UsersTableBare);