Track copied config ID per row instead of globally

The useCopy hook returns a single boolean, so copying one
row's configuration ID would flip every row to "Copied!".
Track the specific copied ID in state so only the clicked
row shows feedback.

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
This commit is contained in:
Bryan Frimin
2026-04-22 18:12:00 +02:00
parent 9e1111d576
commit 9afc2eaaa7

View File

@@ -14,6 +14,7 @@
import { useCopy } from "@probo/hooks"; import { useCopy } from "@probo/hooks";
import { useTranslate } from "@probo/i18n"; import { useTranslate } from "@probo/i18n";
import { useCallback, useRef, useState } from "react";
import { import {
Button, Button,
Card, Card,
@@ -80,7 +81,14 @@ export function SAMLConfigurationList(props: {
const { __ } = useTranslate(); const { __ } = useTranslate();
const confirm = useConfirm(); const confirm = useConfirm();
const [isIdCopied, copyId] = useCopy(); const [copiedId, setCopiedId] = useState<string | null>(null);
const copiedIdTimer = useRef<ReturnType<typeof setTimeout>>();
const copyId = useCallback((id: string) => {
navigator.clipboard.writeText(id);
setCopiedId(id);
clearTimeout(copiedIdTimer.current);
copiedIdTimer.current = setTimeout(() => setCopiedId(null), 2000);
}, []);
const [isCopied, copy] = useCopy(); const [isCopied, copy] = useCopy();
const { const {
@@ -168,7 +176,7 @@ export function SAMLConfigurationList(props: {
className="font-mono text-xs text-gray-600 hover:text-gray-900" className="font-mono text-xs text-gray-600 hover:text-gray-900"
title={__("Click to copy")} title={__("Click to copy")}
> >
{isIdCopied ? __("Copied!") : config.id} {copiedId === config.id ? __("Copied!") : config.id}
</button> </button>
</Td> </Td>
<Td> <Td>