diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index 9261b86c90..41cf45f97f 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -2386,6 +2386,7 @@ "invite_link_copied": "Invite link copied", "invite_link_deleted": "Invite link deleted", "api_key_deleted": "API Key deleted", + "delete_api_key_warning": "This will permanently delete the API key. Any applications using this key will immediately lose access to your account. This action cannot be undone.", "invite_link_updated": "Invite link settings saved", "link_expires_after": "Links set to expire after...", "one_day": "1 day", diff --git a/packages/features/ee/api-keys/components/ApiKeyListItem.tsx b/packages/features/ee/api-keys/components/ApiKeyListItem.tsx index b4eae5b4d3..4fda502389 100644 --- a/packages/features/ee/api-keys/components/ApiKeyListItem.tsx +++ b/packages/features/ee/api-keys/components/ApiKeyListItem.tsx @@ -1,3 +1,5 @@ +import { useState } from "react"; + import dayjs from "@calcom/dayjs"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { RouterOutputs } from "@calcom/trpc/react"; @@ -5,6 +7,8 @@ import { trpc } from "@calcom/trpc/react"; import classNames from "@calcom/ui/classNames"; import { Badge } from "@calcom/ui/components/badge"; import { Button } from "@calcom/ui/components/button"; +import { Dialog } from "@calcom/ui/components/dialog"; +import { ConfirmationDialogContent } from "@calcom/ui/components/dialog"; import { Dropdown, DropdownItem, @@ -28,6 +32,7 @@ const ApiKeyListItem = ({ }) => { const { t } = useLocale(); const utils = trpc.useUtils(); + const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const isExpired = apiKey?.expiresAt ? apiKey.expiresAt < new Date() : null; const neverExpires = apiKey?.expiresAt === null; @@ -84,11 +89,7 @@ const ApiKeyListItem = ({ type="button" color="destructive" disabled={deleteApiKey.isPending} - onClick={() => - deleteApiKey.mutate({ - id: apiKey.id, - }) - } + onClick={() => setDeleteDialogOpen(true)} StartIcon="trash"> {t("delete") as string} @@ -96,6 +97,25 @@ const ApiKeyListItem = ({ + + + { + deleteApiKey.mutate({ + id: apiKey.id, + }); + setDeleteDialogOpen(false); + }}> +
+

{t("delete_api_key_warning")}

+
+
+
); };