feat: add copy button for license key in admin panel (#3123)

## Description

Adds a copy button next to the show/hide toggle for the license key in
the admin panel license card (Admin Panel → Stats).

- Ghost button matching the existing eye-toggle styling (`h-6 w-6`,
`CopyIcon`)
- Uses the standard `useCopyToClipboard` + toast pattern (same as
`template-direct-link-badge.tsx`)
- Copies the key regardless of masked/visible state

New translation strings will be picked up by the next `chore: extract
translations` run.

## Before / After

![Before and after: copy button added next to the license key show/hide
toggle](https://artifacts.duncan.land/documenso-pr3123-license-copy)

> Screenshots taken against a locally mocked ACTIVE license (the mock is
not part of this PR).

## Testing

- `npx tsc --noEmit -p apps/remix` clean
- `biome check` clean
- Smoke-tested in browser: clicking the button fires the "Copied to
clipboard" toast (visible in the screenshot above)
This commit is contained in:
Ephraim Duncan
2026-07-27 02:18:03 +00:00
committed by GitHub
parent e4897fa686
commit a457e1ef7d
@@ -1,3 +1,4 @@
import { useCopyToClipboard } from '@documenso/lib/client-only/hooks/use-copy-to-clipboard';
import type { TCachedLicense } from '@documenso/lib/types/license';
import { SUBSCRIPTION_CLAIM_FEATURE_FLAGS } from '@documenso/lib/types/subscription';
import { trpc } from '@documenso/trpc/react';
@@ -9,6 +10,7 @@ import { Trans, useLingui } from '@lingui/react/macro';
import {
ArrowRightIcon,
CheckCircle2Icon,
CopyIcon,
EyeIcon,
EyeOffIcon,
KeyRoundIcon,
@@ -29,6 +31,8 @@ type AdminLicenseCardProps = {
export const AdminLicenseCard = ({ licenseData }: AdminLicenseCardProps) => {
const { t, i18n } = useLingui();
const { toast } = useToast();
const [, copy] = useCopyToClipboard();
const [isLicenseKeyVisible, setIsLicenseKeyVisible] = useState(false);
const { license } = licenseData || {};
@@ -147,6 +151,24 @@ export const AdminLicenseCard = ({ licenseData }: AdminLicenseCardProps) => {
>
{isLicenseKeyVisible ? <EyeOffIcon className="h-3.5 w-3.5" /> : <EyeIcon className="h-3.5 w-3.5" />}
</Button>
<Button
type="button"
variant="ghost"
size="sm"
className="h-6 w-6 p-0 text-muted-foreground"
aria-label={t`Copy license key`}
onClick={async () =>
copy(license.licenseKey).then(() => {
toast({
title: t`Copied to clipboard`,
description: t`The license key has been copied to your clipboard`,
});
})
}
>
<CopyIcon className="h-3.5 w-3.5" />
</Button>
</div>
</div>