Files
kandev/apps/web/components/settings/plugins/uninstall-plugin-dialog.tsx
T
2026-09-12 14:58:49 +02:00

91 lines
2.8 KiB
TypeScript

"use client";
import type { RefObject } from "react";
import { Trans, useTranslation } from "react-i18next";
import { ActionConfirmPopover } from "@/components/confirmation/action-confirm-popover";
import { InlineConfirmActions } from "@/components/confirmation/inline-confirm-actions";
import { MobileActionConfirmation } from "@/components/confirmation/mobile-action-confirmation";
import type { PluginRecord } from "@/lib/types/plugins";
type UninstallPluginConfirmationProps = {
target: PluginRecord;
open: boolean;
isFinePointer: boolean;
anchorRef: RefObject<HTMLElement | null>;
onOpenChange: (open: boolean) => void;
onCancel: () => void;
onConfirm: () => void | Promise<void>;
};
/**
* Keeps plugin uninstall confirmation at its initiating control. The action
* hook still owns the target mutation, pending state, and failure feedback.
*/
export function PluginUninstallConfirmation({
target,
open,
isFinePointer,
anchorRef,
onOpenChange,
onCancel,
onConfirm,
}: UninstallPluginConfirmationProps) {
const { t } = useTranslation();
const description = (
<Trans i18nKey="plugins:uninstallConfirm" values={{ name: target.display_name }}>
This will permanently remove{" "}
<span className="font-medium text-foreground">{target.display_name}</span> and revoke its API
key. This action cannot be undone.
</Trans>
);
const confirmAriaLabel = t("plugins:confirmUninstall");
const fallback = !isFinePointer ? (
<InlineConfirmActions
density="touch"
testId="plugin-uninstall-inline-confirmation"
ariaLabel={t("plugins:uninstallPlugin")}
description={description}
cancelLabel={t("plugins:cancel")}
confirmLabel={confirmAriaLabel}
confirmAriaLabel={confirmAriaLabel}
confirmTestId="plugin-uninstall-confirm"
onCancel={onCancel}
onClose={() => onOpenChange(false)}
onConfirm={onConfirm}
/>
) : (
<ActionConfirmPopover
open={open}
anchorRef={anchorRef}
title={t("plugins:uninstallPlugin")}
description={description}
cancelLabel={t("plugins:cancel")}
confirmLabel={confirmAriaLabel}
confirmAriaLabel={confirmAriaLabel}
confirmTestId="plugin-uninstall-confirm"
testId="plugin-uninstall-confirm-popover"
onOpenChange={onOpenChange}
onCancel={onCancel}
onConfirm={onConfirm}
/>
);
return (
<MobileActionConfirmation
open={open}
targetKey={target.id}
title={t("plugins:uninstallPlugin")}
description={description}
cancelLabel={t("plugins:cancel")}
confirmLabel={confirmAriaLabel}
confirmAriaLabel={confirmAriaLabel}
confirmTestId="plugin-uninstall-confirm"
onOpenChange={onOpenChange}
onConfirm={onConfirm}
focusReturnRef={anchorRef}
fallback={fallback}
/>
);
}