langfuse

1
import { useState } from "react";
2
import { useRouter } from "next/router";
3
import {
4
  Popover,
5
  PopoverContent,
6
  PopoverTrigger,
7
} from "@/src/components/ui/popover";
8
import { Button } from "@/src/components/ui/button";
9
import { TrashIcon } from "lucide-react";
10
import { usePostHog } from "posthog-js/react";
11
import { useHasAccess } from "@/src/features/rbac/utils/checkAccess";
12
import { type Scope } from "@/src/features/rbac/constants/roleAccessRights";
13
import { api } from "@/src/utils/api";
14

15
interface DeleteButtonProps {
16
  itemId: string;
17
  projectId: string;
18
  isTableAction?: boolean;
19
  scope: Scope;
20
  invalidateFunc: () => void;
21
  type: "trace" | "dataset";
22
  redirectUrl?: string;
23
}
24

25
export function DeleteButton({
26
  itemId,
27
  projectId,
28
  isTableAction = false,
29
  scope,
30
  invalidateFunc,
31
  type,
32
  redirectUrl,
33
}: DeleteButtonProps) {
34
  const [isDeleted, setIsDeleted] = useState(false);
35
  const router = useRouter();
36
  const posthog = usePostHog();
37

38
  const hasAccess = useHasAccess({ projectId, scope: scope });
39
  const traceMutation = api.traces.deleteMany.useMutation({
40
    onSuccess: () => {
41
      setIsDeleted(true);
42
      !isTableAction && redirectUrl
43
        ? void router.push(redirectUrl)
44
        : invalidateFunc();
45
    },
46
  });
47
  const datasetMutation = api.datasets.deleteDataset.useMutation({
48
    onSuccess: () => {
49
      setIsDeleted(true);
50
      !isTableAction && redirectUrl
51
        ? void router.push(redirectUrl)
52
        : invalidateFunc();
53
    },
54
  });
55

56
  if (!hasAccess) {
57
    return null;
58
  }
59

60
  return (
61
    <Popover key={itemId}>
62
      <PopoverTrigger asChild>
63
        <Button
64
          variant={isTableAction ? "ghost" : "outline"}
65
          size={isTableAction ? "xs" : "icon"}
66
        >
67
          <TrashIcon className="h-4 w-4" />
68
        </Button>
69
      </PopoverTrigger>
70
      <PopoverContent>
71
        <h2 className="text-md mb-3 font-semibold">Please confirm</h2>
72
        <p className="mb-3 text-sm">
73
          This action cannot be undone and removes all the data associated with
74
          this {type}.
75
        </p>
76
        <div className="flex justify-end space-x-4">
77
          {type === "trace" ? (
78
            <Button
79
              type="button"
80
              variant="destructive"
81
              loading={traceMutation.isLoading || isDeleted}
82
              onClick={() => {
83
                void traceMutation.mutateAsync({
84
                  traceIds: [itemId],
85
                  projectId,
86
                });
87
                posthog.capture("trace:delete", {
88
                  source: isTableAction ? "table-single-row" : "trace",
89
                });
90
              }}
91
            >
92
              Delete trace
93
            </Button>
94
          ) : (
95
            <Button
96
              type="button"
97
              variant="destructive"
98
              loading={datasetMutation.isLoading || isDeleted}
99
              onClick={() => {
100
                void datasetMutation.mutateAsync({
101
                  projectId,
102
                  datasetId: itemId,
103
                });
104
                posthog.capture("dataset:delete", {
105
                  source: isTableAction ? "table-single-row" : "dataset",
106
                });
107
              }}
108
            >
109
              Delete dataset
110
            </Button>
111
          )}
112
        </div>
113
      </PopoverContent>
114
    </Popover>
115
  );
116
}
117