1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { ActionButton } from "@/components/ui/action-button";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { toast } from "@/components/ui/use-toast";
import { api } from "@/lib/trpc";
import { Trash } from "lucide-react";
export default function DeleteApiKey({
name,
id,
}: {
name: string;
id: string;
}) {
const [isDialogOpen, setDialogOpen] = useState(false);
const router = useRouter();
const mutator = api.apiKeys.revoke.useMutation({
onSuccess: () => {
toast({
description: "Key was successfully deleted",
});
setDialogOpen(false);
router.refresh();
},
});
return (
<Dialog open={isDialogOpen} onOpenChange={setDialogOpen}>
<DialogTrigger asChild>
<Button variant="destructive">
<Trash className="size-5" />
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Delete API Key</DialogTitle>
<DialogDescription>
Are you sure you want to delete the API key "{name}"? Any
service using this API key will lose access.
</DialogDescription>
</DialogHeader>
<DialogFooter className="sm:justify-end">
<DialogClose asChild>
<Button type="button" variant="secondary">
Close
</Button>
</DialogClose>
<ActionButton
type="button"
variant="destructive"
loading={mutator.isPending}
onClick={() => mutator.mutate({ id })}
>
Delete
</ActionButton>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
|
